Home > Web Front-end > Front-end Q&A > What is the role of @ in css?

What is the role of @ in css?

青灯夜游
Release: 2022-09-16 17:22:53
Original
2347 people have browsed it

In css, "@" is a statement that provides instructions for CSS execution or how to behave. Each rule declaration begins with "@", followed by an available keyword, which acts as an identifier to indicate what CSS should do; for example, the "@charset" rule defines the character set used by the browser , the "@font-face" rule allows loading custom fonts on web pages.

What is the role of @ in css?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

@ The @import era has existed in CSS1, and is called at-rules in CSS.

at-rule is a statement that provides instructions for CSS execution or how to behave. Each rule 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);
Copy after login

@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";
Copy after login

@import

This rule indicates Request the style sheet. In this line, if the content is correct, an external CSS file will be introduced.

The code is as follows:

@import 'global.css';
Copy after login

Although popular CSS preprocessors support @import, it should be noted 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 XHTML elements can be used as A selector is used.

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);
Copy after login

Nested rules

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

The code is as follows:

@[KEYWORD] {
/* Nested Statements */
}
Copy after login

@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; }
}
Copy after login

@font-face

This rule allows loading custom fonts on web pages, and there are differences for custom fonts level of support, 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');
}
Copy after login

@keyframes

Among many CSS properties, this rule is the basis of keyframe animation and allows us to mark animations Start and end signs.

The code is as follows:

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

@media

This rule contains conditional statements that can be used to specify styles for specific screens. These statements can include screen sizes. , it will be very useful in screen-adaptive 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%; }
}
Copy after login

Or only use the style when printing the document

The code is as follows:

@media print {
}
Copy after login

@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;
}
Copy after login

@supports

This rule can test whether the browser supports a certain feature/function. If the conditions are met, specific styles will be applied to these 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; }
}
Copy after login

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.

(Learning video sharing:

web front-end)

The above is the detailed content of What is the role of @ in css?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css @
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template