Un style Web nouvelle génération

Découvrez certaines des fonctionnalités intéressantes des CSS modernes.

Adam Argyle

Una Kravets

Un nombre impressionnant de choses intéressantes se produisent actuellement en CSS, et nombre d'entre elles sont déjà prises en charge dans les navigateurs d'aujourd'hui. Notre vidéo CDS 2019, que vous pouvez regarder ci-dessous, porte sur plusieurs fonctionnalités nouvelles et à venir qui devraient attirer votre attention.

Cet article se concentre sur les fonctionnalités que vous pouvez utiliser aujourd'hui. Veillez donc à regarder la vidéo pour en savoir plus sur les fonctionnalités à venir, comme Houdini. Vous trouverez également des démonstrations de toutes les fonctionnalités abordées sur notre page CSS@CDS.

Sommaire

• Faire défiler l'ancrage
• :focus-within
• Requêtes média niveau 5
• Propriétés logiques
• position: sticky
• backdrop-filter
• :is()
• gap
• CSS Houdini
• Dépassement

Aligner sur le défilement

L'option Scroll Snap vous permet de définir des points d'ancrage lorsque l'utilisateur fait défiler votre contenu verticalement, horizontalement ou les deux. Il offre une inertie et une décélération du défilement intégrées, et il est tactile.

Cet exemple de code configure le défilement horizontal dans un élément <section> avec des points d'ancrage alignés à gauche des éléments <picture> enfants:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

Le principe est le suivant :

