Explication détaillée de l'amélioration progressive CSS (Cascading Style Sheets)

Il existe de nombreuses façons d'incorporer une amélioration progressive dans votre travail avec les feuilles de style en cascade (CSS). Cet article abordera certaines des plus efficaces et examinera d'autres façons d'améliorer progressivement votre site.

Organisation des feuilles de style

De nombreux concepteurs et développeurs Web ne réfléchissent pas beaucoup à la manière d'introduire des feuilles de style dans les documents, mais c'est en réalité un art. Avec la bonne approche, vous pouvez immédiatement profiter des nombreux avantages de l’amélioration progressive.

Utiliser plusieurs feuilles de style

Diviser un peu vos styles peut apporter de nombreux avantages. Évidemment, une feuille de style de plus de 1 500 lignes est un peu difficile à gérer, et la diviser en plusieurs feuilles de style peut améliorer le flux de travail (et vous faire économiser des efforts). Il existe un autre avantage rarement mentionné : il permet d'obtenir des effets de présentation plus cohérents sur le type de média cible (Traduction : fait référence à divers types de média tels que les ordinateurs, les imprimantes, les téléviseurs, les téléphones portables, etc.).

Le fichier main.css contient toutes les règles de style du site. Pensez à le diviser en feuilles de style indépendantes contenant la typographie, la mise en page et la couleur, nommées en conséquence : type.css, layout.css, color.css.


(Illustration : Comment diviser une seule feuille de style en plusieurs feuilles de style associées)

Une fois la séparation ci-dessus terminée, vous pouvez utiliser quelques astuces magiques pour fournir automatiquement une expérience « basse fidélité » aux navigateurs obsolètes (tels que IE5/Mac) et à de nombreux navigateurs qui ne prennent pas en charge la mise en page CSS. Comment faire ? Tout dépend de la manière dont vous importez le fichier. Supposons que main.css soit introduit via l'élément link :


Tout d’abord, divisez la ligne de référence ci-dessus en trois feuilles de style associées :


Dans le passé, de nombreux développeurs définissaient la valeur du média sur « écran » ou « projection », rendant le style de mise en page complètement invalide sur Netscape 4.x (Annotation : Netscape 4.x ne prend pas en charge les mises en page complexes telles que le flottement et le positionnement). Il existe cependant une meilleure solution. Avant d'expliquer cette méthode en détail, examinons les types de médias alternatifs.

Types de médias facultatifs

L'amélioration progressive se concentre principalement sur le contenu, et nous souhaitons apporter une expérience « améliorée » à tous les appareils prenant en charge l'affichage de contenu. Il est donc important de prendre en compte les appareils autres que le navigateur, tels que les appareils imprimés et mobiles.

Malheureusement, le marché des appareils mobiles est encore fragmenté et immature (ne soyez pas naïf en pensant que tous les navigateurs portables afficheront des styles de types de médias ciblant « écran »). En conséquence, une discussion détaillée sur l’amélioration progressive dans tous les médias prendrait plusieurs pages, voire un livre. Ne désespérez pas cependant : dans le monde mobile, les différences commencent à s'unifier et des personnes très intelligentes commencent à rassembler des ressources pour nous aider à nous développer. Cependant, pour gagner du temps et des efforts, nous nous concentrerons sur les appareils d'impression.

Habituellement, nous devons utiliser un autre élément de lien pour ajouter des styles d'impression :


Par convention, la feuille de style ci-dessus contient toutes les règles liées à l'impression, y compris les règles de mise en page et de couleur. En particulier pour la mise en page, la plupart des règles de la feuille de style sont susceptibles d'être copiées à partir de main.css. En d'autres termes, cela entraîne de nombreux codes en double.

Vous pouvez constater l’avantage de séparer les styles de publication et de couleur des styles de mise en page : nous n’avons plus besoin de ces règles répétées dans la feuille de style d’impression. En plus de cela, une autre astuce d'organisation peut être utilisée pour améliorer la convivialité du site, ainsi que pour masquer certains styles de mise en page aux navigateurs problématiques.

En regardant notre feuille de style, considérons le code suivant :


Nous n'avons pas déclaré de type de média, donc Netscape 4.x lira tous les styles de ces trois fichiers. Cependant, le navigateur Netscape comprend les CSS de base et nous pouvons en tirer parti. Nous pouvons organiser davantage nos styles en déplaçant tous les styles contenus dans layout.css vers une nouvelle feuille de style – nommée de manière appropriée screen.css. Enfin, mettez à jour le contenu de layout.css pour importer screen.css, afin que NS4.x et ses navigateurs frères ne soient plus intelligents (car ils ne comprennent pas la directive @import). (Note de traduction : ce dont l'auteur parle ici, c'est de déplacer tout le contenu de layout.css vers screen.css, puis d'introduire screen.css via @import dans layout.css. Je pense que le meilleur moyen est de l'ajouter à layout.css Conservez les styles de mise en page les plus élémentaires qui peuvent également être compris par NS4.x et déplacez les autres styles de mise en page avancés vers screen.css).


