Nouveautés de Safari et WebKit

Les équipes Safari et WebKit ont travaillé d’arrache-pied depuis la dernière WWDC afin d’améliorer les technologies web pour une meilleure interopérabilité et une expérience utilisateur optimisée. De nouvelles fonctionnalités en matière d’animation, de mise en page, d’effets visuels et de médias, notamment des animations basées sur le défilement, le positionnement d’ancres, la prise en charge des icônes SVG et des formats multimédias améliorés, seront disponibles dans Safari cet automne.

L’animation est un outil puissant pour améliorer l’expérience en ligne. Elle rend les sites web plus attrayants et plus agréables. Grâce aux dernières fonctionnalités CSS, notamment les animations basées sur le défilement désormais disponibles dans Safari 19, vous pouvez améliorer votre site web sans avoir recours à JavaScript. Cette fonctionnalité est importante, car elle améliore les performances pour l’utilisateur et l’autonomie de la batterie. Les animations basées sur le défilement introduisent deux nouvelles chronologies : la chronologie de défilement et la chronologie d’affichage. La chronologie de défilement permet de lier les animations au comportement de défilement de l’utilisateur. Elle crée ainsi une expérience plus interactive. Par exemple, une barre de progression située en bas de la page peut s’allonger à mesure que l’utilisateur fait défiler la page, lui indiquant ainsi visuellement sa progression. Vous devez tenir compte de l’accessibilité lors de l’utilisation d’animations. Certaines personnes peuvent préférer moins de mouvements en raison d’une gêne liée au mouvement, qui peut être déclenchée par divers facteurs, tels que la mise à l’échelle d’objets volumineux, le zoom ou les objets se déplaçant à différentes vitesses. Tenez compte de ces facteurs pour créer des animations inclusives et agréables pour tous.

Cet automne, Safari introduira un nouveau module CSS appelé « positionnement d’ancrage », qui révolutionnera la manière dont les développeurs web créent des infobulles et positionnent les menus. Le positionnement par ancrage vous permet d’ancrer facilement un élément à un autre, par exemple un menu à une photo de profil. Cette fonctionnalité permet de positionner précisément le menu par rapport à l’ancrage. Safari a également réintroduit les préréglages de fenêtre dans le mode Responsive Design, ce qui vous permet de tester plus facilement vos sites web sur différents appareils et tailles d’écran.

Il existe plusieurs nouvelles fonctionnalités CSS permettant d’améliorer les effets visuels sur les sites web et les apps. Une fonctionnalité remarquable est l’extension de la propriété « background-clip ». Initialement utilisée pour remplir du texte avec des dégradés ou des images, cette propriété peut désormais être appliquée aux bordures. Toutefois, quelques ajustements supplémentaires, tels que la transparence de la couleur de la bordure et l’extension de l’origine de l’arrière-plan, sont nécessaires pour obtenir l’effet souhaité. Cette technique peut être utilisée pour rendre divers éléments, tels que les boutons et les cercles de progression, plus attrayants visuellement. Une autre nouveauté intéressante est la prise en charge de la fonction « shape() », qui permet aux concepteurs de créer plus facilement des formes réactives. Elle permet de gérer avec précision quelles parties d’une forme doivent s’adapter à l’écran et lesquelles doivent rester fixes, ce qui garantit une esthétique cohérente quel que soit l’appareil utilisé. C’est notamment très pratique pour les éléments décoratifs, comme les flèches ou les fonds. CSS enrichit désormais la typographie avec notamment la propriété « text-wrap: pretty », une nouveauté Safari 19. Cette fonction améliore le confort de lecture en évitant les lignes trop courtes, en limitant les césures et en harmonisant la longueur des lignes. En ajustant intelligemment les espaces entre les mots et les retours à la ligne, elle offre une mise en page plus élégante et équilibrée. Bien que subtile, cette amélioration impacte positivement l’expérience de lecture, tout en restant compatible avec les navigateurs plus anciens qui ne la supportent pas encore.

Safari s’apprête à déployer cet automne une série d’améliorations majeures concernant la gestion des médias. L’une des nouveautés phares sera l’intégration des icônes SVG, qui va considérablement enrichir l’expérience utilisateur sur différents aspects du navigateur, notamment les favicons, les bookmarklets et la page d’accueil. Les icônes au format SVG présentent l’avantage d’être plus flexibles et plus légères que les traditionnels fichiers PNG. De plus, Safari prend désormais en charge les images HDR (High Dynamic Range) dans WebKit et Safari. Les images HDR rendent le contenu web plus vivant et plus attrayant visuellement en affichant des teintes plus profondes, des gammes plus larges et des couleurs plus vives. Safari étend également sa prise en charge de divers formats multimédias, notamment Ogg Opus et Ogg Vorbis pour l’audio, et a réalisé des progrès pour garantir le bon fonctionnement de combinaisons complexes de codecs et de conteneurs sur différentes API. Ces mises à niveau vous permettent d’intégrer des fonctionnalités de podcast et d’enregistrement vidéo en temps réel dans vos apps web. De plus, Safari améliore sa prise en charge du web spatial. Vous pouvez désormais afficher des modèles 3D en stéréoscopie et inclure des vidéos immersives dans vos pages web. Ces améliorations visent à rendre le web plus interactif et plus attrayant pour tous.