Les nouvelles technologies rendent le développement Web plus passionnant que jamais. HTML5 et CSS3 fournissent une double dose de pratiques modernes absolument rafraîchissantes et stimulantes. Malheureusement, l’utilisation de ces technologies peut considérablement compliquer votre recherche de compatibilité entre navigateurs.
Comment pouvez-vous savoir quelles techniques sont sûres d’utiliser maintenant et lesquelles vous devriez proposer des solutions de rechange ou les éviter complètement? Rejoignez-nous pour découvrir quelques-unes de nos ressources préférées qui vous aideront rapidement et facilement à prendre des décisions éclairées concernant la mise en œuvre de HTML5 et CSS3 dans le monde réel.
Simplement irrésistible
La compatibilité entre navigateurs était déjà assez difficile il y a quelques années avant de nous lancer dans de nouvelles technologies sophistiquées telles que HTML5 et CSS3. Maintenant, avec ces outils qui se faufilent à la pointe de nos méthodes de développement, cela peut être un véritable gâchis.
Les avantages d'utiliser HTML5 et CSS3 sont clairs et indéniables. Ils sont tellement remplis de friandises et d’amusement que près d’un développeur sur dix ne peut au moins résister à la tentation de s’essayer. Pour alimenter le battage publicitaire, des auteurs comme moi proposent constamment de nouveaux tutoriels impressionnants qui vous apprennent les tenants et les aboutissants de ces technologies, alimentant ainsi votre désir de les mettre en pratique dès que possible.
Sommes-nous précipités?
Alors que la plupart d’entre nous se précipitent pour utiliser les tendances les plus récentes et les plus performantes en matière de développement Web, quelques âmes plus rationnelles nous supplient de ralentir. Les nouveaux jouets vont bien, mais une grande partie de ce matériel est encore en construction et le reste n’a pas été bien implémenté sur tous les principaux navigateurs.
Alors qui a raison? Comment, en tant que développeur du monde réel, pouvez-vous savoir s'il faut adhérer au battage médiatique et courir avec le nouveau ou faire confiance aux sceptiques et s'en tenir aux méthodes éprouvées des dernières années?
Arrêtez le devin
La meilleure chose à faire pour décider si vous pouvez personnellement commencer à mettre en œuvre de nouvelles technologies Web est de vous informer sur le support que vous pouvez attendre pour chaque nouvel élément des différents navigateurs qui comptent le plus pour votre public.
Cela ressemble à beaucoup de travail, n'est-ce pas? Il existe d'innombrables articles de blog, livres et sites Web consacrés à vous enseigner ce genre de choses, de quoi prendre toute une vie et plus encore. La quantité de matériel est tellement accablante que vous pourriez éviter d’apprendre simplement par intimidation.
Heureusement, il existe des moyens très simples et directs de s’assurer que ce que vous faites fonctionnera bien dans différents navigateurs. Vous n'aurez pas besoin de trier des articles de blogs longs ou de lire une pile de livres chaque fois que vous souhaitez créer une ombre portée, vous aurez simplement besoin de jeter un coup d'œil à quelques ressources sélectionnées pour vous aider à démarrer.
Tableaux de compatibilité de navigateur: le meilleur ami du développeur
La première chose que je vous recommande de faire dans votre quête pour déterminer les nouvelles technologies que vous pouvez implémenter aujourd’hui est de placer en signet un ou deux diagrammes solides de compatibilité de navigateur.
Ces ressources sont inestimables et peuvent vous faire économiser des heures de recherche sans fin. Ils constituent une référence rapide qui vous aide immédiatement à identifier les navigateurs qui supportent ou non les techniques que vous tentez de mettre en œuvre. Certains des meilleurs choix aident même les anciens navigateurs à bien jouer.
Quand puis-je utiliser?
Caniuse.com n’est certes pas la plus jolie option disponible pour les tableaux de compatibilité de navigateur, mais c’est l’une des plus utiles et des plus complètes.
L’organisation ici est très simple et facile à utiliser: il suffit de cliquer sur un élément de l’une des cinq catégories (CSS, HTML5, SVG, API JS et autres) et vous serez dirigé vers un graphique vous montrant la prise en charge de divers navigateurs. En outre, la recherche fournit résultats instantanés alors que vous tapez, les réponses à toutes les questions de votre navigateur ne sont jamais plus que quelques frappes.
Par exemple, supposons que vous lisiez mon article récent sur: before et: after et souhaitez vérifier deux fois mes déclarations relatives à la compatibilité du navigateur pour le pseudo-élément: after (vérifiez toujours vos faits!), Il vous suffit de taper? après? dans la barre de recherche et le graphique ci-dessous apparaîtra.
Il y a une tonne d'informations utiles que vous pouvez utiliser. Le graphique nous informe que les navigateurs actuels (même IE) sont largement pris en charge, mais que deux versions ont déjà rencontré des problèmes avec IE7 et les versions antérieures.
Outre le tableau de compatibilité, vous trouverez deux autres éléments utiles: une fonction de comparaison de navigateur et une liste de ressources utiles.
Le dernier de ceux-ci inclut souvent de très bons liens. Par exemple, si vous recherchez de nouvelles fonctionnalités CSS3 telles que des dégradés, vous pouvez obtenir un lien vers un générateur qui fera le travail à votre place. Dans le cas ci-dessus, nous avons reçu un lien vers un guide détaillé expliquant l'utilisation du contenu généré par CSS à l'aide de pseudo-éléments.
Le tableau de compatibilité de navigateur vous permet de choisir deux navigateurs et de voir un aperçu de la prise en charge des éléments dans l’une des cinq catégories mentionnées précédemment.
FindMeByIP
Si vous souhaitez renoncer à toutes les fonctionnalités du site précédent au profit de certains anciens tableaux de compatibilité de navigateur étendus que vous pouvez marquer et référencer en un clin d'œil, consultez la page d'assistance HTML5 et CSS3 de FindMeByIP.
Comme vous pouvez le constater, les graphiques ici sont très attrayants et très faciles à lire. Ils sont parfaits lorsque vous avez juste besoin de vérifier rapidement quelque chose ou d’obtenir une vue d’ensemble de la prise en charge du navigateur.
Devriez-vous l'utiliser?
Les tableaux de compatibilité de navigateur sont parfaits pour vous permettre de savoir si un navigateur donné prend en charge ce que vous essayez d'implémenter, mais ils vous permettent uniquement de prendre des décisions. Vous devez toujours interpréter les informations et décider s'il est prudent ou non de poursuivre.
Si vous êtes un nouveau développeur, cela peut être intimidant. Pour vous aider davantage, assurez-vous de consulter HTML5 s'il vous plaît. Ce projet issu de la communauté vous indique clairement s'il faut ou non utiliser une technique donnée et fait des recommandations sur la manière de procéder. Vous ne devriez jamais suivre quelque chose à l'aveuglette, mais lorsque vous êtes sur la clôture, cela peut certainement vous aider à faire l'appel.
Comme avec Quand puis-je utiliser, la barre de recherche fournit ici des résultats instantanés à mesure que vous tapez. Supposons que vous souhaitiez savoir si les transitions CSS peuvent ou non être mises en œuvre en toute sécurité. Entrez simplement? Transitions? et les résultats filtreront comme suit:
Nous obtenons immédiatement une recommandation d'utilisation, indiquée dans le coin supérieur droit du résultat:
? Utiliser avec repli? est le conseil qui nous est donné pour les transitions CSS. Ceci est associé à des informations brèves et directes qui nous indiquent que les transitions sont sûres si elles ne sont pas nécessaires à une expérience utilisable et que toute transition critique sur le plan des interactions doit être sauvegardée avec une alternative pour les autres navigateurs. Les préfixes de navigateur nécessaires à la mise en œuvre sont également fournis. Pour de nombreux éléments, les polyfills recommandés sont fournis pour vous aider à rendre votre implémentation aussi compatible que possible entre navigateurs.
Modernizr a ton dos
La dernière ressource que vous devez connaître dans votre quête de CSS3 et HTML5 compatibles avec tous les navigateurs Web est Modernizr. Vous en avez sans doute entendu parler auparavant, mais il est temps de le télécharger et de le vérifier.
La raison pour laquelle Modernizr est si performant est qu’il peut détecter automatiquement si un navigateur prend en charge une fonctionnalité donnée, puis émettre un peu de magie JavaScript en réponse. Cela vous permet de prendre en compte un nombre impressionnant de circonstances et de fournir très facilement des replis et des remplissages JavaScript pour les navigateurs plus anciens.
Modernizr testera la prise en charge de plus de 40 fonctionnalités de nouvelle génération, fournira des informations instantanées pour vous indiquer les activités qui seront ou ne seront pas prises en charge et vous fournira les meilleures solutions pour vous aider à répondre aux éventuelles lacunes de l'assistance.
Conclusion
Les ressources ci-dessus ont toutes pour objectif de vous aider à prendre une décision éclairée quant à la mise en œuvre d’une technique donnée HTML5 ou CSS3.
Les tableaux de compatibilité de navigateur fournissent une référence rapide sur la manière dont vous pouvez vous attendre à ce que chaque navigateur réponde à une technique donnée. HTML5 Please vous donnera des recommandations fermes et honnêtes quant à la poursuite de votre travail. conception spécifique.
Ces ressources ne vous permettent pas de plonger dans une compréhension plus profonde de la manière de mettre en œuvre correctement ces fonctionnalités, mais elles constituent un guide de départ impressionnant pour savoir quand et comment procéder.
Laissez un commentaire ci-dessous et parlez-nous de vos ressources préférées dans ce domaine. Utilisez-vous l'un des sites énumérés ci-dessus? Quels autres outils sont précieux pour votre flux de travail?