Datasheet HTML CSS JS

Created by @Manz ( https://manz.
dev/ )
HTML LENGUAJE DE MARCADO
lenguajehtml.com
#DIADELAPROGRAMACION
S HTML Syntax Tag structure C Comment Syntax Dev annotations S Social metadata For social networks
HTML TAG/ATTRIBUTE SYNTAX HTML COMMENT SYNTAX FACEBOOK OPEN GRAPH
<tag attribute="value"> content </tag>  <meta> metadata tag for open graph
property metadata type open graph
D Document tags HTML main structure H Head tags Header & document metadata content metadata value open graph
MAIN TAGS RELATIONS REQUIRED METADATA PROPERTIES
<!DOCTYPE html> HTML5 document <link> document relation og:title title of your object
<html> document content root tag href link to related document og:type type of your object
<head> metadata header related docs hreflang code doc language en, es... music video article book
<body> page content visible content type mime hint type for browser profile website
title set title to stylesheet set og:image image url for preview
G Global Attributes for all elements sizes hint size for favicon 64x64, 96x96 og:url canonical & absolute url
DOM / STYLE ATTRIBUTES rel relation type with other document OPTIONAL METADATA PROPERTIES
id element identifier unique per page BASIC RELATION
og:audio complementary audio url
class element class multiple per page alternate link to alternate version og:description 1-2 sentence descr.
slot element slot reference to <slot> author link to author URL og:determiner word auto, the, a, an, ...
style inline CSS styles css properties help link to help URL og:locale language default: en_US
GLOBAL ATTRIBUTES icon link to favicon URL (tab icon) og:locale:alternative others lang array
accesskey shortcut key to focus license fetch module map og:site_name general site name
contenteditable allow edit element pingback link to pingback server og:video complementary video url
dir ltr rtl auto text direction search link to search page url
TWITTER CARDS
draggable auto enable drag and drop stylesheet imports a css style sheet
<meta> metadata tag for twitter cards
hidden hide element not relevant URL STRUCTURE RELATION
name metadata type twitter cards
is custom-elem custom built-in elem canonical link to preferred URL content metadata value twitter cards
lang code set content lang en, es, fr... prev prev part URL of series doc BASIC METADATA PROPERTIES
nonce hash whitelist script/style [CSP] next next part URL of series doc twitter:title title of your object
spellcheck disable grammar check RESOURCE HINTS twitter:card type of your object
tabindex num set element order
dns-prefetch resolve dns domain summary summary_large_image
title set tooltip text mouse hover
preconnect pre connect to domain app player
translate yes no disable translation
prefetch fetch/cache link for future OPTIONAL METADATA PROPERTIES
data-* custom metadata on element
preload fetch/cache link for now twitter:site account site name
HINT TO BROWSER
modulepreload fetch module map twitter:creator account name @manz
enterkeyhint enter done go search prerender background render page twitter:description description
next previous send virtual keyb label as script font image audio video fetch twitter:image absolute image url
inputmode none text tel url email document embed object style track APP METADATA PROPERTIES
numeric decimal search worker twitter:app:country country code
MICRODATA ATTRIBUTES
DOCUMENT METADATA twitter:app:name: **** name of app
itemid set global urn unique identifier
<meta> document metadata twitter:app:id: **** identifier of app
itemscope new metadata item
charset enc encoding utf-8, iso-8859-1... twitter:app:url: **** url of app store
itemtype set microdata genre url
name name of metadata iphone ipad googleplay id for ****
itemref id list set reference to "id"
application-name short webapp name PLAYER METADATA PROPERTIES
itemprop token set property & value
author name of the page's author twitter:player https url to iframe player
description seo page description
S Inline Styling CSS inline GOOGLE SEO RECOMMENDATIONS
generator software used to build web
INLINE STYLES <title> first - second | brand 50-60 chars
keywords comma-separated tags
<style> embed css style in a document <meta> metadata google-supported
referrer default page referrer policy
title set title to stylesheet set name metadata name
theme-color primary theme css color
type mime hint type for browser description text snippet 50-160 chars
viewport hint to initial size viewport
ONLY FOR <LINK>, PICTURE <SOURCE> & <STYLE> robots googlebot set bots behaviour
http-equiv pragma directive (legacy) all noindex nofollow none
media apply to specific devices content-type legacy alt. to charset noarchive nosnippet noodp
all all devices computers, mobiles... default-style default stylesheet set notranslate noimageindex
print printables devices refresh html redirect 10; URL=file.html unavailable_after: date
screen all devices - (print + speech) x-ua-compatible better compat IE=edge google disable google features
speech devices that read a page content-security-policy enforce csp notranslate nositelinkssearchbox
content metadata value
CHEATSHEET LEGEND rating adult exclude secure search
<title> seo document title
html tag html tag w/o close tag obsolete viewport optimized-mobile page
<base> set a document base url content="width=device-width, initial-scale=1.0"
attribute attribute w/o value
href link to base url to use
value default value values set
value for content value part
target context place to open link
Manz.dev
WEB DEVELOPER / STREAMER
Created by @Manz ( https://manz.dev/ )
lenguajehtml.com
F Forms Forms related tags S Select data tags Interactive combo I Interactive tags Other elements
MAIN ELEMENTS SELECT ELEMENTS OTHER FORM ELEMENTS
<form> form elements collection <select> form elements collection <output> result of calculation
name form name document.forms api name form name document.forms api name element name forms.elements api
method GET POST dialog send method form associate input with a form form associate input with a form
action url to backend form submission size size of element in characters for associate result to other element
accept-charset enc force encoding utf-8 autocomplete on off autofill for input <progress> show a bar progress
autocomplete on off autofill for all form autofocus focus input when loaded value current value of bar progress
novalidate bypass form validation disabled avoid press button max max value of bar progress
target context place to put response required required field default: optional <meter> show a known range meter
enctype application/x-www-form-urlencoded multiple allow select multiple values value current value of meter
multipart/form-data text/plain encoding type <datalist> predefined and open data list low limit of low range
<label> associate element with caption SELECT CHILDREN ELEMENTS high limit of high range
for reference to id of related element <option> item from <select> or <datalist> min lower bound of range
GROUP FORMS label user-visible text instead content max upper bound of range
<fieldset> group of form elements value item value for form submit optimum optimum value in gauge
name element name forms.elements api selected options selected by default OTHER INTERACTIVE ELEMENTS
form associate fieldset with a form disabled avoid select this item option <details> disclosure widget html accordion
disabled avoid select this group items <optgroup> group of <option> open keep accordion opened
<legend> caption text for fieldset label user-visible group text <summary> caption or title for <details>
disabled avoid select this items <dialog> window box container dialog box
I Input elements User input types
open keep dialog opened
USER INPUT DATA
B Generic Button HTML Button
<input> <textarea> specific & large text HTML GENERIC <BUTTON> V Validations HTML validations
name element name form.elements api USER INPUT DATA
<button> generic button container
autocomplete on off autofill for input TEXT VALIDATIONS <INPUT> & <TEXTAREA>
name element name form.elements api
autofocus focus input when loaded minlength maxlength min/max length
type submit reset button button type
dirname submit element directionality GENERAL VALIDATIONS <INPUT> & <TEXTAREA>
value button value for form submission
form associate input with a form
form associate input with a form required required field default: optional
placeholder user visual hint autofocus focus button when loaded disabled avoid edit field not send
ONLY <INPUT> ELEMENT disabled avoid press button readonly avoid edit field send
<input> specific text input short text NUMBER VALIDATIONS ONLY <INPUT>
type text hidden search tel url email D Deprecated tags Obsolete elements min max min/max value number
number range color file password step granularity step between values
DEPRECATED TAG RECOMMENDED TAG
datetime-local date time week month POWERFUL VALIDATIONS ONLY <INPUT>
<applet> java widgets <embed> <object>
checkbox radio submit image reset button pattern REGEXP pattern for test validation
<acronym> abbreviation <abbr>
value current value of input element
<basefont> main font use CSS instead
size size of element in characters A ARIA Attributes Accesible elements
<big> bigger text use CSS font-size
list associate with id of <datalist> ACCESIBLE RICH INTERNET APPLICATIONS
<bgsound> background sound <audio>
accept hint for expected file in upload
<blink> flicker text use CSS animation role specify accessible role for element
checked enable in radio or checkbox complementary list listitem main navigation
<center> center text use CSS text-align
multiple allow multiple values region tab alert application article banner
<dir> directory list use lists instead <ul>
ONLY IMAGE <INPUT> ELEMENT
<font> set font features use CSS instead button cell checkbox contentinfo dialog
src url or name of image button document feed figure form grid gridcell
<frame> <frameset> frames <iframe>
alt alternative text to image heading img listbox row rowgroup search
<marquee> move text use CSS animation
width height image width/height size switch table tabpanel textbox timer
<multicol> col layout use CSS columns
ONLY <TEXTAREA> ELEMENT
<noframes> frames fallback no supported aria-checked true false mixed
<textarea> multiline text input large text <isindex> search in page <input> aria-selected set current state
rows cols number of lines and columns <keygen> keypair gen use webcrypto API LABELS
wrap wrap text <listing> preformatted text <pre> <code> aria-label specify a string as label
ALTER FORM SUBMISSION ONLY SUBMIT <INPUT> & <BUTTON> <menuitem> context menu no supported aria-labelledby specify id as label elem
formaction formtarget formnovalidate <nextid> auto id generated no supported RELATIONSHIPS
formenctype formmethod <nobr> no break use CSS instead aria-owns set id element as child
attributes to alter main form submission <noembed> no embed fallback <object> aria-activedescendant set id as active
<plaintext> plain text fragment <pre> aria-describedby set id as description
R Ruby tags Ruby Markup tags <rb> <rtc> ruby base & container <ruby> aria-posinset specify position in set
RUBY ELEMENTS
<spacer> whitespace use CSS instead aria-setsize specify size of set
<ruby> ruby annotation E.Asian-like chars <strike> strikethrough text <s> <del>
<rp> ruby fallback parenthesis wrapper <tt> teletype text use CSS instead
<rt> ruby text pronunciation, translation... <xmp> code block use < <pre> <code> Manz.dev
HTML
LENGUAJE DE MARCADO
lenguajehtml.com
G Groups tags Block elements T Text tags Inline elements I Image tags Picture content
GENERAL GROUP TAGS TEXT SEMANTIC TAGS IMAGES
<div> generic division or layer block <em> emphatized text replace for <i> JPG PNG SVG WEBP JPGXR JPG2000 GIF APNG
<p> text paragraph <strong> important text replace for <b> <img> image simple or legacy fallback
<hr> thematic break <mark> highlight text replace for <u> src link to url image source required
<pre> preformatted text <i> alternate voice/mood legacy tag alt alternative text if no image required
<main> dominant contents <b> span w/o extra purposes legacy tag width height horizontal & vertical size
<blockquote> section with quote <u> non-textual data span legacy tag loading set lazy loading strategy
cite link to url with quotation source <sub> <sup> subscript and superscript autobrowser decides
LISTS & TERMS <small> side comments small print lazycandidate for lazy loading
<ul> <ol> unorderer & orderer list <var> math or programming variable eager load right away
start first value of list <samp> sample from computing system usemap name of image map to use
reversed backwards list <kbd> user input (keyboard shortcut) ismap image is part of server-side map
type 1 a A i I kind of marker <dfn> defining instance of a term decoding sync async auto hint to decode
<li> item from <ul> or <ol> list title full term optional <map> image map used w/ <a> & <area>
value ordinal value of item <abbr> abbreviation or acronym name imagemap used in usemap
<dl> description list container title expansion of abbreviation optional NEXT-GEN IMAGES
<dt> <dd> description term name & value <cite> title of a work book, film, song... <picture> multiple image container
FIGURE & CAPTIONS
<q> quoted group from another source <source> new alternative source image
cite link to source url optional
<figure> figure or concept src link to url image source simple mode
<br> line break visual enter
<figcaption> caption or legend for figure type MIME type optional
<wbr> line break opportunity long words media media query of resource media
SEMANTIC TAGS
<s> no longer accurate/relevant strike text PICTURE <SOURCE> & <IMG> ATTRIBUTES
<article> entity content post, comment... <data> associate machine-data to text
<section> thematic group of content srcset image list candidates comma-sep
value machine-readable value
<nav> section with navigation links width a1.jpg 300w, a2.jpg 600w, ...
<time> associate machine-date to date
<aside> secondary content sidebar, menu density b1.jpg 1x, b2.jpg 2x, ...
datetime machine-readable date-time
<h1> <h2> ... <h6> heading section sizes final rendered width list 640w
<code> fragment of computer code
<header> introductory header group
M Multimedia tags
<footer> section footer group H Hyperlinks Link to another resource
VIDEO OR AUDIO CONTAINER ELEMENTS
<address> contact information group HYPERLINKS & AREA MAP
MP4 WEBM HEVC AV1 OGV ← VIDEO
<a> <area> hyperlink / image map area
MP3 AAC OGG OPUS FLAC WAV ← AUDIO
T Tables tags Tabular data href link to url or filename
TABLE ELEMENTS hreflang code doc language en, es... <video> <audio> media container
download download name empty valid src link to url video audio source
<table> table container
rel alternate author bookmark external license preload hints how much buffering needs
<caption> title of table optional
<thead> table header includes headers prev next search tag opener help noopener auto browser decides
<tbody> table body includes body data noreferrer nofollow sponsored ugc metada fetch metadata only
target context place to open link none save bandwidth and no download
<tfoot> table footer includes summary
ping url list space-separated to ping autoplay autoplay only if user interact
COLUMNS
referrerpolicy mode referer behaviour loop restart when finished
<col> <colgroup> col & group of columns
ATTRIBUTES ONLY FOR <AREA> ELEMENT muted silence media by default
span number of columns to span
shape rect circle poly controls show play, pause... controls
ITEMS
coords coords list for shape ONLY FOR <VIDEO> ELEMENT
<tr> table row horizontal container
alt replacement text when no images poster cover image prior to playback
<th> <td> table header & table cell data
width height horizontal & vertical size
colspan number of columns to span
E Edit tags Edit elements playsinline browser try play video inline
rowspan number of rows to span
TEXT SEMANTIC TAGS VIDEO OR AUDIO CHILDREN ELEMENT
headers one or more id of <th> elements
ONLY FOR <TH> ELEMENT <ins> <del> addition or removal from doc <source> new alternative source media
scope auto row col rowgroup colgroup cite link to source quotation optional src link to url media source
abbr short abbreviated description datetime date/time of change optional type MIME type video/mp4; codecs='...'
<track> external subtitles or tracks
T Target destination S Security & Privacy Edit elements src link to url subtitle resource
KEYWORDS & TARGET DESTINATION POLICIES <IMG>, <VIDEO>, <AUDIO>, <LINK> or <SCRIPT> srclang language of the text track
target browser destination crossorigin CORS support label user-visible name of the text track
_self current place same page anonymous use-credentials kind subtitles captions descriptions
_blank new place new tab page referrerpolicy set how referer works chapters metadata
_parent parent place else _self no-referrer no-referrer-when-downgrade default set default enabled track
_top root parent place else _self same-origin origin strict-origin unsafe-url
name custom place iframe or other origin-when-cross-origin strict-origin-when-cross-origin
Manz.dev
lenguajehtml.com
E Embedded tags External content S SVG tags Scalar Vectorial Graphics S Scripting tags Javascript elements
EXTERNAL CONTENT (IFRAME) MAIN TAGS SCRIPTING ELEMENTS
<iframe> embeded content <svg> svg container standalone svg <script> include dynamic script
src link to url resource website, file, ... viewBox minx miny width height src link to script.js instead inline script
srcdoc document content html syntax width height viewport size type associate fieldset with a form
name name context for target attribute preserveAspectRatio align option javascript file default .js
text/javascript
loading auto lazy eager lazy load iframe align none x***Y*** Min Mid Max JSON data block file .json
application/json
allowfullscreen allow iframe fullscreen option meet slice module javascript module module .mjs
allowpaymentrequest allow payments <g> related group container nomodule fallback for old browsers
width height horizontal & vertical sizes SVG METADATA defer defer script execution
<IFRAME> SECURITY, PRIVACY & POLICY ATTRIBUTES
<title> short text title alternative async exec script when available
sandbox allow-forms allow-modals
<desc> detailed textual information SECURITY & PRIVACY
allow-orientation-lock allow-pointer-lock
<metadata> metadata elems. container referrerpolicy mode referer behaviour
allow-popups-to-escape-sandbox allow-scripts
CONTENT FOR REUSE crossorigin mode CORS support
allow-same-origin allow-presentation
<defs> referenced elements container integrity verify integrity hash of src file
allow-top-navigation-by-user-activation
SCRIPT DOWNLOAD & PARSE MODES
allow-top-navigation allow-popups
<symbol> set reuse template no render
HTML PARSE FETCH EXEC
allow feature allow access to feature <use> reference another element reuse
SCRIPTS
ambient-light-sensor autoplay accelerometer
href a url link to be cloned for rendering NORMAL
camera display-capture document-domain
<switch> reference another element
encrypted-media fullscreen geolocation
<***> direct child of <switch>
DEFER
gyroscope magnetometer microphone midi
systemLanguage code
payment picture-in-picture speaker sync-xhr BASIC SHAPES
ASYNC
usb wake-lock webauthn vr <rect> define a rectangle
referrerpolicy mode referer behaviour x y horizontal & vertical position MODULES
LEGACY EMBED/OBJECT TAGS width height horizontal & vertical sizes NORMAL
<embed> external non-html content rx ry horizontal & vertical radius
src link to url resource <circle> define a circle ASYNC
type type of embedded resource cx cy horizontal & vertical center coord
width height horizontal & vertical sizes r radius of the circle
<object> external resource multipurpose <ellipse> define a ellipse S Other scripting tags Javascript elements
data link to url resource rx ry horizontal & vertical radius JAVASCRIPT-RELATED TAGS
type type of embedded resource cx cy horizontal & vertical center coord <noscript> show if no scripting enabled
name name context for target attribute <line> define a line segment <template> inert html fragments to clone
usemap name of image map to use x1 y1 start point (x,y) of line segment <slot> create separate DOM trees
form associates element with form id x2 y2 end point (x,y) of line segment name name of shadow tree slot
width height horizontal & vertical sizes pathLength total length of the path <canvas> rendering graphs, art, etc...
<param> external resource multipurpose <polyline> <polygon> line / closed shape width height horizontal & vertical size
name value name & value of parameter points set of coords space-separated <custom-elem> user custom element tag
EXPERIMENTAL TAGS
pathLength total length of the path
TEXT & IMAGE ELEMENTS
S SVG Attrs Style SVG attributes
<portal> guest embedded content ~iframe STYLE SVG ATTRIBUTES
src link to url resource website, file, ... <text> <tspan> text layer & text container FILL SHAPE
referrerpolicy mode referer behaviour x y start position of text
fill black color fills shape with a color
dx dy relative position of descendant
S SVG paths Scalar Vectorial Graphics fill-rule nonzero evenodd algorithm inside
lengthAdjust spacing spacingAndGlyphs
POWERFUL PATHS fill-opacity 1 opacity alpha channel
rotate number rotate degrees per glyph
LINE (STROKE)
<path> define a outline of a shape textLength number length per glyph
d command/coords space-separated <textPath> put text on path stroke none color set color line
pathLength total length of the path path equivalent of d attribute <path> stroke-width 1 width set width line
PATH COMMANDS GUIDE href url reference to <path> stroke-opacity 1 opacity alpha channel
M m Move to path begins · M10,30 startOffset length offset from start path stroke-linecap butt round square limit type
Z z Close path path ends · Z method align stretch how render glyph stroke-linejoin miter miter-clip round bevel arcs
L l Line to draw line · L90,90 spacing exact auto space between glyph stroke-miterlimit 4 number limit on ratio
H h Horiz line to horizontal line · H40 side left right side of the path to render stroke-dasharray none number array pattern
V v Vert line to vertical line · V20 lengthAdjust spacing spacingAndGlyphs stroke-dashoffset 0 number array offset
C c Cubic Bézier C30,90 25,10 50,10 textLength number length per glyph OTHERS (CSS ATTRIBUTES)
S s Smooth C. B. S70,90 90,90 <image> set reference to image transform css transform apply transform
Q q Quadratic Bézier Q90,60 50,90 href a url link to image to rendering class id style html attributes inherit
T t Smooth Q. B. T30,0 30,0 30,0 30,0 preserveAspectRatio align option
A a Elliptical Arc A20,20 0,0,1 50,30 crossorigin CORS support Manz.dev
CSS
LENGUAJE DE ESTILOS
lenguajecss.com
C CSS Syntax C CSS Colors

COLOR EXAMPLE
GENERAL SYNTAX COLOR PROPERTIES
tag [attributes] #id .class :pseudoclass ::pseudoelement { color: color RGB 237 + 63 + 0 = RGB(237, 63, 0)
HSL 11 + 255 + 119 = HSL(11, 255, 119)
selector : value ; opacity: 1 alpha
} COMMENTS (ANNOTATIONS)
COLOR MODELS
/* comment */ KEYWORDS
S CSS Selectors EXAMPLE /* IE sucks */
SELECTORS & COMBINATORS
colorkey transparent currentColor
NUMERIC FORMAT
# element with id="unique" #unique EXAMPLES
. elements with class="c1" .c1 RGB( red , green , blue ) RGB(65, 106, 225)
* all elements inside of div (universal) div * # red_hex green_hex blue_hex #416AE1 short form: #46E
inner div elements inside of div (descendant) div div HSL( hue , saturation , lightness ) HSL(159, 185, 145)
> direct childs of div (child) div > div WITH ALPHA CHANNEL EXAMPLES
+ adjacents elements (adjacent sibling) div + div RGBA( red , green , blue , alpha ) RGBA(65, 106, 225, 0.5)
~ siblings elements at same level (general sibling) div ~ div HSLA( hue , saturation , lightness , alpha ) HSLA(159, 185, 145, 1)
ATTRIBUTES IGNORE CASE SENSITIVE [attr="..." i] COLOR COMPONENTS
[attr] elements with attr attribute present red green blue numeric value between [0 ... 255]
[attr="val"] elements with attr= attribute with value val "val" red_hex green_hex blue_hex hexadecimal value [00 ... FF]
[attr~="val"] elements with attr~= that contains val "abc val xyz" hue numeric value (degrees) between [0 ... 360deg]
[attr|="es"] elements with attr|= that contains es-* "en-US es-ES" saturation lightness percentage values [0%...100%]
[attr*="val"] elements with attr*= that includes val "equivalent-is-" alpha number value between [0.0 ... 1.0]
[attr^="val"] elements with attr^= that begins with val "value-is-..."
[attr$="val"] elements with attr$= that ends with val "in-interval" V CSS Values & Units IMPORTANT
PSEUDOCLASSES RESETTING ALL PROPERTIES property: value !important

