Le discours d'hier à la WWDC d'Apple a présenté deux nouveaux systèmes d'exploitation. Le nouveau MacOS s'appelle El Capitan après une formation de roche à Yosemite (qui a été prise par la plupart des commentateurs pour indiquer qu'Apple considère son prochain OS comme une version mineure plutôt que majeure). MacOS El Capitan et iOS 9 sont désormais disponibles pour les développeurs Apple, seront disponibles en version bêta publique le mois prochain et seront mis en ligne à l'automne.

Caché parmi les annonces décevantes concernant le déploiement du système de paiement Apple dans deux pays (le Canada et le Royaume-Uni) et le service de musique en continu d’Apple, il y avait un certain nombre d’indices sur la façon dont Apple voyait le Web et le rôle de Safari dans les prochaines années. ...

1) Scroll snapping

L'une des plus grandes annonces pour les concepteurs Web est l'implémentation de la fonction d'alignement de défilement CSS. La capture de défilement - qui est actuellement obtenue avec JavaScript - permet d'ajuster l'accélération d'un défilement de sorte que le défilement s'aligne sur une position prédéfinie. Si vous avez déjà fait défiler un seul site de page qui a glissé vers la section suivante, par opposition à un nombre arbitraire de pixels, vous avez fait l'expérience du défilement.

Apple s'attend à ce que la tendance pour les sites d'une seule page continue

C'est une indication qu'Apple s'attend à ce que la tendance pour les sites à page unique, avec des sections remplissant toute la fenêtre, se poursuive sans relâche.

Safari 9 introduit les propriétés de capture de défilement CSS suivantes: -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, et -webkit-scroll-snap-coord.

Comme le snap Scroll est largement considéré comme une amélioration progressive, il pourrait bientôt être pratique de passer de JavaScript à CSS.

2) Sites épinglés

Safari 9 introduit des sites épinglés. Les sites épinglés permettent de garder vos sites Web favoris ouverts dans le navigateur pour un accès rapide, sans pour autant laisser un onglet ouvert. Pour utiliser des sites épinglés dans Safari 9, faites simplement glisser un onglet ouvert vers la gauche et une petite icône sera créée dans la barre de favoris pour vous permettre d'accéder rapidement à la page.

Les utilisateurs s'attendent sans aucun doute à utiliser cette fonctionnalité, de sorte que tous les sites doivent être préparés. Pour être prêt, il vous suffit de créer une icône: mettez-la en noir, avec un arrière-plan transparent, et enregistrez-la en tant que fichier SVG. Vous pouvez ensuite créer un lien vers l'icône située dans la tête de votre document HTML, comme ceci:

Si vous souhaitez colorier l’icône pour qu’elle corresponde à votre marque, ajoutez cette balise META immédiatement après:

3) Améliorations de la vidéo HTML5

Safari 9 introduit quelques améliorations pour la vidéo HTML5.

Airplay permet des contrôles personnalisés pour les médias HTML5. En utilisant JavaScript, vous pourrez détecter la disponibilité Airplay et, dans la mesure du possible (dans Safari 9), fournir des contrôles personnalisés. Idéal pour quiconque en a assez des contrôles par défaut qui brisent la cohérence de la marque.

PiP (Picture in Picture) est un style de vidéo largement utilisé à la télévision. PiP consiste à lire une vidéo dans le coin de l'écran tandis que d'autres contenus sont visionnés ailleurs. La navigation dans le guide des chaînes sur une boîte Tivo pendant que la chaîne en cours joue dans le coin en est un bon exemple.

Safari 9, qui présente PiP, est une innovation incroyable pour quiconque aime regarder des événements en direct (comme la keynote Apple WWDC) tout en travaillant. Cependant, comme la plupart des technologies, PiP est ouvert aux abus. Vous êtes susceptible de voir apparaître les premières publicités PiP dans le coin de votre navigateur au cours des 6 prochains mois. Heureusement, Safari 9 inclut également la possibilité de couper tout l'audio sur tous les onglets d'un simple clic.

4) Force touch events

Les nouveaux MacBooks d'Apple intègrent des trackpads tactiles; les trackpads qui détectent non seulement les robinets, mais la force avec laquelle vous appuyez. Safari 9 introduit plusieurs nouveaux événements JavaScript - classiquement considérés comme des événements de souris - pour gérer cette fonctionnalité: webkitmouseforcewillbegin, webkitmouseforcedown, webkitmouseforceup et webkitmouseforcechanged.

Les événements tactiles de force ne sont susceptibles d'être utiles pour la navigation supplémentaire qu'à ce stade, car la technologie n'est pas uniquement un logiciel, mais également du matériel, limité. Cependant, s'ils sont utilisés comme une amélioration progressive, ils ouvrent des possibilités intéressantes, en particulier dans le domaine des jeux et de la conception expérimentale de l'interface utilisateur.

5) SFSafariViewController

À première vue, SFSafariViewController semble intéresser davantage les concepteurs d'applications que les concepteurs Web. Il permettra aux applications d’afficher du contenu Web dans une application à l’aide du rendu de Safari.

Conçu pour rationaliser des scénarios tels que l'ouverture d'une application native, puis la création d'un compte sur la page Web d'une société, avant de revenir à une application pour se connecter au compte, la fonction SFSafariViewController permet clé de voûte des systèmes en ligne d'une entreprise. C'est un petit logiciel qui fait un grand pas en avant vers une intégration plus poussée du natif et du Web.

6) ECMAScript 6

JavaScript est un pas de plus vers le langage OOP qu'il devrait vraiment être

Les développeurs JavaScript seront ravis d'apprendre que Safari 9 prend entièrement en charge les classes, les propriétés calculées, les ensembles faibles, les objets numériques, les littéraux octaux et binaires, les objets symboles et les littéraux de modèle. Ce support signifie que JavaScript est un pas de plus vers le langage OOP qu'il devrait être maintenant.

7) Filtres CSS

La propriété CSS backdrop-filter a été ajoutée à Safari 9. Les filtres flou, luminosité, contraste, ombre, niveaux de gris, teinte, inverti, opacité, saturation et sépia sont tous disponibles.

8) Mises à jour du mode développeur

Le mode de conception réactive a été introduit dans Safari 9 afin de permettre une commutation rapide des dispositions dans différentes fenêtres. Tous les appareils Apple sont inclus en tant que préréglages, mais il s'agit plutôt d'un outil de présentation utile pour les réunions de clients qu'un outil de développement, car les meilleures pratiques favorisent le contenu, par opposition à la fenêtre d'affichage. Il est important de noter que le mode de conception réactif modifie uniquement la fenêtre d'affichage, il ne simule pas différents périphériques. Il peut être utile comme test rapide chaque fois que de nouveaux périphériques Apple sont lancés, avant que les simulateurs de périphériques ne rattrapent leur retard.

L'inspecteur Web a été repensé. Avec certains réglages de l'interface utilisateur pour améliorer l'UX, l'accent est davantage mis sur le rendu et les performances des images.

9) CSS non préfixé

Certaines mises à jour sont les bienvenues. L'un des plus appréciés, mais moins susceptibles d'être remarqués, est la suppression des préfixes de navigateur pour plus de 45 propriétés CSS. Même si, à court terme, les navigateurs existants sont toujours utilisés, les navigateurs abandonnent les préfixes plus tôt, plus vite nous leur ferons au revoir.

Les propriétés Flex , les propriétés de transition , les propriétés de transformation et les propriétés d' animation sont les plus importantes.