Standardeinstellungen in CSS?

[Karl-Heinz]

Hallo,
wie kann ich mir im IE, im FF und in Opera die Standardeinstellungen (margin,padding.font etc.) der tags (h1, h2, ...p, div, etc.)
anzeigen lassen?
Danke
K-H

[suit]

Hallo,
wie kann ich mir im IE, im FF und in Opera die Standardeinstellungen (margin,padding.font etc.) der tags (h1, h2, ...p, div, etc.)
anzeigen lassen?

IE: Entwicklertools
Firefox: FireBug
Opera: Dragonfly

[Karl-Heinz]

Hallo,

IE: Entwicklertools
Firefox: FireBug
Opera: Dragonfly

Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

Vielleicht stelle ich besser noch die Zusatzfrage:
Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?
Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

[Der Martin]

Hi,

IE: Entwicklertools
Firefox: FireBug
Opera: Dragonfly
Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

Firebug für FF ist ein Add-On, bei IE und Opera sind die erwähnten Tools inclusive.

Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?

Validen, also standardkonformen Code schreiben. Der erzeugt in aktuellen Browsern schon mal weitgehend vergleichbare Ergebnisse. Kleine Darstellungsunterschiede in den einzelnen Browsern einfach akzeptieren; größere, nicht hinnehmbare Unterschiede mit Hacks für bestimmte Browser gezielt angehen.
Erfordert natürlich, dass man das Werk auch regelmäßig in mehreren Browsern testet.

Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

Nein. Als Faustregel kann aber gelten: Alle Darstellungs-Eigenschaften, die dir als Autor wichtig sind, solltest du explizit angeben. Alle Angaben, die du weglässt, überlässt du dem Browser als Freiheitsgrad - sei es bewusst oder versehentlich. Setze die Defaulteinstellungen deiner Testbrowser auf möglichst abenteuerliche Werte, damit dir sofort auffällt, wenn irgendwo der Browser-Default wirksam wird. Zum Beispiel orangefarbener Hintergrund oder eine auffällige Schriftart.

So long,
 Martin

[Beat]

Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?
Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

Es gibt die Praxis, für wenige Elemente Standardisierungen vorzunehmen:
http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

inline-replaced Elemente wie Formular-Felder sollte man besser nicht normalisieren.

mfg Beat

[suit]

Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?
Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

Es gibt die Praxis, für wenige Elemente Standardisierungen vorzunehmen:
http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

Du bezeichnest es als guten Stil li-Elemente auf "block" zu normalisieren?

Ich hab z.B. für das allgemeine Schriftbild folgendes im Einsatz - das führt zu einem sauberen Ergebnis in IE6 aufwärts sowie in anderen Browsern:

Besonders die margins nach unten sind imho wichtig, mache browser haben z.B. bei p-Elementen unterschiedliche Auffassungen: oben und unten, nur unten usw. Wenn man bei "absatzbildenden Elementen" einheitliche Außenabstände nach unten definiert, bekommt man kaum Probleme. Die einzige ausnahme Stellen umrahmte Bereiche dar, deren padding kleiner ist, als der untere Außenabstand dieser Elemente - das muss man halt dann mit einem section *:last-child { margin-bottom: 0; } oder ähnlichem fixen. Auf IE6 und 7 wird "gschissn" :p

  
p,  
ul,  
ol,  
dl,  
blockquote,  
address {  
	padding: 0;  
	margin: 0 0 1.5em 0;  
}  
  
ul ul,  
ul ol,  
ul dl,  
ol ul,  
ol ol,  
ol dl,  
dl ul,  
dl ol,  
dl dl {  
	margin-bottom: 0;  
}  
  
ol {  
	margin-left: 2em;  
}  
  
ul {  
	list-style: none;  
	margin-left: 0.5em;  
}  
  
dt,  
dd,  
li {  
	padding: 0;  
	margin: 0;  
}  
  
ul li {  
	background: url(../img/li.png) no-repeat left .1em;  
	padding-left: 1.5em;  
}  
  
dt {  
	font-weight: bold;  
}  
  
dd {  
	margin-left: 2em;  
}  
  
blockquote {  
	font-style: italic;  
	padding-left: 2em;  
}  

[Beat]

Es gibt die Praxis, für wenige Elemente Standardisierungen vorzunehmen:
http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

Du bezeichnest es als guten Stil li-Elemente auf "block" zu normalisieren?

Nein, das kann man wahlich nicht als guten Stil bezeichnen und das wird auch korrigiert!

mfg Beat

[ChrisB]

Hi,

IE: Entwicklertools
Firefox: FireBug
Opera: Dragonfly
Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

Aber Google bedienen kriegst du hin?

Vielleicht stelle ich besser noch die Zusatzfrage:
Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?

In dem man einfach zu allen CSS-Eigenschaften, die einem wichtig sind, explizite Angaben macht.

Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

Stichwort: Reset-CSS.
(Bitte auch über die Kritikpunkte an diesem Vorgehen informieren.)

MfG ChrisB

[suit]

Hallo,

IE: Entwicklertools
Firefox: FireBug
Opera: Dragonfly
Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

Die Entwicklertools sind Bestandteil des Internet Explorer ab Version 8, also keine Erweiterung.

FireBug ist eine Erweiterung

Opera ist "beides", einerseits benötigt man dafür das Debugmenü deren Kernfunktionalitäten bereits integriert sind, aber nur nicht sichtbar. Andererseits werden die Quelldaten direkt Online bereitgestellt.

Vielleicht stelle ich besser noch die Zusatzfrage:
Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?

HTML-Dokumente ohne CSS müssen nicht gleich aussehen, das war nie so vorgesehen und wird vermutlich auch nie so sein.

Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

