At-rules - CSS: Cascading Style Sheets
at-rules are css statements that instructs css how to behave. they begin with an at sign, '@' (u+0040 commercial at), followed by an identifier and includes everything up to the next semicolon, ';' (u+003b semicolon), or the next css block, whichever comes first. /* general structure */ @identifier (rule); /* example: tells browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet. @import — tells the css engine to include an external style sheet. @namespace — tells the css engine that all its content must be considered prefixed with an xml namespace. ...
...owser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet. @import — tells the css engine to include an external style sheet. @namespace — tells the css engine that all its content must be considered prefixed with an xml namespace. nested at-rules — a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: @media — a conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. @supports — a conditional group rule that will apply its content if the browser meets the criteria of the given c...
...mented in gecko as of writing) @font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — define common names in font-variant-alternates for feature activated differently in opentype. (at the candidate recommendation stage, but only implemented in gecko as of writing) conditional group rules much like the values of properties, each at-rule has a different syntax. nevertheless, several of them can be grouped into a special category named conditional group rules. these statements share a common syntax and each of them can include nested statements—either rulesets or nested at-rules. furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either true or false. if ...
...are: @media, @supports, @document. (deferred to level 4 of css spec) since each conditional group may also contain nested statements, there may be an unspecified amount of nesting. specifications specification status comment css conditional rules module level 3 candidate recommendation initial definition compatibility standardthe definition of 'css at-rules' in that specification. living standard standardizes @-webkit-keyframes. ...

CSS3 - Archive of obsolete content
ha channel) and is a now an alias for rgba(0,0,0,0.0). it deprecates the system-color keywords that shouldn't be used in a production environment anymore. css namespaces module recommendation since september 29th, 2011 adds the support for the xml namespaces by defining the notion of css qualified name, using the ' | ' syntax and adding the @namespace css at-rule. selectors level 3 recommendation since september 29th, 2011 adds: substring matching attribute selectors, e[attribute^="value"], e[attribute$="value"], e[attribute*="value"] . new pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :f...
...commendation since november 7th, 2013 formally defines the syntax of the content of the html style global attribute. css fonts module level 3 candidate recommendation since september 20th, 2018 amends the css2.1 font matching algorithm to be closer to what is really implemented. adds: support for downloadable fonts via the css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-size-adjust property. ...
... when fallback fonts are selected via the css font-size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also extends the related css font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the automatic generation of an oblique or bold face when none are found via the css font-synthesis property. css basic user interface module level 3 recommendation since june 21st, 2018 adds: the ability to tweak the box model using the css box-sizing property. at risk: due to insufficient browser support, standardi...
...And 3 more matches

Index - Web APIs
tmlelement.style. 402 using the css typed object model css, css typed om, houdini, learn this should get you started with understanding the css typed om. take a look at all the css typed om interfaces to learn more. 403 cssconditionrule api, cssom, interface, reference an object implementing the cssconditionrule interface represents a single condition css at-rule, which consists of a condition and a statement block. it is a child of cssgroupingrule. 404 csscounterstylerule api, css counter styles, interface, reference the csscounterstylerule interface represents an @counter-style at-rule. 405 cssgroupingrule api, cssom, interface, reference an object implementing the cssgroupingrule interface represents any css at...
...epresents values for properties that take an image, for example background-image, list-style-image, or border-image-source. the 407 csskeyframerule api, css animations, cssom, experimental, interface, reference the csskeyframerule interface describes an object representing a set of style for a given keyframe. it corresponds to the contains of a single keyframe of a @keyframes at-rule. it implements the cssrule interface with a type value of 8 (cssrule.keyframe_rule). 408 csskeyframesrule api, css animations, cssom, experimental, interface, reference the csskeyframesrule interface describes an object representing a complete set of keyframes for a css animation. it corresponds to the contents of a whole @keyframes at-rule. it implements the cssrule interfac...
...face, reference the cssmediarule interface represents a single css @media rule. it implements the cssconditionrule interface, and therefore the cssgroupingrule and the cssrule interface with a type value of 4 (cssrule.media_rule). 417 cssnamespacerule api, cssom, interface, reference the cssnamespacerule interface describes an object representing a single css @namespace at-rule. it implements the cssrule interface, with a type value of 10 (cssrule.namespace_rule). 418 cssnamespacerule.namespaceuri api, cssnamespacerule, cssom, property, reference, namespaceuri the cssnamespacerule.namespaceuri read-only property returns a domstring containing the text of the uri of the given namespace. 419 cssnamespacerule.prefix api, cssnamespacerule...
...And 2 more matches

@supports - CSS: Cascading Style Sheets
the supports condition consists of one or more name-value pairs combined by conjunctions (and), disjunctions (or), and/or negations (not). precedence of operators can be defined with parentheses. ...
...the supports condition consists of one or more name-value pairs combined by conjunctions (and), disjunctions (or), and/or negations (not). precedence of operators can be defined with parentheses. ...
...the supports condition consists of one or more name-value pairs combined by conjunctions (and), disjunctions (or), and/or negations (not). ...
...<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? ...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
values originating from different sources. it lies at the core of css, as emphasized by the name: cascading style sheets. this article explains what the cascade is, the order in which css declarations cascade, and how this affects you, the web developer. which css entities participate in the cascade only css declarations, that is property/value pairs, participate in the cascade. this means that at-rules containing entities other than declarations, such as a @font-face rule containing descriptors, don't participate in the cascade. in these cases, only the at-rule as a whole participates in the cascade: here, the @font-face identified by its font-family descriptor. if several @font-face rules with the same descriptor are defined, only the most appropriate @font-face, as a whole, is considered. w...
...tions, such as a @font-face rule containing descriptors, don't participate in the cascade. in these cases, only the at-rule as a whole participates in the cascade: here, the @font-face identified by its font-family descriptor. if several @font-face rules with the same descriptor are defined, only the most appropriate @font-face, as a whole, is considered. while the declarations contained in most at-rules — such as those in @media, @document, or @supports — participate in the cascade, declarations contained in @keyframes don't. as with @font-face, only the at-rule as a whole is selected via the cascade algorithm. finally, note that @import and @charset obey specific algorithms and aren't affected by the cascade algorithm. origin of css declarations the css cascade algorithm's job is to sel...
...esigned to tailor the experience to the user's wishes. cascading order the cascading algorithm determines how to find the value to apply for each property for each document element. it first filters all the rules from the different sources to keep only the rules that apply to a given element. that means rules whose selector matches the given element and which are part of an appropriate media at-rule. then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. the cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: origin importance 1 user ag...
...css back to a known state. all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely. css animations and the cascade css animations, using @keyframes at-rules, define animations between states. keyframes don't cascade, meaning that at any given time css takes values from only one single @keyframes, and never mixes multiple ones together. when several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together. example let's look at an example involving multiple sources of css across the v...

Syntax - CSS: Cascading Style Sheets
c kinds of statements to do that. a statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair). there are two kinds of statements: rulesets (or rules) that, as seen, associate a collection of css declarations to a condition described by a selector. at-rules that start with an at sign, '@' (u+0040 commercial at), followed by an identifier and then continuing up to the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. they are used to convey meta-data information (like @charset or @im...
... the next semi-colon (;) outside of a block, or the end of the next block. each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. they are used to convey meta-data information (like @charset or @import), conditional information (like @media or @document), or descriptive information (like @font-face). any statement which isn't a ruleset or an at-rule is invalid and ignored. there is another group of statements – the nested statements. these are statements that can be used in a specific subset of at-rules – the conditional group rules. ...
...ation (like @media or @document), or descriptive information (like @font-face). any statement which isn't a ruleset or an at-rule is invalid and ignored. there is another group of statements – the nested statements. these are statements that can be used in a specific subset of at-rules – the conditional group rules. these statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which the browser runs matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. in css1 and css2.1, only rulesets could be used inside conditional group rules. that was very restrictive and this restriction was lifted in css conditionals level 3. now, though still experimental an...
... ...

@charset - CSS: Cascading Style Sheets
the @charset css at-rule specifies the character encoding used in the style sheet. it must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. if several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is relevant. @charset "utf-8"; this at-rule is useful when using non-ascii characters in some css properties, like content. as there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode by...
...fine the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode byte-order character placed at the beginning of the file. the value given by the charset attribute of the content-type: http header or the equivalent in the protocol used to serve the style sheet. the @charset css at-rule. use the character encoding defined by the referring document: the charset attribute of the <link> element. this method is obsoleted in html5 and must not be used. assume that the document is utf-8 syntax @charset "utf-8"; @charset "iso-8859-15"; where: charset is a <string> denoting the character encoding to be used. it must be the name of a web-safe character encoding defined in the ...
... preferred must be used. formal syntax @charset "<charset>"; examples valid and invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status comment css level 2 (revision 1)the definition of '@charset' in that specification. recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like ...

@page - CSS: Cascading Style Sheets
the @page css at-rule is used to modify some css properties when printing a document. syntax @page { margin: 1cm; } @page :first { margin: 2cm; } descriptors size specifies the target size and orientation of the page box’s containing block. in the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet. marks adds crop and/or registration marks to the document. bleed specifies the extent beyond the page box at which the page rendering is clipped. description you can't change all css properties with @page. you can only change the margins, orphans, widows, and page breaks of the document. attempts to change any other css properties will be ignored. ...
...e destination page sheet. marks adds crop and/or registration marks to the document. bleed specifies the extent beyond the page box at which the page rendering is clipped. description you can't change all css properties with @page. you can only change the margins, orphans, widows, and page breaks of the document. attempts to change any other css properties will be ignored. the @page at-rule can be accessed via the css object model interface csspagerule. note: the w3c is discussing how to handle viewport-related <length> units, vh, vw, vmin, and vmax. meanwhile do not use them within a @page at-rule. formal syntax @page <page-selector-list> { <page-body> }where <page-selector-list> = [ <page-selector># ]?<page-body> = <declaration>? [ ; <page-body> ]? | <page-margin-box> <page-b...
... css level 2 (revision 1)the definition of '@page' in that specification. recommendation initial definition ...

Using CSS animations - CSS: Cascading Style Sheets
that aren't currently visible. configuring the animation to create a css animation sequence, you style the element you want to animate with the animation property or its sub-properties. this lets you configure the timing, duration, and other details of how the animation sequence should progress. this does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in defining the animation sequence using keyframes below. the sub-properties of the animation property are: animation-name specifies the name of the @keyframes at-rule describing the animation’s keyframes. animation-duration configures the length of time that an animation should take to complete one cycle. animation-timing-function configures the timing of the animation; t...
...ion-fill-mode configures what values are applied by the animation before and after it is executing. animation-play-state lets you pause and resume the animation sequence. defining the animation sequence using keyframes once you’ve configured the animation’s timing, you need to define the appearance of the animation. this is done by establishing two or more keyframes using the @keyframes at-rule. each keyframe describes how the animated element should render at a given time during the animation sequence. since the timing of the animation is defined in the css style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final ...
...iner. p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } in this example the style for the <p> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “slidein”. if we wanted any custom styling on the <p> element to appear in browsers that don’t support css animations, we would include it here as well; however, in this case we don’t want any custom styling other than the animation effect. the keyframes are defined using the @keyframes at-rule. in this case, we have just two ke...

CSS reference - CSS: Cascading Style Sheets
you can also browse key css concepts and a list of selectors organized by type. also included is a brief dom-css / cssom reference. basic rule syntax style rule syntax style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] see the index of selectors, pseudo-classes, and pseudo-elements below. ...
....menu-bar li:hover > ul { display: block; } for a beginner-level introduction to the syntax of selectors, see our guide on css selectors. be aware that any syntax error in a rule definition invalidates the entire rule. invalid rules are ignored by the browser. note that css rule definitions are entirely (ascii) text-based, whereas dom-css / cssom (the rule management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. --webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><a...
... within the table column specified by a. elements which span multiple columns are considered to be a member of all of those columns. pseudo pseudo classes : specifies a special state of the selected element(s). pseudo elements :: represents entities that are not included in html. see also: selectors in the selectors level 4 specification. ...

Implementing feature detection - Learn web development
pports modern flexbox, and the float layout if not. note: often such an approach is overkill for a minor feature detection problem — you can often get away with using multiple vendor prefixes and fallback properties, as described in css fallback behavior and handling css prefixes. @supports in recent times, css has had its own native feature detection mechanism introduced — the @supports at-rule. this works in a similar manner to media queries (see also responsive design problems) — except that instead of selectively applying css depending on a media feature like a resolution, screen width or aspect ratio, it selectively applies css depending on whether a css feature is supported. for example, we could rewrite our previous example to use @supports — see supports-feature-detect.html ...
... example, we could rewrite our previous example to use @supports — see supports-feature-detect.html and supports-styling.css. if you look at the latter, you'll see a couple of @supports blocks, for example: @supports (flex-flow: row) and (flex: 1) { main { display: flex; } main div { padding-right: 4%; flex: 1; } main div:last-child { padding-right: 0; } } this at-rule block applies the css rule within only if the current browser supports both the flex-flow: row and flex: 1 declarations. for each condition to work, you need to include a complete declaration (not just a property name) and not include the semi-colon on the end. @supports also has or and not logic available — the other block applies the float layout if the flexbox properties are not available: ...

CSSKeyframesRule - Web APIs
it implements the cssrule interface with a type value of 7 (cssrule.keyframes_rule). properties as a cssrule, csskeyframesrule also implements the properties of these interfaces. it has two properties : csskeyframesrule.name represents the name of the animation, used by the animation-name property. csskeyframesrule.cssrules read only returns a cssrulelist of the css rules in the media rule. ...
...srule.cssrules read only returns a cssrulelist of the css rules in the media rule. methods as a cssrule, csskeyframesrule also implements the methods of that interface. it has three specific methods: csskeyframesrule.appendrule() inserts a new keyframe rule into the current csskeyframesrule. the parameter is a domstring containing a keyframe in the same format as an entry of a @keyframes at-rule. if it contains more than one keyframe rule, a domexception with a syntax_err is thrown. csskeyframesrule.deleterule() deletes a keyframe rule from the current csskeyframesrule. the parameter is the index of the keyframe to be deleted, expressed as a domstring resolving as a number between 0% and 100%. csskeyframesrule.findrule() returns a keyframe rule corresponding to the given key. the key...

CSSStyleSheet.insertRule() - Web APIs
note: although insertrule() is exclusively a method of cssstylesheet, it actually inserts the rule into cssstylesheet.cssrules — its internal cssrulelist. syntax stylesheet.insertrule(rule [, index]) parameters rule a domstring containing the rule to be inserted. what the inserted rule must contain depends on its type: for rule-sets, both a selector and a style declaration. for at-rules, both an at-identifier and the rule content. index optional a positive integer less than or equal to stylesheet.cssrules.length, representing the newly inserted rule's position in cssstylesheet.cssrules. the default is 0. (in older implementations, this was required. see browser compatibility for details.) return value the newly inserted rule's index within the stylesheet's rule-list. ...
...cting where rules can be inserted. violating them will likely raise a domexception. if index > cssrulelist.length, the method aborts with an indexsizeerror. if rule cannot be inserted at index 0 due to some css constraint, the method aborts with a hierarchyrequesterror. if more than one rule is given in the rule parameter, the method aborts with a syntaxerror. if trying to insert an @import at-rule after a style rule, the method aborts with a hierarchyrequesterror. if rule is @namespace and the rule-list has more than just @import at-rules and/or @namespace at-rules, the method aborts with an invalidstateerror. examples inserting a new rule this snippet pushes a new rule onto the top of my stylesheet. mystyle.insertrule('#blanc { color: white }', 0); function to add a stylesheet rul...

symbols - CSS: Cascading Style Sheets
pecified as one or more <symbol>s. values <symbol> represents a symbol used within the counter system. this must be one of the following data types: <string> <image> (note: this value is "at risk" and may be removed from the specification. it is not yet implemented.) <custom-ident> description a symbol can be a string, image, or identifier. it is used within the @counter-style at-rule. symbols: a b c d e; symbols: "\24b6" "\24b7" "\24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. when the additive system is used, use the additive-symbols descriptor in...
...e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.svg') url('second.svg') url('third.svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed. when the additive system is used, use the additive-symbols descriptor instead to specify the symbols. ...

@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use. font-family specifies a name that will be used as the font face value for font properties. font-stretch a font-stretch value. ...
...cally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection. it's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device. the @font-face at-rule may be used not only at the top level of a css, but also inside any css conditional-group at-rule. font mime types format mime type truetype font/ttf opentype font/otf web open font format font/woff web open font format 2 font/woff2 notes web fonts are subject to the same domain restriction (font files must be on the same...