TL;DR : Ce blog utilise des exemples de code pour explorer cinq des meilleurs styles et fonctionnalités CSS pour le développement Web : requêtes de conteneur, sous-grille, pseudo-classes, propriétés logiques et espace colorimétrique de laboratoire. Ils améliorent la réactivité, simplifient les mises en page et améliorent la cohérence de la conception.

Les feuilles de style en cascade (CSS) sont un langage de style bien connu utilisé pour styliser les pages Web. Avec CSS, vous pouvez personnaliser les éléments HTML en ajoutant de l'espace ; définir les couleurs, les tailles de police et les styles de police ; et plus encore. CSS s'est beaucoup amélioré au cours des dernières années avec de nouvelles fonctionnalités pour améliorer l'expérience des développeurs.

Cet article abordera donc cinq fonctionnalités CSS innovantes que vous pouvez utiliser dans votre prochain projet.

1. Requêtes de conteneur

Les requêtes de conteneur CSS ont introduit une nouvelle approche de la réactivité. Auparavant, nous utilisions des requêtes multimédias pour créer des interfaces utilisateur adaptées à différentes tailles d'écran. Mais cela n’a pas été aussi facile qu’il y paraît. Il y avait des problèmes de maintenance, de performances, de flexibilité et de chevauchement de styles.

Les requêtes de conteneur résolvent ces problèmes en permettant aux développeurs de personnaliser les éléments en fonction de la taille de leur conteneur parent. Étant donné que cette méthode ne dépend pas de la taille de la fenêtre d'affichage, elle rend les composants HTML entièrement modulaires et autonomes.

Voici un exemple simple du fonctionnement des requêtes de conteneur.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@container (min-width: 500px) {
  .profile-card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px;
  }

  .profile-card header,
  .profile-card .bio {
    grid-column: 2;
  }

  .profile-card .profile-image {
    grid-row: 1 / 3;
    grid-column: 1;
  }
}

Cette requête conteneur ajuste la disposition de la carte de profil lorsque sa largeur atteint 500 px ou plus. Il fait passer la carte d'une mise en page empilée (avec l'image en haut) à une mise en page à deux colonnes où l'image apparaît à gauche et le contenu du texte s'aligne à droite.

Référez-vous aux images suivantes.

Les requêtes de conteneur sont très utiles dans les systèmes de conception où les composants doivent s'adapter en fonction de leur environnement immédiat plutôt que de l'ensemble de la fenêtre d'affichage. Cependant, les requêtes de conteneur ne sont toujours pas entièrement prises en charge par le navigateur. Si vos utilisateurs utilisent des navigateurs non pris en charge ou des versions antérieures, ils peuvent rencontrer des problèmes de style.

Remarque : Jetez un œil à cette démo fonctionnelle pour les requêtes de conteneur CSS.

2. Sous-grille

Subgrid est un ajout intéressant au modèle de disposition de grille CSS qui vous permet d'hériter de la structure de grille du conteneur de grille parent dans les éléments de grille enfants. En termes simples, une sous-grille permet d'aligner les éléments enfants en fonction des lignes ou des colonnes de la grille parent. Avec cette méthode, vous pouvez facilement créer des grilles imbriquées complexes sans utiliser de remplacements de grille imbriquée.

Dans l'exemple de code suivant, la mise en page utilise une approche de sous-grille au sein d'une liste.

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  display: grid;
  grid-template-rows: subgrid; /* Allows the nested grid to align directly with the parent grid */
}

Dans l'exemple, le product-wrapper crée une disposition de grille flexible pour contrôler le nombre de colonnes en fonction de la largeur du conteneur. Ensuite, chaque product-card aligne ses lignes directement avec les grilles définies par le product-wrapper.

Subgrid est particulièrement utile pour les sites de commerce électronique où les fiches produits peuvent contenir des quantités variables de contenu mais doivent conserver une apparence uniforme.

Référez-vous aux images suivantes.

Remarque : Consultez la démo fonctionnelle de la sous-grille CSS.

3. Pseudo-classes

Les pseudo-classes telles que :hover, :focus et :first-child sont des options qui sélectionnent les éléments HTML en fonction de leur état plutôt que de leur hiérarchie ou séquence dans le document. Ces sélecteurs permettent aux développeurs de créer des interfaces utilisateur plus interactives et réactives sans utiliser JavaScript.

L'exemple de code suivant montre plusieurs pseudo-classes en action.

