10 méthodes de secours utiles pour CSS et Javascript
Les remises de code sont la solution idéale pour faire des compromis avec vos nombreux visiteurs uniques. Tous les utilisateurs du Web n'utilisent pas le même système d'exploitation, le même navigateur Web ou même le même matériel physique. Tous ces facteurs influent sur le rendu réel de votre page Web à l'écran. Lorsque vous travaillez avec de nouvelles astuces CSS ou JavaScript, vous rencontrez souvent de tels bogues techniques..
Mais ne laissez pas ces pièges vous décourager! Dans ce guide, j'ai rassemblé certaines des techniques de secours les plus courantes pour les concepteurs Web se concentrant sur CSS et JavaScript / jQuery. Lorsque tout le reste échoue, vous voulez fournir aux utilisateurs au moins une fonctionnalité de page de base. La simplicité règne en maître dans le domaine de la conception d'expérience utilisateur.
Consultez notre guide ci-dessous et laissez-nous savoir vos pensées et vos questions dans la section commentaires.
1. Coins arrondis avec des images
Les techniques CSS3 ont explosé dans la conception Web traditionnelle. Une des propriétés les plus remarquables est rayon de la frontière qui permet des coins arrondis à la volée. Celles-ci sont belles sur pratiquement tous les boutons, divs et zones de texte. Le seul problème est le support limité entre les navigateurs Web.
De nombreux navigateurs plus anciens, notamment Internet Explorer 7, ne prennent pas en charge cette propriété. Donc, pour que les angles arrondis fonctionnent avec tous les navigateurs standard, vous devez créer un repli avec des images..
Le code standard utilise des propriétés CSS3 normales sur la div principale tout en tenant compte des images sur chacun des coins. Vous aurez probablement besoin de configurer des div supplémentaires dans le conteneur principal, qui sont utilisés pour afficher des images de coin en arrière-plan..
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px; #mainbox .topc background: url ('corner-tl.png') no-repeat en haut à gauche; #mainbox .topc span background: url ('corner-tr.png') no-repeat en haut à droite; #mainbox .btmc background: url ('corner-bl.png') non répétée en bas à gauche; #mainbox .btmc span background: url ('corner-br.png') no-repeat en bas à droite; Pour vous sauver du stress, je vous suggère fortement d'utiliser une application comme RoundedCornr. Il s'agit d'une application Web intégrée au navigateur qui génère des CSS arrondis à l'aide de CSS3 et d'images. Cela sera particulièrement utile aux concepteurs qui n’ont pas accès à des logiciels graphiques tels que Photoshop ou GIMP..
2. Système de menus déroulants jQuery
Les systèmes de menu déroulant sont parfaits pour le Web d'aujourd'hui. Toutefois, le problème le plus important concerne les visiteurs accédant à votre site Web sans activer JavaScript. Dans ce cas, aucun de vos menus ne fonctionnerait du tout! La meilleure solution consiste à utiliser CSS pour afficher / masquer chacun des blocs div du sous-menu et les afficher en survol..
Le seul problème de cette solution est qu’Internet Explorer 6 ne prend pas en charge ces sélecteurs de survol CSS. Cependant, IE7 + fonctionne très bien. et bien sûr, tous les navigateurs fonctionneront correctement si JavaScript est activé en premier lieu. Le code de ce tutoriel sur CSS Plus est l’une des meilleures ressources que j’ai trouvées. Il fournit non seulement une solution avec jQuery mais également le CSS nécessaire aux problèmes d’IE.
/ * Une classe de courant sera ajoutée via jQuery * / #nav li.current> a background: # f7f7f7; / * CSS repli * / #nav li: survol> ul.child display: block; #nav li: survol> ul.grandchild display: block;
La source
Une autre solution que vous pouvez essayer consiste à afficher ouvertement chacun des menus dans IE6. Vous pouvez utiliser les commentaires conditionnels d'Internet Explorer pour appliquer des feuilles de style en fonction de la version du navigateur. Bien sûr, ce ne sera pas la solution la plus jolie, mais cela fonctionnera tout simplement..
Si vous pensez qu'Internet Explorer 6 ne vous inquiète pas vraiment, ne vous inquiétez pas de cette solution de rechange. Le tutoriel et le code ci-dessus devraient suffire pour que votre menu JavaScript se charge même avec du code CSS strict dans tous les principaux navigateurs..
3. Styles Internet Explorer ciblés
Je suis sûr que nous sommes tous au courant des problèmes de rendu causés par Internet Explorer de Microsoft. Je peux donner un peu de crédit pour leur dernier IE8 et leurs perspectives futures avec IE9. Cependant, il existe encore un petit public sous IE6 / IE7 et vous ne pouvez vraiment pas les ignorer pour l'instant..
(Source de l'image: github)
Les commentaires conditionnels mentionnés dans la dernière section peuvent être utiles pour reformater des zones de la page. Par exemple, si vous avez un menu déroulant avec une sous-navigation dans IE6 qui s'affichera uniquement à l'aide de JavaScript, vous aurez de la chance d'essayer CSS comme méthode de secours. Au lieu de cela, la meilleure solution consiste à afficher chaque sous-liste en tant que bloc de navigation..
En ajoutant le code ci-dessus à l'en-tête de votre document, vous pouvez ensuite spécifier le type d'affichage pour chaque sous-navigation. La meilleure partie de cette solution de secours est que vous pouvez écraser le CSS et toujours afficher / masquer de manière dynamique les menus lorsque JavaScript est activé. Sinon, vous n'aurez plus qu'à afficher une liste ouverte de liens. Vous pouvez utiliser un code similaire à ce que j'ai ajouté ci-dessous.
#nav li position: relative; largeur: 150px; / * doit définir une largeur finie pour IE * / #nav li ul / * codes de sous-navigation * / display: block; position: absolue; largeur: auto; / * Définissez votre propre largeur ou définissez-le dans l'élément li * / #nav li ul li width: 100%;
4. Opacité et transparence des IE existants
Un des nombreux bogues ennuyeux avec Internet Explorer est le problème de l'opacité. Les paramètres de transparence alpha de CSS3 peuvent être modifiés via la propriété opacity. Pourtant, à la manière de Microsoft, seul Internet Explorer 9 prend actuellement en charge cette fonctionnalité..
La meilleure solution pour cibler IE6 + consiste à filtre, un paramètre propriétaire reconnu uniquement par IE. Découvrez le bref exemple de code ci-dessous:
.mydiv opacité: 0,55; / * CSS3 * / filter: alpha (opacité = 55); / * IE6 + * /
Tout ce que vous avez à faire est d’inclure la ligne ci-dessus dans tout élément nécessitant de la transparence. Notez que, comme dans la propriété CSS3, tous les éléments enfants hériteront également de cette modification d'opacité. Si vous recherchez une nouvelle méthode qui cible spécifiquement IE8, consultez le code ci-dessous. Il se comporte de la même manière que notre propriété de filtre n'est reconnue que par l'analyseur Microsoft IE8..
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * /
5. Création de boutons CSS3 avec des images de secours
Les boutons sont un élément Web fantastique pour toutes sortes d’interfaces. Ils peuvent se comporter comme des entrées de formulaire, des éléments de navigation ou même des liens de page directs. Avec CSS3, il est maintenant possible de formater des boutons avec de nombreux styles uniques tels que les dégradés de fond, les ombres de boîte, les coins arrondis, etc..
Cependant, vous ne pouvez pas croire que tous vos visiteurs seront en mesure de rendre ces nouvelles propriétés. Lors de la création d'une conception de secours pour des boutons (ou même des éléments d'interface utilisateur similaires), il existe deux options distinctes. La première consiste à inclure une image d’arrière-plan conçue exactement comme le CSS. Cela peut être facilement accompli dans Photoshop. Cependant, si vous n'êtes pas un expert du logiciel, cela peut être gênant..
L'alternative consiste à utiliser une couleur de fond unie et des styles CSS plus simples. J'utilise certains des exemples de code de l'excellent post de CSS-Tricks sur les dégradés CSS3. Tous les principaux navigateurs, y compris Safari, Firefox, Chrome et même Opera, prennent en charge ces propriétés. Le domaine dans lequel vous rencontrerez des problèmes est celui de la prise en charge des navigateurs existants: anciens moteurs de Mozilla, IE6 / 7, voire Mobile Safari..
.gradient-bg background-color: # 1a82f7; / * utilise une couleur unie au pire * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 2F2727) à (# 1a82f7)); background-image: -webkit-linear-gradient (haut, n ° 2F2727, n ° 1a82f7); image d'arrière-plan: -moz-linear-gradient (haut, n ° 2F2727, n ° 1a82f7); image d'arrière-plan: -ms-linear-gradient (haut, n ° 2F2727, n ° 1a82f7); image d'arrière-plan: -o-linear-gradient (en haut, n ° 2F2727, n ° 1a82f7); La source
Le seul petit problème lié à l'utilisation exclusive d'images comme méthode de secours est que vous ne subirez aucun changement d'état actif lorsque l'utilisateur clique sur un bouton. Vous pouvez créer deux images différentes pour ces états normaux et actifs, bien que cela demande un travail supplémentaire. Cette seule raison peut vous inciter à utiliser une couleur d'arrière-plan unie au lieu d'images de secours. Essayez différentes solutions pour déterminer celle qui convient le mieux à votre mise en page..
6. Vérification du contenu mobile
Une autre tendance majeure en 2012 est la popularité de la navigation Internet mobile. Les smartphones sont partout et les données en 3G / Wi-Fi sont de plus en plus accessibles. Ainsi, de nombreux concepteurs chercheront à fournir une mise en page de secours aux utilisateurs mobiles..
Deux navigateurs Web mobiles populaires afficheront des pages similaires à un environnement de bureau. Mobile Safari et Opera sont mieux connus pour cela, prenant même en charge de nombreux scripts jQuery courants. Mais ces pages ne sont pas toujours compatibles avec les appareils mobiles et il y a de la place pour développer UX.
Vous pouvez détecter les navigateurs mobiles de deux manières et afficher une mise en page ou une feuille de style différente. La première est via JavaScript qui fonctionne très bien comme outil frontal. Le script que j'ai ajouté ci-dessous est très simple et ne vérifie que les utilisateurs d'iPhone / iPod Touch. Detect Mobile Browsers est un site Web fantastique proposant un script plus détaillé que vous pouvez exécuter à la place..
// Redirection de la fonction iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.votredomaine.com"; Maintenant, l’autre alternative est de vérifier à travers un langage de base tel que PHP. Vous pouvez rechercher une variable connue sous le nom de HTTP_USER_AGENT. Des dizaines de sites Web apparaîtront si vous google ces termes. Cependant, je recommande toujours le lien Détecter les navigateurs mobiles que j’ai ajouté au paragraphe précédent..
Le site propose des scripts téléchargeables gratuitement pour analyser non seulement PHP, mais également des tonnes d'autres langages de backend populaires. Ceux-ci incluent ASP.NET, ColdFusion, Rails, Perl, Python et même du code serveur tel que IIS et Apache.
7. Slicebox Slider avec gracieux repli
Mon billet de faveur CSS3 préféré de 2011 doit probablement être le Slicebox 3D Image Slider publié par Codrops. Il utilise de superbes transitions d'animation CSS dans les navigateurs qui les prennent en charge, actuellement dans Google Chrome et le dernier-né dans Safari. Il est étrange que même les versions les plus récentes de Firefox ou IE9 ne puissent toujours pas utiliser ces transitions..
La meilleure partie de ce code est qu’il aura toujours recours aux effets de transition de base entre les images. Certes, une grande partie de l'animation est réalisée via jQuery, mais l'option de secours CSS standard est toujours très fiable compte tenu du nombre de navigateurs ne pouvant pas prendre en charge les animations CSS3 flashy..
Alternativement, Codrops vient également de publier un autre panneau d’images glissantes qui utilise des techniques CSS3 encore plus créatives. Ce curseur d'image est créé à l'aide d'images d'arrière-plan en CSS. Ainsi, même sans les effets de transition, il se comporte très facilement..
8. Méthode CDN Failsafe du script jQuery
La bibliothèque jQuery est devenue presque essentielle au développement de JavaScript sur le Web. De nombreux fournisseurs de CDN alternatifs ont créé des URL statiques sur lesquelles ils hébergent toutes les versions publiées de jQuery. Google, Microsoft et même jQuery ont eux-mêmes créé un portail CDN pour les développeurs, parmi quelques sites Web moins connus..
Des centaines de milliers de développeurs dépendent probablement de ces fournisseurs. Que se passerait-il si l'un des liens était rompu pour une raison quelconque ou si les serveurs étaient hors ligne? Ce serait une bonne idée d’héberger une copie locale et de ne l’implémenter que si vous en avez besoin. Eh bien, cet excellent extrait de code de secours de CSS-Tricks vous permet de le faire!
La source
9. Cases à cocher uniques HTML5
HTML5 a ouvert la porte à des styles super cool pour construire des sites Web. Une partie de cette expérience Web améliorée passe par les formulaires et les éléments de saisie. Les cases à cocher ne sont qu'un exemple qui peut être fortement personnalisé pour répondre à vos besoins.
Je suis tombé sur ce merveilleux tutoriel CSS / jQuery publié au début du printemps 2011. Il offre une méthode simple pour créer des commutateurs de style Apple pour vos cases à cocher qui se dégradent gracieusement dans les navigateurs plus anciens. Le code utilise des images d'arrière-plan pour remplacer les styles d'activation / désactivation entre les interactions utilisateur..
Les éléments de la case à cocher de saisie d'origine sont masqués par défaut et leur valeur est déterminée par des appels JavaScript. Cela signifie que vous pouvez extraire dynamiquement la valeur à n’importe quel moment via jQuery, mais elle sera également transmise au formulaire lors de la frappe. “soumettre” bouton.
En supposant que JavaScript soit désactivé ou non pris en charge par les anciens navigateurs, le script utilisera par défaut des entrées HTML normales. Cela désactivera également le CSS pour les styles de case à cocher les plus récents, de sorte qu'il apparaîtra comme si rien n'avait changé. Le script se comporte plus comme un favori esthétique avec un repli net qu'autre chose. Mais ces curseurs sont fantastiques et les mêmes techniques pourraient être appliquées à d’autres champs de saisie tels que les menus de sélection et les boutons radio..
10. Vidéo prise en charge par HTML5
Les nouvelles spécifications HTML5 ont été très progressives dans de nombreux domaines. Les éléments vidéo et audio ont une prise en charge native améliorée pour un grand nombre de fichiers multimédias. Il s'avère toutefois qu'entre les navigateurs pris en charge par HTML5, ils ne sont pas tous d'accord sur les types de fichiers..
Mozilla Firefox prend généralement en charge la vidéo .OGG que vous pouvez utiliser VLC en tant que convertisseur. Google Chrome et Safari recherchent des fichiers .MOV codés au format .MP4 ou H.264. En raison de ces différences, vous devrez normalement inclure Trois formats vidéo différents - les deux énumérés ci-dessus avec une solution de secours .FLV.
Heureusement, des gars très intelligents ont créé une bibliothèque appelée VideoJS. Il s'agit d'une version JavaScript extrêmement petite qui permet une seule implémentation de vidéo Flash et HTML5 dans une balise. Il est gratuit de télécharger et open source, donc les développeurs sont également invités à contribuer. Les lecteurs vidéo Flash et HTML5 sont personnalisés pour être identiques afin que tous les utilisateurs aient la même expérience. Découvrez leur exemple de code d'intégration vidéo HTML5:
La source
En suivant un itinéraire similaire, le projet html5media offre une méthode pour consolider tous les médias en flux continu en un seul type de fichier. Malheureusement, même VideoJS n’est pas parfait avec tous les navigateurs. Ce que le projet html5media a tenté de faire est de contourner les incompatibilités de navigateur pour prendre en charge tout type de fichier vidéo sur toutes les plateformes. Et ça marche plutôt bien!
Conclusion
J'espère que ce guide de méthodes de secours utiles sera utile aux développeurs Web du monde entier. Il peut être difficile de créer des sites Web pour s’adapter à un large éventail de spécifications logicielles. Cela est particulièrement vrai lorsque vous travaillez avec de nombreux langages tels que CSS et JavaScript..
Mais les tendances indiquent que nous approchons d'une ère plus favorable à la conception Web. Jamais auparavant, plus de navigateurs et de normes Web n’avaient été approuvés, en particulier dans CSS3 et HTML5. Ces techniques ne sont que quelques-unes des nombreuses méthodes à prendre en compte lors de la création de pages Web conformes aux normes. En tant que développeur Web, vous souhaiterez constamment suivre les dernières tendances en matière de conception et vous adapter au mieux à votre public..
