Nouveautés de Safari et WebKit

Je suis Saron Yitbarek, évangéliste des technologies web dans l’équipe Safari et WebKit. Depuis la dernière WWDC, nous avons conçu de nouvelles technologies web, celles que vous attendiez, et d’autres qui vont vous surprendre. Nous avons à cœur de vous aider, vous les créateurs du Web, en vous donnant les moyens de concrétiser plus facilement vos idées. Notre objectif : vous aider à offrir à vos utilisateurs une expérience fiable, compatible et axée sur la confidentialité. C’est pourquoi, je veux vous annoncer la nouvelle technologie web qui arrive dans Safari cet automne. Cette version regorge de fonctionnalités remarquables. Nous avons travaillé dur pour renforcer l’interopérabilité et combler les dernières lacunes. Dans cette séance, je vais vous montrer mes fonctionnalités préférées et comment nous avons comblé certaines lacunes. Ces fonctionnalités se répartissent en 4 catégories. Côté animation, je vous montrerai les animations pilotées par défilement et les transitions entre documents. La mise en page exploite la puissance du positionnement par ancrage. Pour les effets visuels, nous verrons background-clip, la nouvelle fonction shape, et text-wrap: pretty. Et après le CSS, je passerai aux médias, avec un aperçu de la prise en charge des icônes SVG, des images et des améliorations des formats. Commençons par l’animation. L’animation enrichit l’expérience en ligne que vous proposez, en ajoutant du dynamisme et une touche de fantaisie à vos pages. Je vais vous montrer un exemple pour illustrer ceci. Disons que je repense le site web de mon entreprise de formation en ligne, A-School of Code. Je veux qu’il soit pratique avec des touches ludiques. Avec les dernières fonctionnalités, je peux créer cela juste avec du CSS. Je vais vous montrer à quoi pourrait ressembler mon site. Voici le site d’une école en ligne qui promet de vous enseigner des compétences techniques. Je présente la liste des sujets abordés dans une jolie grille, vous pouvez voir les noms des entreprises qui ont embauché mes étudiants, lire les avis d’anciens élèves sur les cours et le programme, et enfin, choisir entre deux types de formations pour en savoir plus. Plusieurs éléments contribuent à valoriser ce site. C’est l’animation qui a sans doute retenu votre attention. C’est grâce aux animations pilotées par le défilement, désormais disponibles dans Safari 19. Les animations CSS font partie du Web depuis leur introduction par Apple dans WebKit en 2007. Mais relier ces animations au comportement de l’utilisateur a toujours nécessité JavaScript. JavaScript est puissant, mais s’en passer quand c’est possible améliore les performances et l’autonomie des appareils. Les animations pilotées par le défilement lient vos effets au scroll, sans JavaScript, uniquement en CSS. Voyons comment tout cela fonctionne. Pour comprendre les animations pilotées par le défilement, il y a un concept clé à connaître : les timelines. La timeline par défaut sur le Web est basée sur le temps. Cela signifie qu’une animation se déroule au fil du temps.

À mesure que les secondes passent, l’animation de ma barre de progression avance aussi. Mais avec les animations pilotées par défilement, vous avez 2 nouvelles timelines. La 1ère, c’est la timeline de défilement. Sur mon site, j’ai utilisé la timeline scroll() pour créer la barre de progression en bas de page. C’est un exemple artificiel. En pratique, une telle barre de progression est inutile puisque la barre de défilement suffit. Mais, elle permet de visualiser simplement l’animation au défilement, alors voyons comment elle a été construite. Avant de créer ma barre, je dois d’abord penser à un point essentiel : l’accessibilité. L’animation pilotée par le défilement ajoute du mouvement, mais certains utilisateurs préfèrent en réduire la quantité via les paramètres d’accessibilité. Je veux respecter ce choix afin d’éviter tout inconfort lié au mouvement. L’inconfort dû au mouvement est fréquent et peut provenir de plusieurs causes, comme l’expérience, la génétique, la fatigue ou des troubles de l’équilibre. Les symptômes peuvent inclure nausées, vertiges, maux de tête et autres gênes physiques.

En tant que développeurs, nous ajoutons différents types de mouvements à nos sites et applications web qui peuvent provoquer un inconfort lié au mouvement : L’agrandissement, le zoom, les déplacements à vitesses variables (effet parallaxe), les effets 3D simulés, et les mouvements périphériques hors zone de focus peuvent provoquer cet inconfort. Cette liste n’est pas exhaustive, mais c’est un bon point de départ à prendre en compte. Votre site utilise-t-il ces effets ? Dans mon cas, mon animation est une barre de progression simple, un type de mouvement assez sûr, discret et courant sur le Web. Cette animation ne risque donc pas de provoquer d’inconfort lié au mouvement. L’ajout d’animations sur une page est une bonne occasion de prendre en compte la diversité des besoins des utilisateurs. Voyons notre barre de défilement. Je commence par un peu de CSS. Je vais ajouter la barre de progression en pseudo-élément dans mon pied de page. Je vais la styliser pour qu’elle commence en bas à gauche et reste fixée en bas lors du défilement.

