The usage summary of some @ rules in CSS

At-rule is a statement that provides CSS with instructions on how to perform or how to behave. Each declaration begins with a @, followed by a usable keyword, which acts as an identifier to indicate what the CSS should do. This is a common syntax, although each at-rule has other syntactic variants.

General rules

The general rules follow the following syntax:

The code is as follows:

@[keyword] (rule);

@charset

This rule defines the character set used by the browser, if the style sheet contains non-ASCII characters (E.G:UTF-8). Note that the character set that is placed in the HTTP header will overwrite the @charset rule

The code is as follows:

@charset "UTF-8";

@import

This rule indicates that the request stylesheet, in this line, will introduce an external CSS file if the content is correct.

The code is as follows:

@import ' Global.css ';

Although the popular CSS preprocessor supports @import, it should be noted that they work differently from native CSS: The preprocessor crawls CSS files and processes them into a CSS file, and each @import is a separate HTPP request for native CSS.

@namespace

This rule is useful for applying CSS to XML HTML (XHTML), because XHTML elements can be used as a selector in CSS.

The code is as follows:

/* Namespace for XHTML */

@namespace URL (http://www.w3.org/1999/xhtml);

/* Namespace for SVG embedded in XHTML * * *

@namespace svg url (http://www.w3.org/2000/svg);

Nesting rules

Nested rules contain additional subset declarations, some of which can only be used in a particular case.

The code is as follows:

@[keyword] {

/* Nested Statements * *

}

@document

This rule specifies a condition for the style sheet: it can only be applied to a specific page. For a chestnut, we provide a URL and then customize the style for that particular page, which is ignored in other pages.

The code is as follows:

@document

/* Rules for a specific page * *

URL (http://css-tricks.com/),

/* Rules for the pages with a URL, "begin with ... *"

Url-prefix (http://css-tricks.com/snippets/),

/* Rules for all page hosted on a domain * *

Domain (css-tricks.com),

/* Rules for all secure pages * *

RegExp ("https:.*")

{

/* Start Styling * *

body {font-family:comic Sans;}

}

@font-face

This rule allows custom fonts to be loaded on Web pages, with varying degrees of support for custom fonts, but this rule accepts statements to create and provide these fonts.

The code is as follows:

@font-face {

font-family: ' Mywebfont ';

Src:url (' myfont.woff2 ') format (' Woff2 '),

URL (' myfont.woff ') format (' Woff ');

}

@keyframes

In many CSS properties, this rule is the basis for key-frame animations and allows us to mark the beginning and end of the animation.

The code is as follows:

@keyframes Pulse {

0% {

Background-color: #001f3f;

}

100% {

Background-color: #ff4136;

}

}

@media

This rule contains a conditional declaration that can be used to specify a style for a specific screen that contains the screen size and is useful in the appropriate screen style.

The code is as follows:

* * IPhone in portrait and landscape * *

@media only

and (min-device-width:320px)

and (max-device-width:480px)

and (-webkit-min-device-pixel-ratio:2) {

. module {width:100%;}

}

Or use styles only when the document is printed

The code is as follows:

@media Print {

}

@page

This rule defines the style for the individual pages that will be printed. In particular, it can set the outer margin for the page pseudo elements:: "I," Left and: Right

The code is as follows:

@page:

margin:1in;

}

@supports

This rule tests whether the browser knows if a feature/feature is supported, and if so, will apply a specific style to those elements. A bit like Modernizr, but it's a CSS property.

The code is as follows:

/* Check One supported condition * *

@supports (Display:flex) {

. module {Display:flex;}

}

/* Check Multiple conditions * *

@supports (Display:flex) and (-webkit-appearance:checkbox) {

. module {Display:flex;}

}

Summarize

At-rule can make CSS do some crazy interesting things. Although the examples in the article are very basic, you can see how they use styles for specific conditions, creating a user experience and interaction that matches a particular scenario.