CSS: @ rules that you may not know, CSS: @ rules

CSS: @ rules that you may not know, CSS: @ rules

at-ruleIt is a declaration that provides instructions for CSS execution or how to express it. Each statement@Followed by an available keyword. This keyword acts as an identifier to indicate what CSS should do. This is a general syntax, although eachat-ruleThere are other syntax variants.

General rules

General rules follow the following syntax:

@[KEYWORD] (RULE);

@charset
This rule defines the character set used by the browser.ASCII characters(E. g:UTF-8). Note:HTTP HeaderWill overwrite the character set@charsetRules

@charset "UTF-8";

@import
This rule indicates the request style table. In this row, if the content is correct, an external CSS file will be introduced.

@import 'global.css';

Although popular CSS preprocessors support@importBut it should be pointed out that their working principle is different from that of native CSS: The Preprocessor will capture CSS files and process them into a CSS file, for native CSS, each @ import request is an independent HTPP request.
@namespace
This rule is very useful for applying CSS in xml html (XHTML) Because XHTML elements can be used as a selector in CSS.

/* 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);

Nested rules

Nested rules include additional subset declarations, some of which can only be used in specific situations.

@[KEYWORD] {  /* Nested Statements */}

@document
This rule specifies a condition for the style sheet: it can only be applied to a specific page. For example, we provide a URL and customize the style for this specific page. In other pages, these styles are ignored.

@document   /* Rules for a specific page */  url(http://css-tricks.com/),  /* Rules for pages with a URL that begin with... */  url-prefix(http://css-tricks.com/snippets/),  /* Rules for any 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 you to load custom fonts on Web pages.Different levels of supportBut this rule accepts the statement to create and provide these fonts.

@font-face {  font-family: 'MyWebFont';  src:  url('myfont.woff2') format('woff2'),        url('myfont.woff') format('woff');}

@keyframes
In many CSS attributes, this rule is the basis of the key frame animation, and allows us to mark the start and end of the animation.

@keyframes pulse {  0% {    background-color: #001f3f;  }  100% {    background-color: #ff4136;  }}

@media
This rule contains condition declarations that can be used to specify a style for a specific screen. These declarations can contain the screen sizeScreen StyleIs useful.

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

Or use the style only when the document is printed.

@media print {}

@page
This rule defines a style for a separate page to be printed. Specifically, it can set the margin for the page pseudo elements::first,:leftAnd:right

@page :first {  margin: 1in;}

@supports
This rule can be used to test whether the browser supports a certain feature or function. If conditions are met, a specific style will be applied to these elements. A bit likeModernizrBut it is indeed a CSS attribute.

/* Check one supported condition */@supports (display: flex) {  .module { display: flex; }}/* Check multiple conditions */@supports (display: flex) and (-webkit-appearance: checkbox) {  .module { display: flex; }}

Browser support for @ supports:

Chrome	Safari	FireFox	Opera	IE	Android	IOS
28 +	No	31 +	12.1 +	No	4.4 +	No

For more information of @ supports, click here: @ supports

Summary

at-ruleCSS can be used to do crazy and interesting things. Although the examples in this article are very basic, we can see how they use styles for specific conditions to create user experience and interaction matching specific scenarios.

Http://www.ido321.com/1595.html.