-
Notifications
You must be signed in to change notification settings - Fork 16
/
CSS.language.txt
3122 lines (2706 loc) · 247 KB
/
CSS.language.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
CSS
SUMMARY ==> #HTML:
# - <link rel="stylesheet">, <style>, <any style>
#CSSOM:
# - WINDOW.getComputedStyle(ELEM).PROP, ELEM.style.PROP, document.styleSheets[*].cssRules[*].type|cssText|selectorText|style
#Devices:
# - resolution (WINDOW.devicePixelRatio), zoom, size, <meta name="viewport">, frequency, rotation
#Types:
# - LEN: rem|em|ex|ch, vh|vw|vmin, px, in|pc|pt|cm|mm
# - COLOR: NAME, #NNN[A][NNN[A]], rgb[a](), hsl[a](), hwb(), gray(), transparent, currentColor,
# color(COLOR red|green|blue|alpha|hue|saturation|lightness|whiteness|blackness|blend|tint|shade|contrast())
# - [repeating-]linear|radial|conic-gradient()
# - calc(EXPR)
#Basic syntax:
# - case sensitive, ignores whitespaces and errors, CSS.escape()
#Syntax:
# - declared|cascaded|specified|computed|used|actual
# - initial|inherit
# - all
#Variables:
# - --VAR, var(--VAR[, VAL]), @custom-media --VAR, (--VAR), @custom-selector :--VAR, :--VAR, --MIXIN {...}, @apply --MIXIN
#At-rules:
# - @import
# - @namespace
#Media queries:
# - height|width|aspect-ratio|resolution|orientation|color|color-index|monochrome|scan|grid|hover
# - @media, <any media>, WINDOW.matchMedia()
#Selectors:
# - specificity: !important > HTML-inline > #ID > .CLASS|:PSEUDO|[ATTR] > TAG|::PSEUDO > load order
# - combinators: space, comma, > + ~, nesting
# - :not(), :matches()
# - * #ID .CLASS [ATTR] [ATTR= $= ^= |= *= ~="STR"] TAG
# - :enabled|disabled|checked, :lang(), :target, :required|optional|indeterminate|[in]valid
# - :link|visited|any-link
# - ::placeholder, :root
# - :first|last|only|nth[-last]-child|of-type(), :empty
# - :hover|active|focus, ::selection
# - ::first-letter|line
#Dimensions, display, position:
# - [min|max-]height|width, padding|border|margin[-top|right|bottom|left], box-sizing, collapsed margins, line-height
# - display: inline, block, inline-block
# - display: none, <any hidden>, visibility
# - position: static|relative|absolute|fixed, top|right|bottom|left, float, clear, clearfix, z-index
# - fullscreen: requestFullscreen(), :fullscreen
# - CSSOM view: dimensions, position, scrolling
#Alignment:
# - margin: auto, flexbox, calc(), text|vertical-align
#Overflow:
# - wrapping: white-space, word-break, overflow-wrap
# - clipping: overflow[-x|y], text-overflow
#Paragraph:
# - text|vertical-align, text-indent, letter|word-spacing
#Fonts:
# - @font-face: WOFF2+WOFF, font-*, unicode-range
# - font-size, font-family, color, font-style, font-weight, text-decoration, font, system fonts
# - font-feature-settings, font-kerning, font-variant[-position|ligatures|cap|numeric]
# - text-transform
# - direction, unicode-bidi
#Background:
# - background[-color|image|origin|attachment|position|size|clip|repeat]
#Replaced element:
# - object-position|fit
#Borders:
# - border[-top|right|bottom|left][-color|style|width|radius]
# - border-image[-slice|source|repeat|width|outset]
# - outline[-color|width|style]
#Flexbox:
# - display: [inline-]flex
# - flex-direction, flex-wrap, flex-flow, flex-basis, order
# - flex-grow, flex-shrink, flex
# - justify-content, align-content, align-items, align-self
#Columns:
# - column-width|count, columns
# - column-gap, column-rule[-color|style|width], column-fill
#Tables:
# - display: [inline-]table, table-caption|header|row|footer-group|column[-group]|row|cell
# - table-layout, border-collapse, border-spacing, empty-cells, caption-side
#Lists:
# - display: list-item, list-style[-type|image|position]
#Effects:
# - opacity
# - text-shadow, box-shadow
# - transform: translate|scale|rotate[X|Y|Z|3d](), perspective(), skewX|Y(), matrix[3d](),
# transform-origin, perspective, perspective-origin, backface-visibility, will-change
#Transitions/animations:
# - transition[-property|duration|delay|timing-function], ELEM.ontransitionend
# - @keyframes, animation[-name|duration|delay|timing-function|direction|iteration-count|fill-mode|play-state],
# ELEM.onanimationstart|end|iteration
# - Web animations API (same + playbackRate, endDelay, iterationStart,composite, iterationComposite, spacing)
#Paged media:
# - page-break-before|after|inside, @page[:first|left|right], @POSITION
#Generated content:
# - content: none|STR|IMAGE|attr()
# - content: [no-]open|close-quote, quotes
# - content: counter[s](), counter-reset|increment
# - CSS triangle
#Browser UI:
# - cursor, pointer-events, user-select
# - <meta|link> (address bar styling, splash screen)
/=+===============================+=\
/ : : \
)==: GENERAL :==(
\ :_______________________________: /
\=+===============================+=/
STANDARDS ==> #W3C, mostly CSS working group
#Continuous work but sometimes publish snapshots (2007, 2010, 2015, 2017)
#CSS3|4 on-going, divided in modules.
#WHATWG (fork) has few specs
MIME TYPE ==> #text/css
INTEROPERABILITY ==> #Non-supported is skipped, last line wins. So put fallback first.
#See HTML doc for list of browsers
#Extensions fallbacks used when experimental:
# -moz- (Firefox), -webkit- (Chrome+Safari), -o- (Opera), -ms- (IE)
##Ext: means necessarily prefix
STATIC ANALYSIS ==> #See stylestats
/=+===============================+=\
/ : : \
)==: HTML :==(
\ :_______________________________: /
\=+===============================+=/
<link rel="stylesheet" href="URI.css">/ #From external file.
LINK.sheet #STYLESHEET|null
<style>...</style> #Inline
type="STR" #MIME type. Def: 'text/css'
STYLE.sheet #STYLESHEET|null
<any>
style="NAME: VAL;..." #In tags
LOADING|PARSING ORDER ==> #See DOM doc
/=+===============================+=\
/ : : \
)==: CSSOM :==(
\ :_______________________________: /
\=+===============================+=/
HTMLELEM.style #CSSSTYLEDEC: inline styling. For setting.
WINDOW.getComputedStyle(HTMLELEM[, ':PSEUDO']) #CSSSTYLEDEC: used values (readonly). For getting.
CSSStyleDeclaration #Many CSS "PROP:VAL;"
CSSSTYLEDEC.length #
CSSSTYLEDEC[UINT] #'PROP'
CSSSTYLEDEC.cssText #'PROP:VAL;...'
CSSSTYLEDEC.PROP #'VAL'. PROP is camelcase
#float -> cssFloat
CSSSTYLEDEC.getPropertyValue('prop')->'VAL' #
CSSSTYLEDEC. #Like CSSSTYLEDEC.PROP but:
getPropertyPriority('prop')->'important|' # - 'prop' lowercase with dash
CSSSTYLEDEC.setProperty # - can get|set !important
('prop', 'VAL'[, 'important']) # - can remove
CSSSTYLEDEC.removeProperty('prop')->'VAL' # - can manipulate CSS variables
CSSSTYLEDEC.parentRule #CSSRULE|null
DOCUMENT.styleSheets #STYLESHEETLIST
STYLESHEETLIST.length
STYLESHEETLIST[UINT]
StyleSheet #
STYLESHEET.ownerNode #NODE (usually STYLE|LINK).
STYLESHEET.type #
STYLESHEET.href #
STYLESHEET.title #
STYLESHEET.disabled #Same as STYLESHEET.ownerNode.type|href|title|disabled
CSSStyleSheet #STYLESHEET child
CSSSTYLESHEET.cssRules #CSSRULELIST (CSSRULE_ARR-like)
#Can be null for same-origin policy reasons
CSSSTYLESHEET.insertRule
('SELECTORS { ... }', UINT) #
CSSSTYLESHEET.deleteRule(UINT) #
CSSRule #
RULE.parentStyleSheet #CSSSTYLESHEET
RULE.parentRule #Parent RULE (e.g. in CSSMEDIARULE), or null
RULE.type #ENUM among CSSRule.STYLE|CHARSET|IMPORT|MEDIA|NAMESPACE|FONT_FACE|PAGE|...|UNKNOWN_RULE
#Readonly
RULE.cssText #'SELECTORS { ... }'. Readonly.
CSSStyleRule #CSSRULE for usual rule
STYLERULE.selectorText #'SELECTORS'. Readonly.
STYLERULE.style #Readonly CSSSTYLEDEC
CSSPageRule #CSSRULE for @page
PAGERULE.style #Readonly CSSSTYLEDEC
CSSKeyframesRule #CSSRULE for @keyframes
KEYFRAMESRULE.name #'KEYFRAMES'
KEYFRAMESRULE.cssRules #KEYFRAMERULE_ARR (array-like)
KEYFRAMESRULE.appendRule('PERC,... { ... }') #
KEYFRAMESRULE.find|deleteRule('PERC,...') #
CSSKeyframeRule #CSSRULE for PERC,... { ... } inside @keyframes
KEYFRAMERULE.keyText #'PERC,...'
KEYFRAMERULE.style #Readonly CSSSTYLEDEC
CSSNamespaceRule #CSSRULE for @namespae
NAMESPACERULE.namespaceURI #
NAMESPACERULE.prefix #
CSSImportRule #CSSRULE for @import
IMPORTRULE.href #
IMPORTRULE.styleSheet #Referenced CSSSTYLESHEET
STYLESHEET.parentStyleSheet #Parent STYLESHEET (when @import was used) or null
CSSSTYLESHEET.ownerRule #Parent IMPORTRULE or null
CSSMediaRule #CSSRULE for @media
MEDIARULE.cssRules|insert|deleteRule(...) #Like CSSSTYLESHEET
/=+===============================+=\
/ : : \
)==: DEVICE :==(
\ :_______________________________: /
\=+===============================+=/
RESOLUTION ==> # - also called pixel density
# - can be for:
# - logical|virtual|CSS pixels (browser-level)
# - used in CSS/JavaScript for LEN
# - also called DP|PT (device independant pixels|points)
# - physical|hardware|device pixels (device-level)
# - used in CSS/JavaScript for RESOLUTION
# - ratio between both is pixel ratio:
# - WINDOW.devicePixelRatio
# - usually:
# - LDPI: 0.75
# - MDPI: 1
# - TVDPI: 1.33
# - HDPI|HiDPI: 1.5
# - XHDPI: 2
# - XXHDPI: 3
# - XXXHDPI: 4
# - unit is dppx (dot per pixel)
# - "retina display" is marketing term for higher one
# - painting is done at physical resolution not logical one:
# - vector graphics (e.g. fonts, lines, SVG) will always look better
# - bitmap graphics (e.g. images, videos) will look better if size matches physical resolution
# - ppi (pixel per inch) (computers) vs dpi (dots per pixel) (print but also used as synonymous for ppi)
# - max resolution a really good eye can perceive:
# - RESOLUTION (ppi) = 12000/DISTANCE (cm)
# - examples:
# - phone: 400-800ppi
# - tablets: 250-550ppi
# - laptops: 160-270ppi
# - TV: 60-120ppi
WINDOW.devicePixelRatio #See above
ZOOM ==> #Modifies physical resolution:
# - not logical, i.e. logical sizes|dimensions will be kept (except for the jittering caused by changing number of available logical pixels)
#Difference:
# - zoom changes physical resolution by changing available physical pixels (not logical)
# - high-resolution displays changes physical resolution by changing available logical pixels (not physical)
#Since it changes available logical pixels:
# - it will move things around and change elements dimensions|positions
# - but zooming in is theoritically the same as a device with smaller logical dimensions and higher physical resolution
TYPICAL SIZES ==> #In CSS pixels:
# - smartphones: 320-400 x 480-700
# - phablets: 360-440 x 640-780
# - tablets: 600-800 x 1000-1300
# - notebooks/monitors: 1024-2560 x 768-1600
<meta name="viewport" content="WORD, ...">/ #WORD:
# - width|height=NUM|device-width|height:
# - viewport logical size, on mobile browsers
# - as such, it changes pixel ratio
# - def: desktop-like size, e.g. 980 for width (for non-responsive websites)
# - device-width|height:
# - use SCREEN.width|height, i.e. fits real mobile mobile size (with "normal" pixel ratio)
# - should use width=device-width
# - not updated on rotation, unless initial-scale defined (should do it)
# - initial|minimum|maximum-scale=DOUBLE: zoom value, from 0.0 to 10.0
# - def initial-scale:
# - zoom out to fit content.
# - should be 1 instead if website is responsive
# - user-scalable=yes|no:
# - user can zoom-in|out (def: yes)
# - should be enabled (better accessibility)
# - disabling zoom used to also disable the 300ms tap delay (used for double-tap zooms), but this delay is not used anymore
# - shrink-to-fit=yes|no:
# - zoom out to fit content
# - Def: yes, should be no
# - Mobile Safari-specific
FREQUENCY ==> #Frame rate|frequency:
# - number of frames per second (FPS)
# - often expressed in Hz
# - usually 60Hz
ROTATION ==> #Can force rotation lock with @media (orientation) + html { transform: rotate(90deg); }
SCREEN.colorDepth #Should always be 24, i.e. 8/channel with RGB.
SCREEN.pixelDepth #Same as colorDepth
/=+===============================+=\
/ : : \
)==: TYPES :==(
\ :_______________________________: /
\=+===============================+=/
STR
"STR"
'STR' #
VAR #VAR names, e.g. COUNTER_VAR
INT #
NUM #Single-precision FLOAT, can use scientific notation.
LEN #Relative to font-size:
# - NUMrem: 1em === <html> font-size
# - NUMem: 1em === current font-size
# - when inherited, 1em === parent (that uses NUMem) font-size
# - to always use current font-size instead, use NUM (only with line-height)
# - NUMex: lowercase x-height (baseline to meanline) in current font-size
# - NUMch: '0' width (including left|right bearing (i.e. spaces)) in current font-size
#Relative to viewport size (i.e. only visible part):
# - NUMvh|vw: 1% of viewport height|width
# - NUMvmin: 1% of viewport min(height, width)
#Absolute:
# - NUMpx: logical pixels
# - NUMin|pc|pt|cm|mm (avoid):
# - number of logical pixels using 96ppi logical resolution
# - 96px = 1in = 6pc = 72pt = 2.54cm = 25.4mm
PERC #Percentage. Depends on property.
LENP #LEN|PERC
LENGTHS ==> #Which unit to use, according to whether size depends on:
# - textual content (e.g. should keep number of lines or chars per line):
# - em (uppercase height)
# - ex (lowercase x-height)
# - ch (width)
# - container:
# - parent: %
# - should be used in most components, so they are layout-agnostic
# - viewport: v*
# - should only be used in big|page-size layout components
# - nothing: px
#font-size property:
# - should use:
# - rem: at component root to reset font size
# - em: otherwise
# - only em|rem use browser default font size (for accessibility)
#calc(LEN + v*) is often used:
# - "CSS locks":
# - removing v* under|above some viewport size (using media queries) so that is does not decrease|increase too much
# - must add NUMpx to LEN in order to compensate loss of v* (to keep continuity)
# - e.g. if 5vw, NUM = 0.05 * breakpoint viewport width
# - using em|rem in LEN:
# - should be done with font-size (see above)
# - e.g. root font-size: calc(1rem + NUMpx + NUM2vmin)
# - with "CSS locks", should keep same em|rem across breakpoints:
# - otherwise continuity cannot be calculated (since default browser font size is unknown)
# - i.e. should change rest of LEN instead, e.g. NUMpx
RESOLUTION #NUMdpi (physical resolution)
DIRECTION #top|left|bottom|right|center
POSITION #[DIRECTION] [LENP] [DIRECTION2] [LENP2]
#Syntax:
# - DIRECTION2 must be specified if DIRECTION and LENP[2] are
# - center cannot use LENP[2] 0
#Def:
# - DIRECTION: left
# - DIRECTION2: top if LENP2 specified, center otherwise
# - LENP[2]: 0
ANGLE #NUMdeg, NUMrad, NUMgrad, NUMturn. Can be negative.
TIME #TIMEms|TIMEs
COLOR #Can be:
# - STR, including blue, red, etc. (SVG color keywords) (avoid)
# - #NNN[A][NNN[A]]
$# CSSNext 'colorHexAlpha' when specifying alpha
# - rgb[a](255|100%,255|100%,255|100%[,1])
# - hsl[a](360,100%,100%[,1])
$# - hwb(360,100%,100%[,1])
$# CSSNext 'colorHwb'
$# - gray(VAL[,1]): same as rgba(VAL, VAL, VAL[,1])
$# CSSNext 'colorGray'
# - transparent: like rgba(1,1,1,0)
# - currentColor: current font "color"
$# - color(COLOR|HUE [MOD(VAL) ...])
$# - where MOD(VAL) can be:
$# - red|green|blue|alpha|a([+|-|* ]NUM|PERC)
$# - hue|saturation|lightness([+|-|* ]PERC)
$# - whiteness|blackness([+|-|* ]PERC)
$# - blend(COLOR2 PERC [rgb|hsl|hwb])
$# - tint|shade(PERC): same as blend(white|black PERC rgb)
$# - contrast(PERC): create different color with sufficient contrast
$$# - not supported by CSSNext: COLOR cannot be currentColor
$# - CSSNext 'colorFunction'
URI #url("URI")|none
GRADIENT #[repeating-]linear-gradient(ANGLE|STR, COLOR[ LENP],...)
# - STR: to [left|right] [top|bottom] (def: to bottom)
# - LENP: def: 0|100% for begin|end, interpolation for others.
# Cannot be negative.
#[repeating-]radial-gradient([STR][ VAL][at POSITION], COLOR[ PERC],...)
# - STR: circle or ellipse (déf)
# - VAL is radius (def: farthest-corner):
# - STR: closest|farthest-corner|side
# - LEN for circle, LENP LENP2 for ellipse
# - POSITION is center (def: center)
$#conic-gradient([from ANGLE] [at POSITION], COLOR[ ANGLE2|PERC2][ANGLE3|PERC3])
$# - ANGLE (def: 0deg): starting angle
$# - POSITION is center (def: center)
$# - ANGLE3|PERC3:
$# - adds a second color stop with same COLOR
$# - so there is plain (non-interpolated) color between the two color stops with same COLOR
$# - 'postcss-conic-gradient' (to document when used) (does not seem to support from ANGLE or at POSITION)
IMAGE #URI|GRADIENT
FUNC #FUNC(ARG)
calc(EXPR) #Perform - + * / operations:
# - any NUM value, with[out] units
# - for * /, only one side can have unit
# - for + -, can mix units
# - can use ( )
# - must use space around operators
#Cannot be used in MEDIAQUERY
VAL,... #Usually used for similar-kind values
VAL ... #Usually used for different-kind values (e.g. shorthands), and for positions lists
/=+===============================+=\
/ : : \
)==: BASIC SYNTAX :==(
\ :_______________________________: /
\=+===============================+=/
CASE ==> #Case sensitive.
WHITESPACES ==> #Skips whitespaces.
ERRORS ==> #Unknown @RULE|PROP|VAL or grammar errors are skipped
#This allows introducing new ones without breaking old browsers
@charset "CHARSET"; #Should always be at beginning with no newline|whitespace before.
#Ex: "UTF-8"
#Not needed if CSS served with Content-Type with correct charset
ESCAPING ==> #Escaping:
# - \CHAR (ASCII only)
# - \XX[XX[XX]]
#Those chars are permitted unescaped:
# - in tokens (VAR, SELECTOR, unquoted STR, etc.): [:alnum:] _
# - in strings (quoted STR, URI, etc.): anything but newline
CSS.escape(STR)->STR $#Escape so it can be used as token or string (e.g. by querySelector())
$#'mathiasbynens CSS.escape' (1.5.0)
/=+===============================+=\
/ : : \
)==: SYNTAX :==(
\ :_______________________________: /
\=+===============================+=/
/* COMMENT */
@STR VAL; #At-rules
SELECTORS { #RULE
PROP: VAL;...
}
VALUE CALCULATION ==> # - declared: as written in CSS prop
# - cascaded: after cascading, i.e. picks one among many declared values
# - specified: after defaulting, i.e. assigning default value if cascading value empty:
# - for inherited properties, and has parent: parent computed value
# - otherwise, default value ("initial value")
# - computed: after non-layout calculation, e.g. resolving relative URI, em, keywords (bold)
# - used: after layout calculation, e.g. resolving auto, %, vh
# - actual: after browser correction, e.g. border-width FLOAT->INT
INHERITANCE ==> #Some properties are inherited by elements children:
# - paragraph-related: text-align, white-space, visibility, etc.
# - font-related: color, font-*, etc.
# - table-related: border-collapse, etc.
# - list-related: list-*
# - quotes
initial $#Used as a VAL, means initial value
$#CSSNext 'initial' (PLUGIN_OPTS: see 'all')
inherit #Used as a VAL, means parent VAL:
# - for inherited properties, allows restoring values, e.g.:
# .CLASS { font-weight: bold; } // Override parent VAL
# .CLASS.CLASS2 { font-weight: inherit; } // Restore parent VAL
# - for non-inherited properties, make them inherited, e.g.:
# PARENT { border: VAL }
# CHILD { border: inherit }
all: VAL $#Same as { PROP: VAL ... } for any possible PROP
$#VAL can be initial|inherit|unset|revert
$#CSSNext 'initial':
$# - initial only
$# - polyfills by replacing with all PROP: initial_value (for all PROP).
$# So should use only once, then inherit from it, otherwise big file size.
$# - PLUGIN_OPTS:
$# - replace BOOL (def: false): whether to only add polyfill or replace 'all'
$# altogether
$# - reset STR: which PROP to use:
$# - 'all' (def)
$# - 'inherited': only PROP that can be inherited
SHORTHAND PROPERTY ==> #Allow defining several properties in one, e.g. border, outline,
#margin, padding, font, etc.
#Note:
# - ommitted VAL takes default value, even if previously defined
# - inherit|initial|unset only works with 1-value syntax
# - order usually does not matter if can guess from parameter types. Otherwise:
# - on positional values:
# - 4: TOP RIGHT BOTTOM LEFT
# - 3: TOP RIGHT|LEFT BOTTOM
# - 2: TOP|BOTTOM RIGHT|LEFT
# - 1: TOP|BOTTOM|RIGHT|LEFT
# - on corners: same but -45deg:
# - 4: TOP-LEFT TOP-RIGHT BOTTOM-RIGHT BOTTOM-LEFT
# - 3: TOP-LEFT TOP-RIGHT|BOTTOM-LEFT BOTTOM-RIGHT
# - 2: TOP-LEFT|BOTTOM-RIGHT TOP-RIGHT|BOTTOM-LEFT
# - 1: TOP-LEFT|BOTTOM-RIGHT|TOP-RIGHT|BOTTOM-LEFT
# - others: see properties
/=+===============================+=\
/ : : \
)==: VARIABLES :==(
\ :_______________________________: /
\=+===============================+=/
--VAR: VAL $#Declare a PROP's value variable
$#Scoping:
$# - scoped to current SELECTORS, including @media.
$# - overrides declarations of VAR for less specific selectors.
$# - CSSnext only supports scoping to :root
$#Updating a variable (e.g. using CSSOM) updates its references.
$#CSSNext 'customProperties'
$#PLUGIN_OPTS:
$# - variables.VAR:
$# - add :root declarations with higher priority
$# - can also use PLUGIN.setVariables(OBJ)
$# - strict BOOL: if true (def), first output default value declaration, then
$# actual declaration
$# - preserve BOOL|STR (def: false):
$# - if true|'computed', keeps --VAR: VAL in output
$# - if true, keeps var(--VAR) in output
$# - appendVariables BOOL (def: false): adds var(--VAR) at the end of output (unless preserve false)
$# - warnings BOOL (def: true)
var(--VAR[, VAL]) $#Use a PROP's value variable
$#VAL is default value
@custom-media --VAR MEDIAQUERYLIST $#Declare a MEDIAQUERYLIST variable
$#CSSNext 'customMedia'
$#PLUGIN_OPTS:
$# - extensions.VAR: declare variables
$# - preserve BOOL (def: false): keeps @custom-media in output
$# - appendExtensions BOOL (def: false): adds @custom-media at end of output
$# (unless preserve false)
(--VAR) $#Use a MEDIAQUERYLIST variable
@custom-selector :--VAR SELECTORS $#Declare a SELECTORS variable
$#Considered a :PSEUDO selector, which evaluates to :matches(SELECTORS)
$#CSSNext 'customSelectors'
$#PLUGIN_OPTS:
$# - extensions[:--VAR]: declare variables
$# - transformMatches BOOL (def: true): transform to :matches(SELECTORS)
$# - lineBreak BOOL (def: true): add newline after ,
:--VAR $#Use a SELECTORS variable
--MIXIN { PROP: VAL, ... }; $#Declare a MIXIN.
$#Must be scoped by a selector, including :root
$#When redefined, it resets previous definition (as opposed to merging)
$#CSSNext 'applyRule':
$# - only scoped to :root
@apply --MIXIN; $#Use a MIXIN, i.e. expand it.
$#Must be where a PROP would have been
/=+===============================+=\
/ : : \
)==: AT-RULES :==(
\ :_______________________________: /
\=+===============================+=/
@import URI|"URI" [MEDIAQUERY] #Must be put first, but after @charset
@namespace [NAMESPACE] URI|"URI" #Define an XML NAMESPACE or the default one (URI points to XML namespace)
#This allows using NAMESPACE|SELECTOR, to restrict to a given NAMESPACE,
#or SELECTOR to use default one.
#Useful e.g. when mixing SVG with XHTML.
#Must be put first, but after @charset|import
/=+===============================+=\
/ : : \
)==: MEDIA QUERIES :==(
\ :_______________________________: /
\=+===============================+=/
@media MEDIAQUERYLIST { RULE } #Fire RULE if MEDIAQUERYLIST is met:
# - MEDIAQUERYLIST: [not] MEDIAQUERY,...
# - comma is 'or'
# - MEDIAQUERY:
# - MEDIA|(FEATURE) [and ...]
# - if present, MEDIA must be first
# - MEDIA: "all|screen|print|speech" (def: 'all'): device type
# - (FEATURE) is either:
# - ([min-|max-]VAR[: VAL]) (def VAL: "not 0")
$# - ([NUM OP] VAR [OP2 NUM2]), where OP is < <= = >= >
$# CSSNext 'mediaQueriesRange'
# - VAR|VAL are:
# - height|width LEN: viewport size
# - aspect-ratio NUM/NUM2 (e.g. 16/9)
# - resolution RESOLUTION
## Ext: -webkit. Called device-pixel-ratio on Safari
# - orientation landscape|portrait
# - color NUM: bits/channel (0 if no colors)
# - color-index NUM: number of indexed colors (0 if none)
# - monochrome NUM: bits/channel. If not monochrome, 0.
# - scan progressive|interlace (for tv)
# - grid NUM: 1 if tty or feature phone old display (0 otherwise)
$# - hover none|hover (def: hover):
$# - input device can hover (e.g. mouse, not touchscreen)
$# - primary input only, i.e. secondary input might have different behavior
$# - 'mq4-hover-shim' (0.3.0) (PostCSS) (to document when used)
<link|style|source>
media="MEDIAQUERYLIST" #Does not work for <link rel="import">
STYLESHEET|MEDIARULE|IMPORTRULE.media #MEDIALIST
MEDIALIST.length
MEDIALIST[UINT] #'MEDIAQUERY'
MEDIALIST.mediaText #'MEDIAQUERYLIST'
MEDIALIST.appendMedium('MEDIAQUERY')
MEDIALIST.deleteMedium('MEDIAQUERY') #
WINDOW.matchMedia("MEDIAQUERYLIST")->MQUERYLIST #
MEDIAQUERYLIST.media #"MEDIAQUERYLIST". Readonly
MEDIAQUERYLIST.matches #BOOL
MEDIAQUERYLIST.add|removeListener
(FUNC("MEDIAQUERYLIST")) #When matches changes.
/=+===============================+=\
/ : : \
)==: SELECTORS :==(
\ :_______________________________: /
\=+===============================+=/
SPECIFICITY ==> #When several SELECTOR for the same element.
#Priority is 'specificity', checking:
# - !important > HTML-inline > #ID > .CLASS|:PSEUDO|[ATTR] > TAG|::PSEUDO > declaration source order (even if async)
# - compare first, then second, etc.
# - often noted '[[NUM,]NUM2,]NUM3,NUM4,NUM5'
# - * is never counted
# - add points to matching SELECTOR, i.e.:
# - SSELECTOR combinators (except ,): add points
# - SELECTOR,... or :matches(SELECTOR,...): only matching ones
# - :not(SELECTOR,...): max points
# - avoid !important
#Also depends on origin of the stylesheet:
# - user agent < end-user < website
# - order inverted if !important
SELECTORS #Same as SELECTOR,...
SELECTOR #Include combinators
SSELECTOR #Exclude combinators
SELECTOR, SELECTOR2,... #Or
SSELECTORSSELECTOR2 #And
SSELECTOR SSELECTOR2 ... #Descendant
SSELECTOR > SSELECTOR2 >... #Direct child
SSELECTOR + SSELECTOR2 +... #Direct next sibling
SSELECTOR ~ SSELECTOR2 ~... #Any following sibling
SELECTORS { [@nest] SELECTORS2 { ... } } $#Each SELECTOR2 must contain &:
$# - SELECTORS is removed, but replaces each & by :matches(SELECTORS)
$# - @nest is mandatory if SELECTORS2 does not start with &
$#CSSNext 'nesting'
SELECTORS { @RULE { ... } } $#Same as @RULE { SELECTORS { ... } }
$#CSSNext 'nesting'
$#PLUGIN_OPTS:
$# - bubble STR_ARR (def: 'document', 'media', 'supports'): supported @RULE
@RULE { @RULE2 { ... } ... } $#Combines @RULEs
$#CSSNext 'nesting'
:not(SELECTOR,...) #!SELECTOR && ...
$#CSSNext 'pseudoClassNot' (using several SELECTOR,...)
:matches(SELECTOR,...) $#SELECTOR || ...
$#CSSNext 'pseudoClassMatches' (only works with several SELECTOR)
$#PLUGIN_OPTS: lineBreak BOOL (def: false)
* #Any. To avoid.
TAG #<TAG>
[ATTR] #ATTR exists
[ATTR="STR"] #ATTR value === "STR"
[ATTR$="STR"] #ATTR value === "[...]STR"
[ATTR^="STR"] #ATTR value === "STR[...]"
[ATTR|="STR"] #ATTR value === "STR[-...]"
[ATTR*="STR"] #ATTR value === "[...]STR[...]"
[ATTR~="STR"] #ATTR value === "[... ]STR[ ...]"
#ID #Same as [id="ID"]. Prefer using .CLASS
.CLASS #Same as [class~="CLASS"]
:enabled|disabled #ELEM.disabled
:checked #ELEM.checked|selected
:lang(LANG) #Like [lang="LANG"] but case-insensitive, and includes parents
:target #ID is URL's #HASH
##IE11<: does not react to back|forward history buttons
:required #Like input|textarea|select[required]
:optional #Like input|textarea|select:not([required])
:indeterminate #Like input[type="checkbox"] + ELEM.indeterminate === true
:[in]valid #ELEM.validity.valid
:link #Like [href], not previously clicked on it.
#Should follow this order: :link, :visited, :hover, :active
:visited #Like [href], previously clicked on it.
#Can apply change color-related properties (and not opacity).
:any-link $#Like [href], previously clicked on it or not
$#CSSNext 'pseudoClassAnyLink'
:root #<html>
::placeholder #<input|textarea> placeholder
#Can only change font, text decoration and background properties
##Called ::input-placeholder by IE (automatically handled by Autoprefixer)
:empty #Has no child
:nth-child([NUMn] + [NUM2]) #Current element is x-th's child of its parent, where x === NUM*n + NUM2, with n>0
#NUM|NUM2 can be negative.
#Can also be :nth-child(odd|event), i.e. 2n[+1]
:nth-last-child(...) #Same but counting children from the end.
:first|last-child #Same as :nth-[last-]child(1)
:only-child #Same as :first-child:last-child
:...-of-type #Same as :...-child, but consider children tag by tag.
:hover #On mouseover.
:active #On clickdown.
:focus #On focus.
::selection #On selection.
#Can only change color, background-color, outline, text-decoration, text-emphasis-color, text-shadow
#Setting one resets the others
::first-letter #Can only change font, text decoration, background and box model properties
#Does not work with flexbox
#Display BLOCK only
::first-line #Can only change font, text decoration and background properties
#Does not work with flexbox
#Display BLOCK only
/=+===============================+=\
/ : : \
)==: DIMENSIONS :==(
\ :_______________________________: /
\=+===============================+=/
BOX MODEL ==> #Content > Padding > Border > Margin
[min|max-]height|width: LENP|auto #Actual content:
# - def: auto, i.e. according to content
# - exception: BODY, according to viewport (except for its scrollbar, the top-level one)
# - Can use box-sizing: content-box|border-box:
# - if border-box, specifies border-box height|width, not actual content
# - for browser compatibility (useless)
# - percentage:
# - *width:
# - containing block's width
# - *height:
# - if position: absolute|fixed, containing block's height
# - otherwise, closest containing block's with specified height
# - otherwise, <body> height
# - Display BLOCK only
padding[-top|bottom|left|right]: LENP #Padding:
# - space between content and border
# - def: 0
# - Percentage: containing block's width
border-top|bottom|left|right-width: LEN|STR #Border: see below (def: medium, but border-style none)
margin[-top|bottom|left|right]: LENP|auto #Margin:
# - margin-top|bottom: Display BLOCK only
# - can be negative:
# - left|top: will move element itself
# - right|bottom: will move next elements
# - def: 0
# - Percentage: like padding
# - auto: like 0, except horizontally centers if:
# - on both margin-left|right
# - not floats
# - if position: absolute|fixed, both left and right not 'auto'
# - Display BLOCK only
# - collapsed:
# - when two margin-top|bottom follow each other with nothing in-between, e.g.:
# - margin-bottom and margin-top of an element with content+padding+border 0px
# - nothing (border|padding, text node, etc.) separating:
# - first child's margin-top and parent's margin-top
# - last child's margin-bottom and parent's margin-bottom
# - two vertical siblings (not necessarily same tag)
# - only bigger margin is kept.
# If negative NUM, sum of smallest negative NUM and biggest positive NUM.
# - both elements must be normal flow and not flex items|containerss
line-height: LENP|normal|NUM #Line boxes min-height
#Display INLINE only
#Percentage: like using NUMem
#NUM (prefer) is like NUMem, but always current font-size even when inherited (see above)
#Def: normal (around 1.2)
/=+===============================+=\
/ : : \
)==: CSSOM VIEW: DIMENSIONS :==(
\ :_______________________________: /
\=+===============================+=/
WINDOW.screen #SCREEN
WINDOW.screenX|Y #Distance between real screen topleft corner and browser window topleft corner.
SCREEN.width|height #Real screen size.
#IE: takes zoom into account
SCREEN.availWidth|Height #SCREEN.width|height minus OS's UI
WINDOW.outerHeight|Width #Browser tab screen size (including browser UI)
SCROLLING HEIGHT|WIDTH ==> #If scrollable, difference between:
# - visual dimensions|viewport: only visible part
# - layout dimensions|viewport: also non-visible part
#'scrollable':
# - means scrolling on the given element, not a parent
# - i.e. only BODY are 'scrollable' according to top-level scroll
#Unless specified:
# - WINDOW|HTML|BODY: layout dimensions
# - ELEM: visual dimensions
# - all: include scrollbar
#BODY:
# - width: auto: see above
# - scrollHeight uses HTML margin-box instead
WINDOW.innerHeight|Width #Viewport size (including scrollbar)
HTMLELEM.offsetHeight|Width #Border-box (readonly)
ELEM.clientHeight|Width #Padding-box (display BLOCK only) (readonly) (visual dimensions) (excluding scrollbar)
ELEM.scrollHeight|Width #Padding-box (display BLOCK only) (readonly) (layout dimensions) (excluding scrollbar)
ELEM.clientTop|Left #Top|Left border-width (display BLOCK only) (readonly)
/=+===============================+=\
/ : : \
)==: DISPLAY :==(
\ :_______________________________: /
\=+===============================+=/
TEXT NODES ==> #display: block but behaves like Display INLINE
display: VAL #Default depends on HTML tag:
# - <table>-related elements: display: table-*
# - <li>: display: list-item
# - <ol|ul>: display: block
# - invisible content, like <head|link|script|meta|title|base>: display: none
# - top-level controls, like <input|button|textarea|select>: display: inline-block
# - lower-level controls, like <optgroup|option>: display: block
# - replaced elements: no default display
# - phrasing content, like <span>: display: inline
# - sectioning content, like <div|p>: display: block
display: inline|inline-block|block #Differences:
# - normal flow:
# - inline elements stacked horizontally (using line boxes)
# - block vertically
# - inline-block horizontally unless they span another line
# - inline[-*] usually phrasing content, block usually sectioning or embedded content
# - some properties are only for Display BLOCK (e.g. *width|height, margin-top|bottom), others only for Display INLINE (e.g. line-height)
Display BLOCK #Means not display: inline
Display INLINE #Means display: inline[-*]
SPACES BETWEEN INLINE ELEMENTS ==> #HTML whitespace between inline elements is collapsed as a single space character.
#This is not always wanted, especially for inline-block elements.
#Possible solutions:
# - avoid HTML whitespace, e.g. wrapping it in a comment or omitting optional end tags (e.g. <li>)
# - fix with CSS:
# - manual positioning
# - or parent font-size to 0 (for the inserted space) then override on the children
# - in both cases, word-spacing will increase space size, so should not be used
display: none #Remove element from layout
<any> #Like display:none but:
hidden # - overriden if CSS display specified
# - to use when should never be shown in current state
visibility: STR #Affect visibility:
# - visible (def)
# - hidden: but does not affect layout
/=+===============================+=\
/ : : \
)==: POSITION :==(
\ :_______________________________: /
\=+===============================+=/
CONTAINING BLOCK ==> #Means (according to position):
# - static|relative or floats: closest parent's content box with Display BLOCK
# - absolute: closest positioned parent's padding box (if none, <body>)
# - fixed: viewport (i.e. not affected by scrolling)
POSITIONED ==> #Means position: relative|absolute|fixed
NORMAL FLOW ==> #
position: static # - normal (def)
position: relative # - same, but with shift relative to normal position.
# Siblings and parents stay at same position.
FLOATS ==> #
float: left|right|none #Align to left|right, taking space normal flow cannot occupy anymore:
# - taken out of normal flow, e.g. does not modify parent's height|width (see clearfix)
# - will stack horizontally with other floats (unless clear: left|right|both)
# - forces display: block|table
clear: none|left|right|both #Shift element down to the lowest left|right|both floating box
#No effect on position: absolute|fixed
#"Clearfix":
# - make float's parent's min-height === float's height
# - how: set on parent those properties:
# - overflow: hidden|auto
# - or content: "" (with :after), display: block|table, clear: both
# - for IE7, used to require also zoom: 1 or width: 100%
ABSOLUTE ==> #Taken out of normal flow:
position: absolute|fixed # - margin-box relative to containing block
top|bottom|right|left: LENP|auto #Specify shift|position with position: relative|absolute|fixed
#Def: auto, i.e. 'not specified'
#Percentage:
# - containing block's height|width
# - top|bottom with position: relative has no effect
STACKING CONTEXT ==> #Created when:
# - <html> (root)
# - z-index non-auto
# - opacity, blend mode, filter
# - transform
# - will-change
# - @page @POSITION
# - CSS region
#Stacking context are isolated from each other:
# - children are stacked independently of their stacking context's siblings|parents
#Inside a stacking context (but not recursively) elements are stacked according to (in order):
# - position: positioned + z-index>=0 > static (including parent) > positioned + z-index<0 > stacking context top element
# - positioned: absolute|fixed > float > relative
# - z-index: higher is on top
# - DOM order
z-index: NUM|auto #auto (def): like 0 except does not create stacking context
#No effect (including creating stacking context) if position: static, unless flexbox item
/=+===============================+=\
/ : : \
)==: FULLSCREEN :==(
\ :_______________________________: /
\=+===============================+=/