all: initial inherit unset EXAMPLE color:red!important;
:link links that have not yet been visited
LINKS
:visited links that has been visited COMMON VALUES

MATHEMATICAL EXPRESSIONS
:hover user move mouse/pointer over element initial property's initial value
USER ACTION
calc( value1 op value2 ... )

:active element is being activated by user inherit computed value on parent EXAMPLE calc(200px + 10%)
:focus element has the focus (foreground) unset initial or inherit (depending)
:enabled :disabled on/off input state FONT-RELATIVE SIZES VIEWPORT SIZES
USER INTERFACE
:checked elements toggled "on" by user em computed value on current vw viewport width %
:indeterminate input on indeterminate state ex x-height of lowercase "x" vh viewport height %
:read-only :read-write readonly input or modifiable ch advance measure of "0" glyph vmin smaller (vw or vh)
:placeholder-shown inputs that shows placeholder at now rem computed value on root elem vmax larger (vw or vh)
:default default elements for form (input, option, ...) ABSOLUTE SIZES ANGLES DURATIONS
:valid :invalid userdata pass/not pass check validation px pixels deg degrees [0..360] s seconds
:in-range :out-of-range userdata in range/out of range cm centimeters grad gradians [0..400] ms millisecs
:required :optional elements required/optional for submit mm millimeters rad radians [0..6.28] PERCENTAGES
:first-child first child of group of elements ~ :nth-child(1) Q quarter-mm rad turns [0.0..1.0] value %
STRUCTURAL
CHILD ELEMENTS
:last-child last child of group of elements ~ :nth-last-child(1) in inches CUSTOM PROPERTIES (CSS VARIABLES) EXAMPLE 75%
:nth-child(n) nth child of group of elements odd