// HTML
...
.hover-section:hover {
  background-color: rgb(82, 11, 145); /* Changes the background color on hover */
  color: white;
}
.input-section input[type="text"]:focus {
  border-color: orange; /* Highlights the input field when focused */
  background-color: lightyellow;
}
.list-section li:first-child {
  color: green; /* Styles the first item in a list */
}
.list-section li:last-child {
  color: red; /* Styles the last item in a list */
}

Cet exemple de code CSS montre comment améliorer l'interaction utilisateur en modifiant les styles en fonction des actions de l'utilisateur, telles que le survol ou la focalisation sur des éléments, et comment styliser les enfants spécifiques d'un conteneur.

Ces pseudo-classes sont très utiles lors du développement de formulaires, de menus de navigation et de contenu interactif qui nécessitent des repères visuels pour guider les interactions des utilisateurs.

Reportez-vous à l'image suivante.

Remarque : Découvrez cette démo fonctionnelle pour les pseudo-classes.

4. Propriétés logiques

Les propriétés logiques CSS permettent aux développeurs de gérer la disposition et l'espacement de manière indépendante de la direction. En d'autres termes, avec les propriétés logiques CSS, vous pouvez utiliser différents modes d'écriture, tels que de gauche à droite (LTR) et de droite à gauche (RTL), sans modifier le code structurel.

Voici un exemple qui utilise des propriétés logiques pour les ajustements de mise en page.

.lab-gradient-generator {
  margin-inline-start: 2rem; /* Responsive margin that adjusts based on text direction */
}
.lab-gradient-display {
  background: linear-gradient(
    to right, 
    lab(var(--l-start) var(--a-start) var(--b-start)), 
    lab(var(--l-end) var(--a-end) var(--b-end))
  ); /* Creates a gradient using LAB colors */
}

Dans cet exemple de code, margin-inline-start utilise des propriétés logiques pour garantir que les marges sont toujours du côté du contenu départ, s'adaptant automatiquement aux différents systèmes d'écriture. La propriété background avec un LAB color gradient illustre l'utilisation de propriétés logiques dans la définition de transitions de couleurs visuellement cohérentes.

Les propriétés logiques sont particulièrement utiles dans les applications globales qui nécessitent la prise en charge de plusieurs langues, en conservant les mêmes mises en page quelle que soit la directionnalité.

Reportez-vous à l'image suivante.

Remarque : Reportez-vous à la démonstration de travail expliquant comment les propriétés logiques CSS peuvent être utilisées avec l'internationalisation.

5. Espace colorimétrique de laboratoire

L'espace colorimétrique Lab vous permet de spécifier des couleurs pour les aligner plus étroitement avec la vision humaine. Cette méthode fournit une gamme de couleurs plus large et plus précise, facilitant une plus grande cohérence sur les différents écrans.

Voici un exemple de code illustrant l'utilisation de l'espace colorimétrique de laboratoire en CSS.

.color-strip:nth-child(1) {
  --l: 90%;
  --a: -80;
  --b: 80;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(2) {
  --l: 75%;
  --a: -40;
  --b: 40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(3) {
  --l: 60%;
  --a: 0;
  --b: 0;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(4) {
  --l: 45%;
  --a: 40;
  --b: -40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(5) {
  --l: 30%;
  --a: 80;
  --b: -80;
  background-color: lab(var(--l) var(--a) var(--b));
}

Cet exemple de code configure une série de divs (bande de couleurs), chacun avec une couleur d'arrière-plan unique définie dans l'espace colorimétrique du laboratoire. Il montre comment les couleurs du laboratoire produisent une variété de teintes et de nuances cohérentes sur différents écrans.

Les couleurs de laboratoire sont inestimables dans la conception numérique, en particulier dans les secteurs où la précision des couleurs est essentielle, comme l'art numérique, le commerce en ligne et la conception de marques.

Reportez-vous à l'image suivante.

Remarque : Pour plus de détails, reportez-vous à la démo de l'espace colorimétrique du laboratoire.

Conclusion

Merci d'avoir lu ! Ces fonctionnalités CSS offrent des avantages uniques et de nouvelles possibilités pour améliorer les fonctionnalités et l'expérience utilisateur de votre application. Ils améliorent également l'expérience des développeurs, car ces fonctionnalités leur simplifient les tâches complexes.

Alors, assurez-vous d'essayer ces exemples vous-même et de les implémenter dans votre prochaine application Web pour en faire une application moderne.

Blogs connexes

• React Styling : trucs et astuces essentiels pour les concepteurs
• Les 7 meilleures façons d'écrire du CSS dans votre application React ou Next.js
• La conception Web réactive a évolué : introduction des requêtes de conteneur CSS
• CSS Flex : ce que tout développeur devrait savoir