Summary of @ usage in CSS (with examples and explanations)

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

General Rules

General rules follow the following syntax:

The code is as follows:

@[KEYWORD] (RULE);

@charset
This rule defines the character set that the browser uses if the style sheet contains non-ASCII characters (eg:UTF-8). Note that the character set placed in the HTTP header will override the @charset rule.

The code is as follows:

@charset "UTF-8";

@import
This rule indicates that the style sheet is requested. In this line, if the content is correct, an external CSS file will be imported.

The code is as follows:

@import 'global.css';

Although popular CSS preprocessors all support @import, it should be noted that they work differently from native CSS: preprocessors grab CSS files and process them into one CSS file, while for native CSS, each @import is a separate HTTP request.
@namespace

This rule is very 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);

Nested Rules

Nested rules contain additional subset declarations, some of which only apply in certain situations.

The code is as follows:

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

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

The code is as follows:

@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 custom fonts to be loaded on web pages. There are varying degrees of support for custom fonts, but this rule accepts statements to create and serve these fonts.

The code is as follows:

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

@keyframes
This rule is the basis for keyframe animations among many CSS properties, and allows us to mark the beginning and end of an animation.

The code is as follows:

 @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-specific styles.

The code is as follows:

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

The code is as follows:

@media print {
}

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

The code is as follows:

@page :first {
margin: 1in;
}

@supports
This rule tests whether the browser supports a certain feature/functionality, and if so, applies specific styles to those elements. A bit like Modernizr, but for CSS properties.

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

This is the end of this article about the summary of @ usage in CSS. For more relevant CSS @ usage content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!