n even pc picas DECLARING USING
th
:nth-last-child(n) last n child of group of elements expr pt points -- varname : value ; var( -- varname , fallback ... )
EXAMPLE --size: 100px; EXAMPLE calc(var(--size, 50px) * 2);
:only-child unique child ~ :first-child:last-child
:first-of-type first child of same type M CSS Media Features
CHILD OF SAME TYPE
:last-of-type last child of same type VIEWPORT SIZE DEVICE SIZE
:nth-of-type(n) nth child of same type MIN MAX width size MIN MAX device-width size
:nth-last-of-type(n) last nthchild (same type) MIN MAX height size MIN MAX device-height size
:only-of-type unique child (same type)
legend ASPECT RATIO
:root root element of the document
OTHERS
optional keyword MIN MAX aspect-ratio ratio MIN MAX device-aspect-ratio ratio
:empty element without contents
:not(x) not match by x selector keyword COLORS
OTHERS
:target is the target of anchor URL wide unsupport MIN MAX color number MIN MAX color-index number
:lang(x) elements in x language shorthand value OTHERS
EXAMPLES
PSEUDOELEMENTS userdata value MIN MAX monochrome number device-min-width: 640px
::first-line first line of text element detailed value MIN MAX resolution dpi/dpcm device-aspect-ratio: 16/9
::first-letter first letter of text element default value orientation portrait landscape max-color-index:256
pseudoclass min-resolution:300dpi
scan progressive interlace min-monochrome:2
Manz.dev pseudoelement
grid number grid:1

CSS LENGUAJE DE ESTILOS
lenguajecss.com
GENERIC FONT
T CSS Text L3
serif sans-serif cursive fantasy monospace
F Fonts TRANSFORMING TEXT
FONTS (TYPOGRAPHY)
EXAMPLE font-family: Verdana, Arial, sans-serif;

text-transform: none capitalize uppercase lowercase full-width
font-family: font1 , font2 , font3 ..., genericfont WHITE SPACES
font-size: size % ,
white-space: normal pre nowrap pre-wrap pre-line
smaller larger tab-size: 8 number size
REL
xx-small x-small small medium large x-large xx-large

ABS
LINE BREAKING & WORD BOUNDARIES

font-size-adjust: none number line-break: auto loose normal strict
font-style: normal italic oblique word-break: normal keep-all break-all
font-synthesis: none weight style BREAKING WORDS
font-variant: none small-caps hyphens: none manual auto
font-weight: normal bold word-wrap: normal break-word
lighter bolder
REL
overflow-wrap: normal break-word

100 200 300 400 500 600 700 800 900
ABS
ALIGNMENT & JUSTIFICATION

font: style variant weight stretch size/ line-height family text-align: left right center justify start end match-parent
caption icon menu message-box small-caption status-bar
text-align-last: auto start end left right center justify
https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400 text-justify: auto none inter-word distribute
S Speech Media SPACING
VOLUME/SPEAK word-spacing: normal size
volume: number % silent x-soft soft medium loud x-loud letter-spacing: normal size
speak: normal none spell-out EDGE EFFECTS
PAUSE CUE
text-indent: size hanging each-line
pause-before: 0 time % cue-before: none url( snd.mp3 )
URI
hanging-punctuation: none first last force-end allow-end

pause-after: 0 time % cue-after: none url( snd.mp3 )
URI
T CSS Text Decoration

pause: before after cue: before after
LEVEL 2 (LEGACY)
MIXING/SPATIAL
play-during: auto none url( snd.mp3 ) mix repeat text-decoration: none underline overline line-through
URI
LEVEL 3
azimuth: angle center left-side far-left left center-left
LFT
right-side far-right right center-right text-decoration-line: none underline overline line-through blink
RGT
behind leftwards rightwards text-decoration-color: currentColor color

