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

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

1. Container query 1. Basic concept

The container query enables us to style the element based on the size of its parent element, which is similar to the @ media query, except that it judges based on the size of the container rather than the size of the viewport. This has always been a problem with responsive design because we sometimes want the component to adapt to its context.

two。 Usage

For container queries, you need to use the container attribute (which is an abbreviation for container-type and container-name) to specify an element as the container. Container-type can be width, height, inline-size, block-size. Inline-size and block-size are logical attributes and may produce different results depending on the mode in which the document is written.

Main, aside {container: inline-size;}

You can use @ container in a manner similar to media queries. It should be noted that the rules are expressed differently in parentheses (inline-size > 30em instead of min-width: 30em should be used in container queries). This is part of the media query level 4 specification. When the container width is greater than 30rem, switch to the flex layout:

@ container (inline-size > 30em) {.card {display: flex;}}

The CSS Containment Level 3 specification is currently in working draft, which means that the syntax may change at any time.

3. Current state

Currently, container queries are not available in mainstream browsers, so you can look forward to the implementation of container queries in browsers.

2. Has () 1. Basic concept

: has () is often referred to as a "parent selector", and this pseudo-class enables us to select an element based on its descendants. It has some very interesting use cases. For example, images can be styled differently in depending on whether they are included or not.

two。 Usage

To style the included elements, you can do the following:

Section:has (h3) {background: lightgray;}

When

When the parent of the

Style of:

Section:has (h3) img {border: 5px solid lime;} 3 current status

Currently, no major browsers support this property, but you can use it in the Safari Technology Preview.

Third, @ when/@else1. Basic concept

@ when/@else is a conditional rule in CSS, similar to if/else logic in other programming languages. It makes it more logical to write complex media queries. The choice to use @ when instead of @ if here is to avoid conflicts with Sass.

two。 Usage

You can query a variety of media conditions or supported features, such as whether your viewport exceeds a certain width, and whether your browser supports subgrid.

When media (min-width: 30em) and supports (display: subgrid) {} @ else {} 3. Current state

Currently, changing properties is not supported in browsers. It is still too early and is still under discussion. It is not expected to be widely supported by browsers this year, but it is certainly a very useful attribute to watch.

4. Accent-color1. Basic concept

The color-scheme attribute allows the element to indicate the color scheme it can easily render. The common choices for operating system color schemes are "bright" and "dark", or "day mode" and "night mode". When the user selects one of the color schemes, the operating system adjusts the user interface. This includes values for the use of form controls, scroll bars, and CSS system colors.

two。 Usage

The usage is simple, and the property is inheritable. So you can set it at the root level to apply it anywhere:

: root {accent-color: lime;}

You can use on a single element:

Form {accent-color: lime;} input [type= "checkbox"] {accent-color: hotpink;} 3. Current state

Currently, accent-color is supported in Chrome, Edge, Firefox, and Safari technology previews. Browsers that do not support this property directly use the default color, and the input is fully available.

Fifth, color function 1. Basic concept

We are probably already familiar with the Hex, RGB, and HSL color formats. CSS Color Module Levels 4 and 5 include a whole new set of color functions that enable us to specify and manipulate colors in CSS in an unprecedented way. They include:

Hwb (): hue, whiteness, blackness.

Lab (): brightness and the an and b values that determine the hue.

Lch (): brightness, chromaticity, hue.

Color-mix (): mixes two colors together.

Color-contrast (): outputs the color with the highest contrast compared to the first parameter from the color list.

Color (): specifies colors in different color spaces (for example, display-p3).

two。 Usage

Hwb (), lab (), and lch () are used in much the same way as my rgb () and hsl () functions, with an optional alpha parameter:

.my-element {background-color: lch (80,10050);} .my-element {background-color: lch (8010050 / 0.5);}

Color-mix () mixes the other two colors and outputs one color. We need to specify the color interpolation method as the first parameter:

.my-element {background-color: color-mix (in lch, blue, lime);}

Color-contrast () needs a base color to compare other colors. It outputs the color with the highest contrast, or, with additional keywords, the first color in the list that matches the corresponding contrast:

/ * output the color with the highest contrast * / .my-element {color: white; background-color: color-contrast (white vs, lightblue, lime, blue);} / * output the first color that matches the contrast of AA * / .my-element {color: white; background-color: color-contrast (white vs, lightblue, lime, blue to AA);} 3. Current state

Safari is currently a leader in browser support, with support for hwb (), lch (), lab (), color (), color-mix (), and color-contrast () enabled through flag since version 15. Firefox supports hwb (), and also marks support for color-mix () and color-contrast (). Surprisingly, Chrome doesn't support these functions yet.

It is not difficult to provide style compatibility in your code: given two color rules, if the browser does not support the second color rule, it ignores the second color rule:

.my-element {background-color: rgb (84.08% 0% 77.36%); background-color: lch (50% 100331);}