Puis, je vais créer l’animation avec des keyframes en utilisant le CSS que nous connaissons déjà. Cela indique à mon navigateur d’agrandir ma barre de progression sur l’axe X, créant ainsi l’effet d’une barre qui se remplit de gauche à droite. Jusqu’ici, je pose les bases de mon animation pilotée par le défilement, il me reste une dernière étape pour finaliser cette base. Ajouter l’animation à ma barre de progression. Je peux le faire ici. Voici la partie liée au défilement. Je veux que la barre de progression se remplisse de gauche à droite lorsque je défile. Je dois donc attribuer une nouvelle timeline d’animation à ma barre de progression. Je vais ajouter la propriété animation-timeline : scroll(); à mon CSS pour remplacer la timeline par défaut. N’oubliez pas que pour que cela fonctionne, la propriété animation-timeline doit apparaître après la propriété animation. J’ai donc relié mon animation à ma timeline de défilement et créé une barre de progression, le tout en quelques lignes de CSS. Plus besoin de JavaScript. Voyons un exemple concret : une animation déclenchée non pas par le défilement, mais par l’apparition d’un élément à l’écran. Prenons cet exemple. Je vois les blocs pivoter pour former une grille. Cela se produit lorsque je fais défiler, mais un autre facteur entre en jeu. L’animation ne se produit que dans cette zone bleue. Elle démarre en bas, uniquement lorsque les blocs entrent dans la zone visible, et ils arrêtent de pivoter à mi-chemin de l’écran, en haut de ma zone bleue. Prendre en compte la zone visible nécessite un autre type de chronologie : la view timeline. Voyons un peu de code pour voir comment ça fonctionne.

Je vais commencer par du HTML. J’ai ma liste de sujets avec quelques classes que j’utiliserai dans mon CSS. Je vais ajouter quelques styles CSS de base pour transformer ma liste en blocs jaunes assortis au thème de mon site. Maintenant que j’ai ma base, je peux commencer mon animation de défilement. La 1ère étape consiste à déterminer quelle animation lier au défilement. Sur mon site, trois animations se déclenchent en même temps, et je dois les appliquer à chaque bloc. La 1ère fait apparaître les blocs en les faisant venir de la gauche. La 2è fait apparaître les blocs en les faisant venir du centre. Et la 3è fait apparaître les blocs en les faisant venir de la droite.

Le code n’a encore rien de vraiment nouveau. J’utilise les animations CSS classiques.

Je vais intégrer la partie pilotée par le défilement dans mes animations. Mais d’abord, je vais faire une pause et réfléchir à l’accessibilité de cette animation. Si je repense aux déclencheurs fréquents, la rotation en fait partie. Mais cela fait référence à un effet visuel ambiant qui peut provoquer une désorientation. L’animation étant discrète et limitée à quelques éléments, elle ne devrait pas poser de problème d’accessibilité. Je peux donc reprendre mon code. Je vais ajouter mon code d’animation dans le CSS, en appliquant l’animation de gauche aux blocs de gauche, celle du centre aux blocs du milieu, et celle de droite aux blocs de droite. Pour que les éléments conservent leur style avant et après l’animation, j’ajoute la propriété animation-fill-mode: both. Et j’arrive enfin à la partie du code pilotée par le défilement. Deux lignes de code suffisent pour que cela fonctionne. La 1ère est ma nouvelle view timeline. Je vais l’ajouter ici. Et la 2è, c’est ce qu’on appelle la plage d’animation. Elle indique à mon navigateur où commencer et terminer l’animation en fonction de sa chronologie. Avec la view timeline, la plage d’animation dépend de la position des éléments dans la fenêtre d’affichage. La valeur par défaut va de 0 à 100 %. Cela définit le début de l’animation à 0 %, au moment où l’élément entre dans la fenêtre d’affichage, et la fin à 100 %, lorsqu’il en sort complètement. Voyons à quoi ressemble mon animation avec ces valeurs par défaut. C’est proche de ce que je veux, mais ce n’est pas tout à fait ça. Avec des animations pilotées par le défilement, en particulier pour un site web informatif comme celui-ci, l’expérience utilisateur reste primordiale. Les animations sont attrayantes et peuvent faire ressortir mon site, mais les infos doivent rester lisibles. Les animations ne doivent pas nuire à la fonctionnalité. Dans ce cas, cela signifie faire attention à la durée de l’animation. Je ne veux pas qu’elle dure jusqu’à 100 %, car cela ferait bouger les blocs en continu, ce qui les rendrait difficiles à lire.

