diff --git a/README.md b/README.md index acbd184..3bd38cc 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +[deprecated] 301 jump to https://github.com/jsit/css.vim + + Vim CSS Syntax File ------------ @@ -13,20 +16,13 @@ copy `css.vim` file into your `~/.vim/syntax/` directory; add the following line to your `~/.vimrc` file; ``` -Bundle "JulesWang/css.vim" +Plugin 'JulesWang/css.vim' ``` -and run `:BundleInstall` in vim. - -Change Log ------------- -* 2013-01-13: added support for installation using vundle -* 2011-10-15: add 130 more color names. -* 2011-09-13: test and add some missing items. -* 2011-09-11: 80% css3 support. +and run `:PluginInstall` in vim. Thanks ------------ -* ChrisYip https://github.com/amadeus/Better-CSS-Syntax-for-Vim +* ChrisYip, amadeus https://github.com/amadeus/Better-CSS-Syntax-for-Vim * hail2u https://github.com/hail2u/vim-css3-syntax * leptrue https://github.com/lepture/vim-css diff --git a/syntax/css.vim b/syntax/css.vim index d6fb975..cd61998 100644 --- a/syntax/css.vim +++ b/syntax/css.vim @@ -4,19 +4,18 @@ " Claudio Fleiner (Maintainer) " Yeti (Add full CSS2, HTML4 support) " Nikolai Weibull (Add CSS2 support) -" Maintainer: Jules Wang " URL: https://github.com/JulesWang/css.vim -" Last Change: 2012 Dec 15 +" Maintainer: Jules Wang +" Last Change: 2019 Jul. 29 -" For version 5.x: Clear all syntax items -" For version 6.x: Quit when a syntax file was already loaded +" quit when a syntax file was already loaded if !exists("main_syntax") - if version < 600 - syntax clear - elseif exists("b:current_syntax") - finish -endif + if exists("b:current_syntax") + finish + endif let main_syntax = 'css' +elseif exists("b:current_syntax") && b:current_syntax == "css" + finish endif let s:cpo_save = &cpo @@ -24,41 +23,41 @@ set cpo&vim syn case ignore -" All HTML4 tags -syn keyword cssTagName abbr acronym address applet area a b base -syn keyword cssTagName basefont bdo big blockquote body br button -syn keyword cssTagName caption center cite code col colgroup dd del -syn keyword cssTagName dfn dir div dl dt em fieldset font form frame -syn keyword cssTagName frameset h1 h2 h3 h4 h5 h6 head hr html img i -syn keyword cssTagName iframe img input ins isindex kbd label legend li -syn keyword cssTagName link map menu meta noframes noscript ol optgroup -syn keyword cssTagName option p param pre q s samp script select small -syn keyword cssTagName span strike strong style sub sup table tbody td -syn keyword cssTagName textarea tfoot th thead title tr tt ul u var -syn keyword cssTagName object - -" HTML5 new tags 5*6=30 -syn keyword cssTagName article aside audio bdi canvas command -syn keyword cssTagName datalist details embed figcaption figure footer -syn keyword cssTagName header hgroup keygen mark meter nav +" HTML4 tags +syn keyword cssTagName abbr address area a b base +syn keyword cssTagName bdo blockquote body br button +syn keyword cssTagName caption cite code col colgroup dd del +syn keyword cssTagName dfn div dl dt em fieldset form +syn keyword cssTagName h1 h2 h3 h4 h5 h6 head hr html img i +syn keyword cssTagName iframe input ins isindex kbd label legend li +syn keyword cssTagName link map menu meta noscript ol optgroup +syn keyword cssTagName option p param pre q s samp script small +syn keyword cssTagName span strong sub sup tbody td +syn keyword cssTagName textarea tfoot th thead title tr ul u var +syn keyword cssTagName object svg +syn match cssTagName /\\|\\|\/ + +" 34 HTML5 tags +syn keyword cssTagName article aside audio bdi canvas command data +syn keyword cssTagName datalist details dialog embed figcaption figure footer +syn keyword cssTagName header hgroup keygen main mark menuitem meter nav syn keyword cssTagName output progress rt rp ruby section syn keyword cssTagName source summary time track video wbr " Tags not supported in HTML5 -syn keyword cssDeprecated acronym applet basefont big center dir -syn keyword cssDeprecated font frame frameset noframes strike tt +" acronym applet basefont big center dir +" font frame frameset noframes strike tt -"syn match cssTagName "\" syn match cssTagName "\*" " selectors -syn match cssSelectorOp "[,>+]" +syn match cssSelectorOp "[,>+~]" syn match cssSelectorOp2 "[~|^$*]\?=" contained -" FIXME: add HTML5 attribute -syn region cssAttributeSelector matchgroup=cssSelectorOp start="\[" end="]" transparent contains=cssUnicodeEscape,cssSelectorOp2,cssStringQ,cssStringQQ +syn region cssAttributeSelector matchgroup=cssSelectorOp start="\[" end="]" contains=cssUnicodeEscape,cssSelectorOp2,cssStringQ,cssStringQQ " .class and #id -syn match cssClassName "\.[A-Za-z][A-Za-z0-9_-]\+" +syn match cssClassName "\.-\=[A-Za-z_][A-Za-z0-9_-]*" contains=cssClassNameDot +syn match cssClassNameDot contained '\.' try syn match cssIdentifier "#[A-Za-zĄ-’_@][A-Za-zĄ-’0-9_@-]*" @@ -66,30 +65,14 @@ catch /^.*/ syn match cssIdentifier "#[A-Za-z_@][A-Za-z0-9_@-]*" endtry -syn match cssTagName "@page\>" nextgroup=cssDefinition -" FIXME: use cssVendor here -syn match cssTagName "@\(-\(webkit\|moz\|o\|ms\)-\)\=keyframes\>" nextgroup=cssDefinition - -syn match cssMedia "@media\>" nextgroup=cssMediaType skipwhite skipnl -syn keyword cssMediaType contained screen print aural braile embosed handheld projection ty tv all nextgroup=cssMediaComma,cssMediaBlock skipwhite skipnl -"syn match cssMediaComma "," nextgroup=cssMediaType skipwhite skipnl -syn region cssMediaBlock transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssError,cssComment,cssDefinition,cssURL,cssUnicodeEscape,cssIdentifier - -syn match cssValueInteger contained "[-+]\=\d\+" -syn match cssValueNumber contained "[-+]\=\d\+\(\.\d*\)\=" -syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|rem\)" -syn match cssValueAngle contained "[-+]\=\d\+\(\.\d*\)\=\(deg\|grad\|rad\)" -syn match cssValueTime contained "+\=\d\+\(\.\d*\)\=\(ms\|s\)" -syn match cssValueFrequency contained "+\=\d\+\(\.\d*\)\=\(Hz\|kHz\)" - -syn match cssFontDescriptor "@font-face\>" nextgroup=cssFontDescriptorBlock skipwhite skipnl -syn region cssFontDescriptorBlock contained transparent matchgroup=cssBraces start="{" end="}" contains=cssComment,cssError,cssUnicodeEscape,cssFontProp,cssFontAttr,cssCommonAttr,cssStringQ,cssStringQQ,cssFontDescriptorProp,cssValue.*,cssFontDescriptorFunction,cssUnicodeRange,cssFontDescriptorAttr -syn match cssFontDescriptorProp contained "\<\(unicode-range\|unit-per-em\|panose-1\|cap-height\|x-height\|definition-src\)\>" -syn keyword cssFontDescriptorProp contained src stemv stemh slope ascent descent widths bbox baseline centerline mathline topline -syn keyword cssFontDescriptorAttr contained all -syn region cssFontDescriptorFunction contained matchgroup=cssFunctionName start="\<\(uri\|url\|local\|format\)\s*(" end=")" contains=cssStringQ,cssStringQQ oneline keepend -syn match cssUnicodeRange contained "U+[0-9A-Fa-f?]\+" -syn match cssUnicodeRange contained "U+\x\+-\x\+" +" digits +syn match cssValueInteger contained "[-+]\=\d\+" contains=cssUnitDecorators +syn match cssValueNumber contained "[-+]\=\d\+\(\.\d*\)\=" contains=cssUnitDecorators +syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=\(mm\|cm\|in\|pt\|pc\|em\|ex\|px\|rem\|dpi\|dppx\|dpcm\|fr\|vw\|vh\|vmin\|vmax\|ch\)\>" contains=cssUnitDecorators +syn match cssValueLength contained "[-+]\=\d\+\(\.\d*\)\=%" contains=cssUnitDecorators +syn match cssValueAngle contained "[-+]\=\d\+\(\.\d*\)\=\(deg\|grad\|rad\)\>" contains=cssUnitDecorators +syn match cssValueTime contained "+\=\d\+\(\.\d*\)\=\(ms\|s\)\>" contains=cssUnitDecorators +syn match cssValueFrequency contained "+\=\d\+\(\.\d*\)\=\(Hz\|kHz\)\>" contains=cssUnitDecorators " The 16 basic color names syn keyword cssColor contained aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow @@ -98,31 +81,31 @@ syn keyword cssColor contained aqua black blue fuchsia gray green lime maroon na syn keyword cssColor contained aliceblue antiquewhite aquamarine azure syn keyword cssColor contained beige bisque blanchedalmond blueviolet brown burlywood syn keyword cssColor contained cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan -syn match cssColor contained /dark\(blue\|cyan\|goldenrod\|gray\|green\|grey\|khaki\)/ -syn match cssColor contained /dark\(magenta\|olivegreen\|orange\|orchid\|red\|salmon\|seagreen\)/ -syn match cssColor contained /darkslate\(blue\|gray\|grey\)/ -syn match cssColor contained /dark\(turquoise\|violet\)/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ syn keyword cssColor contained deeppink deepskyblue dimgray dimgrey dodgerblue firebrick syn keyword cssColor contained floralwhite forestgreen gainsboro ghostwhite gold syn keyword cssColor contained goldenrod greenyellow grey honeydew hotpink syn keyword cssColor contained indianred indigo ivory khaki lavender lavenderblush lawngreen syn keyword cssColor contained lemonchiffon limegreen linen magenta -syn match cssColor contained /light\(blue\|coral\|cyan\|goldenrodyellow\|gray\|green\)/ -syn match cssColor contained /light\(grey\|pink\|salmon\|seagreen\|skyblue\|yellow\)/ -syn match cssColor contained /light\(slategray\|slategrey\|steelblue\)/ -syn match cssColor contained /medium\(aquamarine\|blue\|orchid\|purple\|seagreen\)/ -syn match cssColor contained /medium\(slateblue\|springgreen\|turquoise\|violetred\)/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ +syn match cssColor contained /\/ syn keyword cssColor contained midnightblue mintcream mistyrose moccasin navajowhite syn keyword cssColor contained oldlace olivedrab orange orangered orchid -syn match cssColor contained /pale\(goldenrod\|green\|turquoise\|violetred\)/ +syn match cssColor contained /\/ syn keyword cssColor contained papayawhip peachpuff peru pink plum powderblue -syn keyword cssColor contained rosybrown royalblue saddlebrown salmon sandybrown -syn keyword cssColor contained seagreen seashell sienna skyblue slateblue +syn keyword cssColor contained rosybrown royalblue rebeccapurple saddlebrown salmon +syn keyword cssColor contained sandybrown seagreen seashell sienna skyblue slateblue syn keyword cssColor contained slategray slategrey snow springgreen steelblue tan syn keyword cssColor contained thistle tomato turquoise violet wheat syn keyword cssColor contained whitesmoke yellowgreen -" FIXME: These are actually case-insentivie too, but (a) specs recommend using +" FIXME: These are actually case-insensitive too, but (a) specs recommend using " mixed-case (b) it's hard to highlight the word `Background' correctly in " all situations syn case match @@ -130,56 +113,91 @@ syn keyword cssColor contained ActiveBorder ActiveCaption AppWorkspace ButtonFac syn case ignore syn match cssImportant contained "!\s*important\>" +syn match cssCustomProp contained "--[a-zA-Z0-9-_]*" syn match cssColor contained "\" +syn match cssColor contained "\" syn match cssColor contained "\" -syn match cssColor contained "#[0-9A-Fa-f]\{3\}\>" -syn match cssColor contained "#[0-9A-Fa-f]\{6\}\>" - -syn region cssURL contained matchgroup=cssFunctionName start="\" +syn match cssColor contained "#\x\{3,4\}\>" contains=cssUnitDecorators +syn match cssColor contained "#\x\{6\}\>" contains=cssUnitDecorators +syn match cssColor contained "#\x\{8\}\>" contains=cssUnitDecorators + +syn region cssURL contained matchgroup=cssFunctionName start="\<\(uri\|url\|local\|format\)\s*(" end=")" contains=cssStringQ,cssStringQQ oneline +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(var\|calc\)\s*(" end=")" contains=cssCustomProp,cssValue.*,cssFunction,cssColor,cssStringQ,cssStringQQ oneline +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgb\|clip\|attr\|counter\|rect\|cubic-bezier\|steps\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(rgba\|hsl\|hsla\|color-stop\|from\|to\)\s*(" end=")" oneline contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunctionComma,cssFunction +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(linear-\|radial-\)\=\gradient\s*(" end=")" oneline contains=cssColor,cssValueInteger,cssValueNumber,cssValueLength,cssFunction,cssGradientAttr,cssFunctionComma +syn region cssFunction contained matchgroup=cssFunctionName start="\<\(matrix\(3d\)\=\|scale\(3d\|X\|Y\|Z\)\=\|translate\(3d\|X\|Y\|Z\)\=\|skew\(X\|Y\)\=\|rotate\(3d\|X\|Y\|Z\)\=\|perspective\)\s*(" end=")" oneline contains=cssValueInteger,cssValueNumber,cssValueLength,cssValueAngle,cssFunctionComma +syn keyword cssGradientAttr contained top bottom left right cover center middle ellipse at +syn match cssFunctionComma contained "," + +" Common Prop and Attr +syn keyword cssCommonAttr contained auto none inherit all default normal +syn keyword cssCommonAttr contained top bottom center stretch hidden visible +syn match cssCommonAttr contained "\<\(max-\|min-\|fit-\)content\>" +"------------------------------------------------ +" CSS Animations +" http://www.w3.org/TR/css3-animations/ +syn match cssAnimationProp contained "\" + +" animation-direction attributes +syn keyword cssAnimationAttr contained alternate reverse +syn match cssAnimationAttr contained "\" + +" animation-fill-mode attributes +syn keyword cssAnimationAttr contained forwards backwards both + +" animation-play-state attributes +syn keyword cssAnimationAttr contained running paused + +" animation-iteration-count attributes +syn keyword cssAnimationAttr contained infinite +"------------------------------------------------ +" CSS Backgrounds and Borders Module Level 3 +" http://www.w3.org/TR/css3-background/ +syn match cssBackgroundProp contained "\" +" background-attachment attributes +syn keyword cssBackgroundAttr contained scroll fixed local + +" background-position attributes +syn keyword cssBackgroundAttr contained left center right top bottom + +" background-repeat attributes +syn match cssBackgroundAttr contained "\" +syn match cssBackgroundAttr contained "\" +" background-size attributes +syn keyword cssBackgroundAttr contained cover contain -syn keyword cssAnimationAttr contained infinite alternate paused running -" bugfix: escape linear-gradient -syn match cssAnimationAttr contained "\" -syn match cssAnimationAttr contained "\" +syn match cssBorderProp contained "\" +syn match cssBorderProp contained "\" +syn match cssBorderProp contained "\" +syn match cssBorderProp contained "\" +syn match cssBorderProp contained "\" -syn match cssBackgroundProp contained "\" -syn keyword cssBackgroundAttr contained center fixed over contain -syn match cssBackgroundAttr contained "\" -syn match cssBackgroundAttr contained "\" -syn match cssBackgroundAttr contained "\<\(border\|content\|padding\)-box\>" +" border-image attributes +syn keyword cssBorderAttr contained stretch round fill +" border-style attributes +syn keyword cssBorderAttr contained dotted dashed solid double groove ridge inset outset -syn match cssBorderOutlineProp contained "\" -syn match cssBorderOutlineProp contained "\" -syn match cssBorderOutlineProp contained "\" -syn match cssBorderOutlineProp contained "\" -syn match cssBorderOutlineProp contained "\" -syn keyword cssBorderOutlineAttr contained thin thick medium -syn keyword cssBorderOutlineAttr contained dotted dashed solid double groove ridge inset outset -syn keyword cssBorderOutlineAttr contained hidden visible scroll collapse -syn keyword cssBorderOutlineAttr contained stretch round +" border-width attributes +syn keyword cssBorderAttr contained thin thick medium +" box-decoration-break attributes +syn keyword cssBorderAttr contained clone slice +"------------------------------------------------ +syn match cssBoxProp contained "\" +syn match cssBoxProp contained "\" syn match cssBoxProp contained "\" -syn match cssBoxProp contained "\" +syn match cssBoxProp contained "\" syn keyword cssBoxAttr contained visible hidden scroll auto syn match cssBoxAttr contained "\" +syn keyword cssCascadeProp contained all +syn keyword cssCascadeAttr contained initial unset revert + syn keyword cssColorProp contained opacity syn match cssColorProp contained "\" syn match cssColorProp contained "\" @@ -189,39 +207,81 @@ syn match cssDimensionProp contained "\<\(min\|max\)-\(width\|height\)\>" syn keyword cssDimensionProp contained height syn keyword cssDimensionProp contained width -" shadow and sizing are in other property groups -syn match cssFlexibleBoxProp contained "\" -syn keyword cssFlexibleBoxAttr contained start end center baseline stretch -syn keyword cssFlexibleBoxAttr contained normal reverse -syn keyword cssFlexibleBoxAttr contained single mulitple -syn keyword cssFlexibleBoxAttr contained horizontal -" bugfix: escape vertial-align -syn match cssFlexibleBoxAttr contained "\" -syn match cssFlexibleBoxAttr contained "\<\(inline\|block\)-axis\>" - - -syn match cssFontProp contained "\" -syn match cssFontAttr contained "\<\(sans-\)\=\" -syn match cssFontAttr contained "\" -syn match cssFontAttr contained "\" -syn match cssFontAttr contained "\" -syn match cssFontAttr contained "\" -syn match cssFontAttr contained "\<\(\(ultra\|extra\|semi\|status-bar\)-\)\=\(condensed\|expanded\)\>" -syn keyword cssFontAttr contained cursive fantasy monospace italic oblique -syn keyword cssFontAttr contained bold bolder light lighter larger smaller -syn keyword cssFontAttr contained icon menu caption -syn keyword cssFontAttr contained large smaller larger narrower wider -syn keyword cssFontAttr contained Courier Arial Georgia Times +" CSS Flexible Box Layout Module Level 1 +" http://www.w3.org/TR/css3-flexbox/ +" CSS Box Alignment Module Level 3 +" http://www.w3.org/TR/css-align-3/ +syn match cssFlexibleBoxProp contained "\" +syn match cssFlexibleBoxProp contained "\<\(align\|justify\)\(-\(items\|self\|content\)\)\=\>" +syn keyword cssFlexibleBoxProp contained order +syn match cssFlexibleBoxAttr contained "\<\(row\|column\|wrap\)\(-reverse\)\=\>" +syn keyword cssFlexibleBoxAttr contained nowrap stretch baseline center +syn match cssFlexibleBoxAttr contained "\" +syn match cssFlexibleBoxAttr contained "\" -syn keyword cssGeneratedContentProp contained content quotes crop +" CSS Fonts Module Level 3 +" http://www.w3.org/TR/css-fonts-3/ +syn match cssFontProp contained "\" + +" font attributes +syn keyword cssFontAttr contained icon menu caption +syn match cssFontAttr contained "\" +syn match cssFontAttr contained "\" +syn keyword cssFontAttr contained larger smaller +syn match cssFontAttr contained "\<\(x\{1,2\}-\)\=\(large\|small\)\>" +syn match cssFontAttr contained "\" +" font-family attributes +syn match cssFontAttr contained "\<\(sans-\)\=serif\>" +syn keyword cssFontAttr contained Antiqua Arial Black Book Charcoal Comic Courier Dingbats Gadget Geneva Georgia Grande Helvetica Impact Linotype Lucida MS Monaco Neue New Palatino Roboto Roman Symbol Tahoma Times Trebuchet Verdana Webdings Wingdings York Zapf +syn keyword cssFontAttr contained cursive fantasy monospace +" font-feature-settings attributes +syn keyword cssFontAttr contained on off +" font-stretch attributes +syn match cssFontAttr contained "\<\(\(ultra\|extra\|semi\)-\)\=\(condensed\|expanded\)\>" +" font-style attributes +syn keyword cssFontAttr contained italic oblique +" font-synthesis attributes +syn keyword cssFontAttr contained weight style +" font-weight attributes +syn keyword cssFontAttr contained bold bolder lighter +" TODO: font-variant-* attributes +"------------------------------------------------ + +" Webkit specific property/attributes +syn match cssFontProp contained "\" +syn match cssFontAttr contained "\<\(subpixel-\)\=\antialiased\>" + + +" CSS Multi-column Layout Module +" http://www.w3.org/TR/css3-multicol/ +syn match cssMultiColumnProp contained "\" +syn match cssMultiColumnProp contained "\" +syn keyword cssMultiColumnProp contained columns +syn keyword cssMultiColumnAttr contained balance medium +syn keyword cssMultiColumnAttr contained always left right page column +syn match cssMultiColumnAttr contained "\" + +" http://www.w3.org/TR/css3-break/#page-break +syn match cssMultiColumnProp contained "\" + +" http://www.w3.org/TR/SVG11/interact.html +syn match cssInteractProp contained "\" +syn match cssInteractAttr contained "\<\(visible\)\=\(Painted\|Fill\|Stroke\)\=\>" + +" TODO find following items in w3c docs. +syn keyword cssGeneratedContentProp contained quotes crop syn match cssGeneratedContentProp contained "\" syn match cssGeneratedContentProp contained "\" syn match cssGeneratedContentProp contained "\" syn match cssGeneratedContentAttr contained "\<\(no-\)\=\(open\|close\)-quote\>" - -syn match cssGridProp contained "\" +" https://www.w3.org/TR/css-grid-1/ +syn match cssGridProp contained "\" +syn match cssGridProp contained "\" +syn match cssGridProp contained "\" +syn match cssGridProp contained "\" +syn match cssGridProp contained "\" syn match cssHyerlinkProp contained "\" @@ -232,46 +292,38 @@ syn match cssListAttr contained "\<\(decimal\(-leading-zero\)\=\|cjk-ideographic syn keyword cssListAttr contained disc circle square hebrew armenian georgian syn keyword cssListAttr contained inside outside - -syn match cssMarginProp contained "\" - -syn match cssMultiColumnProp contained "\" - - -syn match cssPaddingProp contained "\" - syn keyword cssPositioningProp contained bottom clear clip display float left syn keyword cssPositioningProp contained position right top visibility syn match cssPositioningProp contained "\" -syn keyword cssPositioningAttr contained block inline compact +syn keyword cssPositioningAttr contained block compact grid syn match cssPositioningAttr contained "\" syn keyword cssPositioningAttr contained left right both syn match cssPositioningAttr contained "\" -syn match cssPositioningAttr contained "\" -syn keyword cssPositioningAttr contained static relative absolute fixed +syn match cssPositioningAttr contained "\" +syn match cssPositioningAttr contained "\" +syn keyword cssPositioningAttr contained static relative absolute fixed subgrid -syn match cssPrintProp contained "\" -syn keyword cssPrintProp contained orphans widows -syn keyword cssPrintAttr contained landscape portrait crop cross always avoid +syn keyword cssPrintAttr contained landscape portrait crop cross always syn match cssTableProp contained "\<\(caption-side\|table-layout\|border-collapse\|border-spacing\|empty-cells\)\>" syn keyword cssTableAttr contained fixed collapse separate show hide once always -syn keyword cssTextProp contained color direction +syn keyword cssTextProp contained color direction hyphens syn match cssTextProp "\<\(\(word\|letter\)-spacing\|text\(-\(decoration\|transform\|align\|index\|shadow\)\)\=\|vertical-align\|unicode-bidi\|line-height\)\>" -syn match cssTextProp contained "\" -syn match cssTextProp contained "\" +syn match cssTextProp contained "\" +syn match cssTextProp contained "\<\(word\|line\)-break\|\(overflow\|word\)-wrap\>" syn match cssTextProp contained "\" syn match cssTextProp contained "\" +syn match cssTextProp contained "\" syn match cssTextProp contained "\" syn match cssTextAttr contained "\" -syn match cssTextAttr contained "\" syn match cssTextAttr contained "\<\(text-\)\=\(top\|bottom\)\>" syn keyword cssTextAttr contained ltr rtl embed nowrap syn keyword cssTextAttr contained underline overline blink sub super middle syn keyword cssTextAttr contained capitalize uppercase lowercase -syn keyword cssTextAttr contained center justify baseline sub super +syn keyword cssTextAttr contained justify baseline sub super +syn keyword cssTextAttr contained optimizeLegibility optimizeSpeed geometricPrecision syn match cssTextAttr contained "\" syn match cssTextAttr contained "\<\(allow\|force\)-end\>" syn keyword cssTextAttr contained start end adjacent @@ -280,23 +332,73 @@ syn keyword cssTextAttr contained distribute kashida first last syn keyword cssTextAttr contained clip ellipsis unrestricted suppress syn match cssTextAttr contained "\" syn match cssTextAttr contained "\" -syn keyword cssTextAttr contained hyphenate - +syn keyword cssTextAttr contained manual +syn match cssTextAttr contained "\" syn match cssTransformProp contained "\" syn match cssTransformProp contained "\" syn match cssTransformProp contained "\" +" CSS Transitions +" http://www.w3.org/TR/css3-transitions/ syn match cssTransitionProp contained "\" -syn match cssUIProp contained "\" -syn match cssUIProp contained "\" +" transition-time-function attributes +syn match cssTransitionAttr contained "\" +syn match cssTransitionAttr contained "\" +syn match cssTransitionAttr contained "\" +"------------------------------------------------ +" CSS Basic User Interface Module Level 3 (CSS3 UI) +" http://www.w3.org/TR/css3-ui/ syn match cssUIProp contained "\" -syn keyword cssUIProp contained appearance icon resize -syn keyword cssUIAttr contained window button menu field +syn match cssUIAttr contained "\<\(content\|padding\|border\)\(-box\)\=\>" + +syn keyword cssUIProp contained cursor +syn match cssUIAttr contained "\<\(\([ns]\=[ew]\=\)\|col\|row\|nesw\|nwse\)-resize\>" +syn keyword cssUIAttr contained crosshair help move pointer alias copy +syn keyword cssUIAttr contained progress wait text cell move +syn match cssUIAttr contained "\" +syn match cssUIAttr contained "\" +syn match cssUIAttr contained "\" +syn match cssUIAttr contained "\" +syn match cssUIAttr contained "\<\(vertical-\)\=text\>" +syn match cssUIAttr contained "\" + +syn match cssUIProp contained "\" +syn keyword cssUIAttr contained active inactive disabled + +syn match cssUIProp contained "\" +syn match cssUIProp contained "\" +syn keyword cssUIAttr contained invert + +syn keyword cssUIProp contained icon resize +syn keyword cssUIAttr contained both horizontal vertical + +syn match cssUIProp contained "\" +syn keyword cssUIAttr contained clip ellipsis + +syn match cssUIProp contained "\" +syn keyword cssUIAttr contained pixellated +syn match cssUIAttr contained "\" + +"------------------------------------------------ +" Webkit/iOS specific attributes +syn match cssUIAttr contained '\' +" IE specific attributes +syn match cssIEUIAttr contained '\' + +" Webkit/iOS specific properties +syn match cssUIProp contained '\' +" IE specific properties +syn match cssIEUIProp contained '\' + +" Webkit/Firebox specific properties/attributes +syn keyword cssUIProp contained appearance +syn keyword cssUIAttr contained window button field icon document menu + syn match cssAuralProp contained "\<\(pause\|cue\)\(-\(before\|after\)\)\=\>" -syn match cssAuralProp contained "\<\(play-during\|speech-rate\|voice-family\|pitch\(-range\)\=\|speak\(-\(punctuation\|numerals\)\)\=\)\>" +syn match cssAuralProp contained "\<\(play-during\|speech-rate\|voice-family\|pitch\(-range\)\=\|speak\(-\(punctuation\|numeral\|header\)\)\=\)\>" syn keyword cssAuralProp contained volume during azimuth elevation stress richness syn match cssAuralAttr contained "\<\(x-\)\=\(soft\|loud\)\>" syn keyword cssAuralAttr contained silent @@ -305,57 +407,107 @@ syn keyword cssAuralAttr contained non mix syn match cssAuralAttr contained "\<\(left\|right\)-side\>" syn match cssAuralAttr contained "\<\(far\|center\)-\(left\|center\|right\)\>" syn keyword cssAuralAttr contained leftwards rightwards behind -syn keyword cssAuralAttr contained below level above higher -syn match cssAuralAttr contained "\<\(x-\)\=\(slow\|fast\)\>" +syn keyword cssAuralAttr contained below level above lower higher +syn match cssAuralAttr contained "\<\(x-\)\=\(slow\|fast\|low\|high\)\>" syn keyword cssAuralAttr contained faster slower syn keyword cssAuralAttr contained male female child code digits continuous -syn match cssAuralAttr contained "\" - -" cursor -syn keyword cssUIProp contained cursor -syn match cssUIAttr contained "\<[ns]\=[ew]\=-resize\>" -syn keyword cssUIAttr contained crosshair default help move pointer -syn keyword cssUIAttr contained progress wait - -" FIXME: I could not find them in reference -syn keyword cssUIAttr contained invert maker size zoom -syn match cssRenderAttr contained "\" -syn match cssRenderAttr contained "\" -syn match cssRenderAttr contained "\" -syn match cssRenderProp contained "\" -syn match cssRenderAttr contained "\" +" mobile text +syn match cssMobileTextProp contained "\" + +syn keyword cssMediaProp contained width height orientation scan +syn match cssMediaProp contained /\(\(max\|min\)-\)\=\(\(device\)-\)\=aspect-ratio/ +syn match cssMediaProp contained /\(\(max\|min\)-\)\=device-pixel-ratio/ +syn match cssMediaProp contained /\(\(max\|min\)-\)\=device-\(height\|width\)/ +syn match cssMediaProp contained /\(\(max\|min\)-\)\=\(height\|width\|resolution\|monochrome\|color\(-index\)\=\)/ +syn keyword cssMediaAttr contained portrait landscape progressive interlace +syn match cssKeyFrameProp contained /\(\d\+\(\.\d\+\)\?%\|\(\\)\)/ nextgroup=cssDefinition +syn match cssPageMarginProp /@\(\(top\|left\|right\|bottom\)-\(left\|center\|right\|middle\|bottom\)\)\(-corner\)\=/ contained nextgroup=cssDefinition +syn keyword cssPageProp contained content size +syn keyword cssPageProp contained orphans widows +syn keyword cssFontDescriptorProp contained src +syn match cssFontDescriptorProp contained "\" +" unicode-range attributes +syn match cssFontDescriptorAttr contained "U+[0-9A-Fa-f?]\+" +syn match cssFontDescriptorAttr contained "U+\x\+-\x\+" -" FIXME: This allows cssMediaBlock before the semicolon, which is wrong. -syn region cssInclude start="@import" end=";" contains=cssComment,cssURL,cssUnicodeEscape,cssMediaType syn match cssBraces contained "[{}]" syn match cssError contained "{@<>" -syn region cssDefinition transparent matchgroup=cssBraces start='{' end='}' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssVendor,cssDefinition +syn region cssDefinition transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssAttributeSelector,cssClassName,cssIdentifier,cssAtRule,cssAttrRegion,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssCustomProp,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape,cssVendor,cssDefinition,cssHacks,cssNoise fold syn match cssBraceError "}" +syn match cssAttrComma "," " Pseudo class -syn match cssPseudoClass ":[A-Za-z0-9_-]*" contains=cssPseudoClassId,cssUnicodeEscape -syn keyword cssPseudoClassId link visited active hover focus before after left right lang -syn match cssPseudoClassId contained "\" -" FIXME: handle functions. -"syn region cssPseudoClassLang matchgroup=cssPseudoClassId start="lang(" end=")" -syn match cssPseudoClassId contained "\<\(last\|only\|nth\|nth-last\)-child\>" -syn match cssPseudoClassId contained "\<\(first\|last\|only\|nth\|nth-last\)-of-type\>" -syn keyword cssPseudoClassId root empty target enable disabled checked not invalid -syn match cssPseudoClassId contained "::\(-moz-\)\=selection" +" http://www.w3.org/TR/css3-selectors/ +syn match cssPseudoClass ":[A-Za-z0-9_-]*" contains=cssNoise,cssPseudoClassId,cssUnicodeEscape,cssVendor,cssPseudoClassFn +syn keyword cssPseudoClassId contained link visited active hover before after left right +syn keyword cssPseudoClassId contained root empty target enable disabled checked invalid +syn match cssPseudoClassId contained "\" +syn match cssPseudoClassId contained "\<\(first\|last\|only\)-\(of-type\|child\)\>" +syn region cssPseudoClassFn contained matchgroup=cssFunctionName start="\<\(not\|lang\|\(nth\|nth-last\)-\(of-type\|child\)\)(" end=")" contains=cssStringQ,cssStringQQ +" ------------------------------------ +" Vendor specific properties +syn match cssPseudoClassId contained "\" +syn match cssPseudoClassId contained "\" +syn match cssPseudoClassId contained "\<\(input-\)\=placeholder\>" + +" Misc highlight groups +syntax match cssUnitDecorators /\(#\|-\|+\|%\|mm\|cm\|in\|pt\|pc\|em\|ex\|px\|ch\|rem\|vh\|vw\|vmin\|vmax\|dpi\|dppx\|dpcm\|Hz\|kHz\|s\|ms\|deg\|grad\|rad\)/ contained +syntax match cssNoise contained /\(:\|;\|\/\)/ " Comment -syn region cssComment start="/\*" end="\*/" contains=@Spell -syn region cssComment start="//" skip="\\$" end="$" keepend contains=@Spell +syn region cssComment start="/\*" end="\*/" contains=@Spell fold syn match cssUnicodeEscape "\\\x\{1,6}\s\?" -syn match cssSpecialCharQQ +\\"+ contained -syn match cssSpecialCharQ +\\'+ contained +syn match cssSpecialCharQQ +\\\\\|\\"+ contained +syn match cssSpecialCharQ +\\\\\|\\'+ contained syn region cssStringQQ start=+"+ skip=+\\\\\|\\"+ end=+"+ contains=cssUnicodeEscape,cssSpecialCharQQ syn region cssStringQ start=+'+ skip=+\\\\\|\\'+ end=+'+ contains=cssUnicodeEscape,cssSpecialCharQ " Vendor Prefix -syn match cssVendor contained "\(-\(webkit\|moz\|o\|ms\)-\)" +syn match cssVendor contained "-\(webkit\|moz\|o\|ms\)-" + +" Various CSS Hack characters +" In earlier versions of IE (6 and 7), one can prefix property names +" with a _ or * to isolate those definitions to particular versions of IE +" This is purely decorative and therefore we assign to the same highlight +" group to cssVendor, for more information: +" http://www.paulirish.com/2009/browser-specific-css-hacks/ +syn match cssHacks contained /\(_\|*\)/ + +" Attr Enhance +" Some keywords are both Prop and Attr, so we have to handle them +" cssPseudoClassId is hidden by cssAttrRegion, so we add it here. see #69 +syn region cssAttrRegion start=/:/ end=/\ze\(;\|)\|}\|{\)/ contained contains=cssPseudoClassId,css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,cssError,cssAttrComma,cssNoise + +" Hack for transition +" 'transition' has Props after ':'. +syn region cssAttrRegion start=/transition\s*:/ end=/\ze\(;\|)\|}\)/ contained contains=css.*Prop,css.*Attr,cssColor,cssImportant,cssValue.*,cssFunction,cssString.*,cssURL,cssComment,cssUnicodeEscape,cssVendor,cssError,cssAttrComma,cssNoise + +syn match cssAtKeyword /@\(font-face\|media\|keyframes\|import\|charset\|namespace\|page\|supports\)/ + +syn keyword cssAtRuleLogical only not and contained + +" @media +" Reference: http://www.w3.org/TR/css3-mediaqueries/ +syn region cssAtRule start=/@media\>/ end=/\ze{/ skipwhite skipnl matchgroup=cssAtKeyword contains=cssMediaProp,cssValueLength,cssAtRuleLogical,cssValueInteger,cssMediaAttr,cssVendor,cssMediaType,cssComment,cssCustomProp,cssFunctionName nextgroup=cssDefinition +syn keyword cssMediaType contained screen print aural braille embossed handheld projection tty tv speech all contained + +" @page +" http://www.w3.org/TR/css3-page/ +syn region cssAtRule start=/@page\>/ end=/\ze{/ skipwhite skipnl matchgroup=cssAtKeyword contains=cssPagePseudo,cssComment nextgroup=cssDefinition +syn match cssPagePseudo /:\(left\|right\|first\|blank\)/ contained skipwhite skipnl +" @keyframe +" http://www.w3.org/TR/css3-animations/#keyframes +syn region cssAtRule start=/@\(-[a-z]\+-\)\=keyframes\>/ end=/\ze{/ skipwhite skipnl matchgroup=cssAtKeyword contains=cssVendor,cssComment nextgroup=cssDefinition + +syn region cssAtRule start=/@import\>/ end=/\ze;/ contains=cssStringQ,cssStringQQ,cssUnicodeEscape,cssComment,cssAtKeyword,cssURL,cssMediaProp,cssValueLength,cssAtRuleLogical,cssValueInteger,cssMediaAttr,cssMediaType +syn region cssAtRule start=/@charset\>/ end=/\ze;/ contains=cssStringQ,cssStringQQ,cssUnicodeEscape,cssComment,cssAtKeyword +syn region cssAtRule start=/@namespace\>/ end=/\ze;/ contains=cssStringQ,cssStringQQ,cssUnicodeEscape,cssComment,cssAtKeyword + +" @supports +" https://www.w3.org/TR/css3-conditional/#at-supports +syn region cssAtRule start=/@supports\>/ end=/\ze{/ skipwhite skipnl contains=cssAtRuleLogical,cssAttrRegion,css.*Prop,cssValue.*,cssVendor,cssAtKeyword,cssComment nextgroup=cssDefinition if main_syntax == "css" @@ -363,119 +515,129 @@ if main_syntax == "css" endif " Define the default highlighting. -" For version 5.7 and earlier: only when not done already -" For version 5.8 and later: only when an item doesn't have highlighting yet -if version >= 508 || !exists("did_css_syn_inits") - if version < 508 - let did_css_syn_inits = 1 - command -nargs=+ HiLink hi link - else - command -nargs=+ HiLink hi def link - endif - - HiLink cssComment Comment - HiLink cssVendor Comment - HiLink cssTagName Statement - HiLink cssDeprecated Error - HiLink cssSelectorOp Special - HiLink cssSelectorOp2 Special - - HiLink cssAnimationProp StorageClass - HiLink cssBackgroundProp StorageClass - HiLink cssBorderOutlineProp StorageClass - HiLink cssBoxProp StorageClass - HiLink cssColorProp StorageClass - HiLink cssContentForPagedMediaProp StorageClass - HiLink cssDimensionProp StorageClass - HiLink cssFlexibleBoxProp StorageClass - HiLink cssFontProp StorageClass - HiLink cssGeneratedContentProp StorageClass - HiLink cssGridProp StorageClass - HiLink cssHyerlinkProp StorageClass - HiLink cssLineboxProp StorageClass - HiLink cssListProp StorageClass - HiLink cssMarginProp StorageClass - HiLink cssMarqueeProp StorageClass - HiLink cssMultiColumnProp StorageClass - HiLink cssPaddingProp StorageClass - HiLink cssPagedMediaProp StorageClass - HiLink cssPositioningProp StorageClass - HiLink cssPrintProp StorageClass - HiLink cssRubyProp StorageClass - HiLink cssSpeechProp StorageClass - HiLink cssTableProp StorageClass - HiLink cssTextProp StorageClass - HiLink cssTransformProp StorageClass - HiLink cssTransitionProp StorageClass - HiLink cssUIProp StorageClass - HiLink cssAuralProp StorageClass - HiLink cssRenderProp StorageClass - - HiLink cssAnimationAttr Type - HiLink cssBackgroundAttr Type - HiLink cssBorderOutlineAttr Type - HiLink cssBoxAttr Type - HiLink cssColorAttr Type - HiLink cssContentForPagedMediaAttr Type - HiLink cssDimensionAttr Type - HiLink cssFlexibleBoxAttr Type - HiLink cssFontAttr Type - HiLink cssGeneratedContentAttr Type - HiLink cssGridAttr Type - HiLink cssHyerlinkAttr Type - HiLink cssLineboxAttr Type - HiLink cssListAttr Type - HiLink cssMarginAttr Type - HiLink cssMarqueeAttr Type - HiLink cssMultiColumnAttr Type - HiLink cssPaddingAttr Type - HiLink cssPagedMediaAttr Type - HiLink cssPositioningAttr Type - HiLink cssPrintAttr Type - HiLink cssRubyAttr Type - HiLink cssSpeechAttr Type - HiLink cssTableAttr Type - HiLink cssTextAttr Type - HiLink cssTransformAttr Type - HiLink cssTransitionAttr Type - HiLink cssUIAttr Type - HiLink cssAuralAttr Type - HiLink cssRenderAttr Type - HiLink cssCommonAttr Type - - HiLink cssPseudoClassId PreProc - HiLink cssPseudoClassLang Constant - HiLink cssValueLength Number - HiLink cssValueInteger Number - HiLink cssValueNumber Number - HiLink cssValueAngle Number - HiLink cssValueTime Number - HiLink cssValueFrequency Number - HiLink cssFunction Constant - HiLink cssURL String - HiLink cssFunctionName Function - HiLink cssColor Constant - HiLink cssIdentifier Function - HiLink cssInclude Include - HiLink cssImportant Special - HiLink cssBraces Function - HiLink cssBraceError Error - HiLink cssError Error - HiLink cssInclude Include - HiLink cssUnicodeEscape Special - HiLink cssStringQQ String - HiLink cssStringQ String - HiLink cssMedia Special - HiLink cssMediaType Special - HiLink cssMediaComma Normal - HiLink cssFontDescriptor Special - HiLink cssFontDescriptorFunction Constant - HiLink cssFontDescriptorProp StorageClass - HiLink cssFontDescriptorAttr Type - HiLink cssUnicodeRange Constant - HiLink cssClassName Function - delcommand HiLink -endif +" Only when an item doesn't have highlighting yet + +hi def link cssComment Comment +hi def link cssVendor Comment +hi def link cssHacks Comment +hi def link cssTagName Statement +hi def link cssDeprecated Error +hi def link cssSelectorOp Special +hi def link cssSelectorOp2 Special +hi def link cssAttrComma Special + +hi def link cssAnimationProp cssProp +hi def link cssBackgroundProp cssProp +hi def link cssBorderProp cssProp +hi def link cssBoxProp cssProp +hi def link cssCascadeProp cssProp +hi def link cssColorProp cssProp +hi def link cssContentForPagedMediaProp cssProp +hi def link cssDimensionProp cssProp +hi def link cssFlexibleBoxProp cssProp +hi def link cssFontProp cssProp +hi def link cssGeneratedContentProp cssProp +hi def link cssGridProp cssProp +hi def link cssHyerlinkProp cssProp +hi def link cssInteractProp cssProp +hi def link cssLineboxProp cssProp +hi def link cssListProp cssProp +hi def link cssMarqueeProp cssProp +hi def link cssMultiColumnProp cssProp +hi def link cssPagedMediaProp cssProp +hi def link cssPositioningProp cssProp +hi def link cssPrintProp cssProp +hi def link cssRubyProp cssProp +hi def link cssSpeechProp cssProp +hi def link cssTableProp cssProp +hi def link cssTextProp cssProp +hi def link cssTransformProp cssProp +hi def link cssTransitionProp cssProp +hi def link cssUIProp cssProp +hi def link cssIEUIProp cssProp +hi def link cssAuralProp cssProp +hi def link cssRenderProp cssProp +hi def link cssMobileTextProp cssProp + +hi def link cssAnimationAttr cssAttr +hi def link cssBackgroundAttr cssAttr +hi def link cssBorderAttr cssAttr +hi def link cssBoxAttr cssAttr +hi def link cssContentForPagedMediaAttr cssAttr +hi def link cssDimensionAttr cssAttr +hi def link cssFlexibleBoxAttr cssAttr +hi def link cssFontAttr cssAttr +hi def link cssGeneratedContentAttr cssAttr +hi def link cssGridAttr cssAttr +hi def link cssHyerlinkAttr cssAttr +hi def link cssInteractAttr cssAttr +hi def link cssLineboxAttr cssAttr +hi def link cssListAttr cssAttr +hi def link cssMarginAttr cssAttr +hi def link cssMarqueeAttr cssAttr +hi def link cssMultiColumnAttr cssAttr +hi def link cssPaddingAttr cssAttr +hi def link cssPagedMediaAttr cssAttr +hi def link cssPositioningAttr cssAttr +hi def link cssGradientAttr cssAttr +hi def link cssPrintAttr cssAttr +hi def link cssRubyAttr cssAttr +hi def link cssSpeechAttr cssAttr +hi def link cssTableAttr cssAttr +hi def link cssTextAttr cssAttr +hi def link cssTransformAttr cssAttr +hi def link cssTransitionAttr cssAttr +hi def link cssUIAttr cssAttr +hi def link cssIEUIAttr cssAttr +hi def link cssAuralAttr cssAttr +hi def link cssRenderAttr cssAttr +hi def link cssCascadeAttr cssAttr +hi def link cssCommonAttr cssAttr + +hi def link cssPseudoClassId PreProc +hi def link cssPseudoClassLang Constant +hi def link cssValueLength Number +hi def link cssValueInteger Number +hi def link cssValueNumber Number +hi def link cssValueAngle Number +hi def link cssValueTime Number +hi def link cssValueFrequency Number +hi def link cssFunction Constant +hi def link cssURL String +hi def link cssFunctionName Function +hi def link cssFunctionComma Function +hi def link cssColor Constant +hi def link cssIdentifier Function +hi def link cssAtRule Include +hi def link cssAtKeyword PreProc +hi def link cssImportant Special +hi def link cssCustomProp Special +hi def link cssBraces Function +hi def link cssBraceError Error +hi def link cssError Error +hi def link cssUnicodeEscape Special +hi def link cssStringQQ String +hi def link cssStringQ String +hi def link cssAttributeSelector String +hi def link cssMediaType Special +hi def link cssMediaComma Normal +hi def link cssAtRuleLogical Statement +hi def link cssMediaProp cssProp +hi def link cssMediaAttr cssAttr +hi def link cssPagePseudo PreProc +hi def link cssPageMarginProp cssAtKeyword +hi def link cssPageProp cssProp +hi def link cssKeyFrameProp Constant +hi def link cssFontDescriptor Special +hi def link cssFontDescriptorProp cssProp +hi def link cssFontDescriptorAttr cssAttr +hi def link cssUnicodeRange Constant +hi def link cssClassName Function +hi def link cssClassNameDot Function +hi def link cssProp StorageClass +hi def link cssAttr Constant +hi def link cssUnitDecorators Number +hi def link cssNoise Noise let b:current_syntax = "css" diff --git a/test.css b/test.css new file mode 100644 index 0000000..dcba24a --- /dev/null +++ b/test.css @@ -0,0 +1,295 @@ +@media print { + /* hide navigation controls when printing */ + #navigation { display: none} + @media (max-width: 12cm) { + /* keep notes in flow when printing to narrow pages */ + .note { float: none } + } +} + + +@supports (-webkit-perspective: 20px) and (not (perspective: 20px)) and (not (display: none)) { + /* CSS declarations for this condition */ +} + + +/* Media query */ +@media screen and (min-width: 900px) { + .article { + padding: 1rem 3rem; + } +} + +/* Nested media query */ +@supports (display: none) { + @media screen and (min-width: 900px) { + article { + display: none; + } + } +} + +/* @media tests*/ +@media screen { + * { font-family: sans-serif } +} + + +@import url(color.css) screen and (color); + +@media all and (min-width:500px) {} +@media (min-width:500px) {} + +@media (orientation: portrait) {} +@media all and (orientation: portrait) {} + +@media screen and (color), projection and (color) {} + +@media all {} +@media {} + + +@import url(example.css) screen and (color), projection and (color); + +@import "example.css" screen and (color), projection and (color); + +@media screen and (color), projection and (color) {} +@media aural and (device-aspect-ratio: 16/9) {} +@media speech and (min-device-width: 800px) {} + +@media all { body { background:lime } } +@media print and (min-width: 25cm) {} +@media screen and (min-width: 400px) and (max-width: 700px) {} +@media handheld and (min-width: 20em), /*new line*/ +screen and (min-width: 20em) {} + +@media screen and (device-width: 800px) {} +@media all and (orientation:portrait) {} +@media all and (orientation:landscape) {} + +@media screen and (device-aspect-ratio: 16/9) {} + +@media all and (color) {} +@media all and (min-color: 1) {} +@media all and (color-index) {} +@media all and (min-color-index: 1) {} +@media all and (monochrome) {} +@media all and (min-monochrome: 1) {} +@media print and (min-resolution: 300dpi) {} +@media print and (min-resolution: 118dpcm) {} +@media tv and (scan: progressive) {} +@media handheld and (grid) and (max-width: 15em) {} +@media handheld and (grid) and (max-device-height: 7em) {} + + +/* @keyframes tests */ +.div { + animation-name: custom-name-not-highlighted; + animation-duration: 5s; + animation-iteration-count: 10; + animation-fill-mode: 10; + animation-play-state: 12; + animation-timing-function:10; + animation-delay:10; +} + +@-webkit-keyframes tv-name-not-highlighted { + from { + left: 0; + top: 0; + } + + to { + left: 100px; + top: 100px; + } +} + +@keyframes bounce { + + from { + top: 100px; + animation-timing-function: ease-out; + } + + 25% { + top: 50px; + animation-timing-function: ease-in; + } + 50% { + top: 100px; + animation-timing-function: ease-out; + } + + 25.75%, 75% { + top: 75px; + animation-timing-function: ease-in; + } + + to { + top: 100px; + } +} + + +@namespace "http://www.w3.org/1999/xhtml"; +@namespace svg "http://www.w3.org/2000/svg"; +@charset "ISO-8859-1"; + + +@page { ... } +@page :left { ... } +@page :right { ... } +@page LandscapeTable { ... } +@page CompanyLetterHead:first { ... } /* identifier and pseudo page. */ +@page:first { ... } +@page toc, index { ... } +@page :blank:first { ... } + +@page :first { + color: green; + size: 8.5in 11in; + + @top-left { + content: "foo"; + color: blue; + } + @top-right { + content: "bar"; + } +} + +@page { color: red; + @top-center { + content: "Page " counter(page); + } +} + +/* issue #35 */ +@media embossed, print, aural { + .noprint { + display: none; + } +} + +/* issue #35 */ +@media screen +and (orientation:portrait) +and (min-device-width:768px) +and (max-device-width:1024px) +,print and (max-width: 15em) { + body, div { + display:block; + } +} + +#issue39:before { + content: "\\"; +} + +#issue40 { + column-width: 1px; + column-span: inherit; + + break-before: avoid; + break-after: avoid-column; + break-inside: avoid-page; + + column-gap: inherit; + column-rule-width: inherit; + column-rule-color: inherit; + column-rule: inherit; + column-count: inherit; + columns: inherit; + + page-break-before: avoid; + page-break-after: avoid; + page-break-inside: avoid; +} + +#issue41 { + /* with a test comment */ + background-repeat: repeat; + background-repeat: repeat-x; + background-repeat: repeat-y; +} + +#issue42 { + background-image: url('{!URLFOR($Resource.images)}/background.png'); + background-image: url('{!URLFOR($Resource.images)}/background.png'), url('{!URLFOR($Resource.images)}/background.png') +} + +/* @font-face test */ +@font-face { + /* with a test comment */ + font-family: myFirstFont, serif; + src: url(ideal-sans-serif.woff) format("woff"), + url(basic-sans-serif.ttf) format("opentype"); + src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf); + unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF, U+4??; + font-weight:bold; +} + +#issue54 { + pointer-events: painted; + pointer-events: visibleFill; +} + +#issue56 { + flex-direction: row-reverse; + flex-flow: row nowrap; + align-self: flex-start; + justify-content: space-between; +} + +#issue57 { + color: rebeccapurple; +} + +#issue59 { + display: flex; +} + +#issue61 { + height: +10.10px; + height: -1000%; +} + +#issue65 { + grid-template: auto 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: auto 1fr; + grid-auto-rows: auto 1fr; +} + +@media all and (max-width: 250px) { + #issue69::after { + display: unset ; + position: absolute; + transition: width 2s, height 4s; + } +} + +#issue53:not([foo=")"]) { +} + +@media all and (min-width: var(--mobile)) { +} + +/* issue73 */ +:root { + --font-stack: 100px; + --pad: 10px; + --small-height: 100px; + --columns: 4; + --margins: calc(24px / var(--columns)); + --primary-color: red; + --logo-text: var(--primary-color); +} + +#issue73 { + height: var(--small-height); + font-family: var(--font-stack, "Roboto", "Helvetica"); + padding: var(--pad, 10px 15px 20px); + color: var(--foo, #7F583F); +}