Maison > Article > interface Web > Quelques nouveautés CSS en 4

Quelques nouveautés CSS en 4

DDDoriginal: 2024-10-30 17:01:02840parcourir

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>

.post {
    container-type: size;
  }

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

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

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>

 input {

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

      border: purple 2px solid;
    }
  }

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>

:scope {
  background-color: orange;
}

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>

.post {
    container-type: size;
  }

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

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

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>

 input {

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

      border: purple 2px solid;
    }
  }

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>

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.

Conclusion

Dans cet article, nous avons exploré quelques nouvelles fonctionnalités CSS en 2024. Vous pouvez utiliser ces fonctionnalités pour l'application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css define if for using class Property this location position

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment styliser dynamiquement des éléments HTML avec des variables Sass : inclusions ou mixins ?Article suivant：Comment styliser dynamiquement des éléments HTML avec des variables Sass : inclusions ou mixins ?

Articles Liés

Voir plus