CSS: You may not know @rules_html/css_WEB-ITnose

at-rule is a statement that provides instructions for CSS to execute or behave. Each declaration begins with @, followed by an available keyword, which acts as an identifier to indicate what the CSS should do. This is a general syntax, although there are other syntax variations for each at-rule.

General rules

General rules follow the following syntax:

@[KEYWORD] (RULE);

@charset
This rule defines the character set used by the browser if the stylesheet contains Non-ASCII characters (e.g:UTF-8). Note that the charset placed in the HTTP header will override the @charset rule

@charset "UTF-8";

@import
This rule indicates that the stylesheet is requested. In this line, if the content is correct, it will Introduce an external CSS file.

@import 'global.css';

Although popular CSS preprocessors all support @import, it should be noted that they work differently from native CSS: the preprocessor grabs the CSS files and processes them into A CSS file. For native CSS, each @import is an independent HTTP request.
@namespace
This rule is very useful for applying CSS to XML HTML (XHTML), because the XHTML element 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 contain 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 specific pages. For example, we provide a URL and then customize the styles for this specific page. In other pages, these styles will be 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 the loading of custom fonts on web pages. There is varying degrees of support for custom fonts, but this rule accepts statements to create and serve these fonts.

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

@keyframes
Among many CSS properties, this rule is the basis for keyframe animations, and allows us to mark the beginning and end of animations.

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

@media
This rule contains conditional declarations that can be used to specify styles for specific screens. These declarations can include screen sizes, which can be useful in screen-adaptive styles.

/* 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 just apply the style when the document is printed

@media print {}

@page
This rule defines styles for individual pages that will be printed. In particular, it can set margins for page pseudo-elements: :first, :left and :right

@page :first { margin: 1in; }

@supports
This rule can test whether the browser knows whether it supports a certain feature/function , specific styles will be applied to these elements if the conditions are met. A bit like Modernizr, but really CSS properties.

/* 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-rule can make CSS do some crazy and interesting things. Although the examples in the article are basic, you can see how they can be used with styles for specific conditions to create user experiences and interactions that match specific scenarios.