In this way, when the browser supports this function, it can be used directly.

6. Cascading 1. Basic concept

Cascading gives us more ability to manage the "cascading" part of CSS. Currently, there are several factors that determine which styles will be applied in CSS code, including the masses of selectors and the order in which they appear. Cascading allows us to effectively group (or "layer") CSS. The code in the lower order layer will take precedence over the code in the higher level, even if the selector in the higher layer has a higher weight.

two。 Usage

Let's look at the basic use of cascading layers:

/ * create layers in order * / @ layer reset, base, theme;/* add CSS to each layer * / @ layer reset {} @ layer base {h2.title {font-size: 5remt;} @ layer theme {H2 {font-size: 3remt;}}

The CSS font size declaration in the theme layer overrides the font size declaration in the base layer, although the latter selector has a higher weight.

3. Current state

The latest version of Firefox already supports cascading and can be enabled using flag in Chrome and Edge (cascading is fully supported in the Chrome 99 version). It seems that all major browsers are using this specification, so I hope to get more widespread support as soon as possible.

7. Subgrid1. Basic concept

As part of the CSS Grid Layout Module 2 specification, subgrid allows elements to inherit the grid of their parent elements on row or column axes. Subgrid is very useful for solving various user interface challenges.

For example, take the following image with a title as an example. Titles vary in length, and you can use subgrid to align them directly without setting a fixed height.

two。 Usage

First, set the parent element to the grid layout and set the "grid-template-columns" or "grid-template-rows" attribute of the child element to subgrid:

.grid {display: grid; grid-template-columns: repeat (3, 1fr); grid-template-rows: repeat (2, auto);} .grid > figure {display: grid; grid-template-rows: subgrid;} .grid figcaption {grid-row: 2;}

Achieve results:

Complete code:

Html:

A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.

Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.

The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.

CSS:

* {box-sizing: border-box;} body {font-family: "Open Sans", sans-serif; margin: 0; padding: max (1rem, 3vw);} figure {margin: 0; display: grid;/* grid-template-rows: subgrid; * / / * grid-row: 1 / 3; * /} img {display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; grid-row: 1 / 3; grid-column: 1 } figcaption {padding: 1rem1; grid-column: 1; grid-row: 2; background: hsl; color: white;}. Grid {display: grid; max-width: 80remr; margin: 0 auto; grid-template-columns: repeat (auto-fit, minmax (300px, 300px, 1fr)); gap: 1.5remt;} @ media (min-width: 62em) {.grid {grid-template-rows: 1fr auto } figure {grid-template-rows: subgrid; grid-row: 1 / 3;}}

3. Current state

It is worth noting that Firefox has supported subgrid since 2019, but no other browsers have followed suit nearly three years later. There are signs that the Chromium team is already working on it, so you may be lucky to see it log on to Chrome and Edge this year.

8. @ scroll-timeline1. Basic concept

The @ scroll-timeline attribute defines an AnimationTimeline whose time value is determined by the scrolling progress in the scrolling container (not by the time). Once specified, @ scroll-timeline will be associated with the CSS Animation by using the animation-timeline attribute.

two。 Usage

Here's a simple example:

/ * set Keyframe animation * / @ keyframes slide {to {transform: translateX (calc (100vw-2rem));}} / * configure scroll timeline, which is named slide-timeline * / @ scroll-timeline slide-timeline {source: auto; orientation: vertical; scroll-offsets: 0%, 100%; / * specify Keyframe animation and scroll-timeline * / .animated-element {animation: 1s linear forwards slide slide-timeline;}

We can also use element-based offsets for the scroll-offsets attribute to trigger timeline when a particular element scrolls into the view:

@ scroll-timeline slide-timeline {scroll-offsets: selector (# element) end 0, selector (# element) start 1;} 3. Current state

If you are interested in @ scroll-timeline, you can use flag in Chrome to enable it. When we encounter a complex animation, we may need to use the JavaScript animation library to achieve it, but for relatively simple animation, using this attribute can reduce unnecessary import.

9. Nested 1. Basic concept

If you are familiar with Sass, you will know the convenience of nested selectors. Essentially, it is to write child rules in the parent. Nesting makes it easier to write CSS code, and now nesting has finally come to native CSS!

two。 Usage

Syntactically, it is similar to Sass. Let's define style rules for the h3 child elements in card for class:

.card {color: red; & h3 {color: blue;}}

You can use it for pseudo-classes and pseudo-elements:

.link {color: red; &: hover, &: focus {color: blue;}}

These are equivalent to the following CSS code:

.link {color: red;} .link: hover,.link:focus {color: blue;} 3. Current state

Currently, no browsers support nesting. If you use PostCSS, you can try nesting through the preset postcss-preset-env plugin.

At this point, the study on "what are the new features of CSS and how to use them" 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.