Je préfère une courte animation, quelque chose qui attire l’œil, puis les blocs prennent leur place pour que l’utilisateur puisse les lire. La moitié de la page me semble un bon point pour essayer. Cela permet d’ajouter une touche ludique sans gêner la lecture. Je vais donc définir ma plage de 0 % à 50 %. Ainsi, l’animation se termine lorsque les éléments atteignent la moitié de la page, ce qui limite leur durée de mouvement. En remontant la page, l’animation s’inverse : les blocs commencent à se désassembler à 50 % et se dissolvent entièrement à 0 %. Vous pouvez contrôler d’autres aspects de la plage, comme la position exacte du 0 %. Pour comprendre les options disponibles, essayez différentes valeurs et explorez par vous-même. Les nouvelles timelines, combinées aux animations, permettent de concevoir des interactions riches et dynamiques. C’est tout pour l’animation par défilement dans WebKit pour Safari. L’animation suivante, que j’ai hâte de vous montrer, occupe toute la page. Il s’agit de transitions de vue interdocuments, déployées en décembre dernier dans Safari 18.2. Elles prolongent les transitions de vue, introduites plus tôt dans Safari 18.0. Elles permettent de créer des transitions fluides entre les pages, en passant de ce rendu, à un fondu enchaîné comme celui-ci, sans avoir besoin de JavaScript. Il suffit d’une ligne de CSS pour obtenir cet effet. Quand vous cliquez sur cet élément de navigation sans transition, le navigateur efface la page et en charge une nouvelle au clic. Ce qui est génial avec les transitions, c’est qu’elles capturent l’état avant et après le changement de page pour créer une animation fluide. J’adore le rendu. Voici comment ça fonctionne. Dans votre fichier CSS, ajoutez la règle @view-transition et définissez la propriété navigation sur auto. Et voilà ! Mais il reste encore une dernière chose à faire. Puisqu’on ajoute du mouvement à la page, il faut réfléchir aux éventuels enjeux d’accessibilité. Les fondus enchaînés sont des animations discrètes, parmi les plus sûres pour les personnes sensibles au mouvement. C’est bon pour moi, je peux y aller. Au lieu du fondu enchaîné par défaut, je veux faire un effet de glissement. En cliquant sur un élément de navigation, je veux que la page glisse vers l’extérieur et que la nouvelle prenne sa place. Je vais vous montrer ce que je veux dire, mais attention : si vous êtes sensible au mouvement, cela pourrait vous gêner. Je vous dirai quand ce sera terminé.

Je crée un effet de glissement, et j’aime le rendu, c’est un niveau au-dessus du fondu enchaîné. Prenons un instant pour réfléchir à son impact sur les utilisateurs. L’animation est terminée.

Ce type d’animation par glissement peut-il provoquer un inconfort lié au mouvement ? C’est une animation assez marquante. Ce n’est pas juste un mot ou un élément qui bouge, ce sont deux pages entières. Comme cette animation n’est pas essentielle et peut poser problème, il est préférable de la placer dans une media query respectant la préférence de réduction des animations. Faisons-le.

Voici ma media query : la transition par glissement ne s’exécute que si l’utilisateur n’a pas demandé de réduction des animations. Je dois coder mon effet de glissement. J’utilise des animations CSS pour créer des images-clés qui définissent le comportement des deux pages. Je veux qu’une page sorte en glissant, pendant que l’autre entre en glissant.

Ensuite, pour utiliser ces animations, il me faut une cible. Par défaut, navigation: auto applique la transition à toute la page. Je ne veux pas que toute ma page soit concernée par la transition. La barre de navigation doit être fixe. Et finalement, je veux aussi que le pied de page reste fixe. Je vais encapsuler tout ce que je veux faire passer en transition dans un id, un par page. Je vais l’appeler « school-info ». Je vais déclarer un view-transition-name pour l’utiliser plus tard. En mettant en place des transitions de vue, on obtient toute une série de pseudo-éléments. Je vais en utiliser deux.

View-transition-old et view-transition-new. View-transition-old représente une capture de l’état du site juste avant la transition, et view-transition-new une capture juste après. Mais pour les utiliser, je dois passer un argument. J’utilise mon view-transition-name « main-body » et je l’applique aux deux, car c’est cette partie de la page que je veux faire passer en transition. Puis, je définis animation-name avec le nom de mes keyframes. Et voilà ! Voyons à quoi cela ressemble. Si vous êtes sensible au mouvement, mieux vaut détourner les yeux un instant.

Parfait. La navigation reste fixe pendant la transition du reste de la page au clic.

