Il y a dix ans, seuls les concepteurs de sites Web les plus de pointe utiliseraient CSS pour la mise en page et l'embellissement des pages Web. À cette époque, la prise en charge des navigateurs pour la disposition CSS était à la fois incomplète et pleine d'échappatoires, donc bien que ces personnes insistent sur la normalisation Web, ils devaient utiliser des hacks pour afficher leurs pages normalement dans tous les navigateurs. L'une des technologies de piratage de plus en plus utilisées est le sniffing du navigateur, qui utilise l'attribut Navigator.UserAgent en JavaScript pour déterminer la marque et la version du navigateur que l'utilisateur utilise. La technologie de reniflement du navigateur peut rapidement brancher le code pour appliquer différentes instructions à différents navigateurs.
Aujourd'hui, les dispositions basées sur CSS sont déjà très courantes et les navigateurs le soutiennent très solide. Mais maintenant CSS3 et HTML5 sont là, l'histoire s'est retournée et est retournée à sa place d'origine - le support de ces nouvelles technologies par divers navigateurs a recommencé à redevenir inégal. Nous avons longtemps été habitués à écrire des codes soignés et conformes standard, et nous n'utiliserons plus de hacks ou de navigateurs CSS pour renifler des technologies peu fiables et de bas niveau. Nous pensons également que de plus en plus d'utilisateurs seront d'accord avec l'idée que les sites Web n'ont pas à se ressembler dans tous les navigateurs. Donc, face à cette situation familière (support différent du navigateur) maintenant, que devons-nous faire? Simple: utilisez la détection des fonctionnalités, ce qui signifie que nous n'avons pas à demander au navigateur qui êtes-vous? Pour faire des spéculations peu fiables. Au lieu de cela, nous demandons au navigateur si vous pouvez faire ceci ou cela. C'est facile à détecter les navigateurs, mais il est toujours ennuyeux de passer du temps à les tester manuellement un par un. Modernizr peut nous aider en ce moment.
Modernizr: une bibliothèque de détection fonctionnelle spécialement développée pour HTML5 et CSS3
Modernizr est une bibliothèque JS open source qui facilite les concepteurs qui développent différents niveaux d'expérience en fonction des différences de navigateurs d'invités (se référant aux différences de soutien aux nouvelles normes). Il permet aux concepteurs de tirer pleinement parti des fonctionnalités HTML5 et CSS3 pour le développement dans les navigateurs qui prennent en charge HTML5 et CSS3 sans sacrifier le contrôle d'autres navigateurs qui ne soutiennent pas ces nouvelles technologies.
Lorsque vous incorporez le script de Modernizr dans une page Web, il détectera si le navigateur actuel prend en charge les fonctionnalités CSS3, telles que @ Font-Face, Border-Radius, Border-Image, Box-Shadow, RGBA (), etc., et il détectera également si les fonctionnalités HTML5 sont prises en charge - telles que l'audio, la vidéo, le stockage local, les types de balises et les propres tags. Sur la base de l'obtention de ces informations, vous pouvez les utiliser sur les navigateurs qui prennent en charge ces fonctionnalités pour décider de créer un rendement basé sur JS ou simplement de rétrograder ceux qui ne les prennent pas en charge. De plus, Modernizr peut également permettre à IE de prendre en charge l'application des styles CSS sur les éléments HTML5, afin que les développeurs puissent immédiatement utiliser ces balises plus sémantiques.
Modernizr est développé sur la base de la théorie de l'amélioration progressive, il soutient donc et encourage les développeurs à créer leur couche de site Web par couche. Tout commence par une fondation inactive avec JavaScript appliquée, ajoutant des couches d'application améliorées une par une. Parce que Modernizr est utilisé, il est facile pour vous de savoir ce que le navigateur prend en charge. Jetons un coup d'œil à un exemple de création de sites Web de pointe en appliquant Modernizr.
Commencez par l'application de modernizr
Tout d'abord, téléchargez la dernière version stable de Modernizr à partir de www.modernizr.com (actuellement, le site officiel de Modernizr est bloqué en Chine, et nous pouvons le télécharger à partir de GitHub. Ou pour être plus simple, vous pouvez télécharger le dernier fichier de script de version 1.7 du maître). Sur le site officiel, vous pouvez également voir une liste de toutes les fonctionnalités qu'il prend en charge pour la détection (la dernière page de cet article donnera à ces listes afin que les chaussures des enfants qui ne puissent pas être retournées à travers le mur peuvent savoir celles qu'ils soutiennent). Après avoir téléchargé la dernière version (l'auteur a utilisé la version 1.5 lors de la rédaction de cet article), ajoutez-le à la zone de la page:
Ensuite, ajoutez la classe no-js à l'élément.
Lorsque Modernizr fonctionnera, il transformera la classe No-Js en JS pour vous faire savoir qu'il fonctionne. Modernizr ne fait pas seulement cela, il ajoute également une classe de classe à toutes les fonctionnalités qu'elle détecte. Si le navigateur ne prend pas en charge une fonctionnalité, il préfixe le nom de classe correspondant à la fonction par no. Donc, votre élément peut devenir comme ceci:
Modernizr créera également un objet JS nommé Modernizr, qui est une liste des résultats booléens donnés pour chaque fonctionnalité détectée. Si le navigateur prend en charge un nouvel élément Canvas, la valeur de Modernizr.Canvas est vraie; Si le navigateur ne prend pas en charge ce nouvel élément, la valeur correspondante est fausse. Cet objet JS contiendra également des informations plus détaillées pour certaines fonctions, telles que modernizr.video.h264 vous dira si le navigateur prend en charge ce codec spécial. Modernizr.inputTypes.Search vous dira si le navigateur actuel prend en charge le nouveau type d'entrée de recherche, etc.
Notre petite page non transformée et simple ressemble un peu à un système de pré-test, mais il a une meilleure sémantique et une meilleure accessibilité. Ajoutons un petit style de base: un petit format de texte, une couleur et une disposition pour le rendre meilleur. À l'heure actuelle, il n'y a rien de nouveau, ajoutez simplement des styles d'expression à une page HTML de structure sémantique et regardez la page après avoir ajouté le style.
Ci-dessous, nous voulons améliorer cette page pour le rendre plus intéressant. Je souhaite appliquer un effet texte particulier à H1 sur la tête, diviser la liste des fonctionnalités de détection en deux colonnes, puis tout obtenir sur Modernizr avec une photo à droite. Je veux aussi faire la frontière autour du contenu de la page belle. Maintenant, le CSS3 le plus puissant vous permet d'ajouter plus de propriétés à une règle qui les ignorera si le navigateur ne les soutient pas. Avec CSS Cascade (héritage), vous pouvez utiliser de nouvelles propriétés comme Border-Radius sans compter sur Modernizr. Cependant, l'utilisation de Modernizr peut vous fournir certaines fonctionnalités qui ne peuvent pas être fournies par les moyens existants: des noms de classe modifiés dynamiquement basés sur la prise en charge différentielle du navigateur pour de nouvelles choses. Je vais illustrer cela en ajoutant 2 nouvelles règles à notre page:
La première règle ajoute un coin arrondi à 12 pixels à l'élément #Content. Mais dans la page existante, nous avons défini une bordure avec l'élément #Content avec une valeur d'attribut de 2PX SECTAT # 666. Cela semble assez bon lorsque la boîte est à angle droit, mais pas dans les coins arrondis. Grâce à Modernizr, je peux définir un bord réel 1px sur la boîte avec Border-Radius pris en charge par le navigateur.
La deuxième règle est un peu plus avancée. Nous avons ajouté une ombre à l'élément #Content et supprimé l'attribut de bordure pour les navigateurs qui prennent en charge les attributs de box-shadow. Pourquoi? Parce que la plupart des navigateurs ne fournissent pas de bonnes performances pour la combinaison des bords et des coins avec des ombres (c'est un défaut dans un navigateur qui devrait être noté, mais nous devons le supporter maintenant). Au lieu d'utiliser des ombres et d'utiliser uniquement les frontières, je préfère utiliser des ombres pour entourer des éléments. De cette façon, je peux avoir les performances les meilleures, précises et les meilleures CSS au monde: une belle ombre apparaîtra dans un navigateur qui prend en charge l'attribut Box-Shadow; Un navigateur qui ne soutient que l'attribut Border-Radius présentera une belle bordure arrondi; Pour les navigateurs cassés qui ne soutiennent pas ces deux-là, nous verrons une bordure à angle droit à 2 pixels.
Ci-dessous, nous voulons appliquer une police spéciale personnalisée à l'en-tête. Ce qui suit est notre déclaration actuelle pour H1, sans modifications:
Ces instructions fonctionnent bien sur nos pages de base, et la taille du texte de 27 pixels convient également à l'affichage de ces polices que nous définissons pour H1. Mais pour la police que je vais utiliser appelée Beautiful, 27 pixels est trop petit. Ici, nous voulons ajouter d'autres règles pour utiliser cette police personnalisée:
Tout d'abord, nous ajoutons la déclaration de Font-Face et spécifions le chemin, le nom du fichier et le nom de la police pour nos polices personnalisées. Ensuite, nous utilisons une instruction CSS pour sélectionner le style de police pour notre H1. Vous verrez que j'ai choisi une grande taille de police ici, car la belle police elle-même est beaucoup plus petite que le texte des autres polices, nous devons donc demander au navigateur de donner à H1 une grande taille de police lors de l'affichage de nos polices personnalisées.
De plus, notre magnifique texte manuscrit a des problèmes de rendu avec l'observation du texte, nous devons donc annuler l'observation du texte lorsque le navigateur décide d'utiliser du texte personnalisé. De plus, la liste des pièces de fonction de détection doit être divisée en deux colonnes. Pour atteindre mon objectif, je souhaite utiliser l'attribut CSS Colonnes impressionnant, ce qui permettra au navigateur de diviser intelligemment la liste en colonnes sans perturber sa commande. Bien que notre liste n'ait pas de nombre numérique, il est également organisé par ordre alphabétique. Bien sûr, tous les navigateurs ne soutiennent pas cette propriété. Pour ceux qui ne prennent pas en charge, nous utilisons Float pour atteindre le but de 2 colonnes - après avoir utilisé Float, la liste ne sera plus disposée alphabétiquement, mais c'est mieux que rien.
J'ai à nouveau utilisé Modernizr pour définir différentes propriétés pour différentes situations. Si le navigateur prend en charge les colonnes CSS, elle divisera parfaitement la liste en 2 colonnes. S'il n'est pas pris en charge, nous pouvons également utiliser la méthode flottante pour transformer la liste en deux colonnes par flottant. Bien qu'il ne soit pas si parfait, il vaut mieux que d'appliquer directement une longue liste de colonnes uniques.
Ici, vous avez peut-être remarqué que j'ai ajouté différents préfixes (-moz-, -webkit-, -o-) à l'attribut. En effet, différents fabricants de navigateurs ont des définitions différentes de la mise en œuvre de cette fonction, donc pour implémenter cette fonction, ils doivent ajouter leurs préfixes correspondants à différents navigateurs.
Après ces modifications, notre nouvelle page semble meilleure.
Nous ajouterons des améliorations plus progressives à notre page pour mettre fin à ce tutoriel. Les navigateurs basés sur WebKit prennent en charge certains effets spéciaux plus impressionnants, tels que la transformation CSS, l'animation et la transformation tridimensionnelle. Et je veux appliquer certains de ces effets spéciaux dans les pages de la dernière étape. Encore une fois, ces propriétés seront ajoutées à notre CSS existantes et ignorées dans les navigateurs qui ne les soutiennent pas. Par conséquent, il est approprié d'utiliser Modernizr pour cette situation où l'amélioration progressive n'est pas prise en charge d'une part.
Premier ensemble:
La règle @keyframes fait partie de la nouvelle spécification des animations CSS et ne prend actuellement en charge que WebKit. Il vous permet de déclarer un chemin d'animation complet pour n'importe quel attribut et de les modifier à n'importe quel stade que vous aimez. Pour en savoir plus sur les animations, lisez les spécifications du projet de travail W3C.
Ici, nous ajoutons le code qui fait tourner un élément dans un espace tridimensionnel:
Parce que le logo doit être tourné, et j'espère qu'il s'entendra plus harmonieusement avec l'arrière-plan lorsqu'il est tourné, donc un fichier de format PNG est utilisé ici. J'ai également utilisé un attribut de débordement: caché pour masquer le texte dans l'en-tête avec des pixels en retrait de 9999. Il est intéressant de faire tourner les éléments en 3D, mais pas trop beau. Enfin, nous avons choisi d'utiliser la règle d'animation, en fixant sa période de rotation à 2 secondes, en tournant le long de son propre axe central, sans s'arrêter.
La page finale a fière allure et met même en place des animations amusantes pour le navigateur WebKit. J'espère que jusqu'à présent, vous pouvez comprendre à quel point cela peut rendre votre poignet avec le contrôle modernizr sur votre site Web et à quel point il peut faire une véritable amélioration progressive. Ce n'est pas seulement l'avantage de Modernizr, il peut également vous aider à construire des bases en fonction de JS et à vous aider à appliquer les nouvelles fonctionnalités impressionnantes de HTML5.