diff options
Diffstat (limited to 'files/pt-pt/web/css/at-rule/index.html')
-rw-r--r-- | files/pt-pt/web/css/at-rule/index.html | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/at-rule/index.html b/files/pt-pt/web/css/at-rule/index.html new file mode 100644 index 0000000000..bbf7651358 --- /dev/null +++ b/files/pt-pt/web/css/at-rule/index.html @@ -0,0 +1,83 @@ +--- +title: Regra "At" +slug: Web/CSS/At-rule +tags: + - AT + - CSS + - Referencia + - Regra +translation_of: Web/CSS/At-rule +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">Uma <strong>regra "at"</strong> is a <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">CSS statement</a> beginning with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and includes everything up to the next semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>), or the next <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS block</a>, whichever comes first.</span></p> + +<pre class="brush: css">/* General structure */ +@IDENTIFIER (RULE); + +/* Example: tells browser to use UTF-8 character set */ +@charset "utf-8";</pre> + +<p>There are several at-rules, designated by their identifiers, each with a different syntax:</p> + +<ul> + <li>{{cssxref("@charset")}} — Defines the character set used by the style sheet.</li> + <li>{{cssxref("@import")}} — Tells the CSS engine to include an external style sheet.</li> + <li>{{cssxref("@namespace")}} — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.</li> + <li><strong><em>at-rules integradas</em></strong> — A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules: + <ul> + <li>{{cssxref("@media")}} — A conditional group rule which will apply its content if the device meets the criteria of the condition defined using a <em>media query</em>.</li> + <li>{{cssxref("@supports")}} {{experimental_inline}} — A conditional group rule which will apply its content if the browser meets the criteria of the given condition.</li> + <li>{{cssxref("@document")}} {{experimental_inline}} — A conditional group rule which will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. <em>(deferred to Level 4 of CSS Spec)</em></li> + <li>{{cssxref("@page")}} — Describes the aspect of layout changes which will be applied when printing the document.</li> + <li>{{cssxref("@font-face")}} — Describes the aspect of an external font to be downloaded.</li> + <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describes the aspect of intermediate steps in a CSS animation sequence.</li> + <li>{{cssxref("@viewport")}} {{experimental_inline}} — Describes the aspects of the viewport for small screen devices. <em>(currently at the Working Draft stage)</em></li> + <li>{{cssxref("@counter-style")}} — Defines specific counter styles that are not part of the predefined set of styles. <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li> + <li>{{cssxref("@font-feature-values")}} (plus <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> and <code>@character-variant</code>)<br> + — Define common names in {{cssxref("font-variant-alternates")}} for feature activated differently in OpenType. <em>(at the Candidate Recommendation stage, but only implemented in Gekko as of writing)</em></li> + </ul> + </li> +</ul> + +<h2 id="Regras_de_grupo_condicionais">Regras de grupo condicionais</h2> + +<p>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 <strong>conditional group rules</strong>. These statements share a common syntax and each of them can include <em>nested statements</em>—either <em>rulesets</em> or <em>nested at-rules</em>. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either <strong>true</strong> or <strong>false</strong>. If the condition evaluates to <strong>true</strong>, then all of the statements within the group will be applied.</p> + +<p>Conditional group rules are defined in <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> and are:</p> + +<ul> + <li>{{cssxref("@media")}},</li> + <li>{{cssxref("@supports")}},</li> + <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li> +</ul> + +<p>Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Standardizes <code>@-webkit-keyframes</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Consultar_também">Consultar também:</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> |