elevation: angle below level above lower higher text-decoration-style: solid double dotted dashed wavy
ABS
REL
VOICE CHARACTERISTICS
text-decoration-skip: none objects spaces ink edges
box-decoration
speech-rate: number x-slow slow medium fast x-fast
ABS
slower faster text-decoration: none line style color

REL
STATUS
voice-family: voice1 , voice2 , voice3 ..., genericvoice text-underline-position: auto under left right
EMPHASIS MARKS
filled open
pitch: frequency x-low low medium high x-high EXAMPLE open circle;
pitch-range: 50 number text-emphasis-style: none string
GENERIC VOICE
richness: 50 number status dot circle double-circle triangle sesame
male female child
stress: 50 number text-emphasis-color: currentColor color
EXAMPLE voice-family: Romeo, male;
SPEECH text-emphasis-position: over under left right
speak-punctuation: none code text-emphasis: style color
speak-numeral: continuous digits TEXT SHADOW
speak-header: once always text-shadow: none pos-x pos-y blur color
@ CSS Rules
serif font monospaced font
FONT LOADING MEDIA QUERIES (RESPONSIVE DESIGN)
@font-face { sans serif font fantasy font

@media all screen print and (...) {
font-family: font ; property: value; LINE HEIGHT CALCULATIONS (LEGACY)
src: url( file.woff ) format("woff") , }
Media features
line-height: number % size normal
url( file.ttf ) format("truetype") ; EXAMPLE @media screen and (max-width: 640px) { ... }vertical-align: size % baseline middle sub super
unicode-range: U+000-27FF ; CSS IMPORT RULES text-top text-bottom top bottom
}
@import "index.css";
FONT FORMATS CSS CONDITIONAL
@import url("index.css");
embedded-opentype truetype opentype svg woff woff2 @supports not ( feature ) or and ... {
@import url("print.css") print;
EXAMPLE url(file.ttf) format("truetype");
property: value;
}
Manz.dev
EXAMPLE @supports not ( display: flexbox ) { .nav { display:block } }
lenguajecss.com
B CSS Box Model B CSS Borders SPECIFIC SHORTHANDS

DIMENSIONS BORDERS
border-top-*

width: auto size % height: auto size % border-width: size thin medium thick border-right-*
min-width: 0 size % min-height: 0 size % border-style: none border-style hidden border-bottom-*
border-left-*
max-width: none size % max-height: none size % border-color: currentColor color
MARGINS/PADDINGS SIDE BORDER SHORTHAND BORDER STYLES
SPECIFIC MARGINS SPECIFIC PADDINGS
border-top: width style color solid
margin-top: 0 size % padding-top: 0 size % border-right: width style color dotted
margin-right: 0 size % padding-right: 0 size % border-bottom: width style color
margin-bottom: 0 size % padding-bottom: 0 size % dashed
border-left: width style color
margin-left: 0 size % padding-left: 0 size % MAIN SHORTHAND double
MARGIN SHORTHAND PADDING SHORTHAND
border: width style color groove
margin: top right bottom left padding: top right bottom left
4P
4P
ridge
top left right bottom top left right bottom
3P
3P
B Rounded Corners inset

top bottom left right top bottom left right
2P
2P
SPECIFIC CORNERS
top right bottom left top right bottom left outset
1P
1P
border-top-left-radius: 0 size %
OVERFLOW/VISIBILITY
border-top-right-radius: 0 size % 2-PARAMETER FORMAT
overflow-x: visible hidden scroll auto no-display no-content
border-bottom-right-radius: 0 size % size-h size-v
overflow-y: visible hidden scroll auto no-display no-content size-v
border-bottom-left-radius: 0 size % 1-PARAMETER
size-h
overflow: overflow-x overflow-y size-h = size-v
MAIN SHORTHAND
visibility: visible hidden collapse border-radius: 4P top-left top-right bottom-right bottom-left

top-left top-right bottom-left bottom-right
3P
BOX TYPES (DISPLAY) CSS MODEL BOX

top-left bottom-right top-right bottom-left
2P
display: inline none run-in

top-left top-right bottom-right bottom-left
1P
inline-block block
BLK
size-h MAIN SHORTHAND WITH HORIZONTAL/VERTICAL RADIUS

inline-list-item list-item
LST
content border-radius: border-radius / border-radius

inline-table table table-cell
TBL
table-row table-caption padding BORDER IMAGE WIDTH

top
GRD
inline-grid grid subgrid IMAGE SLICE

auto size number % left center right
inline-flex flex margin
FLX
number %
B CSS Border Image bottom
I CSS Images IMAGE OUTSET
START SIZE BORDER IMAGE
GRADIENTS number size
size % border-image-source: none url( img.png )
URI
LINEAR GRADIENTS
repeating-linear-*
background-image: border-image-slice: 100% top right bottom left fill
linear-gradient( direction color1 start , color2 start ,... ) border-image-width: 1 top right bottom left
RADIAL GRADIENTS border-image-outset: 0 top right bottom left
repeating-radial-*
background-image: border-image-repeat: stretch repeat round space
radial-gradient( shape rsize at pos color1 start , color2 ... ) border-image: source slice /width outset repeat
GRADIENT OPTIONS DIRECTION
REPEAT-STYLE PARAMETERS
shape rsize to top
to top to top repeat space round no-repeat
circle radius at pos ... left 360deg right B Backgrounds
EXAMPLE repeat no-repeat (or repeat-x)
ellipse rh rv at pos ... 325deg 35deg LEVEL 2
EXAMPLE (ellipse 55px 45px at top, red, blue) to to background-color: transparent color
270deg 90deg
left right background-image: none url( image.png ) , url( image.jpg ) , ...
URI
RADIUS SIZE (RSIZE) ALSO ACCEPT...

215deg 145deg background-repeat: repeat repeat-x repeat-y repeat-style
closest-side farthest-side to to
closest-corner farthest-corner bottom
180deg
bottom repeat repeat repeat-style-h repeat-style-v
IMAGES AND OBJECTS left to bottom right background-attachment: scroll fixed local
SIZING background-position: pos-x pos-y
object-fit: fill contain cover none scale-down background: color image repeat attachment position
object-position: 50% 50% background-position LEVEL 3
IMAGE PROCESSING background-clip: border-box padding-box content-box

image-orientation: 0deg size background-origin: border-box padding-box content-box
image-resolution: 1dppx from-image resolution snap background-size: auto width height contain cover
image-rendering: auto crisp-edges pixelated background: color pos size repeat origin clip attach image
EFFECTS: SHADOWS
Manz.dev
WEB DEVELOPER / STREAMER box-shadow: none pos-x pos-y blur size color inset
lenguajecss.com
F CSS Filters FILTER VALUES

C Compositing
FILTER PROPERTY COMPOSITING AND BLENDING
number 0.0 ... 1.0
filter: none filter1 filter2 ... % 0% ... 100%
background-blend-mode: normal blend

FILTERS isolation: auto isolate
blur( blur ) 0px = original >0px=blur mix-blend-mode: normal blend
BLEND MODES
brightness( number % ) 0%=black 100%=original >100% ALLOWED
SEPARABLE
contrast( number % ) 0%=grey 100%=original >100% ALLOWED
normal multiply screen overlay
saturate( number % ) 0%=B&W 100%=original >100% ALLOWED
darken lighten color-dodge color-burn
grayscale( number % ) 0%=original 100%=B&W 0
hard-light soft-light difference exclusion
invert( number % ) 0%=original 100%=invert
NON-SEPARABLE
sepia( number % ) 0%=original 100%=sepia 270 deg 90
hue saturation color luminosity
opacity( number % ) 0%=transparent 100%=original 180
hue-rotate( angle ) 0deg=original 360deg=max
L Lists
drop-shadow( pos-x pos-y blur color ) (same as text-shadow) LISTS
list-style-image: none url( img.jpg )
URI
REFERENCE BOX
geometry-box = shape-box fill-box stroke-box view-box list-style-position: inside outside

list-style-type: disc circle square upper-alpha lower-alpha
A, a
shape-box = box margin-box
upper-roman lower-roman decimal decimal-leading-zero
OTH III, iii
1, 01
box = content-box padding-box border-box
lower-greek armenian georgian none
S CSS Shapes list-style: type position image
FLOAT AREA SHAPE GENERATED CONTENT
shape-outside: none url( img.png )
URI
content: normal none url( img.jpg ) attr( attr ) ' string '
STR
ATT
URI
basic-shape geometry-box open-quote close-quote no-open-quote no-close-quote
shape-image-threshold: 0.0 number counter( name , list-style-type )
CNT
PSEUDOCLASSES
shape-margin: 0 size % content-increment: none name
BASIC SHAPES
::before before element
content-reset: none name ::after after element
RECTANGLE
quotes: ' open-str ' ' close-str ' none EXAMPLE p::before { content: "-"; }
inset( top right bottom left round border-radius ) MARKERS
CIRCLE/ELLIPSE
::marker item's marker generated by list item (bullet, number...)
circle( shape-radius at position
) ) marker-side: list-item list-container
ellipse( radius_x radius_y at position
) )
U User Interface
POLYGON
SHAPE RADIUS BOX MODEL
polygon( x0 y0 , ... , xi yi )
size % farthest-side closest-side box-sizing: content-box border-box
M CSS Masks OUTLINE
CLIPPING SHAPE outline-width: size thin medium thick

