Entwicklungstool = Druckvorschau / TIPP
Hallo zusammen,
ich habe einen TIPP für alle die nicht nur schöne Sites mit CSS entwickeln wollen, sondern auch eine saubere semantik im Dokument haben möchten. Einfach wie immer nur CODE-Schnippsel entwickeln, damit dies schnell geht nimmt man dazu eingebettetes CSS. ;) Dieses wird aber nur für den SCREEN zugänglich gemacht :arrow: Code:
@media screen {.....} Dabei wird auch sofort deutlich wann eine Tabelle Sinn macht und wann nicht. Oder wie das Dokument für einen Screenreader erscheint. Hier habe ich mal ein typisches Beispiel :arrow: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
schneller gehts mit der Web Developer Extension für'n Mozilla/Firefox (disable styles)- sehr empfehlenswertes tool!
|
Ulle, dein Vorgehen finde ich nicht besonders sinnvoll:
1. IE 5 Mac kann keine @-Rules, spätestens für den Normaleinsatz muß man das wieder ändern. 2. In der Druckvorschau will ich das Ergebnis meines Druckstylesheets sehen, sonst ist etwas gründlich schief gelaufen. 3. Du kannst Stylesheets auch anders deaktivieren. In Opera Strg+G, in Mozilla unter »View/Stylesheet«, wenn du deinem Stylesheet ein benanntes TITLE-Attribut mitgegegeben hast (was man immer tun sollte). Für den IE gibt es Bookmarklets. 4. Ein Screenreader liest nicht unbedingt den blanken HTML-Code aus, das ist ein oft übersehenes Problem. Was du mit »display:none« versteckt hast, bekommt auch der Screenreader oft nicht mehr mit. Gruß Thomas |
Zitat:
Zitat:
Zitat:
Code:
@media screen { /* Druckvorschau ohne Style */ Zitat:
Zitat:
================= Ohne CSS wird jedem auf Anhieb klar was er da "zusammengezimmert" hat. Wichtig sind auch die Suchmaschinen, und die bekommen genau das zu lesen :idea: Nett das Ihr Euch dazu geäußert habt, Alternativen aufgezeigt habt. Dies ist auch nur ein Vorschlag für alle die nicht so Umfangreich im Thema sind. |
Ich finde, der Thread gehört in die Knowledge Base - nun ist wirklich viel zusammengetragen worden!
|
verschoben ;)
|
Nur noch zur Vervollständigung:
Mit dem Style-TAG geht oben genanntes Beispiel natürlich auch :arrow: <style type="text/css" media="screen" > Code:
<style type="text/css" media="screen" title="Druckvorschau ohne Style " > |
Das Media-Attribut für <style> wird nur sehr schlecht unterstützt, d.h. oft ignoriert. Wenn man nach dem testen so wichtige Sachen nochmal umschreiben muß, ist der Test nicht mehr viel wert, finde ich.
Gruß Thomas |
Alle Zeitangaben in WEZ +2. Es ist jetzt 11:27 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023