Umfassendes Verständnis von CSS_CSS/HTML

Seit der Veröffentlichung von Dreamweaver MX 2004 habe ich die neuen Features und Funktionen unzählige Male neuen und bestehenden Dreamweaver-Benutzern vorgeführt. Jedes Mal, wenn ich eine Produktdemo gebe, schwärme ich schnell von den neuen Funktionen von Dreamweaver MX 2004 zum Entwerfen und Rendern von CSS (oder Cascading Style Sheets). Dieser Artikel bietet ein detailliertes und umfassendes Verständnis von CSS.

Ein neuer Benutzer hat jedoch kürzlich eine Frage gestellt. Ehrlich gesagt hat mich diese Frage sprachlos gemacht. Dieser Benutzer fragte einfach: „Warum sollte ich CSS verwenden?“ An diesem Punkt wurde mir klar, dass diejenigen von uns, die jeden Tag mit HTML und CSS arbeiten, sich der Vorteile von CSS bewusst sind, es aber immer noch viele Menschen gibt, die dies nicht tun. Oder vielleicht sind Sie sich der Vorteile, die CSS zu bieten hat, nicht vollständig bewusst. Dieser Artikel ist meine schriftliche Antwort an den neuen Benutzer oben.

Ursprünge von CSS
Bevor ich auf die Vorteile von CSS eingehe, möchte ich seine Geschichte vorstellen. Die Webmanagement-Organisation W3C empfahl im November 1996 die Verwendung von CSS und genehmigte die CSS Level 1-Spezifikation. Die CSS Level 1-Spezifikation beschreibt die in HTML-Seiten verwendeten Eigenschaften. Diese Eigenschaften ersetzen herkömmliche Schriftart-Tags und andere „Stil“-Tags wie Farbe und Ränder. Im Mai 1998 genehmigte das W3C die CSS-Level-2-Spezifikation, fügte der Level-1-Spezifikation einige zusätzliche Funktionen hinzu und führte das Positionierungsattribut ein. Diese Eigenschaften ersetzen die übliche (aber falsche) Verwendung von Tabellen-Tags zur Gestaltung der Darstellung von Seitenelementen. Die neueste Version der CSS-Spezifikation ist CSS 2.1, die bestimmte Eigenschaften verbessert und Eigenschaften entfernt, die in aktuellen Browsern keine oder nur geringe Auswirkungen haben.

Leider dauerte es wie bei vielen neuen Technologien lange, bis sich CSS weitverbreitet durchsetzte. Ein wichtiger Grund dafür liegt in den Browsern und den Webdesignern, die Websites für diese Browser erstellen. Während des CSS-Ratifizierungszeitraums war Netscape Navigator (NN) immer noch der dominierende Browser, und CSS wurde von diesem Browser weitgehend nicht unterstützt. Microsoft hat in Version 3 seines Browsers eine sehr begrenzte Unterstützung für CSS hinzugefügt, aber die meisten Webdesigner zu dieser Zeit (ich eingeschlossen) programmierten ihre Seiten immer noch in NN als bevorzugter Plattform.

Im Laufe der Jahre haben Browserhersteller mit jeder neuen Version die Unterstützung für CSS erweitert. Heutzutage bieten Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera und Safari volle Unterstützung für CSS. Das bedeutet jedoch nicht, dass unsere Karriere als Webdesigner und -entwickler nicht ohne Probleme verläuft. Obwohl alle oben genannten Browser CSS Level 2 unterstützen, variiert ihr Kompatibilitätsgrad. Und in manchen Fällen können Ihnen bestimmte Eigenschaften immer noch viel Ärger bereiten. Dennoch müssen Sie sich immer noch an das alte Credo „Testen und Testen“ halten.Wenn Sie sich jedoch an die Kerneigenschaften der CSS-Spezifikation halten, können Sie die Seite korrekt rendern.

Aber warum hatte das W3C das Bedürfnis, eine CSS-Spezifikation zu erstellen? Was bedeutet das alles für mich, wenn ich HTML-basierte Websites und Anwendungen erstelle? Meiner Meinung nach lassen sich die Gründe, warum wir CSS verwenden müssen, und die Vorteile, die es mit sich bringt, in die folgenden drei Hauptaspekte unterteilen: Flexibilität, Präsentation und Zugänglichkeit

