will-change
The will-change attribute is used to provide a hint to the browser that an element or its specific attributes are likely to change in the future. This helps the browser optimize the relevant rendering process in advance and improve the performance of animations or other dynamic effects.
element {
will-change: auto | <animateable-feature> [, <animateable-feature>]*;
}auto(default): The browser decides whether to optimize based on its own algorithm.<animateable-feature>: Animatable feature, which can be one of the following values:scroll-position: The scroll position of the element.contents: The content of the element.transform,opacity,filter,clip-path,perspective,contain,isolationand other animatable CSS property names.custom-ident: A custom identifier to support future animatable features.
.animating-element {
will-change: transform, opacity; /* Prompts the browser that the transform and opacity properties of the element will change */
}tab-size
The tab-size property defines the width of the space occupied by the tab character (the space generated by the Tab key) within the element, usually expressed in the number of spaces or length units
element {
tab-size: <integer> | <length>;
}pre {
tab-size: 4; /* Each tab character occupies four spaces */
}object-fit, object-position
object-fit, object-position These two properties are used to control the adaptation and positioning of embedded <img>, <video>, <svg> and other replaced elements in the container.
- object-fit: Specifies how the element’s content fits the size of its container. Possible values are:
- fill (default): stretch the content to fill the container.
- contain: maintain the original aspect ratio of the content, scale the content to the maximum size so that it fits completely inside the container.
- cover: maintain the original aspect ratio of the content, scale the content to the minimum size, and ensure that the content completely covers the container.
- none: the content remains at its original size and may overflow the container.
- scale-down: similar to contain, but if the content can also fit in the container without scaling, its original size is used.
- object-position: specifies the positioning of the content within the container. Similar to background-position, accepts one or two values, which can be lengths, percentages, keywords (such as top, center, bottom, left, right), or a combination of them.
img {
object-fit: cover; /* The image content covers the container, maintaining the aspect ratio */
object-position: center; /* The image content is centered in the container */
}counter-reset, counter-increment
counter-reset, counter-increment These two properties are related to CSS counters and are used to create, reset, and increment counter values.
element {
counter-reset: <counter-name> [<integer>?];
}<counter-name>: The name of the counter, for subsequent reference.<integer>(optional): The initial value of the counter, defaulting to 0.
ol {
list-style-type: none;
counter-reset: chapter;
}
ol li:before {
content: counter(chapter) ". ";
counter-increment: chapter;
}content
The content attribute is only used in pseudo-elements (such as :before, :after) to insert generated content. Its value can be a string, URI, counter, attr() function, quotes, etc. The basic syntax is as follows:
element::before|::after {
content: normal | none | <string> | <uri> | attr(...) | open-quote | close-quote | no-open-quote | no-close-quote | <counter()> | <counters()> | <string> <url> | <string> <counter()> | <string> <counters()> | <image()> | <target-counter()> | <target-counters()> | <leader()> | <element()> | <target-text()> ;
}.quote::before {
content: open-quote; /* insert an open quote before the element */
}
.quote::after {
content: close-quote; /* insert a close quote after the element */
}quotes
blockquote {
quotes: '\201C' '\201D' '\2018' '\2019'; /* Use Unicode characters to set double quotes and single quotes */
}
blockquote q::before {
content: open-quote;
}
blockquote q::after {
content: close-quote;
}writing-mode, irection
writing-mode, direction These two properties are related to the writing mode and flow of the text.
- writing-mode: Defines the horizontal or vertical layout of the text, as well as the order of lines and blocks. Optional values include:
- horizontal-tb (default): horizontal direction, top to bottom.
- vertical-rl: vertical direction, right to left.
- vertical-lr: vertical direction, left to right.
- sideways-rl: text is rotated 90 degrees, from right to left.
- sideways-lr: text is rotated 90 degrees, from left to right.
- direction: defines the reading direction of the text. Optional values include:
- ltr (default): from left to right.
- rtl: from right to left.
.vertical-text {
writing-mode: vertical-rl;
direction: ltr;
}
