viewport property CSS Reference

---

Definition and Usage

The @viewport at-rule consists of the @-keyword followed by a block of descriptors describing the viewport.

The descriptors inside an @viewport rule are per document and there is no inheritance involved. Hence declarations using the 'inherit' keyword will be dropped. They work similarly to @page descriptors and follow the cascading order of CSS. Hence, descriptors in @viewport rules will override descriptors from preceding rules. The declarations allow !important which will affect cascading of descriptors accordingly.

@viewport rules apply to top level documents only.

---

Syntax

The syntax for the @viewport rule is as follows (using the notation from the Grammar appendix of CSS 2.1

viewport
  : VIEWPORT_SYM S*
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*;

with the new token:

@{V}{I}{E}{W}{P}{O}{R}{T} {return VIEWPORT_SYM;}

where:

V               v|\\0{0,4}(56|76)(\r\n|[ \t\r\n\f])?|\\v
W               w|\\0{0,4}(57|77)(\r\n|[ \t\r\n\f])?|\\w

The viewport non-terminal is added to the stylesheet production along with the ruleset, media, and page non-terminals:

stylesheet
  : [ CHARSET_SYM STRING ';' ]?
    [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
    [ [ ruleset | media | page | viewport ] [ CDO S* | CDC S* ]* ]*
  ;

It is also added to media production to allow @viewport rules nested inside @media rules This is extending the CSS 2.1 syntax. A draft of CSS3 Paged Media also allows page inside @media.:

media
  : MEDIA_SYM S* media_list LBRACE S* [ ruleset | viewport ]* '}' S*
  ;

---

Examples

@viewport {
  width: 320px auto;
}