Compréhension complète de CSS_CSS/HTML

Depuis la sortie de Dreamweaver MX 2004, j'ai démontré ses nouvelles caractéristiques et fonctionnalités d'innombrables fois aux utilisateurs de Dreamweaver, nouveaux et existants. Chaque fois que je fais une démonstration de produit, je ne cesse de m'extasier sur les nouvelles capacités de Dreamweaver MX 2004 en matière de conception et de rendu CSS (ou feuilles de style en cascade). Cet article fournit une compréhension détaillée et complète de CSS.

Cependant, un nouvel utilisateur a récemment posé une question. Pour être honnête, cette question m'a laissé sans voix. Cet utilisateur a simplement demandé : "Pourquoi devrais-je utiliser CSS ?" J'ai réalisé à ce moment-là que même si ceux d'entre nous qui travaillent quotidiennement avec HTML et CSS sont bien conscients des avantages du CSS, nombreux sont ceux qui ne le sont pas encore. Ou peut-être que vous n’êtes pas pleinement conscient de tous les avantages que CSS a à offrir. Cet article est ma réponse écrite au nouvel utilisateur ci-dessus.

Origines du CSS
Avant de passer en revue les avantages du CSS, je souhaite présenter son histoire. L'organisation de gestion Web W3C a recommandé l'utilisation de CSS en novembre 1996 et a approuvé la spécification CSS niveau 1. La spécification CSS niveau 1 décrit les propriétés utilisées dans les pages HTML. Ces propriétés remplacent les balises de police traditionnelles et autres balises de « style » telles que la couleur et les marges. En mai 1998, le W3C a approuvé la spécification CSS niveau 2, ajoutant des fonctionnalités supplémentaires à la spécification niveau 1 et introduisant l'attribut de positionnement. Ces propriétés remplacent l'utilisation courante (mais incorrecte) des balises de tableau pour concevoir la présentation des éléments de la page. La dernière version de la spécification CSS est CSS 2.1, qui améliore certaines propriétés et supprime celles qui n'ont pas ou peu d'effet dans les navigateurs actuels.

Malheureusement, comme beaucoup de nouvelles technologies, CSS a mis beaucoup de temps à être largement adopté. Cela s'explique en grande partie par les navigateurs et les concepteurs Web qui créent des sites pour ces navigateurs. Pendant la période de ratification de CSS, Netscape Navigator (NN) était toujours le navigateur dominant et CSS n'était en grande partie pas pris en charge par ce navigateur. Microsoft a ajouté une prise en charge très limitée du CSS dans la version 3 de son navigateur, mais la plupart des concepteurs Web de l'époque (moi y compris) codaient toujours leurs pages en NN comme plate-forme préférée.

Au fil des années, les créateurs de navigateurs ont étendu la prise en charge du CSS à chaque nouvelle version. Aujourd'hui, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera et Safari prennent tous en charge CSS. Mais cela ne veut pas dire que nos carrières de concepteurs et de développeurs Web ne sont pas sans problèmes. Bien que tous les navigateurs ci-dessus prennent en charge CSS niveau 2, leur niveau de compatibilité varie. Et dans certains cas, des propriétés spécifiques peuvent encore vous causer bien des ennuis. Cela dit, vous devez toujours respecter le vieux mantra du « tester et tester ».Mais si vous vous en tenez aux propriétés principales de la spécification CSS, vous pourrez afficher la page correctement.

Mais pourquoi le W3C a-t-il ressenti le besoin de créer une spécification CSS ? Qu'est-ce que tout cela signifie pour moi lorsque je crée des sites et des applications Web HTML ? À mon avis, les raisons pour lesquelles nous devons utiliser CSS et les avantages qu'il apporte peuvent être divisés selon les trois aspects principaux suivants : flexibilité, présentation et accessibilité

Flexibilité
I' Je suis sûr que presque tous les concepteurs et développeurs Web ont vécu ce moment douloureux : après avoir soigneusement présenté la page et complété tous les tableaux imbriqués, le client demande un "petit" changement. Ce petit changement peut être aussi simple que « Pouvez-vous déplacer ce graphique un peu vers la gauche ? » ou il peut être aussi dramatique que « Je n'aime pas ces titres, peuvent-ils être agrandis ? Lors du changement de police, en Que diriez-vous de changer les couleurs ?" Si vous ne disposez que d'un nombre limité de pages sur lesquelles travailler, vous pouvez prendre une profonde inspiration et passer la majeure partie d'une heure à effectuer ces modifications ennuyeuses. Mais lorsqu’il s’agit de sites plus grands (et c’est déjà courant), un simple changement n’est de toute façon pas si simple.

