Share
Deux des améliorations les plus célèbres de Safari sur iOS 5 sont la prise en charge du positionnement fixe et du défilement de contenu. Ce didacticiel vous apprendra à tirer parti de ce changement et à comprendre les implications pour les bibliothèques JavaScript stop-gap telles que iScroll..
Dans un précédent tutoriel, j'avais parlé d'iScroll et de la façon dont ce formidable petit plugin avait permis de résoudre un problème lié à iOS Webkit (5.0 et versions ultérieures) et à Android Webkit (2.1 ou versions antérieures), dans lequel il n'existait aucun support natif pour le positionnement fixe ou les zones de contenu défilables..
Ainsi, après un week-end de tests divers, il est agréable de confirmer que la mise à jour iOS 5 Safari résout maintenant ces deux problèmes et que nous bénéficions désormais d'une prise en charge native complète. La version bêta de iOS 5 est en préparation depuis un certain temps, mais vous ne pouvez jamais garantir que ces éléments parviendront à la version finale..
Dans ce tutoriel, je discuterai de ce changement en profondeur et vous apprendrai également à convertir le projet iScroll de notre précédent tutoriel en utilisant les nouvelles propriétés CSS..
Pour être explicite, nous avons maintenant la possibilité de créer des applications Web avec des en-têtes et des pieds de page fixes en utilisant position: fixe ainsi que le contenu défilable entre en utilisant -webkit-débordement-défilement. Cela nous permet de construire des applications avec une sensation plus native sans avoir recours à un plugin tiers, tel que iScroll. Comme vous le verrez cependant, il existe encore de bonnes raisons de dépendre de bibliothèques tierces telles que iScroll..
Bien que ce changement soit une excellente nouvelle pour les développeurs Web, quelques mises en garde méritent d'être discutées.
Premièrement, le plus évident est que cette fonctionnalité n’est actuellement prise en charge que par Safari 5.1. Alors que le nouveau 4S a enregistré un nombre record de pré-commandes et que de nombreux utilisateurs précédents ont déjà effectué la mise à niveau vers iOS 5, il restera probablement un nombre important d'utilisateurs d'appareils iOS sous 5.0 ou moins..
Ensuite, il n'y a actuellement aucun moyen de supprimer la barre de défilement qui apparaît sur le côté de la zone de contenu. Vous pouvez essayer de faire quelque chose avec le webkit-barre de défilement Méthode CSS pour changer les couleurs, etc., mais je ne vois pas cela comme un problème énorme. La barre de défilement est un élément d'interface utilisateur agréable qui permet à l'utilisateur de savoir où ils se trouvent dans le document. Pourquoi se donner la peine de l'enlever??
Un autre problème: il n’ya aucun moyen de définir la zone de navigation du navigateur, car elle ne comportera que des anneaux situés tout en haut et en bas de la zone d’écran, y compris la barre d’adresse. J'avais commencé à travailler sur un peu de JavaScript pour décaler manuellement la valeur scrollTop à chaque extrémité de 1, mais j'ai trouvé que Joe Lambert l'avait déjà fait avec scrollFix.js.
Enfin, l’élan de défilement n’a actuellement aucun contrôle de la vitesse. Ce serait plutôt un plaisir d'avoir.
C’est suffisant avec les problèmes, voyons comment nous pouvons commencer à utiliser le nouveau CSS pris en charge.!
Voyons comment convertir notre projet précédent en utilisant les nouvelles règles CSS. Nous utiliserons notre page précédemment construite avec iScroll pour la démonstration.
La première chose à faire est de supprimer l'inclusion JavaScript et l'appel iScroll du bas du document afin d'obtenir un fichier HTML et CSS simple, comme celui présenté ci-dessous:
Modèle d'application Web Modèle d'application Web
- Des trucs
- Plus de matériel
- Gros truc
- Petites choses
- Trucs de geek
- Nerd Stuff
- Truc rapide
- Slow Stuff
- Bon produit
- Mauvaises choses
- Vos trucs
- Mes affaires
- Leur substance
- Nos affaires
- Super Stuff
- Uber Stuff
- Stuff Stuff
- Trucs français
- Trucs allemands
- Anglais Stuff
- American Stuff
- Des trucs
Nous n'avons pas du tout besoin de changer notre code HTML. Nous avons juste besoin d'ajuster certains de nos CSS et d'ajouter une nouvelle classe.
-webkit-overflow-scrolling: auto;
Il s’agit de la nouvelle classe introduite autour de la version bêta 2 d’iOS 5 et c’est celle qui nous donne le plaisir de faire défiler les choses. Par défaut, il est défini sur auto, ce qui confère au défilement une apparence rigide. Pour donner à votre zone de défilement une apparence plus native, définissez cette propriété sur touch.
-webkit-overflow-scrolling: touchez;
Maintenant, appliquez ce style au contenu de défilement div et nous allons supprimer certains styles de l'emballage, principalement le positionnement et le débordement. En fait, nous n'avons vraiment pas besoin de l'emballage div du tout, afin que vous puissiez l'enlever si vous le souhaitez, mais j'aime avoir un div autour de rien pour envelopper quoi que ce soit si besoin est. Les deux règles CSS devraient ressembler à ceci:
#wrapper z-index: 1; largeur: 100%; fond: #aaa; # scroll-content position: absolute; en haut: 0; z-index: 1; largeur: 100%; rembourrage: 0; -webkit-overflow-scrolling: appuyez sur débordement: auto;
Auparavant, l’en-tête et le pied de page étaient définis sur Absolue (la résolution n’était pas prise en charge). Nous pouvons maintenant aller de l'avant et les placer dans le CSS en utilisant la règle fixe pour les empêcher de défiler à l'écran.
en-tête background-color: # deb500; position: fixe; z-index: 2; en haut: 0; gauche: 0; largeur: 100%; hauteur: 45px; rembourrage: 0; footer background-color: # c27b00; position: fixe; z-index: 2; en bas: 0; gauche: 0; largeur: 100%; hauteur: 48px; rembourrage: 0; bord supérieur: 1px solide # 444;
Si vous ne connaissez pas la différence entre un positionnement fixe et un positionnement absolu, la version courte indique que le positionnement absolu est une position définie par rapport à l'élément parent. Le positionnement fixe est une position fixe dans la fenêtre..
Vous allez maintenant avoir une zone de défilement avec un en-tête et un pied de page fixes, sans l'utilisation de Javascript!
Ce sera bien quand les autres navigateurs vont rattraper leur retard (le téléphone Window Phone que je vous regarde!) Et que la majorité des utilisateurs utilisent un système d'exploitation Android supérieur à la version 2.1, mais que les navigateurs à base de Webkit devraient bientôt être améliorés. Avec la vitesse qui augmente à chaque itération, les applications conçues avec des technologies Web risquent de dépasser rapidement les applications natives. Tout ce dont nous avons besoin maintenant, ce sont davantage d'API natives!
iScroll a encore une place pour le moment. Il existe de nombreux paramètres que nous pouvons transmettre à la méthode de défilement pour donner quelques options supplémentaires au fonctionnement de notre défilement et de leur apparence qui ne peuvent actuellement pas être obtenues sans écrire du code JavaScript personnalisé? alors pourquoi ne pas utiliser ce qui est déjà disponible?
Il y a aussi la question du support du navigateur. Peut-être avez-vous vraiment besoin des barres d'outils fixes pour votre projet dans les anciennes implémentations du navigateur Webkit. Eh bien, pas de problème. Si c'est la meilleure chose à faire pour le projet, il n'y a aucune honte à utiliser l'une des bibliothèques JavaScript existantes pour le réaliser. Cependant, je suggérerais d'utiliser l'implémentation native autant que possible.
Au-delà de la simple fonctionnalité de défilement, la bibliothèque iScroll offre également d’excellentes fonctionnalités supplémentaires telles que "Tirer pour actualiser", "Pincer / Zoomer" et "SNAP / Aligner sur un élément". Nous pouvons les couvrir dans un prochain tutoriel iScroll, car ils sont toujours utiles et pertinents..
Accentsconagua