CSS operators with @

Asked

Viewed 432 times

11

As I had asked about the operator @media, I was curious, because I saw other operators that started with @and I would like to understand what they serve operators like this, and which ones exist.

html html5 css3

3 answers

11


The @ operators are used to establish some rules in the CSS. The most commonly used, in addition to @media which has already been described in your last question, are:

@import: used to import a style sheet into the current sheet. This collaborates to modularize the code, but it is important to mention that each import generates a new HTTP request, which may decrease the performance of the application if there are too many Imports. Some frameworks like Angular 4 solve this problem, however, using their own import guidelines. 

<style type="text/css">
   @import "mystyle.css";
   @import url("mystyle.css");
</style>

@Keyframes: Basically, it makes it possible to establish animation intervals, with the style or positioning modifications that will occur in each interval. An example of the animation (and its code) can be found here.

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

@charset: identifies which character encoding will be used, the most common being UTF-8 and ISO-8859-1. However, character encoding is usually stated in a metatag in the HTML itself.

<style type="text/css">
   @charset "UTF-8"
</style>

OR, in HTML5:

<meta charset="UTF-8">

@font-face: Used to describe in more detail a source used in the document.

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

9

In accordance with the documentation that’s called at-Rule (probably rule-arroba in English)

There are several at-Rules, designated by their identifiers, each with a different syntax:

  • @charset - Defines the charset used by css
  • @import - Adds an external CSS
  • @namespace - The style is applied to elements that have XML namespace prefixes as per the rule.

At-Nested Rafters

It is a subset of nested statements, which can be used as a statement of a stylesheet, as well as within 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 condition.

  • @document (Experimental) - A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (Level 4 of the CSS specification)

  • @page - Describes what layout changes will look like when printing the document.

  • @font-face - Describes what an external source to download looks like.

  • @keyframes - Describes the aspect of intermediate steps in a CSS animation sequence.

  • @viewport (Experimental) - Describes aspects of the viewport for small screen devices.

  • @counter-style - Defines specific counter styles that are not part of the default style set.

  • @font-feature-values (adds @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) - Set common names in variant-source variants for resource enabled differently in Opentype (only implemented in Gecko - Firefox)

Conditions of group rules

Like property values, each rule has a different syntax. However, several of them can be grouped into a special category called conditional group rules.

These statements share a common syntax and each of them may include nested statements (or nested rule sets or rules, plus they all convey a common semantic meaning) they all bind some kind of condition that, at any time, is evaluated whether true or false.

If the condition is assessed as true, all statements within the group will be applied.

The conditions of group rules are set out in CSS Conditionals Level 3, are they:

8

To @import: import another style sheet into the current style sheet

To @charset: indicates which encoding the stylesheet will use

To @font-face: Used to describe the type of font that will be used

To !important: Indicates that a user-defined rule must take precedence over the author’s style sheets.

Examples:

@import:

<style tyle="text/css">
   <!--
   @import "mystyle.css";
   or
   @import url("mystyle.css");
   .......other CSS rules .....
   -->
</style>

@charset:

<style tyle="text/css">
   <!--
   @charset "iso-8859-1"
   .......other CSS rules .....
   -->
</style>

@font-face 

<style tyle="text/css">
   <!--
   @font-face {
      font-family: "Scarborough Light";
      src: url("http://www.font.site/s/scarbo-lt");
   }
   @font-face {
      font-family: Santiago;
      src: local ("Santiago"),
      url("http://www.font.site/s/santiago.tt")
      format("truetype");
      unicode-range: U+??,U+100-220;
      font-size: all;
      font-family: sans-serif;
   }
   -->
</style>

!Important:

<html>
   <head>

      <style tyle="text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>

   </head>
   <body>
      <p>Tutorialspoint.com</>
   </body>
</html>

For examples and more information:

https://www.tutorialspoint.com/css/css_at_rules.htm

Browser other questions tagged html html5 css3

You are not signed in. Login or sign up in order to post.