clip-path: none url( img.png ) basic-shape geometry-box outline-style: none auto hidden dotted dashed solid
URI
POSITIONED MASKS double groove ridge inset outset

mask-image: none url( img.svg#mask ) gradient outline-color: invert color
URI
mask-mode: auto alpha luminance outline-offset: 0 size

mask-repeat: no-repeat background-repeat outline: color style width
mask-position: center background-position RESIZE/OVERFLOW
mask-clip: border-box no-clip geometry-box resize: none both horizontal vertical

mask-origin: border-box geometry-box text-overflow: clip ellipsis string
mask-size: auto background-size POINTING DEVICES AND KEYBOARDS
mask-composite: add subtract intersect exclude cursor: auto default none url( img.png ) x y
URI
mask: image mode position / size repeat clip composite context-menu help pointer progress wait
BORDER-BOX MASK cell crosshair text vertical-text zoom-in zoom-out
mask-border-source: none url( img.svg#mask ) alias copy move no-drop not-allowed grab grabbing
URI
mask-border-mode: alpha luminance n-resize ne-resize e-resize se-resize s-resize sw-resize

mask-border-slice: 0 border-image-slice w-resize nw-resize ew-resize ns-resize nesw-resize
mask-border-width: auto border-image-width nwse-resize col-resize row-resize all-scroll
mask-border-outset: 0 border-image-outset caret-color: auto color
mask-border-repeat: stretch border-image-repeat nav-up: auto id current root target
mask-border: source slice / width / outset repeat mode nav-down: auto id current root target
nav-left: auto id current root target
Manz.dev
nav-right: auto id current root target
lenguajecss.com
T CSS Transitions T CSS Transforms

TRANSITIONS TRANSFORM PROPERTY
transition-property: all none property1 , property2 , ...

transform: none transform1 transform2 ...
transition-duration: 0s time 2D TRANSFORMS
transition-timing-function: ease timing-function transform: translateX( size % ) Y

transition-delay: 0s time transform: translateY( size % )
transition: property duration t-function delay transform: translate( size % , size % )
transform: scaleX( number )
timing-function cubic-bezier() timing-function steps()
transform: scaleY( number )
s f s ease (0.25, 0.1, 0.25, 1) step-start (1, start)
n n n linear (0.00, 0.0, 1.00, 1) step-end (1, end) transform: scale( number , number )
s n n ease-in (0.42, 0.0, 1.00, 1) steps(n) (n, end) transform: skewX( angle ) X
transform: skewY( angle ) Z
n n s ease-out (0.00, 0.0, 0.58, 1) steps(a,b) (a, b)
s n s ease-in-out (0.42, 0.0, 0.58, 1) transform: skew( angle , angle )
SLOW NORMAL FAST transform: rotate( angle )
A CSS Animations
ANIMATIONS
transform: matrix( n1, n2 , n3 , n4 , n5 , n6 )
3D TRANSFORMS
animation-name: none name1 , name2 , ...
animation-duration: 0s time transform: translateZ( size )
animation-timing-function: ease timing-function transform: translate3d( size % , size % , size )
animation-delay: 0s time transform: scaleZ( number )
animation-iteration-count: 1 number infinite transform: scale3d( number , number , number )
animation-direction: normal reverse transform: rotateX( angle )
alternate alternate-reverse transform: rotateY( angle )
animation-fill-mode: none forwards backwards both transform: rotateZ( angle )
animation-play-state: running paused
transform: rotate3d( number , number , number , angle )
animation: name duration t-function delay it-c dir f-m p-s
transform: perspective( size )
CHAINED (ANIMATION PROPERTY) ANIMATION KEYFRAMES transform: matrix3d( n1, n2 , n3 , n4 , n5 , n6 , ... , n16 )
TRANSFORMS OPTIONS
animname1 5s linear , @keyframes animname {
animname2 5s linear 5s , 0% { property: value; ... } transform-origin: 50% 50% pos-x pos-y pos-z
animname3 6s linear 10s ; ... transform-style: flat preserve-3d
100% { property: value; ... } backface-visibility: visible hidden
0% = from } @-vendor-keyframes PERSPECTIVE OPTIONS
M CSS Motion Paths 100%
= to
MOTION PATH perspective: none size
motion-path: none url( img.svg ) perspective-origin: 50% 50% pos-x pos-y pos-z
URI
basic-shape path geometry-box

C CSS Multi Columns
motion-offset: 0 size % COLUMNS
motion-rotation: auto reverse angle
column-width: auto size
motion: path offset rotation column-count: auto number
SCROLL SNAPPING/SNAPPORT columns: width counter
S CSS Scroll Snap SNAP MARGIN/PADDING COLUMN RULES
CAPTURING SCROLL SNAP AREAS
*-top: 0 size % column-rule-width: size thin medium thick
scroll-snap-type: none x y *-right: 0 size % column-rule-style: style none
block inline both mandatory proximity *-bottom: 0 size % column-rule-color: color
ALIGNMENT AND LIMITS *-left: 0 size % column-rule: width style color
scroll-snap-align: inline-axis block-axis *: top right bottom left COLUMN BREAKS
scroll-snap-stop: normal always INLINE/BLOCK break-before/break-after: auto always avoid left right
SCROLL SNAPPING/SNAPPORT
*-inline-start: 0 size % page column avoid-page avoid-column
scroll-padding*: *-inline-end: 0 size % break-inside: auto avoid avoid-page avoid-column
scroll-snap-margin*:
*-inline: start end SPANNING, FILLING AND GAPS
AXIS
*-block-start: 0 size % column-span: none all
none start center end
EXAMPLE scroll-snap-align: start end
*-block-end: 0 size % column-fill: auto balance
column-gap: size normal
*-block: start end
Manz.dev
CSS
LENGUAJE DE ESTILOS
lenguajecss.com
F CSS Flexbox P Positioning

CONTAINER PROPERTIES POSITIONING
ORDERING AND ORIENTATION
position: static relative absolute fixed sticky
flex-direction: row row-reverse column column-reverse POSITIONING (NOT STATIC POSITION)
flex-wrap: nowrap wrap wrap-reverse
FLOATING
float: none left right top: auto size %

flex-flow: direction wrap left: auto size %
clear: none left right both
PRIMARY AXIS
right: auto size %
justify-content: flex-start center flex-end bottom: auto size %
space-between space-around
SPC
15 5 z-index: auto number

SECONDARY AXIS G CSS Grids -5
align-items: flex-start center flex-end baseline stretch CONTAINER GRIDS
EXPLICIT GRID
MULTI-LINE CONTAINER PROPERTIES
grid-template-columns: none track1 track2 ...
align-content: flex-start center flex-end stretch
grid-template-rows: none track1 track2 ...
space-between space-around
SPC
TRACKS
ITEM PROPERTIES
auto size % fr automatic size or specific size/fraction unit
▼
FLEXIBILITY
flex-grow: 0 number [ linename ] auto size % fr named grid lines + specific size
▼
flex-shrink: 0 number minmax( min , max ) min <= size range <= max
▼
flex-basis: auto content size % repeat( number , tracks ) repeat fragments n times
▼
repeat(auto-fill, tracks ) repeated fragments and fill space

▼
flex: grow shrink basis

repeat(auto-fit , tracks ) repeated fragments and fit space
▼
ALIGNMENT AND ORDERING

max-content min-content largest max/min content track
align-self: auto flex-start center flex-end baseline stretch
▼
fit-content( size % ) ~ min(max-content, max(auto, arg))

▼
order: 0 number
AREA GRID
A CSS Align grid-template-areas: " area1 area2 " ... " areaY areaZ "
CONTAINER PROPERTIES
AREAS EXAMPLE
CONTENT DISTRIBUTION
area grid area name (grid-area) #grid { display:grid;
▼
justify-content/align-content: grid-template-areas: " head head"

. empty grid area cell
▼
normal baseline-position "nav main"

▼
none no grid areas are defined

▼
space-between space-around space-evenly stretch "foot foot"; }

▼
overflow-pos self-position SHORTHAND TEMPLATE GRID

▼
OVERFLOW POSITION
grid-template: none
▼
SELF-POSITION
safe unsafe template-rows / template-columns
start center end (self, content)
▼
▼
flex-start flex-end idem (only flex) template-areas + template-rows/columns

▼
▼
IMPLICIT GRID
self-start self-end (self)
▼
left right (self, content) fallback: start grid-auto-columns: auto size %

▼
BASELINE-POSITION grid-auto-rows: auto size %

baseline last-baseline grid-auto-flow: row column dense
▼
PRIMARY AXIS GUTTERS (GAPS)
justify-items: auto normal stretch baseline-position grid-column-gap: 0 size %

overflow-pos self-position grid-row-gap: 0 size %
▼
legacy left center right grid-gap: row-gap column-gap

▼
SECONDARY AXIS SHORTHAND GRID
align-items: normal stretch baseline-position grid: template

▼
overflow-pos self-position template-rows / auto-flow dense grid-auto-columns

▼
▼
auto-flow dense grid-auto-rows / template-columns

▼
ITEM PROPERTIES
PRIMARY AXIS ITEM GRIDS
justify-self: auto normal stretch baseline-position LINE-BASED PLACEMENT
overflow-pos self-position grid-column-start/grid-column-end: auto line

▼
SECONDARY AXIS grid-row-start/grid-row-end: auto line

align-self: auto normal stretch baseline-position grid-column: column-start column-end
overflow-pos self-position grid-row: row-start row-end
▼
LINES
TABLES
number name refer to a numbered or named grid line
▼
border-collapse: separate collapse caption-side: top bottom

span number name span across until grid line
▼
border-spacing: size-h size-v empty-cells: show hide

table-layout: auto fixed
PLACEMENT SHORTHANDS
grid-area: template-area
▼
Manz.dev row-start / column-start / row-end / column-end

▼

LENGUAJE DE PROGRAMACIÓN lenguajejs.com
JAVASCRIPT
Created by @Manz ( https://manz.dev/ ) #DIADELAPROGRAMACION
n Number() = 42 s String() = 'text' a Array() = [1, 2, 3]
PROPERTIES PROPERTIES PROPERTIES
n .POSITIVE_INFINITY +∞ equivalent n .length string size n .length number of elements

n .NEGATIVE_INFINITY -∞ equivalent METHODS METHODS
n .MAX_VALUE largest positive value s .charAt(index) char at position [i] b .isArray(obj) check if obj is array
n .MIN_VALUE smallest positive value n .charCodeAt(index) unicode at pos. b .includes(obj, from) include element?
n .EPSILON diff between 1 & smallest >1 n .codePointAt(index) cp at position n .indexOf(obj, from) find elem. index
n .NaN not-a-number value s .fromCharCode(n1, n2...) code to char n .lastIndexOf(obj, from) find from end
METHODS s .fromCodePoint(n1, n2...) cp to char s .join(sep) join elements w/separator
s .toExponential(dec) exp. notation s .concat(str1, str2...) combine text + a .slice(ini, end) return array portion
s .toFixed(dec) fixed-point notation b .startsWith(str, size) check beginning a .concat(obj1, obj2...) return joined array
s .toPrecision(p) change precision b .endsWith(str, size) check ending
a .flat(depth) return flat array at n depth
b .isFinite(n) check if number is finite b .includes(str, from) include substring?
MODIFY SOURCE ARRAY METHODS
b .isInteger(n) check if number is int. a .copyWithin(pos, ini, end) copy elems

n .indexOf(str, from) find substr index
b .isNaN(n) check if number is NaN n .lastIndexOf(str, from) find from end
a .fill(obj, ini, end) fill array with obj
n .parseInt(s, radix) string to integer n a .reverse() reverse array & return it
.search(regex) search & return index
n .parseFloat(s, radix) string to float a .sort(cf(a,b)) sort array (unicode sort)
n .localeCompare(str, locale, options)
a .splice(ini, del, o1, o2...) del&add elem
a .match(regex) matches against string
r Regexp() ITERATION METHODS
= /.+/ig a .matchAll(regex) return iterator w/all
ai .entries() iterate key/value pair array
PROPERTIES s .normalize(form) unicode normalize
n .lastIndex index to start global regexp s ai .keys() iterate only keys array
.padEnd(len, pad) add end padding
s .flags active flags of current regexp s .padStart(len, pad) add start padding
ai .values() iterate only values array
b .global flag g (search all matches) s .repeat(n) repeat string n times CALLBACK FOR EACH METHODS
b .ignoreCase flag i (match lower/upper) s .replace(str|regex, newstr|func) b .every(cb(e,i,a), arg) test until false
b .multiline flag m (match multiple lines) s .slice(ini, end) str between ini/end b .some(cb(e,i,a), arg) test until true
b .sticky flag y (search from lastIndex) s a .map(cb(e,i,a), arg) make array
.substr(ini, len) substr of len length
b .unicode flag u (enable unicode feat.) a .filter(cb(e,i,a), arg) make array w/true
s .substring(ini, end) substr fragment
s .source current regexp (w/o slashs) o
a .split(sep|regex, limit) divide string .find(cb(e,i,a), arg) return elem w/true
METHODS
s .toLowerCase() string to lowercase n .findIndex(cb(e,i,a), arg) return index
a .exec(str) exec search for a match
s .toUpperCase() string to uppercase a .flatMap(cb(e,i,a), arg) map + flat(1)
b .test(str) check if regexp match w/str
s .trim() remove space from begin/end .forEach(cb(e,i,a), arg) exec for each
CLASSES
s .trimEnd() remove space from end o .reduce(cb(p,e,i,a), arg) accumulative
. any character \t tabulator o .reduceRight(cb(p,e,i,a), arg) from end
s .trimStart() remove space from begin
\d digit [0-9] \r carriage return
\D no digit [^0-9] \n line feed s .raw`` template strings with ${vars} ADD/REMOVE METHODS
\w any alphanumeric char [A-Za-z0-9_] o .pop() remove & return last element
d Date()
\W no alphanumeric char [Â-Za-z0-9_] n .push(o1, o2...) add elem & return length
METHODS
\s any space char (space, tab, enter...) o .shift() remove & return first element
\S no space char (space, tab, enter...) n .UTC(y, m, d, h, i, s, ms) timestamp n .unshift(o1, o2...) add elem & return len
\xN char with code N [\b] backspace n .now() timestamp of current time
UNSHIFT PUSH
\uN char with unicode N \0 NUL char n .parse(str) convert str to timestamp [1,2,3]
CHARACTER SETS OR ALTERNATION n .setTime(ts) set UNIX timestamp SHIFT POP
[abc] match any character set n .getTime() return UNIX timestamp f Function() = function(a, b) { ... }
[âbc] match any char. set not enclosed UNIT GETTERS / SETTERS (ALSO .getUTC*() / .setUTC*() )
PROPERTIES
a|b match a or b n .get / .setFullYear(y, m, d) (yyyy) o .length return number of arguments

BOUNDARIES n .get / .setMonth(m, d) (0-11) s .name return name of function
^ begin of input $ end of input n .get / .setDate(d) (1-31) o .prototype prototype object
\b zero-width word boundary n .get / .setHours(h, m, s, ms) (0-23) METHODS
\B zero-width non-word boundary n .get / .setMinutes(m, s, ms) (0-59) o .call(newthis, arg1, arg2...) change this
GROUPING n .get / .setSeconds(s, ms) (0-59) o .apply(newthis, arg1) with args array
(x) capture group (?:x) no capture group n .get / .setMilliseconds(ms) (0-999) o .bind(newthis, arg1, arg2...) bound func
\n reference to group n captured n .getDay() return day of week (0-6)
QUANTIFIERS LOCALE & TIMEZONE METHODS
n number d date
x* preceding x 0 or more times {0,} n .getTimezoneOffset() offset in mins n NaN (not-a-number) r regular expresion
x+ preceding x 1 or more times {1,} s .toLocaleDateString(locale, options) s string f function
x? preceding x 0 or 1 times {0,1} s .toLocaleTimeString(locale, options) b boolean (true/false) o object
x{n} n ocurrences of x s .toLocaleString(locale, options) a array undefined
x{n,} at least n ocurrences of x s .toUTCString() return UTC date available on ECMAScript 2015 or higher
x{n,m} between n & m ocurrences of x s .toDateString() return American date n static (ex: Math.random())
ASSERTIONS s .toTimeString() return American time n non-static (ex: new Date().getDate())
x(?=y) x (only if x is followed by y) s .toISOString() return ISO8601 date
argument required
x(?!y) x (only if x is not followed by y) s .toJSON() return date ready for JSON
argument optional Manz.dev

JAVASCRIPT #DIADELAPROGRAMACION
Math o Object() = {key: value, key2: value2} s Set() WeakSet only obj as items
n .E Euler's constant o .constructor return ref. to object func. n .size return number of items
n .LN2 natural logarithm of 2 METHODS METHODS
n .LN10 natural logarithm of 10 o .assign(dst, src1, src2...) copy values s .add(item) add item to set ws
n .LOG2E base 2 logarithm of E o .create(proto, prop) create obj w/prop b .has(item) check if item exists ws
n .LOG10E base 10 logarithm of E o .defineProperties(obj, prop) b .delete(item) del item & return if del ws
n .PI ratio circumference/diameter o .defineProperty(obj, prop, desc) .clear() remove all items from set
n .SQRT1_2 square root of 1/2 o .freeze(obj) avoid properties changes ITERATION METHODS
n .SQRT2 square root of 2 o .getOwnPropertyDescriptor(obj, prop) si .entries() iterate items
METHODS
a .getOwnPropertyNames(obj) si .values() iterate only value of items
a .getOwnPropertySymbols(obj)
n .abs(x) absolute value o .getPrototypeOf(obj) return prototype
CALLBACK FOR EACH METHODS
n .cbrt(x) cube root b .is(val1, val2) check if are same value .forEach(cb(e,i,a), arg) exec for each
n .clz32(x) return leading zero bits (32) b .isExtensible(obj) check if can add prop
n .exp(x) return ex m Map() WeakMap only obj as keys
b .isFrozen(obj) check if obj is frozen
n .expm1(x) return ex-1 b .isSealed(obj) check if obj is sealed
PROPERTIES
n .hypot(x1, x2...) length of hypotenuse n .size return number of elements

a .keys(obj) return only keys of object
n .imul(a, b) signed multiply o .preventExtensions(obj) avoid extend METHODS
n .log(x) natural logarithm (base e) o .seal(obj) prop are non-configurable m .set(key, value) add pair key=value wm
n .log1p(x) natural logarithm (1+x) o .setPrototypeOf(obj, prot) change prot o .get(key) return value of key wm
n .log10(x) base 10 logarithm INSTANCE METHODS b .has(key) check if key exist wm
n .log2(x) base 2 logarithm b .hasOwnProperty(prop) check if exist b .delete(key) del elem. & return if ok wm
n .max(x1, x2...) return max number b .isPrototypeOf(obj) test in another obj .clear() remove all elements from map
n .min(x1, x2...) return min number b .propertyIsEnumerable(prop) ITERATION METHODS
n .pow(base, exp) return baseexp ** s .toString() return equivalent string mi .entries() iterate elements
n .random() float random number [0,1) s .toLocaleString() return locale version mi .keys() iterate only keys
n .sign(x) return sign of number o .valueOf() return primitive value mi .values() iterate only values
n .sqrt(x) square root of number CALLBACK FOR EACH METHODS
ROUND METHODS p Promise() async / await async functions
.forEach(cb(e,i,a), arg) exec for each
METHODS
n .ceil(x) superior round (smallest)
n .floor(x) inferior round (largest) p .all(obj) return promise g Generator() = function* () { ... }
n .fround(x) nearest single precision p .catch(onRejected(s)) = .then(undef,s) METHODS
n .round(x) round (nearest integer) p .finally(onFinish()) exec callback always o .next(value) return obj w/{value,done}
n .trunc(x) remove fractional digits p .then(onFulfilled(v), onRejected(s)) o .return(value) return value & true done
p .race(obj) return greedy promise (res/rej)
TRIGONOMETRIC METHODS HYPERBOLIC METHODS .throw(except) throw an error
p .resolve(obj) return resolved promise
n .acos(x) arccosine n .acosh(x)
n .asinh(x) p .reject(reason) return rejected promise globals
n .asin(x) arcsine includes isFinite, isNaN, parseInt & parseFloat
p .allSettled(obj) return all fullfill/reject
n .atan(x) arctangent n .atanh(x) METHODS
n .cos(x) cosine n .cosh(x) p Proxy() Reflect same methods (not func) o eval(str) evaluate javascript code
n .sin(x) sine n .sinh(x) METHODS s encodeURIComponent(URI) = to %3D
n .tan(x) tangent n .tanh(x) s decodeURIComponent(URI) %3D to =
o .apply(obj, arg, arglist) trap function call
n .atan2(x, y) arctangent of quotient x/y o .construct(obj, arglist) trap new oper
Others
o .defineProperty(obj, prop, desc)
BigInt() = 9007199254740992n VARIABLE / CONSTANT DECLARATIONS
o .deleteProperty(obj, prop) trap delete
ES Modules modules o .enumerate(obj) trap for...in var deprecated variable let block scope
METHODS o .get(obj, prop, rec) trap get property const declare constant (read-only)
OPERATORS
import {m1, m2 as name} from "./file.js" o .getOwnPropertyDescriptor(obj, prop)
import obj from "./file.js" default import o .getPrototypeOf(obj) ?? nullish coalescing operator
export {m1, m2} export objs as modules o .has(obj, prop) trap in operator ?. optional chaining
p import("./file.js") dynamic import o .ownKeys(obj) FAST TIPS
o .preventExtensions(obj) func(a=1) default parameter value

JSON json file manipulation o .set(obj, prop, value) trap set property func(...a) rest argument (spread operator)
METHODS o .setPrototypeOf(obj, proto) (a) => { ... } function fat arrow (w/o this)
n .parse(str, tf(k,v)) parse string to object `string ${a}` template with variables
n .stringify(obj, repf|wl, sp) convert to str Symbol()
0bn binary (2) number n to decimal
PROPERTIES
0on octal (8) number n to decimal
e Error() s .iterator specifies default iterator 0xn hexadecimal (16) number n to decimal
PROPERTIES s .match specifies match of regexp
for (i in array) { ... } iterate array, i = index
s .name return name of error s .species specifies constructor function
for (e of array) { ... } iterate array, e = value
s .message return description of error METHODS
class B extends A () { } class sugar syntax
EvalError(), InternalError(), RangeError(), URIError(),
s .for(key) search existing symbols
ReferenceError(), SyntaxError(), TypeError() s .keyFor(sym) return key from global reg Manz.dev
JAVASCRIPT
Created by @Manz ( https://manz.dev/ ) #DIADELAPROGRAMACION
window = Browser global object screen = info about screen / resolution performance = info about performance
b .closed check if window is closed n .availTop top-from space available o .navigation info about redir/type nav.
n .devicePixelRatio ratio vertical size pix n .availLeft left-from space available o .timing info about latency-load perf.
b .fullScreen check if window is fullscreen n .availWidth width space available METHODS
n .innerWidth width size (incl. scrollbar) n .availHeight height space available n .now() high precision timestamp
n .innerHeight height size (incl. scrollbar) n .width screen width resolution
n .outerWidth width size (incl. browser) n .height screen height resolution navigator = info about browser
n .outerHeight height size (incl. browser) n .colorDepth screen color depth (bits) PROPERTIES
n .length number of frames n .pixelDepth screen pixel depth (bits) b .cookieEnabled browser cookies on?
s .name inner name of window METHODS n .doNotTrack DNT privacy enabled?
s .status bottom statusbar text b .lockOrientation(mode|modearray) o .geolocation user-info geolocation
API/OBJECTS PROPERTIES b .unlockOrientation() remove locks s .language language in browser
o .applicationCache offline resources API n .maxTouchPoints max on device
o .console console browser API console = unofficial console browser API b .onLine browser work in online mode?
o .crypto cryptographic API METHODS s .userAgent identify browser of user
o .history session page history API .assert(cond, str1|obj1...) set a assert METHODS
o .location information about URL API .count(str) count (show number times) n .vibrate(n|pattern) use device vibration
o .localStorage storage for site domain .dir(obj) show object (expanded debug)
o .sessionStorage storage until closed .group() open new message group location = info about current URL
o .navigator information about browser .groupCollapsed() open new group coll. PROPERTIES
o .performance data about performance .groupEnd() close previous group s .href full document url
SCREEN PROPERTIES .table(array|obj, colnames) show table s .protocol https://www.emezeta.com/
.trace() show code trace s .username https://user:pass@www
o .screen information about screen
.timeStamp(str) put time on timeline s .password https://user:pass@www
n .screenX horizontal pos browser/screen
s .host https://emezeta.com:81/
n .screenY vertical pos browser/screen PERFORMANCE METHODS
s .hostname https://emezeta.com:81/
n .pageXOffset horizontal pixels scrolled .profile(name) start performance profile
s .port https://emezeta.com:81/
n .pageYOffset vertical pixels scrolled .profileEnd(name) stop perf. profile
s .pathname http://emezeta.com/42/
WINDOW PROPERTIES .time(name) start performance timer
s .hash http://emezeta.com/#contacto
o .opener window that opened this window .timeEnd(name) stop perf. timer
s .search http://google.com/?q=emezeta
o .parent parent of current window/frame LOG LEVEL METHODS
o .searchParams search params object
o .self this window (equal to .window) .log(str1|obj1...) output message s .origin source origin of document url
o .top top window of current win/frame .info(str1|obj1...) output information
METHODS .warn(str1|obj1...) output warning onClick="..." (HTML) .onclick = (JS func) 'click' (Listener)
s .btoa(str) encode string to base64 .error(str1|obj1...) output error e events (only popular events)
s .atob(str) decode base64 string to text MOUSE EVENTS
.focus() request send window to front window = global interaction func. e e
.onClick .onDblClick
.blur() remove focus from window METHODS
e .onMouseDown e .onMouseUp
USER INTERACTION METHODS
o .getSelection(id) return Selection object e .onMouseEnter e .onMouseLeave
.postMessage(msg, dst, transf) send .alert(str) show message (ok button) e .onMouseMove e .onMouseOver
o .open(url, name, options) open popup s .prompt(str, def) ask answer to user e e
.onMouseOut .onWheel
.stop() stop window loading b .confirm(str) show message (ok, cancel) KEYBOARD EVENTS
b .find(str, case, back, wrap, word, fr, d) e .onKeyDown e .onKeyUp
.print() open print document window history = page history on tab e .onKeyPress
PROPERTIES
ANIMATION METHODS LOAD/OBJECT EVENTS
n .requestAnimationFrame(cb(n)) n .length number of pages in historytab
e .onDOMContentLoaded e .onLoad
n .state return state top history stack
.cancelAnimationFrame(reqID) e .onAbort e .onError
METHODS
TIMER METHODS e .onResize e .onScroll
n .setTimeout(f(a...), ms, a...) delay&run .back() go prev page (same as .go(-1)) e .onBeforeUnload e .onUnload
.clearTimeout(id) remove timeout .forward() go next page (same as .go(1)) FORM/FIELDS EVENTS
n .setInterval(f(a...), ms, a...) run every

.go(n) go n page (positive or negative) e .onBlur e .onFocus
.pushState(obj, title, url) insert state e .onChange e .onInput
.clearInterval(id) remove interval .replaceState(obj, title, url) repl. state e .onInvalid e .onSelect
SCREEN METHODS
e .onReset e .onSubmit
.scrollBy(x, y) scroll x,y pixels (relative) storage localStorage / sessionStorage ANIMATION/TRANSITION EVENTS
.scrollTo(x, y) scroll x,y pixels (absolute) PROPERTIES e .onDragEnter e .onDragLeave
.moveBy(x, y) move window by x,y (rel) n .length number of items in storage e .onDragStart e .onDragEnd
.moveTo(x, y) move window to x,y (abs) METHODS e .onDragOver e .onDrag e .onDrop
.resizeBy(x, y) resize win by x,y (rel) s .key(n) return key name on position n ANIMATION/TRANSITION EVENTS
.resizeTo(w, h) resize win to WxX (abs) s .getItem(key) return value of item key e .onAnimationStart e .onAnimationEnd
STYLESHEET METHODS
.setItem(key, value) set or update key e .onAnimationIteration e .transitionEnd
o .getComputedStyle(elem, pseudelem) .removeItem(key) delete item with key
a .matchMedia(mediaq) match CSSMQ .clear() delete all items for current site Manz.dev

JAVASCRIPT #DIADELAPROGRAMACION
document = Document object e Element() = Element object a Attr() = Attribute object
s .characterSet document charset s .accessKey if exist, shortcut key s .name name of element attribute
s .compatMode quirks or standard mode o .attributes array of Attr objects s .value value of element attribute
s .cookie return all cookies doc string o .classList DOMTokenList of classes
s .designMode return design mode status s .className classes list to string t DOMTokenList() = List of classes
s .dir return direction text: "rtl" or "ltr" s .id id string of element PROPERTIES
s .doctype return document type (DTD) s .name name string of element n .length number of items
s .domain return document domain s .tagName HTML tag of element METHODS
s .documentURI return document URL POSITION, SIZE AND SCROLL PROPERTIES b .contains(item) check if item exists
s .lastModified return date/time modific. n .clientTop top border width element .add(item) add item to list
s .origin return document's origin n .clientLeft left border width element s .item(n) return item number n
s .readyState return current load status n .clientWidth inner width element .remove(item) del item from list
s .referrer return previous page (referrer) n .clientHeight inner height element b .toggle(item) del item if exist, add else
s .title return document title n .scrollTop top-position in document
s .URL return HTML document URL n .scrollLeft left-position in document n Node() = Minor element (elem. or text)
o .location information about URL n .scrollWidth width of element PROPERTIES
ELEMENTS PROPERTIES n .scrollHeight height of element s .baseURI absolute base URL of node
o .activeElement focused element GET/SET HTML CODE PROPERTIES s .namespaceURI namespace of node
o .body return body element s .innerHTML get/set HTML inside elem s .nodeName name of node
o .currentScript return active script s .outerHTML get/set HTML (incl. elem) s .nodeType 1=element, 2=text, 9=doc
o .defaultView return window element METHODS
s .nodeValue value of node
o .documentElement first element (root) s .prefix namespace prefix of node
o .closest(selec) closest ancestor
o .head return head element s .textContent text of node and children
a .getElementsByClassName(class)
o .scrollingElement first scrollable elem. NAVIGATION PROPERTIES
a .getElementsByTagName(tag)
.querySelector(selec) return first elem
DOCUMENT ARRAY PROPERTIES o
o .childNodes children nodes collection
a .anchors array of images elements a .querySelectorAll(selec) return elems o .firstChild first children (include text)
a .applets array of applets elements b .matches(selec) match with this elem? o .lastChild last children (include text)
a .embeds array of embeds elements .insertAdjacentHTML(posstr, html) o .nextSibling immediate next node
a .forms array of forms elements ATTRIBUTE METHODS
o .previousSibling immediate prev node
a .images array of images elements o .parentElement immediate parent elem
b .hasAttributes() exists attributes?
a .links array of links elements o .parentNode immediate parent node
b .hasAttribute(name) exist attribute?
a .plugins array of plugins elements o .ownerDocument return document
s .getAttribute(name) return value
a .scripts array of scripts elements METHODS
STYLESHEET PROPERTIES
.removeAttribute(name) del attribute
.setAttribute(name, value) set attrib. o .appendChild(node) add node to end
a .styleSheets array of style files elem o .cloneNode(child) duplicate node
CLIENTRECT (POSITION AND SIZES) METHODS
o .preferredStyleSheetSet preferred css o .compareDocumentPosition(node)
o .selectedStyleSheetSet selected css o .getBoundingClientRect() return pos.
b .contains(node) node is descendant?
a .getClientRects() return pos/size array
METHODS b .hasChildNodes() node has childs?
o .adoptNode(node) adopt from ext doc o .insertBefore(newnode, node)
e Event() = Event on action
o .createAttribute(name) create Attr obj b .isDefaultNamespace(nsURI)
PROPERTIES
o .createDocumentFragment() b .isEqualNode(node) check if are equal
o .createElement(tag) create Element obj b .bubbles true=bubble, false=captures s .lookupNamespaceURI() ret namesp.
o .createEvent(type) create Event object b .cancelable event is cancelable? s .lookupPrefix() return prefix for a ns
o .createRange() create Range object o .currentTarget current element .normalize() normalize-form children
o .createTextNode(text) create TextNode b .defaultPrevented preventDefault() call o .removeChild(node) del node & return
o .enableStyleSheetsForSet(name) n .detail additional event info o .replaceChild(newnode, oldnode)
o .importNode(node, desc) import copy n .eventPhase current stage (0-3)
o .getElementById(id) find elem with id b .isTrusted user action or dispatched c ChildNode()
a .getElementsByName(name) w/ name o .target reference to dispatched object METHODS
o .getSelection(id) return Selection object n .timeStamp time when was created o .remove() remove specified node
s .type type of event
r ClientRect() = Coords of element METHODS
p ParentNode()
PROPERTIES PROPERTIES
.preventDefault() cancel event
n .top top coord of surrounding rect .stopImmediatePropagation() n .childElementCount number of children
n .right right coord of surrounding rect .stopPropagation() prevent being called o .children children elements
n .bottom bottom coord of surrounding r. o .firstElementChild first children elem.
n .left left coord of surrounding rect o .lastElementChild last children elem.
t EventTarget (use over elements)
n .width width coord of surrounding rect
METHODS n NonDocumentTypeChildNode()
n .height height coord of surrounding r.
.addEventListener(ev, cb(ev), capt) PROPERTIES
.removeEventListener(ev, cb(ev), capt) o .nextElementSibling next element

Manz.dev
b .dispatchEvent(ev) o .previousElementSibling prev element

Datasheet HTML CSS JS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Datasheet HTML CSS JS

Uploaded by

Copyright:

Available Formats

Created by @Manz ( https://manz.

C CSS Syntax C CSS Colors

PSEUDOCLASSES RESETTING ALL PROPERTIES property: value !important

:visited links that has been visited COMMON VALUES

calc( value1 op value2 ... )

:nth-child(n) nth child of group of elements odd

:last-of-type last child of same type VIEWPORT SIZE DEVICE SIZE

xx-small x-small small medium large x-large xx-large

LINE BREAKING & WORD BOUNDARIES

overﬂow-wrap: normal break-word

ALIGNMENT & JUSTIFICATION

hanging-punctuation: none ﬁrst last force-end allow-end

T CSS Text Decoration

behind leftwards rightwards text-decoration-color: currentColor color

slower faster text-decoration: none line style color

speak-header: once always text-shadow: none pos-x pos-y blur color

@font-face { sans serif font fantasy font

B CSS Box Model B CSS Borders SPECIFIC SHORTHANDS

B Rounded Corners inset

visibility: visible hidden collapse border-radius: 4P top-left top-right bottom-right bottom-left

BOX TYPES (DISPLAY) CSS MODEL BOX

display: inline none run-in

size-h MAIN SHORTHAND WITH HORIZONTAL/VERTICAL RADIUS

content border-radius: border-radius / border-radius

table-row table-caption padding BORDER IMAGE WIDTH

inline-grid grid subgrid IMAGE SLICE

RADIUS SIZE (RSIZE) ALSO ACCEPT...

IMAGE PROCESSING background-clip: border-box padding-box content-box

F CSS Filters FILTER VALUES

list-style-image: none url( img.jpg )

geometry-box = shape-box ﬁll-box stroke-box view-box list-style-position: inside outside

CLIPPING SHAPE outline-width: size thin medium thick

POSITIONED MASKS double groove ridge inset outset

mask-mode: auto alpha luminance outline-offset: 0 size

mask-clip: border-box no-clip geometry-box resize: none both horizontal vertical

mask-border-mode: alpha luminance n-resize ne-resize e-resize se-resize s-resize sw-resize

T CSS Transitions T CSS Transforms

transition-property: all none property1 , property2 , ...

transition-timing-function: ease timing-function transform: translateX( size % ) Y

basic-shape path geometry-box

F CSS Flexbox P Positioning

ﬂoat: none left right top: auto size %

15 5 z-index: auto number

repeat(auto-ﬁll, tracks ) repeated fragments and ﬁll space

ﬂex: grow shrink basis

ALIGNMENT AND ORDERING

ﬁt-content( size % ) ~ min(max-content, max(auto, arg))

justify-content/align-content: grid-template-areas: " head head"

normal baseline-position "nav main"

none no grid areas are deﬁned

space-between space-around space-evenly stretch "foot foot"; }

overﬂow-pos self-position SHORTHAND TEMPLATE GRID

flex-start flex-end idem (only flex) template-areas + template-rows/columns

left right (self, content) fallback: start grid-auto-columns: auto size %

BASELINE-POSITION grid-auto-rows: auto size %

PRIMARY AXIS GUTTERS (GAPS)

justify-items: auto normal stretch baseline-position grid-column-gap: 0 size %

legacy left center right grid-gap: row-gap column-gap

SECONDARY AXIS SHORTHAND GRID

align-items: normal stretch baseline-position grid: template

overﬂow-pos self-position template-rows / auto-ﬂow dense grid-auto-columns

auto-ﬂow dense grid-auto-rows / template-columns