At-rulesA rule is a common grammatical rule in CSS at present. It uses a "@"symbol plus a keyword definition, followed by a grammatical block. If there is no such rule, it can be terminated with a semicolon.
This kind of rule is generally used to identify documents, introduce external styles, conditional judgments, etc. This article is a summary of the use of this rule.
common rules
@import
@import is mainly used to import new style rules from other style sheets, syntax: @import url|string list-of-mediaqueries;.
- url|string: The style resource path that needs to be imported, either relative or absolute;
- list-of-mediaqueries: A comma-separated list of conditions to determine the conditions under which the style resource is introduced, and supports media query conditions.
@import "./reset.css";
@import url("./reset.css")
When using conditional judgment, you can use media query conditions.
/* 宽度小于1000px才会生效 */
@import "./reset.css" screen and (max-width: 1000px);
Also, when using this syntax in html files or stylesheets ( not using modern frameworks ), there are two things to note:
- Import location: It must be at the head of the style file or
<style>block. Other css styles cannot appear before, but can be@charsetbehind. - Cannot be used in conditional nesting syntax.
When using frameworks such as vue,
@importcss styles can appear before and can also be used in conditional nesting syntax, because imported style resources will be parsed into specific styles on the page.
@font-face
@font-face is used to load custom fonts. It belongs to the commonly used syntax of the front-end at present, and there are many open source font icon libraries that can be used.
It not only supports providing font resource file paths for loading, but also supports loading fonts installed locally by users.
@font-face {
font-family: "iconfont";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834');
}
@font-face {
font-family: "iconfont";
src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
}
The above is an example of loading font resources.
@font-face defines a CSS block with multiple attribute values:
- font-family: Specifies the font name, which is used for font or font-family attributes;
- src: load font resources;
- url(): load the font resource file;
- local(): load the local computer font name, such as
src: local("Arial");;
- font-style: description of the font specified by src;
- font-variant
- font-weight
@font-face {
font-family: "sys-Arial";
src: local("Arial");
font-weight: normal;
}
As above, use local to load the local system font name.
@charset
@charset specifies the required character encoding for the style sheet file, which can only be used in CSS files, syntax: @charset "charset";.
- charset: Specifies the character set used.
@charset "UTF-8";
Features:
- It is used in the style sheet file, and cannot be
<style>used in the block or element style attribute of the html file. - Must appear first in the stylesheet file.
- Use a valid character encoding and double quotes, separated by only one space character, and terminated with a semicolon.
- Cannot be used in conditional nesting syntax.
- If there are multiple @charset declarations, only the first one will take effect.
The order in which character encodings are used by browsers to parse style sheet files:
- The encoding format of the file;
- The charset attribute value in the http request response;
- @charset；
- link setting;
- Default UTF-8;
@keyframes
@keyframes is used to control the intermediate steps of CSS animations by defining the style of the keyframes in the animation sequence.
Grammar definition: @keyframes animationname { keyframes-selector { css-styles; } }.
- animationname: animation name, used as an identifier for animation reference;
- keyframes-selector: The name selector of the keyframe, which is used to specify which node the keyframe is used in the animation process, usually the time node, and there are two value methods:
- Percentage: 0% - 100%, node for percentage of time
- from and to: from is equal to the start time from, and to is equal to the end time
- css-styles: Specifies the style attribute value of the current keyframe.
@keyframes dropIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes wave {
0% {
transform: translateY(0);
}
45% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
As above, use the keyframe animation style defined in two ways.
Feature description:
- When no start or end state is specified, the element's shared style is used as the start or end state;
- When there are multiple keyframes with the same name, if the style attributes are the same, the last one shall prevail; if the style attributes are different, all attributes will be merged to work together;
- If you use a property that cannot be used for animation in a keyframe style, it will be ignored;
- Using a bound style in a keyframe
!importantis ignored and has no effect.
For the best animation experience, a start and end state should always be defined.
@media
@media media queries define different styles based on different media query results. It is mostly used for differentiated style settings for different screen sizes, and to do some responsive page design. In addition, if the size of the browser is scaled, the page style can be re-rendered according to the query width and height.
Syntax: @media mediatype and|not|only (media feature) { CSS-Style; }.
illustrate:
- mediatype: Media type, describing the device category, generally all, print, screen, speech, default all:
- all: all devices;
- print: print preview mode;
- screen: for the screen;
- speech: speech synthesizer;
- Media feature: Describes the specific conditions and characteristics of the device and environment; it must be enclosed in brackets, and the commonly used ones are:
- Width and height categories: width, max-width, min-width, height, max-height, min-height, etc.;
- Others: color, grid, orientation, resolution, scan, etc.;
- Logical operators: and, not, only,,:
- and: a combination of multiple rules, each of which must be satisfied;
- not: negate a query rule;
- only: only when the entire query matches;
- Comma,: Combine multiple queries, one is enough, similar
or;
@media screen (max-width: 1000px) {
div {
background-color: red;
}
}
/*或者嵌套*/
@media screen {
@media (max-width: 1000px) {
div {
background-color: red;
}
}
}
The above example is the way we often use.
@mediaMedia query can also be@importused as the condition of , which has been introduced above.
used in link and style
In the statement that introduces the style sheet <link>, media queries can also be used to load different style files according to different conditions:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">
Media queries can also be used in <style>style blocks:
<style media="screen and (max-width: 1000px)">
div {
background-color: red;
}
</style>
JS detect media query
Use the Window.matchMedia() and MediaQueryList.addListener() methods to test and monitor media status.
How to use:
// 获取媒体查询MediaQueryList对象，有matches
const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
console.log(1, screenMediaQueryList)
// matches: true -- 当前媒体查询规则已生效，为false则不生效
// media: "(max-width: 1000px)"
screenMediaQueryList.addEventListener('change', (res) => {
console.log(2, res)
})
You can get whether the media query rule is currently used, or listen to the change event of the media query state.
uncommon rules
Here are some less used @ rules.
@supports
@supports is used to specify support declarations that depend on the browser for one or more specific CSS features. It is often used to determine whether the current browser supports a certain CSS feature function, so it is also called feature query.
ie does not support it.
For details on determining custom attributes, see Using CSS Custom Attributes to Switch Page Themes .
@supports ((--a: 0)) {
/* 支持自定义属性 */
}
@supports (not (--a: 0)) {
/* 不支持自定义属性 */
}
Grammar consists of a set of style declarations and a supporting condition. There can be multiple supporting conditions, which can be combined with and、or、notand so on; parentheses can also be used to adjust the priority.
/* 浏览器支持grid */
@supports (display: grid) {
div {
}
}
/* 不支持grid */
@supports not (display: grid) {
}
/* 不支持gri和flex */
@supports not ((display: grid) and (display: flex)) {
}
other
- @namespace: is the @ rule used to define the XML namespace used in the CSS style sheet. Defined namespaces can restrict globbing, element and attribute selectors to elements within the specified namespace.
- @page: It is mainly used to modify certain CSS properties when printing documents, and the compatibility is not high.
- counter-style: Defines how to convert the value of a counter into a string representation.