Pemahaman menyeluruh tentang CSS_CSS/HTML

Sejak keluaran Dreamweaver MX 2004, saya telah menunjukkan ciri dan fungsi baharunya berkali-kali kepada pengguna Dreamweaver baharu dan sedia ada. Setiap kali saya memberikan tunjuk cara produk, saya cepat memuja tentang keupayaan baharu Dreamweaver MX 2004 untuk mereka bentuk dan memaparkan CSS (atau Cascading Style Sheets). Artikel ini memberikan pemahaman yang terperinci dan komprehensif tentang CSS.

Namun, baru-baru ini pengguna baharu bertanyakan soalan Sejujurnya, soalan ini membuatkan saya terdiam. Pengguna ini hanya bertanya, "Mengapa saya perlu menggunakan CSS?" Saya menyedari pada ketika itu bahawa walaupun kita yang bekerja dengan HTML dan CSS setiap hari mengetahui dengan baik tentang faedah CSS, masih ramai orang yang tidak. Atau mungkin tidak menyedari sepenuhnya semua faedah yang ditawarkan oleh CSS. Artikel ini adalah jawapan bertulis saya kepada pengguna baharu di atas.

Asal-usul CSS
Sebelum mengkaji kelebihan CSS, saya ingin memperkenalkan sejarahnya. Organisasi pengurusan Web W3C mengesyorkan penggunaan CSS pada November 1996 dan meluluskan spesifikasi CSS Tahap 1. Spesifikasi CSS Tahap 1 menerangkan sifat yang digunakan dalam halaman HTML. Sifat ini menggantikan teg fon tradisional dan teg "gaya" lain seperti warna dan jidar. Pada Mei 1998, W3C meluluskan spesifikasi CSS Tahap 2, menambah beberapa fungsi tambahan pada spesifikasi Tahap 1 dan memperkenalkan atribut penentududukan. Sifat ini menggantikan penggunaan biasa (tetapi tidak betul) bagi teg jadual untuk mereka bentuk pembentangan elemen halaman. Versi terkini spesifikasi CSS ialah CSS 2.1, yang menambah baik sifat tertentu dan mengalih keluar sifat yang tidak mempunyai kesan atau sedikit dalam penyemak imbas semasa.

Malangnya, seperti kebanyakan teknologi baharu, CSS mengambil masa yang lama untuk diterima pakai secara meluas. Sebab besar untuk ini terletak pada penyemak imbas, dan pereka web yang membina tapak untuk penyemak imbas tersebut. Semasa tempoh pengesahan CSS, Netscape Navigator (NN) masih menjadi penyemak imbas yang dominan, dan CSS sebahagian besarnya tidak disokong oleh penyemak imbas tersebut. Microsoft menambah sokongan yang sangat terhad untuk CSS dalam versi 3 penyemak imbasnya, tetapi kebanyakan pereka web pada masa itu (termasuk saya sendiri) masih mengekodkan halaman mereka dalam NN sebagai platform pilihan.

Selama bertahun-tahun, pembuat penyemak imbas telah mengembangkan sokongan untuk CSS dengan setiap versi baharu. Hari ini, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera dan Safari semuanya mempunyai sokongan penuh untuk CSS. Tetapi itu tidak bermakna kerjaya kami sebagai pereka web dan pembangun bukan tanpa masalah. Walaupun semua penyemak imbas di atas menyokong Tahap 2 CSS, tahap keserasian mereka berbeza-beza. Dan dalam beberapa kes, sifat tertentu masih boleh menyebabkan anda banyak masalah. Walau bagaimanapun, anda masih perlu mematuhi kredo lama "ujian dan ujian."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 rendu. 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 de votre 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 ».Beim Webdesign kann das gleiche Problem auftreten, wobei sich die Hinweise hier natürlich auf den eigentlichen HTML-Code beziehen. Je mehr Code vorhanden ist, desto länger dauert es, bis der Browser die Seite versteht.

Vielleicht haben Sie Gerüchte über offizielle Apps gehört, sie sind schlecht codiert und voller komplexer Informationen, dennoch wird die Dokumentationsseite nicht gerendert. Als Dreamweaver-Benutzer haben Sie dieses Problem nicht, aber Sie machen sich schuldig, wenn Sie zu viel Code schreiben. Ein klassisches Tischdesign ist ein gutes Beispiel.

Wenn Sie CSS in Ihren Designs verwenden, reduzieren Sie die Menge an Code, die Ihre Kunden herunterladen müssen. Durch einfaches Reduzieren der Schriftart-Tags auf bestimmten Seiten kann die Codemenge erheblich reduziert werden. In vielen Fällen kann die Codemenge um bis zu 50 % oder mehr reduziert werden, wenn der Code vollständig mit CSS-P entworfen wird. Weniger Code bedeutet schnellere Seitendownloads.

