Ces derniers mois ont marqué le début d'une ère d'or pour l'interface utilisateur Web. Les nouvelles fonctionnalités de la plate-forme sont désormais adoptées avec une adoption massive par plusieurs navigateurs, qui prennent en charge plus de fonctionnalités Web et de personnalisation que jamais.
Voici 20 des fonctionnalités les plus intéressantes et les plus intéressantes, récemment ou bientôt disponibles:
- Requêtes de conteneur
- Appliquer un style aux requêtes
- Sélecteur
:has() - nième-de-microsyntaxe
text-wrap: balanceinitial-letter- Unités de la fenêtre d'affichage dynamique
- Grands espaces colorimétriques
color-mix()- Imbrication
- Couches en cascade
- Styles de portée
- Fonctions trigonométriques
- Propriétés de transformation individuelles
- pop-over
- positionnement de l'ancre
- sélectionner le menu
- Transitions de propriété discrètes
- Animations liées au défilement
- Afficher les transitions
Nouveau modèle responsif
Commençons par quelques nouvelles fonctionnalités de responsive design. Les nouvelles fonctionnalités de la plate-forme vous permettent de créer des interfaces logiques avec des composants qui possèdent leurs informations de style responsif, de créer des interfaces qui exploitent les fonctionnalités du système pour proposer des interfaces utilisateur plus intuitives, et de permettre à l'utilisateur de faire partie du processus de conception avec des requêtes de préférences utilisateur pour une personnalisation complète.
Requêtes de conteneur
Les requêtes de conteneurs sont récemment devenues stables dans tous les navigateurs modernes. Ils vous permettent d'interroger la taille et le style d'un élément parent pour déterminer les styles à appliquer à ses enfants. Les requêtes média peuvent uniquement accéder aux informations de la fenêtre d'affichage et les exploiter, ce qui signifie qu'elles ne peuvent fonctionner que sur une vue macro d'une mise en page. Les requêtes de conteneur, en revanche, sont un outil plus précis, compatible avec un nombre illimité de mises en page.
Dans l'exemple de boîte de réception suivant, la boîte de réception principale et la barre latérale Favoris sont toutes deux des conteneurs. Les e-mails qu'ils contiennent ajustent leur mise en page sous forme de grille et affichent ou masquent l'horodatage des e-mails en fonction de l'espace disponible. Il s'agit du même composant sur la page, mais il apparaît dans différentes vues.
Étant donné que nous avons une requête de conteneur, les styles de ces composants sont dynamiques. Si vous ajustez la taille et la mise en page de la page, les composants réagissent à leur espace alloué individuellement. La barre latérale devient une barre supérieure avec plus d'espace, et la mise en page ressemble davantage à la boîte de réception principale. Lorsque l'espace est insuffisant, les deux formats s'affichent dans un format condensé.
Pour en savoir plus sur les requêtes de conteneur et la création de composants logiques, consultez ce post.
Appliquer un style aux requêtes
La spécification de requête de conteneur vous permet également d'interroger les valeurs de style d'un conteneur parent. Cette fonctionnalité est actuellement partiellement implémentée dans Chrome 111, dans lequel vous pouvez utiliser des propriétés CSS personnalisées pour appliquer des styles de conteneur.
L'exemple suivant utilise des caractéristiques météorologiques stockées dans les valeurs des propriétés personnalisées (pluie, ensoleillé et nuageux, par exemple) pour appliquer un style à l'arrière-plan et à l'icône d'indicateur de la carte.
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
Ce n'est que le début pour les requêtes de style. À l'avenir, nous disposerons de requêtes booléennes pour déterminer si une valeur de propriété personnalisée existe et réduire la répétition du code. Nous envisageons actuellement d'utiliser des requêtes de plage pour appliquer des styles en fonction d'une plage de valeurs. Cela permettrait d'appliquer les styles présentés ici en utilisant une valeur en pourcentage indiquant le risque de pluie ou de couverture nuageuse.
Pour en savoir plus et voir d'autres démos, consultez notre article de blog sur les requêtes de style.
:has()
En parlant de fonctionnalités puissantes et dynamiques, le sélecteur:has() est l'une des nouvelles fonctionnalités CSS les plus puissantes disponibles dans les navigateurs modernes. :has() vous permet d'appliquer des styles en vérifiant si un élément parent contient la présence d'enfants spécifiques ou si ces enfants se trouvent dans un état spécifique. Cela signifie que nous avons
maintenant un sélecteur de parent.
En vous appuyant sur l'exemple de requête du conteneur, vous pouvez utiliser :has() pour rendre les composants encore plus dynamiques. Dans celle-ci, un élément avec une étoile se voit appliquer un arrière-plan gris, et un élément avec une case cochée sur un fond bleu.
Toutefois, cette API ne se limite pas à la sélection des parents. Vous pouvez également appliquer un style à n'importe quel élément enfant au sein du parent. Par exemple, le titre est en gras lorsque l'élément contient l'étoile. Pour ce faire, utilisez .item:has(.star) .title. Le sélecteur :has() vous donne accès aux éléments parents, aux éléments enfants et même aux éléments frères. Il s'agit donc d'une API très flexible, avec de nouveaux cas d'utilisation qui apparaissent chaque jour.
Pour en savoir plus et découvrir d'autres démos, consultez cet article de blog consacré à :has().
Syntaxe n-ième de
Navigateurs pris en charge
- 111
- 111
- 113
- 9
La plate-forme Web propose désormais une sélection n-ième enfant plus avancée. La syntaxe avancée n-ième enfant donne un nouveau mot-clé ("de"), qui vous permet d'utiliser la micro syntaxe existante d'An+B, avec un sous-ensemble plus spécifique dans lequel effectuer la recherche.
Si vous utilisez un élément n-ième enfant standard, tel que :nth-child(2) sur la classe spéciale, le navigateur sélectionne l'élément auquel la classe spéciale est appliquée. Il s'agit également du deuxième enfant. Cela diffère de :nth-child(2 of .special), qui préfiltre d'abord tous les éléments .special, puis sélectionne le second dans cette liste.
Pour en savoir plus sur cette fonctionnalité, consultez notre article sur la syntaxe nth.
text-wrap: balance
Les sélecteurs et les requêtes de style ne sont pas les seuls endroits où nous pouvons intégrer la logique dans nos styles ; la typographie en est un autre. À partir de Chrome 114, vous pouvez utiliser l'équilibrage par retour à la ligne automatique pour les en-têtes à l'aide de la propriété text-wrap avec la valeur balance.
Pour équilibrer le texte, le navigateur effectue une recherche binaire sur la plus petite largeur, sans générer de lignes supplémentaires, en s'arrêtant à un pixel CSS (pas de pixel d'affichage). Pour réduire davantage les étapes de la recherche binaire, le navigateur démarre à 80% de l'épaisseur moyenne de la ligne.
Pour en savoir plus, consultez cet article.
initial-letter
Une autre amélioration intéressante de la typographie Web est initial-letter. Cette propriété CSS vous permet de mieux contrôler le style des majuscules de l'encart.
Utilisez initial-letter sur le pseudo-élément :first-letter pour spécifier la taille de la lettre en fonction du nombre de lignes qu'elle occupe.
Le décalage de bloc ("récepteur") de la lettre correspond à l'emplacement de la lettre.
Pour en savoir plus sur l'utilisation de intial-letter, cliquez ici.
Unités de la fenêtre d'affichage dynamique
Navigateurs pris en charge
- 108
- 108
- 101
- 15,4
Aujourd'hui, les développeurs Web rencontrent un problème courant : le dimensionnement précis et cohérent de la fenêtre d'affichage, en particulier sur les appareils mobiles. En tant que développeur, vous voulez que 100vh (100% de la hauteur de la fenêtre d'affichage) soit "aussi grand que la fenêtre d'affichage", mais le bloc vh ne tient pas compte d'éléments tels que le retrait des barres de navigation sur mobile. Par conséquent, il arrive qu'il finisse trop longtemps et provoque un défilement.
Pour résoudre ce problème, nous avons désormais de nouvelles valeurs unitaires sur la plate-forme Web, y compris :
- Hauteur et largeur de la fenêtre d'affichage faibles (ou svh et svw), qui représentent la plus petite taille de fenêtre d'affichage active.
- Hauteur et largeur de la fenêtre d'affichage élevées (lvh et lvw), qui représentent la plus grande taille.
- Hauteur et largeur de la fenêtre d'affichage dynamiques (dvh et dvw)
La valeur des unités de fenêtre d'affichage dynamique change lorsque les barres d'outils dynamiques supplémentaires du navigateur, telles que l'adresse en haut ou la barre d'onglets en bas, sont visibles ou non.
Pour en savoir plus sur ces nouveaux blocs d'affichage, consultez l'article Blocs de fenêtre d'affichage grands, petits et dynamiques.
Espace colorimétrique à large gamme
Autre nouveauté clé de la plate-forme Web : les espaces de couleur à large gamme de couleurs. Avant que les couleurs à large gamme de couleurs ne soient disponibles sur la plateforme Web, vous pouviez prendre une photo aux couleurs vives, visible sur les appareils modernes, mais il était impossible d'obtenir un bouton, une couleur de texte ou un arrière-plan correspondant à ces valeurs vives.
Essayer vous-même
Aujourd'hui, la plate-forme Web propose toute une gamme de nouveaux espaces de couleur, dont REC2020, P3, XYZ, LAB, OKLAB, LCH et OKLCH. Découvrez les nouveaux espaces colorimétriques Web et plus encore dans le Guide de la couleur HD.
Vous pouvez voir immédiatement dans les outils de développement comment la gamme de couleurs s'est étendue. Une ligne blanche indique où se termine la gamme srgb et où commence la gamme de couleurs plus large.
Beaucoup plus d'outils disponibles pour la couleur ! Et ne manquez pas non plus les superbes améliorations du dégradé. Adam Argyle a même un tout nouvel outil conçu pour vous aider à tester un nouveau sélecteur de couleur et un générateur de dégradés sur le Web. Essayez-le sur gradient.style.
mélange de couleurs()
La fonction color-mix() permet d'étendre les espaces de couleur étendus. Cette fonction prend en charge le mélange de deux valeurs de couleur pour créer de nouvelles valeurs en fonction des canaux des couleurs qui se mélangent. L'espace colorimétrique dans lequel vous mélangez affecte les résultats. Dans un espace de couleurs plus perceptuel comme l'oklch, vous verrez une gamme de couleurs différente de celle que vous obtenez avec srgb.
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
La fonction color-mix() offre une fonctionnalité demandée depuis longtemps: la possibilité de conserver des valeurs de couleur opaque tout en leur ajoutant une certaine transparence. Désormais, vous pouvez utiliser les variables de couleur de votre marque lors de la création de variantes de ces couleurs à différentes opacités. Pour ce faire, il faut mélanger une couleur avec un indicateur transparent. Lorsque vous mélangez la couleur de marque en bleu avec 10% de transparence, vous obtenez une couleur opaque de 90 %. Vous pouvez voir comment cela vous permet de créer rapidement des systèmes de couleurs.
Vous pouvez voir cela en action dans les outils pour les développeurs Chrome, avec une très belle icône de diagramme de Venn dans le volet des styles.
Découvrez d'autres exemples et informations dans notre article de blog sur color-mix ou essayez ce playground de color-mix().
Éléments de base des CSS
Créer de nouvelles fonctionnalités qui s'avèrent clairement bénéfiques par les utilisateurs fait partie de l'équation, mais la plupart des fonctionnalités disponibles dans Chrome visent à améliorer l'expérience des développeurs, et à créer une architecture CSS plus fiable et plus organisée. Ces fonctionnalités incluent l'imbrication CSS, les couches en cascade, les styles délimités, les fonctions trigonométriques et les propriétés de transformation individuelles.
Imbrication
L'imbrication CSS, quelque chose que les gens adorent chez Sass et l'une des principales demandes des développeurs CSS depuis des années, arrive enfin sur la plate-forme Web. L'imbrication permet aux développeurs d'écrire dans un format groupé plus concis, qui réduit la redondance.
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
Vous pouvez également imbriquer des requêtes média, ce qui signifie que vous pouvez imbriquer des requêtes de conteneur. Dans l'exemple suivant, une fiche passe d'une mise en page portrait à une mise en page en mode paysage si la largeur de son conteneur est suffisante:
.card {
display: grid;
gap: 1rem;
@container (width >= 480px) {
display: flex;
}
}
L'ajustement de la mise en page à flex se produit lorsque le conteneur dispose d'un espace disponible supérieur (ou égal) à 480px. Le navigateur appliquera simplement ce nouveau style d'affichage lorsque les conditions seront remplies.
Pour obtenir plus d'informations et d'exemples, consultez notre article sur l'imbrication CSS.
Couches en cascade
Nous avons également identifié un autre problème pour les développeurs : garantir la cohérence des styles qui prévalent sur les autres. Pour résoudre ce problème, il est nécessaire de mieux contrôler la cascade CSS.
Les calques en cascade permettent de résoudre ce problème en permettant aux utilisateurs de contrôler quels calques ont une priorité plus élevée que les autres, ce qui vous permet de contrôler plus précisément le moment où vos styles sont appliqués.
Pour en savoir plus sur l'utilisation des calques en cascade, consultez cet article.
CSS délimité
Navigateurs pris en charge
- 118
- 118
- x
- 17,4
Les styles dont la portée est définie au niveau du CSS permettent aux développeurs de spécifier les limites auxquelles des styles spécifiques s'appliquent, ce qui crée essentiellement un espace de noms natif en CSS. Auparavant, les développeurs utilisaient des scripts tiers pour renommer les classes, ou des conventions d'attribution de noms spécifiques pour éviter les conflits de styles, mais vous pourrez bientôt utiliser @scope.
Ici, nous associons un élément .title à une .card. Cela évite que cet élément de titre soit en conflit avec d'autres éléments .title de la page, comme le titre d'un article de blog ou un autre titre.
@scope (.card) {
.title {
font-weight: bold;
}
}
Vous pouvez voir @scope avec des limites de champ d'application avec @layer dans cette démonstration en direct:
Pour en savoir plus sur @scope, consultez la spécification css-cascade-6.
Fonctions trigonométriques
Les fonctions trigonométriques sont également ajoutées aux fonctions mathématiques CSS existantes. Ces fonctions sont désormais stables dans tous les navigateurs modernes et vous permettent de créer des mises en page plus naturelles sur la plate-forme Web. La mise en page du menu radial est un bon exemple. Il est maintenant possible de concevoir et d'animer des éléments à l'aide des fonctions sin() et cos().
Dans la démonstration ci-dessous, les points tournent autour d'un point central. Au lieu de faire pivoter chaque point autour de son propre centre, puis de le déplacer vers l'extérieur, chaque point est traduit sur les axes X et Y. Les distances sur les axes X et Y sont déterminées en tenant compte de cos() et, respectivement, de la sin() de --angle.
Pour en savoir plus, consultez l'article sur les fonctions trigonométriques.
Propriétés de transformation individuelles
L'ergonomie des développeurs continue de s'améliorer grâce aux différentes fonctions de transformation. Depuis notre dernière conférence E/S, les transformations individuelles sont restées stables dans tous les navigateurs modernes.
Auparavant, la fonction de transformation vous permettait d'appliquer des sous-fonctions pour mettre à l'échelle, faire pivoter et traduire un élément d'interface utilisateur. Cela impliquait de nombreuses répétitions, ce qui était particulièrement frustrant lors de l'application de plusieurs transformations à différents moments de l'animation.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}
Vous pouvez désormais inclure tous ces détails dans vos animations CSS en séparant les types de transformations et en les appliquant individuellement.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.target:hover {
scale: 2;
}
Ainsi, des changements de translation, de rotation ou d'échelle peuvent se produire simultanément à des vitesses différentes à différents moments de l'animation.
Pour en savoir plus, consultez cet article sur les fonctions de transformation individuelles.
Composants personnalisables
Afin de répondre à certains des principaux besoins des développeurs via la plate-forme Web, nous collaborons avec le groupe de la communauté OpenUI et avons identifié trois solutions avec lesquelles nous pouvons commencer:
- Fonctionnalité pop-up intégrée avec des gestionnaires d'événements, une structure DOM déclarative et des valeurs par défaut accessibles.
- API CSS permettant de partager deux éléments l'un avec l'autre afin de permettre le positionnement de l'ancrage.
- Composant de menu déroulant personnalisable, qui permet d'appliquer un style au contenu d'une sélection.
Pop-over
L'API pop-over permet d'intégrer des éléments magiques pour prendre en charge les navigateurs, par exemple:
- La prise en charge de la couche supérieure vous évite d'avoir à gérer
z-index. Lorsque vous ouvrez un pop-up ou une boîte de dialogue, vous faites la promotion de cet élément sur une couche spéciale en haut de la page. - Comportement de fermeture simplifiée sans frais dans les pop-ups
auto. Ainsi, lorsque vous cliquez en dehors d'un élément, celui-ci est fermé, supprimé de l'arborescence d'accessibilité et le curseur est correctement géré. - Accessibilité par défaut pour le tissu conjonctif de la cible du pop-up et le pop-over lui-même.
En d'autres termes, il faut moins de code JavaScript pour créer toutes ces fonctionnalités et suivre l'ensemble de ces états.
La structure DOM pour le pop-up est déclarative et peut être écrite de manière aussi claire que si vous attribuez à l'élément de pop-up les attributs id et popover. Ensuite, synchronisez cet ID avec l'élément qui ouvrira le pop-over, par exemple un bouton avec l'attribut popovertarget:
<div id="event-popup" popover>
<!-- Popover content goes in here -–>
</div>
<button popovertarget="event-popup">Create New Event</button>
popover est un raccourci pour popover=auto. Un élément avec popover=auto force la fermeture des autres fenêtres pop-up lorsqu'il est ouvert, est sélectionné à l'ouverture et peut fermer légèrement. À l'inverse, les éléments popover=manual ne forcent pas la fermeture d'un autre type d'élément, ne sont pas sélectionnés immédiatement et ne ferment pas la lumière. Ils se ferment à l'aide d'un bouton d'activation/de désactivation ou d'une autre action de fermeture.
La documentation la plus récente sur les pop-overs est disponible sur MDN.
Positionnement de l'ancre
Les fenêtres pop-up sont également fréquemment utilisées dans des éléments tels que les boîtes de dialogue et les info-bulles, qui doivent généralement être ancrées à des éléments spécifiques. Prenons l'exemple de cet événement. Lorsque vous cliquez sur un événement d'agenda, une boîte de dialogue s'affiche à côté de l'événement sur lequel vous avez cliqué. L'élément d'agenda est l'ancre, et la fenêtre contextuelle est la boîte de dialogue qui affiche les détails de l'événement.
Vous pouvez créer une info-bulle centrée avec la fonction anchor(), en utilisant la largeur de l'ancre pour la positionner à 50% de sa position X. Ensuite, utilisez les valeurs de positionnement existantes pour appliquer les autres styles d'emplacement.
Mais que se passe-t-il si le pop-over ne s'adapte pas à la fenêtre d'affichage selon votre position ?
Pour résoudre ce problème, l'API de positionnement de l'ancrage inclut des positions de remplacement que vous pouvez personnaliser. L'exemple suivant crée une position de remplacement appelée "haut, puis bas". Le navigateur essaie d'abord de positionner l'info-bulle en haut. Si elle ne rentre pas dans la fenêtre d'affichage, il la positionne sous l'élément d'ancrage, en bas.
.center-tooltip {
position-fallback: --top-then-bottom;
translate: -50% 0;
}
@position-fallback --top-then-bottom {
@try {
bottom: calc(anchor(top) + 0.5rem);
left: anchor(center);
}
@try {
top: calc(anchor(bottom) + 0.5rem);
left: anchor(center);
}
}
Pour en savoir plus sur le positionnement de l'ancrage, consultez cet article de blog.
<selectmenu>
Vous pouvez créer des selectmenus entièrement personnalisables à l'aide du positionnement d'un pop-up ou de l'ancrage. Le groupe de la communauté OpenUI s'est penché sur la structure fondamentale de ces menus et a cherché des moyens de permettre la personnalisation de leur contenu. Prenons ces exemples visuels:
Pour créer cet exemple selectmenu le plus à gauche, avec des points colorés correspondant à la couleur qui s'afficherait dans un événement d'agenda, vous pouvez l'écrire comme suit:
<selectmenu>
<button slot="button" behavior="button">
<span>Select event type</span>
<span behavior="selected-value" slot="selected-value"></span>
<span><img src="icon.svg"/></span>
</button>
<option value="meeting">
<figure class="royalblue"></figure>
<p>Meeting</p>
</option>
<option value="break">
<figure class="gold"></figure>
<p>Lunch/Break</p>
</option>
...
</selectmenu>
Transitions de propriété discrètes
Pour que tout cela permette une transition en douceur des pop-overs, le Web a besoin d'un moyen d'animer les propriétés discrètes. Il s'agit de propriétés qui n'étaient généralement pas animables dans le passé. Il s'agissait, par exemple, d'animations vers et depuis la couche supérieure, et des animations vers et depuis display: none.
Dans le cadre de leur travail visant à faciliter les transitions pour les fenêtres pop-up, les selectmenus et même les éléments existants tels que les boîtes de dialogue ou les composants personnalisés, les navigateurs offrent de nouvelles voies pour prendre en charge ces animations.
La démo en pop-up suivante anime les pop-ups entrants et sortants à l'aide de :popover-open pour l'état ouvert, @starting-style pour l'état "avant-ouvert", et applique une valeur de transformation directement à l'élément pour l'état "after-open-is-closed". Pour que tout cela fonctionne avec Display, vous devez ajouter la propriété transition à la propriété transition, comme suit:
.settings-popover {
&:popover-open {
/* 0. before-change */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. open (changed) state */
transform: translateY(0);
opacity: 1;
}
/* 2. After-change state */
transform: translateY(-50px);
opacity: 0;
/* enumarate transitioning properties, including display */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
Interactions
Ce qui nous amène aux interactions, dernière étape de cette visite guidée des fonctionnalités de l'interface utilisateur Web.
Nous avons déjà parlé de l'animation des propriétés distinctes, mais il existe également des API très intéressantes dans Chrome concernant les animations liées au défilement et les transitions de vue.
Animations liées au défilement
Les animations liées au défilement vous permettent de contrôler la lecture d'une animation en fonction de la position de défilement d'un conteneur de défilement. Autrement dit, lorsque vous faites défiler la page vers le haut ou vers le bas, l'animation avance ou revient en arrière. En outre, grâce aux animations liées au défilement, vous pouvez contrôler une animation en fonction de la position d'un élément dans son conteneur de défilement. Cela vous permet de créer des effets intéressants, comme une image de fond se déplaçant en parallaxe, des barres de progression de défilement et des images qui sont dévoilées à mesure qu'elles s'affichent à l'écran.
Cette API est compatible avec un ensemble de classes JavaScript et de propriétés CSS qui vous permettent de créer facilement des animations déclaratives basées sur le défilement.
Pour générer une animation CSS par défilement, utilisez les nouvelles propriétés scroll-timeline, view-timeline et animation-timeline.
Pour générer une API JavaScript Web Animations, transmettez une instance ScrollTimeline ou ViewTimeline en tant qu'option timeline à Element.animate().
Ces nouvelles API fonctionnent conjointement avec les API Web Animations et CSS Animations existantes, ce qui leur permet de bénéficier de leurs avantages. Cela inclut la possibilité d'exécuter ces animations en dehors du thread principal. Bonne lecture: vous pouvez désormais obtenir des animations fluides, générées par le défilement et exécutées à partir du thread principal, avec seulement quelques lignes de code supplémentaire. Qu'est-ce qu'il ne faut pas aimer ?!
Pour obtenir un guide détaillé sur la création de ces animations liées au défilement, veuillez consulter cet article sur les animations liées au défilement.
Afficher les transitions
L'API View Transition permet de modifier facilement le DOM en une seule étape, tout en créant une transition animée entre les deux états. Il peut s'agir de simples fondus entre les vues, mais vous pouvez également contrôler la transition des différentes parties de la page.
Les transitions de vue peuvent être utilisées comme une amélioration progressive: prenez votre code qui met à jour le DOM par n'importe quelle méthode et encapsulez-le dans l'API de transition d'affichage avec une création de remplacement pour les navigateurs qui ne prennent pas en charge la fonctionnalité.
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
Le contrôle de la transition s'effectue via CSS
@keyframes slide-from-right {
from { opacity: 0; transform: translateX(75px); }
}
@keyframes slide-to-left {
to { opacity: 0; transform: translateX(-75px); }
}
::view-transition-old(root) {
animation: 350ms both slide-to-left ease;
}
::view-transition-new(root) {
animation: 350ms both slide-from-right ease;
}
Comme l'a montré cette superbe démonstration de Maxi Ferreira, les autres interactions avec les pages, comme la lecture d'une vidéo, continuent de fonctionner pendant la transition d'affichage.
Les transitions d'affichage fonctionnent actuellement avec les applications monopages (SPA) de Chrome 111. La compatibilité avec les applications multipages est en cours de développement. Pour en savoir plus, consultez notre guide complet sur les transitions d'affichage.
Conclusion
Tenez-vous informé des dernières nouveautés en CSS et HTML sur le site developer.chrome.com, et regardez les vidéos de la conférence I/O pour en savoir plus sur le Web.