Animation terminée. Ce que j’aime, c’est que les transitions de vue interdocuments enrichissent l’expérience. Elles sont facultatives et sans impact sur le fonctionnement du site. C’est un plus si elles sont prises en charge par le navigateur et souhaitées par votre utilisateur, sinon, aucun souci. Lors de l’implémentation de transitions de vue interdocuments dans votre app ou votre site web, sachez que les pages concernées doivent provenir de la même origine. Passer de example.com à example.com/cohorts fonctionnera parfaitement. Mais pas passer de example.com à un autre sous-domaine. Cela protège la sécurité et la vie privée de l’utilisateur. Il ne faut pas qu’une page malveillante puisse manipuler les animations de votre site web. Passons aux nouveautés de mise en page : le positionnement par ancrage, une nouveauté Safari attendue cet automne. Le positionnement par ancrage, surtout lorsqu’il s’appuie sur l’API popover existante, est un module CSS qui facilite plus que jamais la création d’infobulles et le placement précis de menus, tout en s’adaptant aux changements de la fenêtre d’affichage. Voyons cela. Je veux offrir une navigation fluide à mes utilisateurs. Quand ils se connectent, je veux qu’ils voient leur photo de profil dans la navigation. Un clic sur leur photo doit faire apparaître un menu, une fonctionnalité classique des apps web. Je commence à construire avec du HTML.

Voici mon HTML pour la barre de navigation avec la photo de profil. Et voici le menu que je veux afficher lorsque je clique sur l’image. Je vais ajouter un peu de style et voir le rendu. Mettons le reste de la page de côté. Ok, nous progressons, j’ai une bonne navigation et un beau menu. Mais je ne veux pas que le menu soit toujours visible, il doit s’ouvrir au clic sur l’icône de profil, puis se refermer au second clic. Et au clic, je ne veux pas qu’il apparaisse dans le coin gauche, mais qu’il soit ancré à la photo de profil. Pour résoudre ça, avant d’utiliser le positionnement par ancrage, je dois passer par l’API popover. Je commence par ajouter l’attribut popover à l’élément que je veux faire apparaître, ici mon menu de profil. Ensuite, j’attribue un id au popover. J’ai besoin d’un élément cliquable, donc je vais envelopper mon image dans un bouton. En faisant cela, je dois m’assurer que le bouton et son menu sont accessibles aux technologies d’assistance. Je vais donc ajouter l’attribut aria-haspopup pour indiquer aux lecteurs d’écran que ce bouton affiche un menu lorsqu’on clique dessus. Et enfin, je dois ajouter l’attribut popovertarget avec la même valeur que l’ID de l’élément popover. Parfait ! Désormais, un clic sur ma photo de profil affiche le popover, et un clic en dehors le fait disparaître. Mais il s’affiche dans le coin gauche de la page, alors que je veux qu’il soit ancré juste en dessous de la photo. C’est là que j’utilise le positionnement par ancrage.

Le positionnement par ancrage permet d’ancrer un élément à un autre et de le positionner en fonction de cet ancrage. Voici comment ça fonctionne. Je commence par choisir mon ancre et lui attribuer un nom avec la propriété anchor-name. Dans ce cas, mon ancre est le bouton de profil, ce qui signifie que je veux positionner le menu par rapport à ce bouton. Je vais nommer mon ancre « profile-button ». Le nom d’ancre est une chaîne définie par l’utilisateur, qui doit commencer par deux tirets. Je dois maintenant relier mon menu à l’ancre que je viens de nommer. Dans le contexte du positionnement par ancrage, mon menu est appelé cible, et je dois lui fournir certaines infos. Je commence par le relier à mon ancre en définissant la propriété position-anchor sur le nom de mon ancre, soit « profile-button ». Je vais donc écrire « profile-button » ici. Et enfin, je dois dire au menu où il va être positionné. Il y a deux façons de procéder. La 1ère est la propriété position-area. Voyons ce que c’est.

Mon ancre se trouve au milieu d’une grille de neuf carrés. J’ai trois colonnes : à gauche, au centre et à droite. Et j’ai trois rangées : en haut, au centre et en bas. Si je veux placer ma cible en haut à droite de mon ancre, je peux définir position-area sur « top right », ce qui me donne un moyen intuitif de décrire où positionner mon menu par rapport à l’ancre. Et si je veux mon menu sous la photo de profil, elle se trouve en bas au centre de ma grille, donc j’écris : bottom center.

Cela donnera ceci. C’est assez proche, mais ce n’est pas tout à fait ce que je veux. Il est bien en bas, mais comme mon menu est plus large que le bouton profil, il dépasse de ma grille. Ce que je veux, c’est aligner le côté gauche du menu avec le côté gauche de ma photo de profil. Pour cela, nous allons utiliser une valeur différente pour position-area : bottom span-right. Cela place mon menu exactement au début de la colonne centrale, mais avec débordement à droite.