Pourquoi cette situation est-elle si douloureuse ? Parce que le balisage qui définit l’apparence de la page fait lui-même partie de la page. Pour voir un exemple, accédez simplement à n’importe quelle page de n’importe quel site et comptez le nombre de balises de police et de tableau. Tant que vous pouvez supprimer ces balises du flux (ou du code) de la page réelle, ou mieux encore, les externaliser, vous pouvez effectuer des modifications centralisées. Et c'est ce que CSS peut faire.

Si vous utilisez une ou plusieurs feuilles de style externes, vous pouvez appliquer les modifications à votre site en modifiant les feuilles de style puis en téléchargeant les versions modifiées.

Imaginez à quel point il serait difficile de déplacer la navigation sur le site du côté gauche de la page vers le côté droit de la page dans une mise en page traditionnelle basée sur des tableaux. Cela a nécessité plusieurs heures de travail répétitif et fastidieux. Cependant, si vous choisissez de concevoir votre page à l'aide des propriétés de positionnement CSS (souvent appelées CSS-P), vous pouvez mettre à jour la page simplement en modifiant les propriétés Float ou Position dans la feuille de style externe. Et voici l'avantage supplémentaire : vous mettez à jour toutes les pages de votre site qui utilisent ce style.

Présentabilité
En raison de l'utilisation généralisée du haut débit, de nombreux développeurs ne considèrent plus le temps passé à rendre les pages dans le navigateur. Cependant, vous devez garder à l’esprit que de nombreux utilisateurs cibles utilisent encore des connexions commutées. La mise en page traditionnelle basée sur des tableaux est la principale raison de la lenteur des vitesses de téléchargement des pages. Car lorsque le navigateur reçoit la page du serveur, il doit d'abord examiner et « comprendre » une série de tableaux mosaïques complexes. Il doit d’abord trouver le contenu intégré le plus interne, puis parcourir soigneusement le code jusqu’à ce qu’il atteigne le conteneur le plus externe, la balise body. Une fois tous les processus ci-dessus terminés, le navigateur peut commencer à afficher le contenu à l'écran.

Si vous utilisez CSS, le navigateur peut démarrer le processus de rendu immédiatement après avoir reçu le contenu du serveur, car il n'y a pas ou très peu de balisage d'affichage dans la page.

L'utilisation de feuilles de style externes présente également un avantage potentiel en termes de présentation. Dans une approche traditionnelle basée sur des tableaux, le navigateur doit récupérer, analyser et afficher chaque page individuellement. Autrement dit, le navigateur consacre autant de travail à afficher la page 30 de votre site qu’à la page 1.

Cependant, si une feuille de style externe est utilisée pour l'affichage, la première page du site demandera au navigateur de mettre en cache le fichier de feuille de style lié utilisé par la page. Cela signifie que toutes les pages suivantes du site qui utilisent la feuille de style ci-dessus seront téléchargées plus rapidement car le navigateur a déjà mis en cache la feuille de style.

Le dernier avantage lié à la présentation me rappelle le film "Mozart". Dans le film, Mozart demande au roi ce qu'il pense de son opéra. Le roi a dit que c'était bon, mais ennuyeux. Mozart appuya encore et encore, et le roi expliqua que le problème résidait dans « trop de notes ».La conception Web peut rencontrer le même problème, même si, bien entendu, les notes ici font référence au code HTML réel. Plus il y a de code, plus le navigateur met du temps à comprendre la page.

Vous avez peut-être entendu des rumeurs sur les applications officielles, elles sont mal codées, pleines d'informations complexes, mais la page de documentation ne parvient pas à s'afficher. En tant qu'utilisateur de Dreamweaver, vous n'aurez pas ce problème, mais vous serez coupable si vous écrivez trop de code. Une conception classique basée sur une table en est un bon exemple.

Lorsque vous utilisez CSS dans vos conceptions, vous réduisez la quantité de code que vos clients doivent télécharger. Le simple fait de réduire les balises de police dans certaines pages peut réduire considérablement la quantité de code. Dans de nombreux cas, la quantité de code peut être réduite jusqu'à 50 % ou plus si elle est entièrement conçue à l'aide de CSS-P. Moins de code signifie des téléchargements de pages plus rapides.

