Quelques nouveautés CSS en 4-tutoriel CSS-php.cn

Quelques nouveautés CSS en 4

DDD

Libérer： 2024-10-30 17:01:02

original

926 Les gens l'ont consulté

Dans cet article, nous explorerons quelques nouvelles fonctionnalités CSS en 2024.

Si vous aimez mes articles, vous pouvez m'offrir un café :)
Some new features CSS in 4

1. Requêtes de conteneur CSS

Les requêtes de conteneur vous permettent d'appliquer un style à un élément en fonction de la taille du conteneur de l'élément. Les requêtes de conteneur fonctionnent comme des requêtes multimédias.

Utilisation des requêtes de conteneur

À l'aide des requêtes conteneurs, vous pouvez ajuster dynamiquement le style des éléments enfants au sein d'un élément parent en fonction de leur taille.

Pour ce faire, vous devez d'abord définir un contexte de conteneur pour l'élément parent. Vous le spécifiez avec la propriété conteneur-type.

type de conteneur : taille ; Lorsqu'il est défini sur , vous pouvez interroger à la fois les valeurs de largeur et de hauteur.
type de conteneur : taille en ligne ; Lorsqu'elle est définie sur , la requête est effectuée uniquement sur la largeur (dimension horizontale).

Grâce à cette fonctionnalité, les propriétés de style des éléments enfants peuvent être modifiées en fonction de la taille de l'élément parent.

Exemples :

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

Copier après la connexion

.post {
    container-type: size;
  }

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

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

Copier après la connexion

Sortie :

Some new features CSS in 4

2. Nidification CSS

Avec l'imbrication CSS, vous pouvez placer une règle dans une autre. Ceci est particulièrement utile pour gérer les styles qui dépendent du contexte. Par exemple, si vous avez une classe .container et que vous souhaitez styliser ses éléments .item, vous pouvez écrire les règles .item directement dans la règle .container. CSS Nesting est analysé directement par le navigateur. Cela signifie que vous n’avez pas besoin d’un préprocesseur pour compiler des règles imbriquées ; ils fonctionnent nativement dans le navigateur.

Exemples :

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

Copier après la connexion

 input {

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

      border: purple 2px solid;
    }
  }

Copier après la connexion

Sortie :

Some new features CSS in 4

3. :scope Pseudo-classe

Le sélecteur de portée est utilisé pour définir la portée des styles en CSS.

Utilisation :

Si :scope est au niveau racine d'un css, c'est équivalent à :root

Exemples :

<html></html>

Copier après la connexion

:scope {
  background-color: orange;
}

Copier après la connexion

Sortie :

Some new features CSS in 4

L'utilisation de :scope dans les blocs @scope permet un style clair et ciblé basé sur le contexte défini par les noms de classe.

Exemples :

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

Copier après la connexion

.post {
    container-type: size;
  }

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

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

Copier après la connexion

Sortie :

Some new features CSS in 4

4. :has() Pseudo-classe

Le sélecteur :has() en CSS vous permet de styliser un élément parent s'il contient un élément enfant spécifique.

Exemples :

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

Copier après la connexion

 input {

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

      border: purple 2px solid;
    }
  }

Copier après la connexion

Sortie :

Some new features CSS in 4

5. Fonctions de couleur

Vous pouvez avoir beaucoup plus de contrôle sur les tons et les contrastes des couleurs avec de nouvelles fonctions de couleur telles que color-mix() et color-contrast()

Exemples :

<html></html>

Copier après la connexion

6. Positionnement de l'ancre

Le module de positionnement d'ancre CSS définit des fonctionnalités qui vous permettent d'attacher des éléments ensemble. Certains éléments sont définis comme éléments d'ancrage ; les éléments positionnés par ancrage peuvent ensuite avoir leur taille et leur position définies en fonction de la taille et de l'emplacement des éléments d'ancrage auxquels ils sont liés.