Et voilà, mon menu est parfaitement aligné avec la photo de profil. Ça rend bien à cette taille d’écran, mais que se passe-t-il sur des appareils avec une fenêtre d’affichage plus étroite ? Pour savoir, passons en mode conception adaptative dans Safari. Je l’active en allant dans Réglages, puis dans Avancé, et je coche « Afficher les fonctionnalités pour les développeurs web ». Cela ajoute une option « Développement » où vous retrouverez une ancienne fonction. Elle est demandée par les développeurs : les préréglages de fenêtre d’affichage. Vous pouvez choisir parmi plusieurs tailles de fenêtre d’affichage sélectionnées pour accélérer vos tests et votre développement. J’adore pouvoir faire pivoter le préréglage de la fenêtre d’affichage d’un simple clic, ce qui facilite les tests en mode portrait et paysage. Je veux que mon menu s’adapte à la largeur de la fenêtre sans avoir besoin de JavaScript. Actuellement, mon menu est à gauche. Quand la fenêtre rétrécit, je veux que le menu se déplace et s’aligne à droite de mon bouton de profil. Le positionnement par ancrage a été conçu pour gérer ce genre de situation simplement. Il utilise une propriété appelée « position try », qui fait exactement ce qu’elle dit. Elle teste d’autres positions si la première manque d’espace. Comme je veux que mon menu passe de la droite à la gauche, je peux définir position-try sur « bottom span-left ». Mais position-try accepte aussi un autre type de valeur. Au lieu d’indiquer explicitement où placer mon menu, je peux définir une valeur relative à ma position-area. L’une de ces valeurs est « flip-inline ». Flip inline signifie : quelle que soit la position initiale de l’élément, inverse-la simplement dans le sens inline. On peut aussi inverser dans la direction block avec flip-block. C’est une façon plus intuitive d’exprimer ce que vous voulez obtenir. Voyons cela. Si je repasse en mode responsive, je vois que sur l’iPad 13 pouces, mon menu est aligné à gauche. Mais quand je change l’orientation, position-try entre en jeu et le menu s’aligne à droite, ce qui me donne un menu réactif comme je veux.

Je suis fière que mes collègues de l’équipe WebKit aient proposé position-area et contribué à sa standardisation pour simplifier le positionnement par ancrage. Mais il existe une autre approche du positionnement par ancrage : la fonction anchor(), un outil particulièrement puissant. Avec la fonction anchor(), au lieu de placer votre élément sur une grille, vous alignez ses côtés sur ceux de l’ancre. Pour commencer, je dois d’abord définir la position sur absolute. Puis, je m’occupe du haut de mon menu. Je veux l’aligner avec le bas de mon ancre, donc je vais le définir sur anchor(bottom). Enfin, je m’occupe du côté gauche de mon menu. Je vais définir cette valeur sur anchor(left) pour l’aligner avec le côté gauche de mon ancre.

C’est un exemple assez simple, mais comment faire pour aligner le menu avec la photo, comme ceci ? Je dois tenir compte de ce padding. Je pourrais utiliser position-area avec une margin-left, ou bien utiliser la fonction anchor() combinée à calc(), comme ceci. Ici, je combine la fonction anchor() avec calc() et l’unité em, ce qui va décaler mon menu comme je le souhaite. En général, position-area est une solution simple et intuitive pour gérer le positionnement. Pour des cas plus complexes, comme une animation entre deux positions ou l’utilisation de plusieurs ancres, utilisez plutôt la fonction anchor(). Quel que soit votre choix, l’ancrage facilite un positionnement relatif et réactif avec uniquement CSS. Et pour finir avec les nouveautés CSS, voyons comment créer de superbes effets visuels. Le premier repousse les limites des bordures. Il y a presque 15 ans, Apple a introduit background-clip. text. Cela permet de remplir du texte non pas avec une couleur unie, mais avec un dégradé ou une image de fond. Comme ce dégradé jaune à orange dans mon logo. Mon logo est assez simple. Ce n’est qu’un texte avec une police basique, donc je vais l’utiliser tel quel, sans image. Ainsi, je peux le styliser avec CSS. Mon logo est un élément h1 et comme j’ai stylisé tous mes h1 en blanc, je pars d’un texte blanc. Pour appliquer ce dégradé à mon texte, je définis background-image avec un dégradé subtil du jaune vers l’orange, orienté en bas à droite. J’obtiens ce dégradé derrière mon texte. Puis, il y a ma propriété background-clip, que je définis sur text. Et là, retour au texte blanc. Ce n’est pas ce que je veux. Il me reste encore une chose à faire. Je dois rendre la couleur du h1 transparente pour laisser passer le dégradé et là, il apparaît à travers le texte. On peut appliquer non seulement des dégradés, mais aussi des images au texte. Comme cette image de fond de feuilles d’automne. Background-clip: text a ouvert de nouvelles possibilités visuelles pour le texte et on fait de même pour les bordures. Je vais vous montrer cela. Mes boutons ont une bordure blanche épaisse, mais pour mon bouton principal, je veux faire autrement. Je veux utiliser la nouvelle valeur background-clip pour apporter de la luminosité et appliquer un dégradé. Je commence par appliquer ce dégradé subtil du jaune à l’orange en background-image, ce qui crée un dégradé en arrière-plan de mon bouton. Ensuite, j’ajoute background-clip avec la valeur border-area, et je retrouve un fond noir avec une bordure blanche. Je rencontre le même problème qu’avec le texte : la couleur de la bordure a changé, mais elle est masquée par la bordure blanche du style de mon bouton. Je dois rendre la couleur de ma bordure transparente pour laisser passer le dégradé. Je l’ajoute et voyons ce que ça donne… Intéressant. J’ai mon dégradé, mais j’ai un nouveau problème. Il semble que le dégradé se répète. Il couvre toute la largeur de mon bouton, mais s’arrête à l’intérieur des bordures, puis reprend au niveau des bords. Pour corriger ça, je dois étendre le fond jusqu’aux bords extérieurs de la bordure. Je peux le faire en définissant background-origin sur border-box. Ça a l’air génial.

