Share the usage of some @ rules in CSS

This article mainly share CSS in some of the use of the rules, is the basic knowledge of CSS primer learning, the need for friends can refer to the following

At-rule is a statement that provides the CSS with instructions for performing or how to behave. Each declaration begins with an @, followed by an available keyword, which acts as an identifier that represents what the CSS does. 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 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 style sheet, in this row, if the content is correct, will introduce an external CSS file.

The code is as follows:

@import ' Global.css ';

While the popular CSS preprocessor supports @import, it should be noted that they work differently from native CSS: the preprocessor fetches CSS files and processes them into a CSS file, and for native CSS, each @import is a separate HTPP request.
@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 for specific situations.

The code is as follows:

@[keyword] {/          * Nested statements */        }

@document
This rule specifies the criteria for a style sheet: apply only to a specific page. For a chestnut, we provide a URL and then customize the style for that particular page, which is ignored on other pages.

The code is as follows:

@document/* Rules for a specific page */url (http://css-tricks.com/),/* rules for pages with a URL, ' begin with ... */ur L-prefix (http://css-tricks.com/snippets/),/* rules for any page hosted on a domain */domain (css-tricks.com),/* rules for a ll 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 Keyframe animation 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 conditional declarations that you can use to specify styles for specific screens that can contain screen sizes and are useful in a fit-screen style.

The code is as follows:

/* IPhone in Portrait and Landscape */@media only screen and           (min-device-width:320px) and           (Max-device-widt h:480px) and          (-webkit-min-device-pixel-ratio:2) {            . module {width:100%;}        }

or apply styles only when the document is printed

The code is as follows:

@media Print {        }

@page
This rule defines the style for individual pages that will be printed. In particular, it can set margins for page artifacts:: First,: Left, and: right

The code is as follows:

@page: first {          margin:1in;        }

@supports
This rule tests that the browser knows whether a feature/feature is supported, and if the condition is met, a particular style will be applied to those elements. A bit like Modernizr, but it's really 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 the CSS do some crazy fun things. Although the examples in this article are very basic, you can see how they use styles for specific conditions to create user experiences and interactions that match a particular scene.