Search completed in 1.28 seconds.
105 results for "at-rule":
Your results are loading. Please wait...
At-rules - CSS: Cascading Style Sheets
WebCSSAt-rule
at-rules are css statements that instructs css how to behave.
... /* 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.
... 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.
...And 3 more matches
Index - Web APIs
WebAPIIndex
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.
... 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-rule that contains other rules nested within it.
...And 5 more matches
CSS3 - Archive of obsolete content
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.
... adds: support for downloadable fonts via the css @font-face at-rule.
...it also extends the related css font-variant shorthand property and introduces the @font-feature-values at-rule.
...And 3 more matches
@charset - CSS: Cascading Style Sheets
WebCSS@charset
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.
...And 3 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
WebCSSCascade
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.
... 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.
...And 3 more matches
Syntax - CSS: Cascading Style Sheets
WebCSSSyntax
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.
... any statement which isn't a ruleset or an at-rule is invalid and ignored.
...And 3 more matches
Using CSS animations - CSS: Cascading Style Sheets
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.
...this is done by establishing two or more keyframes using the @keyframes at-rule.
...And 2 more matches
@page - CSS: Cascading Style Sheets
WebCSS@page
the @page css at-rule is used to modify some css properties when printing a document.
... the @page at-rule can be accessed via the css object model interface csspagerule.
...meanwhile do not use them within a @page at-rule.
... working draft no change from css level 2 (revision 1), though more css at-rules can be used inside a @page.
@supports - CSS: Cascading Style Sheets
WebCSS@supports
the @supports css at-rule lets you specify declarations that depend on a browser's support for one or more specific css features.
...the rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
... syntax the @supports at-rule associates a block of statements with a supports condition.
...'='<attr-modifier> = i | s examples testing for the support of a given css property @supports (animation-name: test) { … /* css applied when animations are supported without a prefix */ @keyframes { /* other at-rules can be nested inside */ … } } testing for the support of a given css property or a prefixed version @supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { … /* css applied when 3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css propert...
CSSStyleSheet.insertRule() - Web APIs
for at-rules, both an at-identifier and the rule content.
... 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.
@font-feature-values - CSS: Cascading Style Sheets
the @font-feature-values css at-rule lets you use a common name in the font-variant-alternates property for features activated differently in opentype.
... the @font-feature-values at-rule may be used either at the top level of your css or inside any css conditional-group at-rule.
...ock>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-declaration-list> = <feature-value-declaration>where <feature-value-declaration> = <custom-ident>: <integer>+; examples using @styleset in a @font-feature-values rule /* at-rule for "nice-style" in font one */ @font-feature-values font one { @styleset { nice-style: 12; } } /* at-rule for "nice-style" in font two */ @font-feature-values font two { @styleset { nice-style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); } specifications specification status comme...
@media - CSS: Cascading Style Sheets
WebCSS@media
the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
... syntax the @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
... /* at the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries.
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
use this css reference to browse an alphabetical index of all of the standard css properties, pseudo-classes, pseudo-elements, data types, and at-rules.
... 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.
... concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types values actual value computed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-c...
Descriptor (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a css descriptor defines the characteristics of an at-rule.
... at-rules may have one or multiple descriptors.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
109 descriptor (css) css, codingscripting, glossary, needscontent a css descriptor defines the characteristics of an at-rule.
... at-rules may have one or multiple descriptors.
Implementing feature detection - Learn web development
@supports in recent times, css has had its own native feature detection mechanism introduced — the @supports at-rule.
...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.
CSSKeyframesRule - Web APIs
it corresponds to the contents of a whole @keyframes at-rule.
...the parameter is a domstring containing a keyframe in the same format as an entry of a @keyframes at-rule.
CSSPageRule - Web APIs
it has the following specific properties: csspagerule.selectortext represents the text of the page selector associated with the at-rule.
... csspagerule.style read only returns the declaration block associated with the at-rule.
CSSStyleSheet.ownerRule - Web APIs
the read-only cssstylesheet property ownerrule returns the cssimportrule corresponding to the @import at-rule which imported the stylesheet into the document.
... examples this snippet of code looks for rules which were not imported into the document using an @import at-rule.
symbols - CSS: Cascading Style Sheets
it is used within the @counter-style at-rule.
... formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
@counter-style - CSS: Cascading Style Sheets
the @counter-style css at-rule lets you define counter styles that are not part of the predefined set of styles.
...the @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.
@font-face - CSS: Cascading Style Sheets
the @font-face css at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
... 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.
@import - CSS: Cascading Style Sheets
WebCSS@import
the @import css at-rule is used to import style rules from other style sheets.
... description imported rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.
@keyframes - CSS: Cascading Style Sheets
the @keyframes css at-rule controls the intermediate steps in a css animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.
... description javascript can access the @keyframes at-rule with the css object model interface csskeyframesrule.
@namespace - CSS: Cascading Style Sheets
@namespace is an at-rule that defines xml namespaces to be used in a css style sheet.
... any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet.
bleed - CSS: Cascading Style Sheets
WebCSS@pagebleed
the bleed css at-rule descriptor, used with the @page at-rule, specifies the extent of the page bleed area outside the page box.
... formal definition related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification.
marks - CSS: Cascading Style Sheets
WebCSS@pagemarks
the marks css at-rule descriptor, used with the @page at-rule, adds crop and/or cross marks to the presentation of the document.
... formal definition related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
WebCSS@pagesize
the size css at-rule descriptor, used with the @page at-rule, defines the size and orientation of the box which is used to represent a page.
... formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification ...
max-height - CSS: Cascading Style Sheets
the max-height css descriptor specifies the maximum height of the viewport of a document defined via the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in...
max-width - CSS: Cascading Style Sheets
the max-width css descriptor specifies the maximum width of the viewport of a document defined via the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in ...
max-zoom - CSS: Cascading Style Sheets
the max-zoom css descriptor sets the maximum zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
the min-height css descriptor specifies the minimum height of the viewport of a document defined via the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in...
min-zoom - CSS: Cascading Style Sheets
the min-zoom css descriptor sets the minimum zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in that specificat...
viewport-fit - CSS: Cascading Style Sheets
this descriptor hasn't been added to https://github.com/mdn/data/blob/master/css/at-rules.json yet.
... formal definition related at-rule@viewportinitial valueautocomputed valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
zoom - CSS: Cascading Style Sheets
WebCSS@viewportzoom
the zoom css descriptor sets the initial zoom factor of a document defined by the @viewport at-rule.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" descriptor' in that specificatio...
@viewport - CSS: Cascading Style Sheets
WebCSS@viewport
the @viewport css at-rule lets you configure the viewport through which the document is viewed.
... @viewport { width: 100vw; /*sets the width of the actual viewport to the device width*/ } note: the use of <meta name="viewport"> tag overrides @viewport syntax the at-rule contains a set of nested descriptors in a css block that is delimited by curly braces.
CSS Animations - CSS: Cascading Style Sheets
reference css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations.
...this article describes each relevant css property and at-rule and explains how they interact with each other.
Media queries - CSS: Cascading Style Sheets
in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query.
... reference at-rules @import @media guides using media queries introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries.
...ver) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-document media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-windows-accent-color-in-titlebar -moz-windows-classic -moz-windows-compositor -moz-window...
Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
@media at-rule conditionally apply part of a stylesheet, based on the result of a media query.
MDN Web Docs Glossary: Definitions of Web-related terms
webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet vector image ...
How CSS is structured - Learn web development
write css rules that apply styling to different html elements: transform background-image, in particular gradient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave.
Mozilla Web Developer FAQ
the property is font-family and @font-face is an at-rule.
CSSConditionRule - Web APIs
an object implementing the cssconditionrule interface represents a single condition css at-rule, which consists of a condition and a statement block.
CSSCounterStyleRule - Web APIs
the csscounterstylerule interface represents an @counter-style at-rule.
CSSGroupingRule - Web APIs
an object implementing the cssgroupingrule interface represents any css at-rule that contains other rules nested within it.
CSSKeyframeRule - Web APIs
it corresponds to the contains of a single keyframe of a @keyframes at-rule.
CSSNamespaceRule - Web APIs
the cssnamespacerule interface describes an object representing a single css @namespace at-rule.
CSSStyleSheet - Web APIs
for example, one rule might be a cssstylerule object containing a style such as: h1, h2 { font-size: 16pt; } another rule might be an at-rule such as @import or @media, and so forth.
CSSSupportsRule - Web APIs
the csssupportsrule interface describes an object representing a single css @supports at-rule.
PaintWorklet - Web APIs
<style> textarea { background-image: url(checkerboard); background-image: paint(checkerboard); } </style> <textarea></textarea> you can also use the @supports at-rule.
WindowEventHandlers.onafterprint - Web APIs
in general, you should prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases.
WindowEventHandlers.onbeforeprint - Web APIs
in general, you should prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases.
:first - CSS: Cascading Style Sheets
WebCSS:first
the :first css pseudo-class, used with the @page at-rule, represents the first page of a printed document.
:left - CSS: Cascading Style Sheets
WebCSS:left
the :left css pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document.
:right - CSS: Cascading Style Sheets
WebCSS:right
the :right css pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
fallback - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuedecimalcomputed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallbac...
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
prefix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
range - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; ...
speak-as - CSS: Cascading Style Sheets
let's talk about speech css | css tricks formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed...
suffix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value".
system - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuesymboliccomputed valueas specified formal syntax cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>?
@document - CSS: Cascading Style Sheets
WebCSS@document
the @document css at-rule restricts the style rules contained within it based on the url of the document.
font-display - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specificat...
font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.
font-stretch - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting a percentage range for font-stretch the following find a local open sans font or import it, and allo...
font-style - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the un...
font-variation-settings - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specificati...
font-weight - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the follow...
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax [ <url> [ format( <string># ) ]?
unicode-range - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font.
-webkit-transition - CSS: Cascading Style Sheets
instead, test for transition support using the css @supports at-rule, like this: @supports (transition: initial) { /* css to use if transitions are supported */ } obsolete example before this became obsolete, you could use -webkit-transition in your css like this: @media (-webkit-transition) { /* css to use if transitions are supported */ } specifications not part of any standard.
height - CSS: Cascading Style Sheets
WebCSS@viewportheight
formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-height: automax-height: nonepercentagesas each of the properties of the shorthand:min-height: the percentage is calculated with respect to the height of the generated box's containing block.
min-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in p...
orientation - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
width - CSS: Cascading Style Sheets
WebCSS@viewportwidth
formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing blockcomputed valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute lengthmax-width: the percentage a...
CSS Charsets - CSS: Cascading Style Sheets
reference at-rules @charset specifications specification status comment css level 2 (revision 1)the definition of '@charset' in that specification.
Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the result of that test.
CSS Conditional Rules - CSS: Cascading Style Sheets
reference at-rules @document @media @supports @import specifications specification status comment css conditional rules module level 3 candidate recommendation initial definition ...
CSS Counter Styles - CSS: Cascading Style Sheets
reference properties counter-increment counter-reset at-rules @counter-style system additive-symbols negative prefix suffix range pad speak-as fallback guides using css counters describes how to use counters to number any html element or to perform complex counting.
CSS Device Adaptation - CSS: Cascading Style Sheets
reference at-rules @viewport specifications specification status comment css device adaptation working draft initial definition ...
OpenType font features guide - CSS: Cascading Style Sheets
in this example you can see two different typefaces, and the introduction of the @font-feature-values at-rule.
CSS Fonts - CSS: Cascading Style Sheets
WebCSSCSS Fonts
erence properties font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-variation-settings font-weight line-height at-rules @font-face font-family font-feature-settings font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignme...
CSS Namespaces - CSS: Cascading Style Sheets
reference at-rules @namespace specifications specification status comment css namespaces module recommendation initial definition ...
CSS Paged Media - CSS: Cascading Style Sheets
WebCSSCSS Pages
reference css properties page-break-after page-break-before page-break-inside at-rules @page pseudo-classes :blank :first :left :right specifications specification status comment css paged media module level 3 working draft css fragmentation module level 3 candidate recommendation css level 2 (revision 1) recommendation ...
Using media queries - CSS: Cascading Style Sheets
media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules.
Shorthand properties - CSS: Cascading Style Sheets
see also css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
Viewport concepts - CSS: Cascading Style Sheets
see also @viewport css at-rule visual viewport api <meta>, specifically <meta name="viewport"> using the viewport meta tag to control layout on mobile browsers ...
animation-name - CSS: Cascading Style Sheets
the animation-name css property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element.
<basic-shape> - CSS: Cascading Style Sheets
examples animated polygon in this example, we use the @keyframes at-rule to animate a clip path between two polygons.
font-family - CSS: Cascading Style Sheets
the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
font-variant-alternates - CSS: Cascading Style Sheets
ariant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters.
Inheritance - CSS: Cascading Style Sheets
see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
url() - CSS: Cascading Style Sheets
WebCSSurl()
mage: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
Block formatting context - Developer guides
see also float, clear css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
HTML5 - Developer guides
WebGuideHTMLHTML5
custom typefaces can be downloaded and applied thanks to the new @font-face at-rule.
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 see also the @viewport css at-rule.
The building blocks of responsive design - Progressive web apps (PWAs)
note: there is a spec called device adaptation, which defines the same functionality but in css, using a @viewport at-rule.
cap-height - SVG: Scalable Vector Graphics
note: it was specified to share the syntax and semantics of the obsolete cap-height descriptor of the @font-face at-rule defined in an early version of css 2.
descent - SVG: Scalable Vector Graphics
WebSVGAttributedescent
note: it was specified to share the syntax and semantics of the obsolete descent descriptor of the @font-face at-rule defined in an early version of css 2.
string - SVG: Scalable Vector Graphics
WebSVGAttributestring
see the src descriptor of the @font-face at-rule for more information.