Detailed explanation of @ usage in CSS

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:

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 override the @charset rule

The code is as follows:

@charset "UTF-8";

@import
This rule indicates the requested stylesheet , in this line, if the content is correct, an external CSS file will be introduced.

The code is as follows:

@import 'global.css';

Although popular CSS preprocessors all support @import, it should be pointed out that their working principles are different from native CSS: the preprocessor will crawl CSS files and process them into a CSS file. For native CSS, each @import is a separate 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 use.

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 can only be used for specific Condition.

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 then 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 loading custom fonts 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
Among many CSS properties, this rule is the basis of keyframe animation and allows us to mark the start and end of the animation. symbols of.

The code is as follows:

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

@media
This rule contains conditional statements that can be used to specify styles for specific screens. These statements can include the screen size, and when appropriate. It will be very useful in the screen style.

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 only use the style when printing the document

The code is as follows:

@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

The code is as follows:

@page :first {
margin: 1in;
}

@supports
This Rules test whether the browser knows about a feature/functionality and, if the conditions are met, apply specific styles to those elements. A bit like Modernizr, but really 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; }
}

Summary

at-rule can make CSS do some crazy and interesting things. Although the examples in the article are very basic, you can see how they can be used for specific conditions to create user experiences and interactions that match specific scenarios.

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of Detailed explanation of @ usage in CSS. For more information, please follow other related articles on the PHP Chinese website!