Comment s’adapter aux nouveautés de Safari sur iOS 15
Apple a récemment présenté iOS 15 et au menu, on a le droit à une refonte de l’interface de Safari qui va chambouler nos habitudes.
La plus grande nouveauté réside dans la barre de navigation qui devient maintenant unique, en bas de l’écran, dynamique et surtout flottante ! Au scroll elle change d’apparence afin de devenir fixe.
Que l’on aime ou que l’on aime pas, on se rend vite compte qu’en tant que développeur, il va falloir rapidement adapter l’interface de nos site web. En effet, la barre dynamique qui contient maintenant tous les contrôles du navigateur peut se trouver flottante au dessus de la page, ce qui pourrait cacher une partie des actions indispensables comme la navigation, le bouton d’ajout au panier, le bandeau de cookie ou encore l’installation d’application !
Les variables d’environnements
On aurait pu prévoir ce problème avant. En effet, la fonction CSS env() permet d’accéder à des variables d’environnement définies au niveau du user agent. Elle avait déjà été poussée par Apple il y a quelque temps afin de ne rien afficher dans la zone où il y a les encoches des téléphones à écran sans bord.
Quatre valeurs sont disponibles pour le moment.
body {
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px);
}Ici, le body aura une marge interne correspondant à ce qui est considérée par le navigateur de l’utilisateur comme la zone sûre, ou de 20px si la variable n’est pas disponible.
Avec l’arrivée de “Material You”, le nouveau design system d’Android 12, les couleurs des apps pourront s’adapter au thème choisi par l’utilisateur. On peut imaginer une variable qui permettra de récupérer cette couleur et de la manipuler afin d’adapter l’apparence de nos sites.
Dans la pratique
Une démo et un repo Github sont à votre disposition.
Dans le cas d’une barre de navigation, il suffit d’ajouter un padding-bottom qui prend en compte la bonne variable d’environnement :
nav {
padding-bottom: env(safe-area-inset-bottom, 0px);
}En appliquant un padding sur la barre de navigation et en prenant en compte la safe area, on peut interagir avec. Pour le moment, la valeur parait très (trop ?) importante, cela sera peut être corrigé lors des prochaines beta d’iOS 15.
Cette propriété permet également d’éviter d’avoir des éléments trop proche de la barre de navigation d’iOS et également d’éviter d’être en-dessous de l’encoche qui se trouve en paysage sur les côtés de l’écran :
.wrapper {
width: calc(100% — 30px — env(safe-area-inset-right));
}
Aller plus loin
Pour aller plus loin, on peut également évoquer la balise meta theme-color.
<meta name=”theme-color” content=”#231651">Comme son nom l’indique, cette balise permet d’indiquer le thème de couleur du site, on retrouve cette couleur dans la barre d’onglet ou sur certains autres navigateurs déjà compatibles.
On peut également parler de la fonction max() qui permet de demander à choisir entre la plus grande valeur d’une liste dans le cas où on a déjà une valeur à passer. Par exemple, par défaut on veut 20px de marge interne inférieure sur notre body :
body { padding-bottom : 20px; }Avec la fonction max() et l’utilisation de la bonne variable d’environnement :
body { padding-bottom : max(20px, env(safe-area-inset-bottom)); }Si on a pas de safe-area-inset-bottom sur notre device, on aura tout de même une valeur de 20px passé au padding-bottom. Si le navigateur renseigne cette valeur et qu’elle est supérieur à 20px, elle sera prise en compte à la place.
Démo & liens utiles
Cet article sera potentiellement mis à jour si les betas d’iOS 15 changent encore ce comportement.
- Démo : https://safari-ios15.netlify.app
- Repo Github : https://github.com/johnmeunier/safari-ios15
- Doc CSS Env : https://developer.mozilla.org/fr/docs/Web/CSS/env()
- Balise meta theme color : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
- Fonction max : https://developer.mozilla.org/en-US/docs/Web/CSS/max()