Barrierefreiheit
Heutzutage höre ich oft Leute über Barrierefreiheit reden. Die meisten Entwickler wissen, dass sie darüber nachdenken müssen, besser zugängliche Websites zu erstellen, aber in größerem Umfang sind nur Entwickler, die Websites für Regierungen oder Bildungseinrichtungen erstellen, dazu gezwungen, dies tatsächlich zu tun. Wenn es um Barrierefreiheitsprobleme geht, denken die meisten Entwickler, dass dies lediglich bedeutet, dass das Alt-Attribut zu Grafiken hinzugefügt werden muss. Aber in Wirklichkeit können Sie viel tun, um die Barrierefreiheit zu verbessern, und CSS macht es einfach, eine barrierefreie Website zu erstellen.

Das Hauptproblem bei der Barrierefreiheit (und eines, das mithilfe von CSS gelöst werden kann) besteht darin, wie unterstützende Technologien (z. B. Bildschirmleseprogramme) die Seite „lesen“. In traditionellen tabellenbasierten Umgebungen stehen Screenreader vor einer großen Herausforderung bei der Entscheidung, wie die Seite gelesen werden soll. Denken Sie darüber nach, wie verwirrt ein Bildschirmleser wäre, wenn er auf eine stark mosaikierte Tabelle stößt. Sollte er den Inhalt lesen oder ihn überspringen? Wie kann ich nach dem Überspringen von Inhalten später zum Inhalt zurückkehren?

Wenn Sie auf eine Seite klicken, sehen Sie schnell den Inhalt der Seite, der Sie interessiert, und ignorieren dabei die Navigation und andere Inhalte oben auf der Seite. Menschen mit Sehschwäche können dies nicht tun. Er muss warten, bis der Screenreader alle komplexen Informationen zwischen dem oberen Rand der Seite und dem Inhalt, der ihn interessiert, analysiert.

Natürlich gibt es Techniken, die es Screenreadern ermöglichen, die Navigation zu überspringen, aber dazu ist das Hinzufügen eines Links im Bild der Navigationsleiste oder eines anderen Inhalts erforderlich. Der Betrieb dieser Technologien kann für andere Besucher der Website verwirrend und sichtbar sein. Mithilfe von CSS können Sie unsichtbare Elemente auf Ihrer Seite vollständig definieren (unsichtbar für andere Website-Besucher und Ihre Maus). Screenreader können diese Elemente nutzen, um schnell zu navigieren und effizient mit Dokumenten zu arbeiten.

Da CSS kein Markup anzeigt, haben Screenreader nur Probleme mit dem eigentlichen Inhalt. Wenn Sie mit CSS-P entwerfen, konzentrieren Sie sich außerdem auf den tatsächlichen „Fluss“ Ihrer Inhalte. Sie fangen an, über die logische Reihenfolge auf der Seite nachzudenken.

Wenn Sie dieses Dokument lesen, verstehen Sie den „Informationsfluss“. Wenn Sie jedoch im Beispiel der Mosaiktabelle ein mehrspaltiges Layout verwenden, befindet sich dieser Absatz höchstwahrscheinlich in der oberen rechten Ecke der Seite. Auf diese Weise weiß der Bildschirmleser nicht, dass er diesen Absatz am Ende des Artikels lesen soll.

Nach der Verwendung von CSS-P zeigt der Browser diesen Absatz möglicherweise immer noch in der oberen rechten Ecke des Browserfensters an. Wenn Sie jedoch den Quellcode des Dokuments anzeigen, ist der Absatz im HTML-Code des Dokuments immer noch vorhanden was Sie jetzt sehen, zum Standort. Dadurch wird die Seite leichter zugänglich.

Zusammenfassung und Plan
Das Obige ist meine Antwort. Ich hoffe, ich habe die einzigartigen Vorteile der Verwendung von CSS für Webdesign erklärt. Offensichtlich gibt es viel zu lernen. Deshalb empfehle ich Ihnen, die anderen Artikel des Macromedia Developer Center zu CSS* zu lesen, die Ihnen helfen, die Vorteile von CSS besser zu verstehen und Ihnen den gesamten Prozess der Verwendung von CSS in Ihren Designs beizubringen. Ich werde in den kommenden Wochen und Monaten mit weiteren CSS-Tutorials zurück sein. Das war’s mit dem Schreiben hier. Ich wünsche Ihnen viel Spaß mit der Verwendung unserer Stile.


Über den Autor
Greg Rewis ist Macromedias führender Evangelist für Web-Technologien. Greg ist Macromedias öffentlicher Sprecher für die im Internet verbreitete Macromedia-Software-Suite und den Webanwendungsentwicklungsserver und vertritt die Interessen der Tausenden Kunden des Unternehmens bei Produktentwicklungsorganisationen. Greg weiß genau, was Macromedia-Kunden denken, denn er ist 200 Tage im Jahr „unterwegs“, spricht mit Kunden, führt Produkte auf Messen, Seminaren und Konferenzen vor und organisiert Fortbildungen rund um die Macromedia-Produktlinie. Greg fliegt ständig um die Welt, aber wenn er nicht arbeitet, genießt er das Leben in der Wüste von Arizona, spielt Golf und bringt seinen beiden Söhnen die Kunst bei, „im Pool zu entspannen“.