Il y a une certaine marge d'amélioration - les médias ciblés par la feuille de style doivent être déclarés, ce que nous faisons en ajoutant le type de média à la déclaration @import :


Le problème est que les navigateurs IE7 et inférieurs ne comprennent pas cette syntaxe et ignorent donc la feuille de style ci-dessus. Si vous souhaitez fournir la feuille de style ci-dessus à ces navigateurs (ce qui est souvent souhaité), vous pouvez facilement le faire en utilisant des commentaires conditionnels. sera élaboré ci-dessous. Si vous avez l'œil aiguisé comme un aigle, vous avez peut-être remarqué que des guillemets simples (') sont utilisés à la place des guillemets doubles (") de part et d'autre du nom de la feuille de style. Cette petite astuce permet à IE5/Mac d'ignorer le style. Les capacités de mise en page CSS d'IE5/Mac sont très faibles (en particulier la prise en charge du flottement et du positionnement), et il est parfaitement acceptable de leur cacher les règles de mise en page. Après tout, ils peuvent toujours obtenir des informations sur la couleur et la mise en page, ce qui est suffisant dans certains cas. .

En utilisant la même technique, vous pouvez importer le fichier print.css (qui, comme vous pouvez le deviner, contient des règles spécifiques pour la mise en page d'impression).


Désormais, nous disposons non seulement d'une feuille de style magnifiquement organisée, mais nous disposons également d'une méthode efficace pour améliorer progressivement la conception de votre site.


(Illustration de la façon dont plusieurs feuilles de style sont liées les unes aux autres et comment les appliquer à un document)

Comment gérer IE6 ?

Pour beaucoup de gens, Internet Explorer 6 est le nouveau Netscape 4 et tout le monde souhaite qu'il disparaisse.

Laissons de côté les problèmes liés à IE6. Les problèmes avec IE6 sont bien documentés et, honnêtement, pas si difficiles à résoudre. De plus, l'adoption d'IE7 est assez rapide (en particulier sur le marché grand public) et IE8 est déjà en version bêta publique. Cela signifie qu’un jour, nous pourrons vraiment dire au revoir à l’IE6 vieillissant.

Que ce soit intentionnellement ou non, lorsque Microsoft a lancé IE5, il a fourni un bon outil d'amélioration progressive : les commentaires conditionnels. Ces éléments de logique intelligents (relégués aux commentaires HTML dans tous les autres navigateurs) permettent non seulement à certains extraits de code de balisage de fonctionner uniquement pour IE, mais ils permettent également à ces extraits de code de fonctionner uniquement sur des versions spécifiques d'IE.

En tant que développeurs conscients des normes Web, nous devons toujours d'abord tester nos conceptions sur la majorité des navigateurs conformes aux normes existants, puis fournir des correctifs pour ces navigateurs qui peuvent revenir sur la bonne voie avec des modifications mineures. Le flux de travail de chacun est différent, mais je trouve qu'il est préférable de démarrer chaque projet avec un ensemble standard de documents. Ma suite de base comprend les fichiers suivants :


Ensuite, en fonction des besoins du projet, ajoutez des fichiers CSS spécifiques au navigateur pour inclure ces « modifications mineures ». Dans la plupart des projets désormais, ces fichiers sont ie7.css et ie6.css. Si le projet nécessite la prise en charge des versions antérieures à IE6, je créerai également les fichiers correspondants (tels que ie5.5.css, etc.). Une fois ces fichiers en place, j'ai commencé à ajouter des règles de style aux feuilles de style appropriées.

Je commence mes tests CSS dans Mozilla Firefox car la plupart de mes CSS sont écrits à l'aide de la barre latérale de l'éditeur CSS de Firefox. Une fois que j'ai fini de concevoir la page dans Firefox, j'ai immédiatement ouvert un autre navigateur pour la tester et la visualiser. La plupart fonctionnent parfaitement car ils respectent les standards du Web. Ensuite, ouvrez IE7 pour tester. Dans la plupart des cas, il n'y a pas beaucoup de problèmes. Parfois, hasLayout doit être déclenché ou d'autres erreurs de mise en page mineures doivent être corrigées. Au lieu d'écrire ces correctifs dans le fichier de feuille de style de la suite de base, je les ai ajoutés à ie7.css et les ai introduits via des commentaires conditionnels dans le HEAD du document :


Les commentaires conditionnels ci-dessus permettent à IE7 et versions antérieures (Note de traduction : lte est l'abréviation de inférieur ou égal) de reconnaître le style introduit. Par conséquent, en parcourant la page avec IE7, ces correctifs seront obtenus. Mais si vous utilisez une nouvelle version d'IE - qui a peut-être résolu ces problèmes, par exemple IE8 a abandonné hasLayout et n'a plus ces problèmes - ces styles seront ignorés. D'un autre côté, ces styles peuvent être obtenus en utilisant IE6. C'est une bonne chose car les bogues de rendu dans IE7 ont également tendance à être présents dans IE6. Comme mentionné ci-dessus, les versions IE7 et inférieures ne peuvent pas comprendre @import avec le type de média. L'introduction de screen.css de cette manière n'est pas valide pour les versions IE7 et inférieures. Par conséquent, vous devez également ajouter une instruction @import sans type de média en haut du fichier ie7.css pour introduire screen.css.

Une fois que j'aurai corrigé IE7, j'ouvrirai IE6 et verrai si j'ai besoin de corriger quelque chose. Si nécessaire, j'ajouterais un autre commentaire conditionnel au document, en l'important dans ie6.css :


Ensuite, ajoutez simplement les correctifs requis par IE6 aux feuilles de style correspondantes. Ces feuilles de style seront ignorées par IE7, mais affecteront toujours les versions telles que IE5.5.

En utilisant les commentaires conditionnels de cette manière, vous pouvez facilement gérer les navigateurs cibles de votre projet et conserver les fichiers de correctifs CSS indépendants et gratuits.

Autres considérations

L'amélioration progressive du CSS ne se limite pas à la manière d'associer les feuilles de style aux documents, mais peut également s'appliquer à la manière d'écrire du CSS.

Par exemple, considérons le contenu généré. Non pris en charge par tous les navigateurs, mais c'est un excellent moyen d'ajouter du design ou du texte supplémentaire. Cela n’est pas requis pour la convivialité de la page, mais cela peut apporter des améliorations visuelles ou autres.

Prenons comme exemple un simple formulaire de contact :


(Illustration : formulaire HTML utilisé dans cet exemple (le code sera donné ci-dessous))

Lors de l'écriture du code HTML ci-dessus, il est probable que les deux points (:) seront naturellement écrits dans l'élément label. Pourquoi faire ça ? Le contenu est-il réellement ajouté à l’élément label ? Pas vraiment. Le but est de fournir des indices visuels supplémentaires à l'utilisateur. Pour l'élément label, il est redondant et doit être supprimé :


Une méthode plus adaptée consiste à rajouter les deux points au document en générant du contenu :


Écrire des formulaires de cette manière nous donne de la flexibilité : lorsque nous devons supprimer des caractères décoratifs de l'ensemble du site, nous pouvons simplement éditer le fichier CSS sans avoir à rechercher chaque formulaire (même si nous savions autrefois où). Cette astuce se dégrade également bien, car sans les deux points, le formulaire ne devient pas inutilisable - un excellent exemple d'amélioration progressive.

Peut-être avez-vous découvert qu'en utilisant des sélecteurs CSS avancés (traduction : sélecteur, également traduit par sélecteur, mais je pense que les sélecteurs peuvent mieux refléter le sens original, comme l'opérateur est traduit par opérateur au lieu d'opérateur), vous pouvez modifier un style spécifique attaché à navigateurs plus avancés, cela contribue à améliorer le site au fil du temps. Un bon exemple est le sélecteur d'attribut, qui n'est pas compris (et donc ignoré) dans IE6, ses contemporains et les navigateurs antérieurs. Egor Kloos a magnifiquement utilisé ce concept avec sa soumission intitulée « Gemination » sur CSS Zen Garden :


(Illustration : Comparaison du rendu du travail CSS Zen Garden d'Egor Kloos ("Double Double") dans les navigateurs standards et IE6)

Comment a-t-il fait ? Voici l'exemple de code légèrement modifié :


La différence est évidente et constitue une belle illustration de la façon dont l’amélioration progressive peut être utilisée en CSS.

De même, le site d'Andy Clarke contient quelques informations sur IE6. En utilisant les filtres d'IE et en ajoutant quelques annotations conditionnelles, Andy a réussi à supprimer toutes les couleurs du site et à fournir quelques images remplaçables qui permettent une expérience véritablement « lo-fi ».


(Illustration : Comparaison du site d'Andy Clark dans les navigateurs standards et IE6)

La technique grise dans l'image ci-dessus est la suivante : Dans la feuille de style pour IE6 (et ci-dessous) ajoutée par le commentaire conditionnel, ajoutez l'instruction suivante :


Bien que les deux exemples ci-dessus puissent contenir trop de techniques qui ne sont pas utilisées dans le travail quotidien, ils illustrent parfaitement le concept d'application de l'amélioration progressive CSS dans la pratique.

Résumer

Comme nous l’avons évoqué, il existe plusieurs façons d’appliquer l’amélioration progressive CSS à votre site. Le moyen le plus simple, et probablement le meilleur, consiste à organiser vos feuilles de style et à réfléchir attentivement à la manière dont vous allez les lier dans votre document. Une fois que vous aurez compris les commentaires conditionnels, traiter les problèmes spécifiques à IE sera un jeu d’enfant. Si vous comprenez clairement comment utiliser les sélecteurs et les scénarios dans lesquels ils sont utilisés, vous pouvez effectuer des ajustements plus précis dans CSS.

Armé de ces connaissances, vous serez sur la bonne voie pour devenir un expert en amélioration progressive.