Flexibilität
Ich bin sicher, dass fast jeder Webdesigner und -entwickler diesen schmerzhaften Moment erlebt hat: Nachdem Sie die Seite sorgfältig gestaltet und alle verschachtelten Tabellen ausgefüllt haben, bittet der Kunde um eine „kleine“ Änderung. Diese kleine Änderung kann so einfach sein wie „Können Sie die Grafik ein wenig nach links verschieben?“ oder sie kann so dramatisch sein wie „Mir gefallen diese Titel nicht, können sie größer gemacht werden? Wenn Sie die Schriftart ändern.“ Wie wäre es, wenn Sie die Farben ändern würden? Aber wenn es um größere Websites geht (und das ist bereits üblich), ist eine einfache Änderung ohnehin nicht so einfach.

Warum ist diese Situation so schmerzhaft? Denn das Markup, das das Erscheinungsbild der Seite definiert, ist selbst Teil der Seite. Um ein Beispiel zu sehen, gehen Sie einfach auf eine beliebige Seite einer beliebigen Website und zählen Sie die Anzahl der Schriftart- und Tabellen-Tags. Solange Sie diese Tags aus dem Ablauf (oder Code) der eigentlichen Seite entfernen oder, noch besser, externalisieren können, können Sie zentralisierte Änderungen vornehmen. Und genau das kann CSS.

Wenn Sie ein oder mehrere externe Stylesheets verwenden, können Sie die Änderungen auf Ihre Website anwenden, indem Sie die Stylesheets ändern und dann die geänderten Versionen hochladen.

Stellen Sie sich vor, wie schwierig es wäre, die Site-Navigation in einem herkömmlichen tabellenbasierten Layout von der linken Seite auf die rechte Seite zu verschieben. Dies erforderte mehrere Stunden repetitiver und langwieriger Arbeit. Wenn Sie sich jedoch dafür entscheiden, Ihre Seite mit den Positionierungseigenschaften von CSS (oft als CSS-P bezeichnet) zu gestalten, können Sie die Seite einfach aktualisieren, indem Sie die Float- oder Position-Eigenschaften im externen Stylesheet ändern. Und hier liegt der zusätzliche Vorteil: Sie aktualisieren alle Seiten Ihrer Website, die diesen Stil verwenden.

Präsentabilität
Aufgrund der weit verbreiteten Nutzung von Breitband berücksichtigen viele Entwickler nicht mehr den Zeitaufwand für das Rendern von Seiten im Browser. Sie sollten jedoch bedenken, dass viele Zielbenutzer immer noch DFÜ-Verbindungen verwenden. Das traditionelle tabellenbasierte Layout ist der Hauptgrund für langsame Seiten-Download-Geschwindigkeiten. Denn wenn der Browser die Seite vom Server empfängt, muss er zunächst eine Reihe komplexer Mosaiktabellen untersuchen und „verstehen“. Es muss zuerst den innersten eingebetteten Inhalt finden und dann den Code sorgfältig durchgehen, bis er den äußersten Container, den Body-Tag, erreicht. Nachdem alle oben genannten Prozesse abgeschlossen sind, kann der Browser mit der Darstellung von Inhalten auf dem Bildschirm beginnen.

Wenn Sie CSS verwenden, kann der Browser den Rendervorgang sofort nach Erhalt des Inhalts vom Server starten, da auf der Seite kein oder nur sehr wenig Anzeige-Markup vorhanden ist.

Die Verwendung externer Stylesheets bietet auch potenzielle Rendering-Vorteile. Bei einem herkömmlichen tabellenbasierten Ansatz muss der Browser jede Seite einzeln abrufen, analysieren und rendern. Das heißt, der Browser verbringt genauso viel Arbeit damit, Seite 30 Ihrer Website anzuzeigen wie Seite 1.

Wenn jedoch ein externes Stylesheet für die Anzeige verwendet wird, fordert die erste Seite der Website den Browser auf, die von der Seite verwendete verknüpfte Stylesheet-Datei zwischenzuspeichern. Das bedeutet, dass alle nachfolgenden Seiten Ihrer Website, die das obige Stylesheet verwenden, schneller heruntergeladen werden, da der Browser das Stylesheet bereits zwischengespeichert hat.

Der letzte Vorteil im Zusammenhang mit der Präsentation erinnert mich an den Film „Mozart“. Im Film fragt Mozart den König, was er von seiner Oper halte. Der König sagte, es sei gut, aber langweilig. Mozart drängte immer wieder, und der König erklärte, das Problem liege in „zu vielen Noten“.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 ».