Vous pouvez aussi utiliser une forme abrégée qui ne nécessite pas de déclarer l’image de fond. Et voilà, un joli dégradé grâce à ma nouvelle valeur background-clip: border-area. La bordure offre de nombreuses possibilités. Entre le choix d’images et de dégradés dynamiques, vous pouvez créer des éléments comme ce cercle de progression, ce panneau d’alerte, ou cette magnifique photo à double bordure. Voilà background-clip: border-area, une nouvelle option pour embellir vos contenus et faire ressortir vos sites et applications web. Pour des démos de ces exemples et des détails sur les clips d’arrière-plan, consultez notre article de blog sur webkit.org. Nos améliorations visuelles ne se limitent pas aux bordures : elles couvrent aussi les formes polyvalentes réalisables en CSS. Je suis ravie de vous parler de la fonction shape(), désormais prise en charge dans Safari 18.4. Les formes sont utilisées de différentes manières dans nos apps et nos sites web, et je les utilise pour mon site web A School of Code. Dans ma section témoignages, j’aime utiliser ces flèches courbées en arrière-plan de tous mes avis. Ce sont des formes CSS en clip-path qui décorent ma page. Avant la fonction shape(), j’utilisais path pour y parvenir. La fonction path est un outil puissant et polyvalent pour utiliser toutes sortes de points et de courbes et dessiner une grande variété de formes. Que devient ma forme lorsque la largeur de la fenêtre change ? Pour illustrer, je vais isoler les trois flèches et vous montrer comment elles répondent. En redimensionnant, vous remarquez que la pointe et la courbe de mes flèches sont coupées. Elles ne s’ajustent pas à la taille de ma fenêtre. Je veux quelque chose de plus réactif. Mais voilà, je ne veux pas que chaque ligne et chaque courbe de ma forme changent avec ma fenêtre. Je veux juste que certaines parties changent. Je veux que la courbe garde sa forme, que la pointe conserve son angle, mais que la longueur et la hauteur s’adaptent à la taille de la fenêtre. Avec la fonction shape(), je constate que lorsque la fenêtre de ma démo rétrécit, la largeur de mes formes diminue aussi, c’est ce que je veux. Mais vous voyez que l’angle de la pointe et la forme de la courbe restent constants, sans se déformer quand la largeur diminue. Ce que j’adore avec la fonction shape(), c’est qu’elle offre un contrôle précis, vous permettant de choisir ce qui reste fixe et ce qui s’adapte aux changements. Je vais vous montrer à quoi ressemble ce code. Notez que dans mon code j’utilise différentes unités, comme la hauteur des requêtes de conteneur et des pourcentages. C’est parce que shape() accepte toutes les unités CSS. J’utilise même la fonction calc. Pouvoir créer des valeurs réactives et utiliser une large gamme d’unités me permet de contrôler précisément différentes parties de ma forme, pour obtenir la réactivité exacte que je souhaite. Grâce à la fonction shape(), nous pouvons créer des formes flexibles et plus réactives. Ce ne sont pas que les formes qui deviennent plus faciles à gérer. Le texte bénéficie aussi de belles avancées, avec de nouvelles fonctionnalités typographiques comme text-wrap. pretty, disponible sur Safari 19.