Von welchen Darstellungsabweichungen reden wir? Ist das Kerning der Schrift etwas anders? Ist der Gepunktete Rahmen in einem Browser anders gepunktet als im anderen?

Viele Sachen lassen sich vereinheitlichen, es gibt dafür "Reset-Stylesheets" aber man muss da trotzdem über "alles" drüber und läuft Gefahr, Sachen zu übersehen an die man nicht denkt. "exotische" Elemente wie sub, sup, cite oder blockquote werden z.B. gerne vergessen aber trotzdem mal einfach im Reset-Stylesheet zurückgesetzt.

Die bessere Wahl ist, alles sauber durchzuformatieren - und alles was man "vergisst" hat halt Standardformatierung.

[Ulysses]

Hi!

Firefox: FireBug

Bei FF gibt es auch die Mglichkeit
resource://gre/res/html.css
in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

FG Ulysses

[suit]

Bei FF gibt es auch die Mglichkeit
resource://gre/res/html.css
in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

Das ist aber nicht alles - es gibt z.B. noch quirk.css (für die Korrekturen im Quirksmode). Oder forms.css für die Formatierung der Formularelemente, die sind in html.css nicht enthalten.

Dasselbe findet sich übrigens auch im Filesystem unter %ProgramFiles%\Mozilla Firefox\res bzw. unter %ProgramFiles(x86)%\Mozilla Firefox\res bei 64-Bit-Windowsen mit 32-Bit-Fuchs.

[Beat]

Bei FF gibt es auch die Mglichkeit
resource://gre/res/html.css
in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

Zitat aus eben diesem File:

/* 3 deep (or more) unordered lists use a square */  
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,  
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,  
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,  
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,  
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,  
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,  
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,  
menu ol menu, menu ul menu, menu menu menu, menu dir menu,  
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,  
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,  
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,  
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {  
  list-style-type: square;  
}  

48 Selektoren (4*4*3)
Kopfkratz, was wenn jetzt neue Elemente in diese Regel integriert werden müssen?

mfg Beat

[suit]

Bei FF gibt es auch die Mglichkeit
resource://gre/res/html.css
in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

Zitat aus eben diesem File:

/* 3 deep (or more) unordered lists use a square */

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

> 48 Selektoren (4\*4\*3)  
> Kopfkratz, was wenn jetzt neue Elemente in diese Regel integriert werden müssen?  
  
dir und menu sind deprecated, dafür kommt über kurz oder lang vermutlich nav "davor"  
  
warum man menu in HTML5 nicht behalten hat und dafür "nav" zusätzlich erfunden hat, erschließt sich mir aber ohnehin nicht.

[Beat]

warum man menu in HTML5 nicht behalten hat und dafür "nav" zusätzlich erfunden hat, erschließt sich mir aber ohnehin nicht.

Ein Menu ist in meinem Verständnis etwas anderes als eine Navigation.
In der Navigation navigiere ich durch eine Website.
Ein Menu aber ist überwiegend eine Ansammlung von lokalen Funktionen.

http://www.w3.org/TR/html5/interactive-elements.html#menus

Das scheint auch die Auffassung des HTML5 lebendigen Drafts zu sein

mfg Beat

[Daniel.S]

Grüße dich Beat,

http://www.w3.org/TR/html5/interactive-elements.html#menus

Das scheint auch die Auffassung des HTML5 lebendigen Drafts zu sein

Es gibt keinen "HTML5 lebendigen Draft". Es gibt den Entwurf der HTML5-Spezifikation, auf den du verlinkt hast und ein ähnliches Dokument bei der WHATWG, das als "HTML Living Standard" bezeichnet wird.

Gruß, Daniel

[Gunnar Bittersmann]

@@suit:

nuqneH

warum man menu in HTML5 nicht behalten hat und dafür "nav" zusätzlich erfunden hat, erschließt sich mir aber ohnehin nicht.

Weil sie unterschiedlich sind?

'menu' dient(e) als Container für ausschließlich 'li'-Elemente. [HTML401]

'nav' dient als Container für verschiedene Elemente. Darin kann außer den Links durchaus auch eine Überschrift enthalten sein. [HTML5]

Qapla'

[suit]

'menu' dient(e) als Container für ausschließlich 'li'-Elemente. [HTML401]

'nav' dient als Container für verschiedene Elemente. Darin kann außer den Links durchaus auch eine Überschrift enthalten sein. [HTML5]

Hätte eine Erweiterung der Defintion nicht gereicht? So wie die Navigationslisten die in XHTML 2.0 vorgesehen waren?

[Gunnar Bittersmann]

@@suit:

nuqneH

Hätte eine Erweiterung der Defintion nicht gereicht? So wie die Navigationslisten die in XHTML 2.0 vorgesehen waren?

HTML5 und irgendwas aus XHTML 2.0 übernehmen? Sie belieben zu scherzen?

Qapla'

[Karl-Heinz]

Hallo,

wie kann ich mir im IE, im FF und in Opera die Standardeinstellungen (margin,padding.font etc.) der tags (h1, h2, ...p, div, etc.)
anzeigen lassen?

IE: Entwicklertools
Firefox: FireBug
Opera: Dragonfly

Im IE (8) finde ich unter den Entwicklertools nur das CSS für die aktuelle Seite, nicht aber die Std-Einstellungen.
Bin ich auf einem Auge blind?
Karl-Heinz

[suit]

Im IE (8) finde ich unter den Entwicklertools nur das CSS für die aktuelle Seite, nicht aber die Std-Einstellungen.

Binde einfach kein CSS ein und schau dir mit den Entwicklertools die Formatierung eines bestimmten Elements an - dann siehst du die Vorgabeeinstellungen.