zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Entwicklungstool = Druckvorschau / TIPP

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.09.2004, 23:40
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard 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
Code:
@media screen {.....}
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
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.....
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.09.2004, 14:29
Benutzerbild von magick
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.09.2004
Ort: Hamburg
Beiträge: 302
magick befindet sich auf einem aufstrebenden Ast
Standard

schneller gehts mit der Web Developer Extension für'n Mozilla/Firefox (disable styles)- sehr empfehlenswertes tool!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.09.2004, 15:22
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
toscho.de
Mit Zitat antworten
  #4 (permalink)  
Alt 26.09.2004, 22:22
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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

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.
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 26.09.2004, 23:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Ich finde, der Thread gehört in die Knowledge Base - nun ist wirklich viel zusammengetragen worden!
Mit Zitat antworten
  #6 (permalink)  
Alt 26.09.2004, 23:52
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

verschoben
Mit Zitat antworten
  #7 (permalink)  
Alt 27.09.2004, 22:07
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Nur noch zur Vervollständigung:

Mit dem Style-TAG geht oben genanntes Beispiel natürlich auch

<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>
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 03.10.2004, 06:41
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.566
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
toscho.de
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Druckvorschau Anfahrtseite hubspe CSS 4 11.04.2014 18:40
Probleme mit PopUp-Fenster für Druckvorschau Hasso Javascript & Ajax 4 24.09.2009 19:52
druckvorschau in popupfenster monkderhonk Javascript & Ajax 1 17.02.2007 04:04
page-break-after: Umbruch-Problem in Druckvorschau STRiDeR CSS 0 18.01.2007 10:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:49 Uhr.