Si vous regardez ce bloc de texte, il est correct, mais certaines choses le rendent un peu difficile à lire et moins agréable à regarder. D’abord, ces lignes courtes qui ne contiennent qu’un seul mot en fin de paragraphe. C’est visuellement gênant et ça donne l’impression que l’espace entre les paragraphes est plus grand.

Ensuite, c’est la césure des mots. La césure n’est pas un problème en soi, mais il faut l’utiliser avec modération. Nous ne voulons pas de trois phrases avec un trait d’union d’affilée. La 3è chose, c’est le « rag », la forme générale que dessinent les lignes du paragraphe. Un bon « rag » contient des lignes d’une longueur à peu près égale. Un mauvais « rag », comme celui-ci, est irrégulier et attire l’attention.

Les effets de text-wrap: pretty sont subtils, mais bien pensés.

Ici, il a supprimé les lignes d’un mot, les césures et le mauvais « rag ».

Voici comment ça fonctionne. Sans text-wrap: pretty, le navigateur cherche à maximiser chaque ligne, en utilisant tout l’espace disponible. Mais avec text-wrap: pretty, vous indiquez au navigateur de viser une zone différente, près de cette ligne verte, notre cible, la longueur idéale des lignes. Mais nous avons une marge de manœuvre, illustrée par la zone entre mes lignes violette et rouge. Tout ce qui s’y trouve est acceptable. Le navigateur ajuste les mots pour éviter une dernière ligne trop courte et limite les césures en reportant les mots à la ligne suivante. Le code est simple. Appliquez text-wrap: pretty à n’importe quel élément : paragraphes, titres, etc., surtout si vous avez des dernières lignes trop courtes, trop de césures ou un mauvais rag, et observez l’effet sur votre texte. L’avantage de text-wrap: pretty, c’est qu’il s’agit aussi d’une amélioration. Ajoutez-le à votre texte, si le navigateur le supporte, il rendra votre texte plus agréable à lire. Et si le navigateur de l’utilisateur ne le supporte pas, ou ne modifie que les dernières lignes, l’expérience reste tout de même satisfaisante. Pas de souci.

