简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Some new features CSS in 4

Some new features CSS in 4

DDD
DDDOriginal
2024-10-30 17:01:02834browse

In this article we will explore some new CSS features in 2024.

If you like my articles, you can buy me a coffee :)
Some new features CSS in 4

1. CSS container queries

Container queries allow you to apply a style to an item depending on the size of the item's container.Container queries work like media queries.

Using container queries

Using container queries, you can dynamically adjust the style of child elements within a parent element according to their size.

To do this, you must first define a container context for the parent element. You specify this with the container-type property.

  • container-type: size; When set to , you can query by both width and height values.

  • container-type: inline-size; When set to , query is made only on width (horizontal dimension).

Thanks to this feature, the style properties of child elements can be changed depending on the size of the parent element.

Examples :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>


.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Output :

Some new features CSS in 4

2. Css Nesting

With CSS nesting, you can place one rule inside another. This is especially useful for managing styles that are context-dependent. For example, if you have a .container class and want to style its .item elements, you can write the .item rules directly inside the .container rule. CSS Nesting is parsed directly by the browser. This means you don’t need a preprocessor to compile nested rules; they work natively in the browser.

Examples :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Output :

Some new features CSS in 4

3. :scope Pseudo Class

The Scope Selector is used to define the scope for styles in CSS.

Usage :

  • If :scope is at the root level of a css, it is equivalent to :root

Examples :

<html></html>

:scope {
  background-color: orange;
}

Output :

Some new features CSS in 4

  • Using :scope within @scope blocks allows for clear and targeted styling based on the context defined by the class names.

Examples :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>


.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Output :

Some new features CSS in 4

4. :has() Pseudo Class

The :has() selector in CSS allows you to style a parent element if it contains a specific child element.

Examples :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Output :

Some new features CSS in 4

5. Color Functions

You can have much more control over the tones and contrasts of colors with new color functions such as color-mix() and color-contrast()

Examples :

<html></html>

6. Anchor Positioning

The CSS anchor positioning module defines features that allow you to tether elements together. Certain elements are defined as anchor elements; anchor-positioned elements can then have their size and position set based on the size and location of the anchor elements to which they are bound.

Conclusion

In this article, we explored some new features CSS in 2024. You can use this features for app.

The above is the detailed content of Some new features CSS in 4. For more information, please follow other related articles on the PHP Chinese website!

css define if for using class Property this location position
Statement：
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
Previous article：How to Dynamically Style HTML Elements with Sass Variables: Includes vs Mixins?Next article：How to Dynamically Style HTML Elements with Sass Variables: Includes vs Mixins?

Related articles

See more