• Dans l'élément parent <section>,
  • overflow-x est défini sur auto pour permettre le défilement horizontal.
  • overscroll-behavior-x est défini sur contain pour empêcher le défilement des éléments parents lorsque l'utilisateur atteint les limites de la zone de défilement de l'élément <section>. Cette opération n'est pas strictement nécessaire pour l'ancrage, mais elle est généralement recommandée.
  • scroll-snap-type est défini sur x (pour l'ancrage horizontal) et sur mandatory, afin que la fenêtre d'affichage s'ancre toujours au point d'ancrage le plus proche.
• Pour les éléments <picture> enfants, scroll-snap-align est défini sur "start" (début), ce qui définit les points d'ancrage à gauche de chaque image (en supposant que direction est défini sur ltr).

Voici une démonstration en direct:

Vous pouvez également consulter les démonstrations d'ancrage du défilement vertical et d'ancrage du défilement matriciel.

Remarque : Bien que l'ancrage du défilement soit compatible avec l'ancrage vertical, soyez prudent lorsque vous l'utilisez au niveau de la page, car dans certains cas, vous pouvez donner l'impression que le contrôle est pris par l'utilisateur. Il est généralement préférable d'appliquer l'ancrage à un composant de la page plutôt qu'à la page elle-même.

:focus-within

:focus-within résout un problème d'accessibilité de longue date: dans de nombreux cas, la sélection d'un élément enfant doit affecter la présentation d'un élément parent afin que l'interface utilisateur soit accessible aux utilisateurs de technologies d'assistance.

Par exemple, si vous disposez d'un menu déroulant contenant plusieurs éléments, celui-ci doit rester visible tant que l'un des éléments est actif. Sinon, il disparaît pour les utilisateurs de clavier.

:focus-within indique au navigateur d'appliquer un style lorsque le focus est sur n'importe quel élément enfant d'un élément spécifié. Revenons à l'exemple de menu. En définissant :focus-within sur l'élément de menu, vous pouvez vous assurer qu'il reste visible lorsqu'un élément de menu est sélectionné:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

Passez en revue les éléments sélectionnables dans la démo ci-dessous. Vous remarquerez que les menus restent visibles lorsque vous sélectionnez les éléments de menu:

Requêtes médias niveau 5

Les nouvelles requêtes multimédias nous permettent d'ajuster efficacement l'expérience utilisateur dans nos applications en fonction des préférences de l'appareil. En fait, le navigateur sert de proxy pour les préférences système auxquelles nous pouvons répondre dans notre CSS à l'aide du groupe de requêtes média prefers-*:

Voici les nouvelles requêtes qui devraient intéresser les développeurs:

• préfère-les-mouvements-réduits
• prefers-color-scheme
• préfère-contraste
• préfère-la-transparence-réduite
• couleurs-forcées
• couleurs-inversées

Ces requêtes représentent un énorme avantage en termes d'accessibilité. Auparavant, nous n'avions aucun moyen de savoir, par exemple, qu'un utilisateur avait activé le mode Contraste élevé pour son système d'exploitation. Si vous vouliez fournir un mode de contraste élevé pour une application Web qui reste fidèle à votre marque, vous deviez demander aux utilisateurs de le choisir dans l'interface utilisateur de votre application. Vous pouvez maintenant détecter le paramètre de contraste élevé de l'OS à l'aide de prefers-contrast.

L'une des conséquences intéressantes de ces requêtes média est que nous pouvons concevoir pour plusieurs combinaisons de préférences utilisateur au niveau du système afin de répondre aux nombreuses préférences utilisateur et besoins d'accessibilité. Si un utilisateur souhaite utiliser le mode sombre à fort contraste dans des environnements faiblement éclairés, c'est possible.

Il est important pour Adam que l'expression « préfère les mouvements réduits » ne soit pas considérée comme un « aucun mouvement ». L'utilisateur affirme qu'il préfère moins de mouvements, mais qu'il ne veut pas d'animation. Il affirme que le mouvement réduit n'est pas un mouvement. Voici un exemple utilisant une animation de fondu enchaîné lorsque l'utilisateur préfère un mouvement réduit:

Remarque : Dans Chrome Canary, vous pouvez tester le code CSS qui utilise prefers-reduced-motion ou prefers-color-scheme en sélectionnant les paramètres appropriés dans le panneau Affichage des outils de développement. Pour accéder au mode Rendu, ouvrez le menu de commandes et exécutez la commande Show Rendering.

Propriétés logiques

Les propriétés logiques résolvent un problème qui gagne en visibilité à mesure que de plus en plus de développeurs s'attaquent à l'internationalisation. De nombreuses propriétés de mise en page telles que margin et padding supposent une langue qui se lit de haut en bas et de gauche à droite.

Lorsqu'ils conçoivent des pages pour plusieurs langages avec des modes d'écriture différents, les développeurs ont dû ajuster toutes ces propriétés individuellement sur plusieurs éléments, ce qui devient rapidement un cauchemar en termes de gestion.

Les propriétés logiques vous permettent de maintenir l'intégrité de la mise en page dans tous les modes de traduction et d'écriture. Elles se mettent à jour de manière dynamique en fonction de l'ordre sémantique du contenu plutôt que de l'agencement spatial. Avec les propriétés logiques, chaque élément a deux dimensions:

• La dimension bloc est perpendiculaire au flux de texte dans une ligne. (En anglais, block-size est identique à height.)
• La dimension inline est parallèle au texte dans la ligne. (En anglais, inline-size est identique à width.)

Ces noms de dimension s'appliquent à toutes les propriétés de mise en page logique. Ainsi, par exemple, en anglais, block-start est identique à top, et inline-end est identique à right.

Avec les propriétés logiques, vous pouvez mettre à jour automatiquement votre mise en page pour d'autres langues en modifiant simplement les propriétés writing-mode et direction de votre page, plutôt que de mettre à jour des dizaines de propriétés de mise en page sur des éléments individuels.

Pour voir comment fonctionnent les propriétés logiques dans la démonstration ci-dessous, définissez la propriété writing-mode de l'élément <body> sur différentes valeurs:

position: sticky

Un élément avec position: sticky reste dans le flux de blocs jusqu'à ce qu'il commence à quitter l'écran. Il cesse alors de faire défiler avec le reste de la page et reste à la position spécifiée par la valeur top de l'élément. L'espace alloué à cet élément reste dans le flux, et l'élément y revient lorsque l'utilisateur fait défiler la page vers le haut.

Le positionnement persistant vous permet de créer de nombreux effets utiles qui nécessitaient auparavant JavaScript. Pour vous montrer quelques-unes des possibilités, nous avons créé plusieurs démonstrations. Chaque démonstration utilise en grande partie le même CSS et n'ajuste que très peu le balisage HTML pour créer chaque effet.

Pile persistante

Dans cette démonstration, tous les éléments persistants partagent le même conteneur. Cela signifie que chaque élément autocollant glisse sur le précédent lorsque l'utilisateur fait défiler la page vers le bas. Les éléments persistants partagent la même position figée.

Diapositive persistante

Ici, les éléments collants sont des cousins. (c'est-à-dire que leurs parents sont frères et sœurs.) Lorsqu'un élément persistant atteint la limite inférieure de son conteneur, il monte en même temps que le conteneur. Cela donne l'impression que les éléments persistants les plus bas poussent les éléments plus hauts vers le haut. En d'autres termes, ils semblent être en concurrence pour la position bloquée.

Desperado persistant

Tout comme Sticky Slides, les éléments persistants de cette démonstration sont des cousins. Cependant, ils ont été placés dans des conteneurs configurés pour utiliser une mise en page sous forme de grille à deux colonnes.

backdrop-filter

La propriété backdrop-filter vous permet d'appliquer des effets graphiques à la zone derrière un élément plutôt qu'à l'élément lui-même. Vous obtenez ainsi de nombreux effets intéressants qui n'étaient auparavant réalisables qu'à l'aide de piratages CSS et JavaScript complexes avec une seule ligne de CSS.

Par exemple, cette démonstration utilise backdrop-filter pour obtenir un floutage semblable à celui de l'OS:

Nous avons déjà un post intéressant sur backdrop-filter, alors consultez-le pour en savoir plus.

:is()

Même si la pseudo-classe :is() a plus de 10 ans, elle ne présente toujours pas autant d'utilisation que nous le pensons. Il prend comme argument une liste de sélecteurs séparés par une virgule et correspond à tous les sélecteurs de cette liste. Cette flexibilité est incroyablement pratique et peut réduire considérablement la quantité de CSS que vous envoyez.

Voici un exemple simple :

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

La mise en page en grille CSS affiche gap (auparavant grid-gap) depuis un certain temps. En spécifiant l'espacement interne d'un élément conteneur plutôt que l'espacement autour des éléments enfants, gap résout de nombreux problèmes de mise en page courants. Par exemple, avec un écart, vous n'avez pas à vous soucier des marges sur les éléments enfants qui génèrent des espaces blancs indésirables autour des bords d'un élément conteneur:

Bonne nouvelle: gap arrive sur Flexbox et offre les mêmes avantages d'espacement que la grille:

• Il n'y a qu'une déclaration d'espacement plutôt que plusieurs.
• Il n'est pas nécessaire d'établir des conventions pour votre projet concernant les éléments enfants qui doivent posséder l'espacement : l'élément conteneur est responsable de l'espacement.
• Le code est plus facilement compréhensible que les anciennes stratégies, comme le chouette lobotomisée.

La vidéo suivante présente les avantages d'utiliser une seule propriété gap pour deux éléments, l'un avec une mise en page sous forme de grille et l'autre avec une mise en page flexible:

Pour le moment, seul FireFox prend en charge gap dans les mises en page modulables. Jouez avec cette démonstration pour voir comment cela fonctionne:

CSS Houdini

Houdini est un ensemble d'API de bas niveau pour le moteur de rendu du navigateur. Elle vous permet d'indiquer au navigateur comment interpréter les fichiers CSS personnalisés. En d'autres termes, il vous donne accès au CSS Object Model, qui vous permet d'étendre le code CSS via JavaScript. Cela présente plusieurs avantages :

• Elle vous donne beaucoup plus de pouvoir pour créer des fonctionnalités CSS personnalisées.
• Il est plus facile de séparer les problèmes de rendu de la logique d'application.
• Il est plus performant que le polyfilling CSS que nous réalisons actuellement avec JavaScript, car le navigateur n'aura plus besoin d'analyser les scripts ni d'effectuer un second cycle de rendu. Le code Houdini est analysé lors du premier cycle de rendu.

Houdini est un nom générique qui désigne plusieurs API. Pour en savoir plus à leur sujet et sur leur état actuel, consultez Est Houdini est-il prêt ? Au cours de notre discussion, nous avons abordé les API Properties and Values, les API Paint et le Worklet d'animation, car elles sont actuellement les plus compatibles. Nous pourrions facilement dédier un article complet à chacune de ces API intéressantes, mais pour l'instant, regardez notre présentation pour obtenir une présentation et des démonstrations intéressantes qui commencent à vous donner un aperçu de ce que vous pouvez faire avec les API.

Dépassement

D'autres points se profilent, mais nous n'avons pas eu le temps d'en discuter en détail. Nous les avons donc passés en revue rapidement. ⚡ Si vous n'en avez pas encore entendu parler, regardez la dernière partie de l'intervention.

• size: une propriété qui vous permet de définir simultanément la hauteur et la largeur.
• aspect-ratio: une propriété qui définit le format des éléments qui n'en ont pas intrinsèquement.
• min(), max() et clamp(): fonctions qui vous permettent de définir des contraintes numériques sur n'importe quelle propriété CSS, et pas seulement sur la largeur et la hauteur.
• list-style-type est une propriété existante, mais elle sera bientôt compatible avec un plus large éventail de valeurs, y compris les emoji et les SVG.
• display: outer inner: la propriété display acceptera bientôt deux paramètres, ce qui vous permettra de spécifier explicitement sa mise en page extérieure et sa mise en page interne au lieu d'utiliser des mots clés composés tels que inline-flex.
• Régions CSS: elles permettent de remplir une zone spécifiée non rectangulaire, dans laquelle le contenu peut entrer et sortir.
• Modules CSS: JavaScript peut demander un module CSS et récupérer un objet enrichi sur lequel il est facile d'effectuer des opérations.