Nous avons parcouru pas mal de fonctionnalités CSS, surtout liées au style. Passons aux médias. Le premier média que je vais vous présenter est petit, mais puissant. Grâce à vos retours, nous sommes fiers de présenter les icônes SVG qui arriveront dans Safari cet automne. Les icônes SVG ne se limitent pas aux favicons. On les retrouve dans les bookmarklets, sur la page d’accueil de Safari, quand l’utilisateur les ajoute au Dock, etc. L’usage du SVG comme favicon dans les navigateurs modernes permet à Safari de créer des icônes optimisées selon le contexte. La taille du fichier est plus petite que celle des png utilisés pour les favicons. Il y a un autre type de média statique que je suis ravie d’annoncer. Les images HDR débarquent aujourd’hui dans WebKit et Safari. Le HDR, ou haute plage dynamique, rend vos médias plus riches et plus éclatants que les images et vidéos SDR classiques que l’on voit sur le Web. Le support des vidéos HDR existe depuis cinq ans, depuis Safari 14.0, et maintenant nous ajoutons des images. Pour illustrer la différence entre HDR et SDR, je vais vous montrer une simulation des deux. Mon image de gauche est une image SDR qui peut se présenter dans différents formats de fichier. Je ne peux pas vous montrer le rendu HDR via cette vidéo, alors j’ai créé cette image à droite qui simule certaines différences. Vous noterez les teintes plus profondes, la gamme plus large et les couleurs plus vives du HDR simulé. Voir ces différences sur une véritable image HDR est stupéfiant. Ces différences s’expliquent par plusieurs raisons techniques, comme la quantité de données de chaque image. Le SDR est de 8 bits tandis que le HDR est de 10 à 16. Ces bits offrent au HDR plus de données pour afficher l’image. Le SDR se limite à l’espace colorimétrique sRGB et le HDR utilise des espaces plus larges et plus riches comme le P3. Les formats de fichiers sont également différents. Le SDR est disponible dans plusieurs formats, dont le JPEG, tandis que le HDR l’est aussi, mais ajoute des formats comme le HEIC et l’AVIF. Mais afficher du HDR dans la réalité demande réflexion et préparation. La généralisation du HDR sur le Web prendra encore du temps. Il faut donc réfléchir à la manière d’afficher côte à côte les images HDR et SDR, et à leur rendu visuel. Grâce à leur plage dynamique, les images HDR semblent souvent bien plus lumineuses que les images SDR. Vous voyez comme cet oiseau bleu ressort ? Dans une galerie ou parmi des résultats de recherche, cela peut distraire l’utilisateur et nuire à son expérience. En tant que développeur, nous voulons vous offrir plus de contrôle pour gérer cette différence. Pour cela, il existe une propriété CSS, appelée : dynamic-range-limit. La valeur par défaut de dynamic-range-limit est no-limit. Cela permet aux images et vidéos HDR de garder leur rendu d’origine, même si elles sont beaucoup plus lumineuses que les autres. Ou vous pouvez utiliser CSS dynamic-range-limit: standard pour dire au navigateur de rendre les images et vidéos HDR comme si elles étaient en SDR. Une troisième option : dynamic-range-limit: constrained. Il permet au navigateur d’exploiter le HDR pour un rendu optimal, sans trop le faire ressortir. Cela permet de visionner ensemble, de façon harmonieuse, du contenu SDR et HDR. La valeur « constrained » n’est pas encore prise en charge dans la 1ère version bêta de Safari 19, mais ça arrive. Si vous utilisez une image HDR et que le navigateur ne la supporte pas, ce n’est pas grave. Le navigateur adapte le contenu HDR au format SDR, sans qu’une solution alternative soit nécessaire. Vous pouvez utiliser la meilleure image disponible et le navigateur s’occupe du reste. Vous pouvez désormais intégrer des photos et des vidéos plus dynamiques à vos sites et applications et offrir à vos utilisateurs des visuels plus riches et plus attrayants. D’autres types de médias, comme l’audio et la vidéo, donnent vie à vos sites et applications web, et nous avons fait des progrès pour prendre en charge encore plus de formats. Ces dernières années, nous avons comblé des lacunes pour mieux prendre en charge une large gamme de codecs et de conteneurs. Nous avons été les premiers à prendre en charge JPEG XL et HEIC sur le Web, et avec Safari 19, nous ajoutons Ogg Opus et Ogg Vorbis à la liste. Avec la prise en charge de 15 formats, nous vous offrons encore plus de choix pour enrichir vos sites et applications web. Nous avons aussi veillé à ce que plus de combinaisons complexes de codecs et conteneurs fonctionnent parfaitement avec les API du Web. Avec Safari 18.4, le support de WebM dans l’API MediaRecorder est enfin disponible. Cette API permet d’ajouter l’enregistrement en temps réel de podcasts et de vidéos à vos applications web. Ces apps peuvent créer des fichiers WebM à l’aide du codec audio Opus et VP8 et VP9 pour la vidéo dans Safari et WKWebView. Nous avons aussi renforcé le support des médias dans le Web spatial. Nous prenons désormais en charge le rendu stéréoscopique des modèles 3D intégrés à votre contenu web, avec interaction possible pour les utilisateurs. Vous pouvez aussi intégrer des vidéos immersives dans votre page web, que Safari comprend et affiche correctement sans outils supplémentaires. Pour en savoir plus, regardez notre séance sur le Web spatial. Nous parlerons d’intégration de modèles 3D, de présentation de médias spatiaux, et d’une nouvelle fonctionnalité pour ajouter un environnement 3D à votre site. Voici les points forts de notre travail sur le support des médias l’année dernière. Dans cette séance, nous avons vu le CSS et les médias. Mais d’autres séances approfondissent les fonctionnalités que nous avons déployées. Nous proposons une session sur WebGPU qui présente ses concepts, donne un aperçu du langage de shading Wig Sil, et explique comment optimiser les performances des appareils. Nous proposons également une séance sur le Web Push déclaratif, qui explique comment l’utiliser sans service worker, en offrant plus d’efficacité et de transparence, tout en assurant la compatibilité avec le Web Push classique. Et il y a tellement plus. Plusieurs nouveautés ont été déployées dans des versions de Safari depuis l’automne dernier. Notamment, des fonctionnalités très attendues : du CSS pour perfectionner la typographie et supporter toutes les langues, ainsi que des outils renforçant la confidentialité des utilisateurs. Consultez les notes de version sur webkit.org. Vous pouvez aussi suivre les dernières technologies web grâce aux articles sur les nouveautés de Safari. Vous pouvez signaler des bugs ou demander des fonctionnalités sur bugs.webkit.org, le système de suivi de WebKit.

Pour tout problème lié à l’interface de Safari ou aux systèmes iOS, iPadOS et macOS, signalez-le sur feedbackassistant.apple.com. Assurez-vous de disposer des dernières informations sur la compatibilité avec Safari. Caniuse.com est excellent pour cela. Téléchargez Safari Technology Preview pour ne rien manquer. Il est mis à jour toutes les deux semaines, avec les dernières nouveautés de WebKit. Nous avons travaillé dur pour vous proposer de nombreuses fonctionnalités afin de créer des expériences web exceptionnelles. Nous espérons que ces nouveautés rendront le développement plus simple et plus motivant. Lorsque vous utilisez ces fonctionnalités, faites-nous part de vos retours. Bon codage !