Accessibilité
J'entends beaucoup les gens parler d'accessibilité ces jours-ci. La plupart des développeurs savent qu'ils doivent penser à créer des sites plus accessibles, mais dans une plus grande mesure, seuls les développeurs qui construisent des sites pour le gouvernement ou les établissements d'enseignement sont obligés de le faire. Lorsqu'ils réfléchissent aux problèmes d'accessibilité, la plupart des développeurs pensent que cela signifie simplement que l'attribut alt doit être ajouté aux graphiques. Mais en réalité, vous pouvez faire beaucoup pour améliorer l’accessibilité, et CSS facilite la création d’un site accessible.

Le principal problème d'accessibilité (et qui peut être résolu à l'aide de CSS) est la façon dont les technologies d'assistance (telles que les lecteurs d'écran) « lisent » la page. Dans les environnements traditionnels basés sur des tableaux, les lecteurs d’écran sont confrontés à un énorme défi lorsqu’il s’agit de décider comment lire la page. Pensez-y, à quel point un lecteur d'écran serait-il confus lorsqu'il rencontrerait un tableau profondément fragmenté. Doit-il lire le contenu ou l'ignorer ? Après avoir sauté du contenu, comment revenir au contenu plus tard ?

Lorsque vous cliquez sur une page, vous verrez rapidement le contenu de la page qui vous intéresse, ignorant la navigation et les autres contenus en haut de la page. Les personnes malvoyantes ne peuvent pas faire cela. Il doit attendre que le lecteur d'écran analyse toutes les informations complexes entre le haut de la page et le contenu qui l'intéresse.

Bien sûr, il existe des techniques qui permettent aux lecteurs d'écran de sauter la navigation, mais cela nécessite d'ajouter un lien dans l'image de la barre de navigation ou d'un autre contenu. Le fonctionnement de ces technologies peut être déroutant et visible pour les autres visiteurs du site. En utilisant CSS, vous pouvez définir entièrement les éléments invisibles de votre page (invisibles pour les autres visiteurs du site et votre souris). Les lecteurs d'écran peuvent utiliser ces éléments pour naviguer rapidement et travailler efficacement avec les documents.

Étant donné que CSS n'affiche pas de balisage, le seul problème que rencontrent les lecteurs d'écran concerne le contenu réel. De plus, lorsque vous concevez avec CSS-P, vous vous concentrez sur le « flux » réel de votre contenu. Vous commencez à réfléchir à son ordre logique sur la page.

En lisant ce document, vous comprenez le « flux » d’informations. Mais dans l’exemple du tableau mosaïque, si vous utilisez une mise en page à plusieurs colonnes, ce paragraphe se trouvera très probablement dans le coin supérieur droit de la page. De cette façon, le lecteur d’écran n’a aucun moyen de savoir qu’il est censé lire ce paragraphe à la fin de l’article.

Après avoir utilisé CSS-P, le navigateur peut toujours afficher ce paragraphe dans le coin supérieur droit de la fenêtre du navigateur, mais lorsque vous visualisez le code source du document, le paragraphe dans le code HTML du document est toujours ce que vous voyez maintenant à l'emplacement. Cela rend la page plus accessible.

Résumé et plan
Ce qui précède est ma réponse. J'espère avoir expliqué les avantages uniques de l'utilisation de CSS pour la conception Web. De toute évidence, il y a beaucoup à apprendre. Par conséquent, je vous encourage à lire les autres articles du Macromedia Developer Center sur CSS* qui vous aideront à mieux comprendre les avantages du CSS et vous apprendront l'ensemble du processus d'utilisation du CSS dans vos conceptions. Je reviendrai avec plus de tutoriels CSS dans les semaines et mois à venir. C'est tout pour écrire ici, j'espère que vous apprécierez utiliser nos styles.


À propos de l'auteur
Greg Rewis est le principal évangéliste de Macromedia en matière de technologies Web. Greg est le porte-parole public de Macromedia pour la suite logicielle Macromedia et le serveur de développement d'applications Web distribués sur le Web, et représente les intérêts des milliers de clients de l'entreprise auprès des organisations de développement de produits. Greg sait exactement ce que pensent les clients de Macromedia car il est « sur la route » 200 jours par an, discutant avec les clients, faisant des démonstrations de produits lors de salons professionnels, de séminaires et de conférences, et organisant des sessions de formation avancées dédiées à la gamme de produits Macromedia. Greg voyage constamment à travers le monde, mais lorsqu'il ne travaille pas, il profite de la vie dans le désert de l'Arizona, joue au golf et enseigne à ses deux fils l'art de « se détendre dans la piscine ».