XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Entwicklungstool = Druckvorschau / TIPP (http://xhtmlforum.de/showthread.php?t=33277)

ulle 25.09.2004 23:40

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 {.....}
:idea: So ist mit einem schnellen Blick in die Druckvorschau sichtbar wie das Dokument ohne CSS aussieht.
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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Entwicklungstool = Druckvorschau  /  TIPP </title>

<style type="text/css">       
/*<![CDATA[*/

@media screen { /* Druckvorschau ohne Style */

html,body        {
        margin: 0;
        padding: 0;
        background-color: #f2efc4;
        color: #000000;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 100.01%;
}

a { text-decoration: none; } 
 
#menu {
    position: relative;
    margin: 50px 8px 0px 8px;
    border: 1px solid #000000;
    padding: 0;
    background-color: #FFCC33;
}
 
 
#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#menu ul li {
    margin: 0;
    padding: 0 5px;
    display: inline;
}
 
#menu strong {display: none;}
 
} /* Ende | Druckvorschau ohne Style */

/*]]>*/
</style>

</head>
<body>

<div id="menu">Navigation
        <ul>
        [*]hier
        [*]kommt
        [*]dann
        [*]die
        [*]navigation
        [/list]</div>

</body>
</html>

einfach kopieren und mal mit Druckvorschau ansehen..... ;)

magick 26.09.2004 14:29

schneller gehts mit der Web Developer Extension für'n Mozilla/Firefox (disable styles)- sehr empfehlenswertes tool!

toscho 26.09.2004 15:22

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

ulle 26.09.2004 22:22

Zitat:

schneller gehts mit der Web Developer Extension für'n Mozilla/Firefox (disable styles)- sehr empfehlenswertes tool!
Schneller geht es auch mit meinem Editor... ;)


Zitat:

1. IE 5 Mac kann keine @-Rules, spätestens für den Normaleinsatz muß man das wieder ändern.
Für den Normaleinsatz ist es auch nicht gedacht, und die wenigsten entwickeln mit einem MAC
Zitat:

In der Druckvorschau will ich das Ergebnis meines Druckstylesheets sehen, sonst ist etwas gründlich schief gelaufen
Ich will auch in der Druckvorschau mein Ergebnis des Druckstylesheets sehen, aber davon habe ich ja nicht gesprochen/geschrieben.
Code:

@media screen { /* Druckvorschau ohne Style */
Zitat:

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.
Das sind sehr gute Alternativen ......
Zitat:

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.
Okay, habe ich mir gedacht.



=================

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.

terrikay 26.09.2004 23:37

Ich finde, der Thread gehört in die Knowledge Base - nun ist wirklich viel zusammengetragen worden!

hemfrie 26.09.2004 23:52

verschoben ;)

ulle 27.09.2004 22:07

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 " >   
/*<![CDATA[*/

html,body  {
  margin: 0;
  padding: 0;
:
:
:

/*]]>*/
</style>


toscho 03.10.2004 06:41

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