Apple a publié une mise à jour du système d’exploitation. Inclut la dernière version de Safari, 16.
Prévu pour être lancé avant macOS 13 le mois prochain, Safari 16 regorge de mises à jour, ce qui en fait l’un des navigateurs les plus performants disponibles.
Pour les concepteurs de sites Web, l’importance est l’avancement des technologies Web qui permettent un travail de conception plus libre et moins d’astuces pour réaliser des conceptions complexes. Lentement, les recommandations CSS sont mises en œuvre au point où l’utilisation de JavaScript pour la mise en page devient rapidement à la fois inutile et rebutante.
Une partie de cela a été annoncée en juin dans la version bêta de Safari 16. Mais beaucoup a été ajouté ces derniers mois. Voici les nouveautés de Safari 16 aujourd’hui.
Requêtes de conteneur CSS
L’ajout le plus excitant à Safari 16 est CSS Container Queries.
Il est difficile de sous-estimer à quel point cette fonctionnalité a été demandée ; Si vous imaginez un bouton d’édition sur Twitter qui vous donne une crypto-monnaie chaque fois que vous corrigez une faute de frappe, vous vous rapprocherez de la popularité de cette fonctionnalité.
Jusqu’à présent, les requêtes multimédias ont détecté l’intégralité de la fenêtre d’affichage. Ainsi, si vous avez un élément comme une carte, par exemple, qui doit être modifié dans des fenêtres plus petites, vous devez calculer l’espace disponible et adapter la disposition des éléments en conséquence. Malheureusement, cela n’est souvent pas synchronisé avec les cas extrêmes, ce qui cause plus de maux de tête aux développeurs frontaux.
Les requêtes multimédias sont extrêmement restrictives pour les méthodes de mise en page modernes telles que Grid qui enveloppent automatiquement les éléments car il n’y a aucun moyen de détecter la façon dont les éléments sont disposés.
Les requêtes de conteneur résolvent ce problème en vous permettant de définir des styles en fonction de la taille de l’élément de conteneur réel ; si un div fait 300 pixels de large, le contenu peut avoir une mise en page, et s’il fait 400 pixels de large, il peut avoir une mise en page différente, quelle que soit la taille de la fenêtre d’affichage entière.
Cela se rapproche dangereusement des principes de la POO (Programmation Orientée Objet) et élève presque CSS à un véritable langage de programmation. (Tout ce dont nous avons besoin est une logique conditionnelle, et nous y sommes.)
Les dernières versions de Chrome, Edge et maintenant Safari (y compris mobile) prennent en charge CSS Grid. Même sans tenir compte du déclin rapide de Twitter, c’est bien plus excitant que n’importe quel bouton d’édition.
Sous-grille CSS
En parlant de Grid, si vous avez construit un site avec (et sinon, où étiez-vous ?), vous savez que la combinaison d’éléments dans des structures HTML complexes aboutit souvent à des grilles imbriquées. Faire correspondre ces grilles nécessite une gestion minutieuse, des variables CSS ou les deux. Avec CSS Subgrid, les grilles peuvent hériter des définitions de grille d’une grille définie plus haut dans la hiérarchie.
Firefox prend en charge CSS Subgrid depuis un certain temps, mais il ne fait pas encore partie de Chrome ou Edge. Jusqu’à ce qu’il y ait un support plus large, ce n’est pas une solution pratique, et l’utilisation d’une alternative annule tous les avantages de l’utilisation de Subgrid. Cependant, son introduction dans Safari annoncera sûrement une adoption rapide par Google et Microsoft et emmènera le Web très loin.
CSS Subgrid sera probablement une solution pratique dans 18 mois.
Prise en charge AVIF
AVIF est un format d’image exceptionnellement compact qui surpasse même WebP dans de nombreux cas. Il permet même des séquences, créant ce qui est essentiellement un GIF animé mais plus petit, et des bitmaps.
AVIF est déjà pris en charge dans Chrome, avec une prise en charge partielle dans Firefox. Safari les rejoint désormais.
La prise en charge d’AVIF est l’un des ajouts les plus précieux à Safari 16, car vous affichez probablement déjà différentes images dans un élément d’image. Si tel est le cas, vos utilisateurs de Safari 16 commenceront à recevoir automatiquement une charge utile plus petite, ce qui accélérera votre site et stimulera l’UX et le référencement.
Animations améliorées
Safari 16 introduit quelques améliorations significatives en matière d’animation, mais celle qui se démarque est que vous pouvez désormais animer CSS Grid.
Oui, laissez cela régler. Combinez les requêtes de conteneur et d’animation. Les possibilités d’états flottants dans les éléments sont alléchantes.
Safari 16 prend également en charge CSS Offset Path, initialement connu sous le nom de CSS Motion Path, qui vous permet d’animer des éléments le long de n’importe quel chemin défini. Cela permet d’obtenir le type d’effet animé qui nécessitait auparavant JavaScript (ou Flash !).
Chrome, Edge et Firefox prennent tous en charge le chemin de décalage CSS ; l’ajout de Safari signifie qu’il s’agit désormais d’une solution pratique qui peut être mise en œuvre dans la nature.
Extensions de l’inspecteur Web
Annoncées dans le cadre de la version bêta, les extensions Web Inspector permettent aux développeurs Web de créer des extensions pour Safari, comme ils le feraient pour Chrome.
Les extensions Web Inspector, ou extensions Safari comme elles sont censées être connues, peuvent être construites sur HTML, CSS et JS, de sorte que la courbe d’apprentissage est peu profonde. C’est une bonne voie vers le développement d’applications pour les concepteurs de sites Web.
Étant donné que la technologie sous-jacente est la même que celle des autres extensions de navigateur, toute personne ayant créé une extension Chrome, Edge ou Firefox pourra la porter sur Safari 16+ relativement facilement. En conséquence, il devrait y avoir une expansion rapide des extensions disponibles.
Accessibilité améliorée
L’accessibilité est la clé d’un site Web efficace et inclusif. Soyez comme Bosch : tout le monde compte, ou personne ne compte.
Pour tester l’accessibilité d’un design, les émulateurs ne suffisent pas. D’après mon expérience, Safari possède certains des paramètres d’accessibilité les plus fiables, en particulier en ce qui concerne les requêtes multimédias telles que les préférences de mouvement réduites.
De nouvelles avancées dans ce domaine signifient que Safari continue d’être un outil essentiel pour les tests d’assurance qualité.
Réinitialisations réduites
Enfin, je veux lever la main pour célébrer le nombre réduit de paramètres d’apparence CSS non standard.
Pendant des années, nous avons présenté nos feuilles de style avec des réinitialisations élaborées comme Normaliser, conçues pour annuler toutes les hypothèses que les développeurs de navigateurs font sur la conception et les préférences de l’interface utilisateur de leurs ingénieurs.
Safari 16 aurait « supprimé la plupart des valeurs d’apparence CSS non standard ». Il reste à voir à quel point cela est efficace et à quel point nous pouvons lui faire confiance compte tenu des autres navigateurs du marché. Cependant, comme de nombreux changements de Safari 16, c’est un pas vers un navigateur qui est du côté des développeurs plutôt qu’un obstacle à surmonter.
