Safari 27 et iOS 27 : ce qui change pour votre site web

Une partie de vos visiteurs arrive sur votre site avec Safari, et vous pouvez voir leur part dans votre propre outil d'analyse. Chaque version de Safari détermine donc si une nouvelle fonction CSS ou HTML marchera pour de vrais visiteurs. L'article bêta du blog WebKit a donné pour Safari 27 une longue liste : select personnalisable, positionnement d'ancrage tenant compte des transformations, ancrage du défilement, pseudo-classe :heading, revert-rule, mot-clé stretch, et d'autres.

Malgré sa longueur, vous n'avez pas besoin de tout connaître. La plupart des fonctions facilitent la vie de la personne qui écrit le code du site ; le visiteur ne les voit pas directement et remarque seulement que les pages se cassent moins. En tant que propriétaire, demandez-vous quelle partie de votre site a besoin de l'une d'elles. La réponse, le plus souvent : les formulaires et les zones d'images.

Le blog WebKit indique qu'avec appearance: base-select, les listes déroulantes peuvent être entièrement stylisées. Une liste où l'on choisit une ville, un service ou un horaire de rendez-vous peut donc être dessinée aux couleurs et avec la typographie de votre marque. Le blog précise aussi que le comportement au clavier et avec un lecteur d'écran est conservé, ce qui est une voie plus sereine pour l'accessibilité que de remplacer la liste par un composant écrit de zéro.

Ce n'est pas une obligation. Si votre liste actuelle fonctionne, n'y touchez pas. La nouvelle fonction a surtout du sens pour les listes à l'apparence personnalisée, jusqu'ici imitées par du code. Nos sources ne disent pas si les autres navigateurs prennent en charge cette fonction de la même façon ; faites donc concevoir le design de sorte qu'il retombe sur une liste simple là où la fonction manque.

Côté images, le point le plus notable est la valeur auto pour l'attribut sizes de l'élément img. Le blog WebKit la décrit comme le calcul de la taille de l'image par le navigateur lui-même pour les images chargées en différé, ce qui allège la charge d'écrire à la main une valeur sizes pour chaque image. L'ancrage du défilement, lui aussi issu du blog, évite que l'endroit où vous lisez ne se décale quand du contenu se charge plus tard au-dessus.

La liste ci-dessous rassemble les éléments utiles pour tester votre site ou interroger votre développeur. Vous pouvez mesurer avant et après l'effet des changements d'images sur la vitesse avec l'outil de vitesse de site de rabbitclip.

• Liste déroulante personnalisable : des champs de formulaire à l'image de la marque
• La valeur auto pour sizes sur img : le navigateur calcule la taille des images chargées en différé
• Ancrage du défilement : la page ne saute pas quand du contenu se charge au-dessus
• L'élément model : du contenu 3D sur iOS, iPadOS et macOS
• Ajouts côté développeur comme l'API de routage statique des Service Workers, ReadableStream.from() et maxAge dans la Cookie Store API

Citant le blog WebKit, 9to5Mac rapporte que Safari 27 inclut un serveur MCP local. Lorsque l'automatisation à distance est activée dans les réglages développeur, des agents de code peuvent utiliser la fenêtre du navigateur. MCP est un protocole de communication qui permet aux agents d'IA de se connecter à des outils ; ici, l'outil est Safari lui-même.

Pour un propriétaire de site, cela signifie directement ceci : un agent peut aussi parcourir votre site, et si un développeur a activé cela pour tester sur sa propre machine, il le fait avec un vrai navigateur. Votre développeur pourrait s'en servir pour essayer vos formulaires automatiquement ; c'est une possibilité, pas une conclusion tirée par les sources. La même source mentionne aussi un outil de packaging pour les extensions web de Safari qui n'exige ni Mac ni Xcode.

La première erreur est de mettre une nouvelle fonction sur le site en ligne dès qu'on lit la nouvelle. Qu'une fonction marche dans Safari 27 ne veut pas dire qu'elle marche pour chaque visiteur ; certains appareils restent sur des versions plus anciennes. La deuxième est de remplacer une liste déroulante qui fonctionne simplement parce qu'il en existe une nouvelle, et de casser le formulaire mobile.

La troisième est de tester seulement sur ordinateur. L'affichage sur iPhone, le comportement au clavier et avec un lecteur d'écran, ainsi que les zones tactiles doivent être essayés séparément.

• Mettre une nouvelle fonction en ligne sans la tester
• Remplacer un composant qui marche seulement parce qu'il est nouveau
• Ne tester que dans un navigateur de bureau
• Ne pas penser à ce qui se passe là où la fonction n'est pas prise en charge

Si votre site n'a ni champ de formulaire stylisé sur mesure, ni contenu 3D, ni mise en page compliquée, il n'y a rien à faire à cause de Safari 27. Pour un petit site vitrine, la bonne démarche est d'ouvrir le site une fois sur un iPhone et de vérifier à l'œil le formulaire et les images.

Essayer l'élément model pour du contenu 3D n'est pas non plus pour tout le monde. Si une vue 3D de votre produit n'aide pas les ventes, la fonction n'apporte qu'une charge de maintenance. Regardez d'abord ce que le visiteur veut faire, puis choisissez la fonction.