mon titre de page

Alsacreations.com - Actualités

Corriger le problème de hauteur 100% (100vh) sur mobile ()
Vieux de plusieurs années mais toujours non réglé à ce jour, un "bug" concernant la hauteur 100% de la fenêtre sur Safari continue de perturber nos intégrations web sur mobile. Concrètement, le phénomène concerne les hauteurs exprimées en valeur 100vh (100% de la hauteur de Viewport) mais qui débordent de la hauteur visible dès lors qu'une barre d'adresse (URL) est présente par exemple. Ce comportement avait déjà été signalé en 2015 par Nicolas Hoizey. Illustration du "bug" de hauteur 100vh sous Safari iOS Toutefois, il faut savoir que ledit comportement n'est pas un bug mais une fonctionnalité intentionnelle au départ… ce qui ne nous arrange pas. Correction via CSS Il est possible de contourner le souci sur les navigateurs mobiles avec la valeur -webkit-fill-available, comme l'illustre le code ci-dessous : html { height: -webkit-fill-available; } body { padding: 0; margin: 0; min-height: 100vh; } /* Avoid Chrome to see Safari hack */ @supports (-webkit-touch-callout: none) { body { /* The hack for Safari */ min-height: -webkit-fill-available; } } Voir une démo Pour info, -webkit-fill-available est une version temporaire, non finalisée, de la future valeur fill. Notez également que ce correctif CSS peut être automatisé grâce à PostCSS. Correction via JavaScript Si la solution "simple" en CSS ne suffit pas, il sera alors nécessaire de calculer la hauteur dynamiquement en JavaScript avec window.innerHeight : :root { --vh: 100vh; } body { padding: 0; margin: 0; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); } const appHeight = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } window.addEventListener('resize', appHeight) appHeight() Voir une démo Le futur : Large, Small, et Dynamic Viewports Afin de pouvoir maîtriser ces notions de tailles de fenêtres fluctuantes, les spécifications CSS sont actuellement en train de plancher sur de nouvelles unités de Viewport : Large, Small, et Dynamic Viewports. Plus d'informations sur le site de Bram.us. Les nouvelles unités de Viewport (vh, svh et dvh). Source : Bram.us Publié par Alsacreations.com
>> Lire la suite

Safari 15 dévoilé lors de la WWDC Apple ()
Lors de sa traditionnelle conférence WWDC 2021 (WorldWide Developers Conference), Apple a présenté hier beaucoup de nouveautés, et quelques évolutions pour le navigateur Safari 15 qui sera livré avec iOS/iPadOS 15 et macOS 12. Apple commence par se féliciter de la performance et de l'économie d'énergie de Safari sur macOS, ce qui est relativement cohérent et attendu car faisant partie du même écosystème. Cependant, un bon nombre de développeurs web signalent le retard actuel de Safari par rapport à ses confrères (Firefox, Chromium) quant à l'implémentation des nouveautés en général. Interface Safari revoit globalement la disposition des menus, de la navigation, des onglets, pour laisser plus de place au contenu. La barre d'adresse et de recherche est désormais sur la même ligne que les onglets. Les différents boutons d'action (mode lecture, partage, signets...) ont été regroupés dans un classique et discret bouton "..." (more). Des groupes d'onglets permettront de sauver et organiser des contextes de navigation ou de les partager facilement par e-mail. Ils seront synchronisés sur les autres périphériques Apple (iMac, iPhone, iPad). La couleur de fond de la fenêtre sera déterminée d'après la couleur majeure d'un site, et se basera sur la balise meta theme-color désormais bien connue de tous, avec support CSS du dark mode via une media query prefers-color-scheme. <meta name="theme-color" content="#abc737" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#008cba" media="(prefers-color-scheme: dark)"> En mobile sur iOS Sur mobile, les changements vont donner du fil à retordre aux designers. La barre d'adresse et les onglets se retrouvent désormais au bas de l'écran, et pourraient malheureusement recouvrir du contenu, comme des boutons d'action. Des réactions sont déjà visibles et il faudra surveiller le comportement réel de ce mode d'affichage, probablement pour trouver de nouvelles astuces. On iOS 15, bottom fixed elements will have problems if CSS safe area environment variables (env function) are not used; look at the Starbucks "Start an order" button with a) URL bar hidden b) URL bar visible (current code) c) URL bar visible visible with env margin pic.twitter.com/8xwbe6oVVm — Maximiliano Firtman (@firt) June 7, 2021 Pensons notamment aux bannières cookies qui sont fréquemment situées dans cette zone de l'écran. Can’t wait for a whole bunch of websites becoming inaccessible because I can’t press the accept cookies button. — Jesper the End (@Jespertheend) June 7, 2021 Le support PWA (Progressive Web Apps) est toujours partiellement présent, plus restreint que d'autres plateformes par la volonté d'Apple de limiter l'accès à certaines API et fonctionnalités (pour des questions de sécurité ou respect de la vie privée, mais aussi certainement pour protéger son écosystème d'appstore/applications natives), par exemple en ne signalant pas à l'utilisateur que l'application peut être ajoutée à l'écran d'accueil. D'autres lectures à ce sujet : The Crucial limitations of PWA in IOS (anglais, avril 2020) Apple declined to implement 16 Web APIs in Safari due to privacy concerns (anglais, juin 2020) PWA on iOS. What’s New? (anglais, mai 2021) On peut supposer toutefois que cela fera lentement et sûrement son chemin, après les premières étapes cruciales déjà accomplies. I can confirm PWAs are still there on iOS 15, same install experience as before, and they use the theme color for the status bar! Finally! ???? Also, PWAs work with the new iPadOS 15 multitasking system pic.twitter.com/FgkeOD4PFQ — Maximiliano Firtman (@firt) June 7, 2021 Une grosse nouveautés sera le support des extensions navigateurs WebExtensions sur iOS et iPadOS, tandis que le WebExtensions Community Group a été récemment formé et que Chrome sur Android ne les exploite pas encore. Quelques autres fonctionnalités à noter, parmi bien d'autres : Support d'aspect-ratio en CSS WebGL 2 Support des modules ES6 dans les Workers + ServiceWorkers Changement d'apparence graphique pour les contrôles de formulaires (input, etc) Codec audio Opus dans les conteneurs WebM Meilleur support de WebAssembly Nouvelles fonctionnalités pour les paiements en ligne Inspecteur de CSS Grids avec overlay dans les devtools Pour tout savoir des évolutions du moteur WebKit vous pouvez suivre le Blog WebKit qui publie régulièrement des Release Notes pour Safari Technology Preview Publié par Alsacreations.com
>> Lire la suite