Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the new attributes of CSS3+". In daily operation, I believe many people have doubts about the new attributes of CSS3+. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the new attributes of CSS3+?" Next, please follow the editor to study!

New attribute

The following is a list of new CSS3 properties added to CSS3.

Animation (and eight associated longhand properties)

Background-clip

Background-origin

Background-size

Border-radius (and four associated longhand properties)

Border-image (and six associated longhand properties)

Box-decoration-break

Box-shadow

Box-sizing

Columns (and thirteen associated multi-column properties)

Clear-after

Flex (and eleven associated flexbox properties)

Font-stretch

Font-size-adjust

Font-synthesis

Font-kerning

Font-variant-caps

Hanging-punctuation

Hyphens

Icon

Image-resolution

Image-orientation

Line-break

Object-fit

Object-position

Opacity

Outline-offset

Overflow-wrap / word-wrap

Backface-visibility

Perspective

Perspective-origin

Pointer-events (for HTML)

Resize

Tab-size

Text-align-last

Text-decoration-line

Text-decoration-skip

Text-decoration-position

Text-decoration-style

Text-emphasis (and three associated properties)

Text-justify

Text-orientation

Text-overflow

Transform

Transform-style

Text-shadow

Transition (and four associated longhand properties)

Word-break

Word-spacing

Writing-mode

New valu

For the new values for CSS2.1 in CSS3, here is a list of new values for each property.

Value "local" for the background-attachment property

Value "rgba ()" for any property that accepts a color value

Value "hsl ()" for any property that accepts a color value

Value "hsla ()" for any property that accepts a color value

Value "currentColor" for any property that accepts a color value

Value "inset ()" for the clip property

Value "linear-gradient ()" for any property that accepts an image value

Value "radial-gradient ()" for any property that accepts an image value

Value "repeating-linear-gradient ()" for any property that accepts an image value

Value "repeating-radial-gradient ()" for any property that accepts an image value

Value "image ()" for any property that accepts an image value

Multiple comma-separated images for any property that accepts an image value

Multiple comma-separated background-related values to match multiple background image declarations

Value "center" for the position property

Value "page" for the position property

Value "space" for the background-repeat property

Value "round" for the background-repeat property

15 new values for the cursor property

Values "flex" and "inline-flex" for the display property

Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property

Multiple, space-separated values for the letter-spacing property

New values for the text-align property, including "," match-parent "," start "," end ", and" start end "

Text-decoration is now a shorthand property

Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property

Value "full-width" for the text-transform property

Rem units for lengths

Calc () units for lengths

Toggle () units

Angle units (deg, grad, rad, turn)

Time units (s, ms)

New selector

Here are the new selectors in CSS3.

Substring matching attribute selectors ([att^ = val], [att$=val], [att*=val])

: target pseudo-class

New pseudo-classes:: enabled,: disabled,: checked, and: indeterminate

: root pseudo-class

New expression-based structural pseudo-classes:: nth-child (),: nth-last-child (),: nth-of-type (), nth-last-of-type ()

Other new structural pseudo-classes:: last-child,: first-of-type,: last-of-type,: only-child,: only-of-type,: empty

The negation pseudo-class: not ()

Four pseudo-elements with double-colon syntax (:: first-line,: first-letter,::before,:: after)

The following-sibling combinator (p ~ img)

:: selection pseudo-class (removed from the spec, but everyone uses it)

Other new features

Features that are not included in other CSS2.1.

@ font-face

Media Queries

Keyframe animations using @ keyframes

Conditional styles using @ supports

Namespacing using @ namespace

Regions

Filters

Characteristics that are still changing

The above list is not exhaustive, there are many specifications that are still in development, and there are not many browsers to support. Here is a list of these new modules.

Counter Styles Level 3

Device Adaptation

Display Module Level 3

Line Grid

Mobile Text Size Adjustment

CSS Variables

Box Alignment

The "all" property

Exclusions and Shapes

Generated Content for Paged Media

Grid Layout

Grid Template Layout

Line Layout Module

New features in Lists and Counters

Overflow Module

New features in Paged Media

New features in CSS Sizing

Media Queries Level 4

Selectors Level 4

Ch units

Viewport relative lengths

New resolution units

Compositing and Blending

New features in CSS speech

The unicode-range descriptor for @ font-face

New features in CSS Images and Replaced Content

CSS Masking

At this point, the study of "what are the new attributes of CSS3+" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.