Maison >interface Web >tutoriel CSS >Quelques nouveautés CSS en 4
Quelques nouveautés CSS en 4
- DDDoriginal
- 2024-10-30 17:01:02914parcourir
Dans cet article, nous explorerons quelques nouvelles fonctionnalités CSS en 2024.
Si vous aimez mes articles, vous pouvez m'offrir un café :)
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 :
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 :
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 :
- 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 :
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 :
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!