Apple vient de publier la troisième version bêta d'iSO 11.2 à l'attention des développeurs. En plus des corrections de bugs, cette mouture apporte une nouvelle API pour WebKit, le moteur de rendu HTML officiel d'Apple.

Apple explique que l'écran Super Retina de l'iPhone X affiche automatiquement les pages web en évitant les coins arrondis de l'écran. Toutefois pour des sites conçus pour la navigation horizontale en pleine largeur, les développeurs peuvent tirer parti de cette nouvelle API WebKit.

Essentiellement cette API consiste en des variables d'environnement prédéfinies (safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, et safe-area-inset-bottom) et une nouvelle fonction CSS : env().

En ce qui concerne les anciens modèles d'iPhones, la nouvelle API n'est pas disponible, on utilise donc un fallback CSS dans ce cas.

Voici un exemple de directive CSS, qui définit un padding au moyen de cette nouvelle API :