Gaya CSS yang Anda Perlu Tahu Dalam 4

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.

Mise en page empilée

Mise en page sur deux colonnes

Les requêtes de conteneurs 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 pourraient rencontrer des problèmes de style.

Source : Requêtes de conteneur CSS

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.

La sous-grille 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.

Grilles parents

Grille enfant créée à l'aide du CSS de sous-grille

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 concentration 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.

Référez-vous à l'image suivante.

CSS Pseudo-Class Demo

Note: Check out this working demo for pseudo-classes.

4. Logical properties

CSS logical properties allow developers to manage layout and spacing in a direction-agnostic way. In other words, with CSS logical properties, you can use different writing modes, such as left-to-right (LTR) and right-to-left (RTL), without changing the structural code.

Here’s an example that uses logical properties for layout adjustments.

.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 */
}

In this code example, margin-inline-start uses logical properties to ensure margins are always on the content starting side, adapting automatically to different writing systems. The background property with a LAB color gradient illustrates the use of logical properties in defining visually consistent color transitions.

Logical properties are particularly useful in global apps that require support for multiple languages, keeping the layouts the same regardless of directionality.

Refer to the following image.

Logical properties demo

Note: Refer to the working demo of how CSS logical properties can be used with internationalization.

5. Lab Color Space

Lab color space allows you to specify colors to align more closely with human vision. This method provides a broader and more precise range of colors, facilitating greater consistency across different displays.

Here’s a code example showcasing the usage of lab color space in 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));
}

This code example sets up a series of divs (color-strip), each with a unique background color defined in the lab color space. It shows how lab colors produce a variety of hues and shades that are consistent across various displays.

Lab colors are invaluable in digital design, particularly in industries where color accuracy is critical, like digital art, online commerce, and brand design.

Refer to the following image.

Exploring LAB Colors

Note: For more details, refer to the lab color space demo.

Conclusion

Thanks for reading! These CSS features offer unique advantages and new possibilities to improve the functionality and the user experience of your app. They also improve the developer experience, since these features simplify complex tasks for them.

So, make sure to try these examples yourself and implement them in your next web app to make it a modern one.

Related blogs

• React Styling: Essential Tips and Tricks for Designers
• Top 7 Ways to Write CSS in Your React or Next.js App
• Responsive Web Design Evolved: Introducing CSS Container Queries
• CSS Flex: What Every Developer Should Know

Atas ialah kandungan terperinci Gaya CSS yang Anda Perlu Tahu Dalam 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!