Frage zum Umgang mit dem "html" - Tag

RollingStones · #1 (**permalink**) 17.08.2007, 21:19

Hoi,

hier wird ja sehr oft der Tipp gegeben, erst einmal alle browserabhängigen Abstände exlizit mit CSS auf 0 zu setzen, undzwar so:

Code:

* { margin: 0; padding: 0; }

Damit wäre dann ja auch der body und html-Tag eingeschlossen oder?
Problem dabei nur, dass ja so auch die Abstände von p-Tags entfernt sind zum Beispiel!

Sollte man den body- und html-Tag zusammen definieren, also so:

Code:

html, body {
margin:0;
padding:0;
text-align:left;
width:100%;
height:100%;
color:#000000;
font-size:0.85em;
font-family:Arial, Helvetica, sans-serif;
background-image:url(background.jpg);
}

???

Oft liest man auch davon, dass man diesen beiden Tags jeweils 100% Höhe bzw. Breite geben soll, wie oben geschehen. Stimmt das?

IChao · #2 (**permalink**) 17.08.2007, 23:26

Diesen Reset mit dem Universal-Selektor macht man, weil die margins und paddings von Elementen wie h1, h2 ..., p, ul, li ... bei den einzelnen Browsern nicht gleichgroß voreingestellt sind. Oft wird das vergessen, und Listen sehen dann ganz anders aus, um ein Beispiel zu nennen.

Deswegen erst einmal alles auf Null setzen, danach neu aufbauen.

Richtig, margin und padding von p müssen dann erst wieder von dir auf irgendwelche Werte gesetzt werden, die du für sinnvoll erachtest.

Wenn du jetzt bloß für html, body die margins und paddings setzt, ist das Problem für p, ul usw. noch nicht gelöst.

Das mit den 100% Höhe wird erst dann interessant, wenn ein späteres Element sich auf die Höhe von html beziehen will. Ein Beispiel ist die footerStickAlt-Methode. 100% Höhe ist also methodenspezifisch.

ArcVieh · #3 (**permalink**) 18.08.2007, 00:14

Ich habe gelesen, dass der IE padding für ul verwendet und FF und Opera margin für ul, ein Grund mehr, wieso man margin und padding auf Null setzten sollte (kann auch sein, dass es andersherum war).

heiko_rs · #4 (**permalink**) 18.08.2007, 01:10

Zitat:

Zitat von RollingStones

Sollte man den body- und html-Tag zusammen definieren, also so:

Code:

html, body {
margin:0;
padding:0;
text-align:left;
width:100%;
height:100%;
color:#000000;
font-size:0.85em;
font-family:Arial, Helvetica, sans-serif;
background-image:url(background.jpg);
}

Nein, nach Einsatz des Universalselektors braucht html allenfalls noch height: 100%; (siehe Ingo), alles andere ist überflüssig (Hintergrundbilder sollte man html sogar gar nicht zuweisen, u.a. wegen IE 5.x), daher muß html auch meist nur im Fall von height: 100%; überhaupt im CSS auftauchen.

Für body sind width: 100%; und text-align: left; überflüssig (ersteres ist im Falle von padding/margin für body sogar kontraproduktiv).

pmmueller · #5 (**permalink**) 19.08.2007, 00:01

Zitat:

Zitat von RollingStones

Code:

* { margin: 0; padding: 0; }

Der Reset ist unbedingt empfehlenswert. Hier ein Vorschlag für eine Restaurierung der wichtigsten Abstände:

Code:

/* ===================
    Abstände restaurieren */

h1, h2, h3, h4, h5, h6, 
p, blockquote, address, pre,
ul, ol, dl, table {
   margin-bottom: 1em;
}

/* Optional */ 
h1, h2, h3, h4, h5, h6 { padding-top: 1em; }

/* Zitate einrücken */
blockquote { margin: 1em 2em; }

/* Auswahl in Auswahllisten (select) durch padding:0 schlecht lesbar */
option { padding-left: 0.2em; padding-right: 0.3em; }

/* Alle Listen etwas einrücken */
ul, ol, dl { margin-left: 1em; }

/* Listenelemente etwas mehr einrücken */
li { margin-left: 1em; }

/* Definitionen in Definitionslisten noch mehr einrücken */
dd { margin-left: 2em; }

/* Verschachtelte Listen ohne Außenabstand oben/unten */
ul ul, ul ol, ul dl,
ol ul, ol ol, ol dl,
dl ul, dl ol, dl dl {
   margin-top: 0;
   margin-bottom: 0;
}

Irgendwas wichtiges vergessen?

Grüße aus Groningen
Peter

IChao · #6 (**permalink**) 19.08.2007, 00:33

Ich würde nicht unbedingt davon ausgehen, das das Universelle Reset noch Konsens ist. Dein Vorschlag des Universellen Reset plus Restaurierung ist für mich nicht einfacher zu verwenden als das Differenzierte Reset von Meyer. Und das bei Meyer bis zum Abwinken durchgesprochene Forms-Problem ist beim Universellen Reset so oder so betroffen (auch wenn nicht jeder glaubt, es gebe überhaupt ein Forms-Problem). Der dritte Weg, alles so zu lassen, wie es ist, um nur dann einzugreifen, wenn es stört, ist ein erprobter Weg. Wenn er auch Beginner oft in die Irre führt: Das heißt nicht, dass er schlecht wäre oder dass Beginner nichts daran lernen würden.

Persönlich tendiere ich dazu, das Differenzierte Reset zu predigen und selbst aber alles so zu lassen. Ich finde diese reset.css zu aufgeblasen. Ein paar von diesen Dingern, und schon kann man sich framework nennen.

heiko_rs · #7 (**permalink**) 19.08.2007, 02:34

Zitat:

Zitat von IChao

Der dritte Weg, alles so zu lassen, wie es ist, um nur dann einzugreifen, wenn es stört, ist ein erprobter Weg.

Aber nur für sehr erfahrene CSSler geeignet, und selbst die können nicht ausschließen, daß mal bei einem Besucher mit irgendeiner obskuren Browser-Version (mit eigenartigen defaults) ein Teil der betreffenden Seite zerhauen wird (aber genau deswegen rätst Du ja sicher auch zum Differenzierten Reset und nicht zum alles-lassen-wie-es-ist).

Ich finde das Deklarieren individueller Werte für die einzelnen Elemente allerdings nicht übermäßig aufgeblasen, denn ohne Globalen oder Differenzierten Reset sind unterm Strich wahrscheinlich ungefähr genauso oft einzelne Werte auf Null zu setzen, wie man mit Reset zu restaurieren hat.

pmmueller · #8 (**permalink**) 19.08.2007, 10:41

Zitat:

Zitat von IChao

Dein Vorschlag des Universellen Reset plus Restaurierung ist für mich nicht einfacher zu verwenden als das Differenzierte Reset von Meyer.

Für dich ist "Universell plus Restaurierung" nicht einfacher als "Differenziert ala Eric Meyer". Das glaube ich dir aufs Wort, aber du bist auch ein "sehr erfahrener CSSler"

Zitat:

Zitat von IChao

Der dritte Weg, alles so zu lassen, wie es ist, um nur dann einzugreifen, wenn es stört, ist ein erprobter Weg. Wenn er auch Beginner oft in die Irre führt: Das heißt nicht, dass er schlecht wäre oder dass Beginner nichts daran lernen würden.

Da stimme ich Heiko zu, das ist eher was für "erfahrene CSSler". Für Einsteiger finde ich ein reset.css effektiver. Man schreibt es einmal, bindet das immer wieder ein und muss sich um einen Großteil der Abstände keine Sorgen mehr machen.

Zitat:

Zitat von IChao

Ich finde diese reset.css zu aufgeblasen.

Universell plus Restaurierung wie oben beschrieben benötigt ungefähr gut 30 Zeilen. Differenzierter Reset ala Meyer hat über 40 nur für den Reset, OHNE Restaurierung.

Zitat:

Zitat von IChao

Ein paar von diesen Dingern, und schon kann man sich framework nennen.

Grins. Ich nenne das immer Fundament, weil man darauf bauen kann. Aber Framework klingt natürlich viel besser

Ciao
Peter

IChao · #9 (**permalink**) 19.08.2007, 20:09

Der Begriff "Differenziertes Reset" wird von mir hier eingeführt und meint Eric Meyers Reset sowie Yahoos Reset. Mit "Restauration" meine ich das hier im Thread vorgestellte Wiederherstellen nach Universellem Reset, und mit Universellem Reset meine ich

Code:

* {margin: 0; padding: 0}

Das Differenzierte Reset hat eine Grundannahme. Diese besagt, dass der Universelle Reset auch in Bereiche hineingreift, für die margin und padding nicht definiert sind: forms. Theoretisch kann dadurch etwas verändert werden, was man besser nicht getan hätte. Daher umgeht das Differenzierte Reset das universelle Nullen und greift per Element ein.

Ein Beispiel für das Problem des Universellen Reset ist die Select-Box mit size=1. Firefox schneidet nach dem Reset den letzten Buchstaben rechts unvorteilhaft der Länge nach durch, und fängt links zu knapp an. Mit padding: 0 0.5em 0 0.25em; sicher kein großes Problem.

Der Radio-Button sinkt im Firefox im Gegensatz zur Checkbox nicht auf die Grundlinie. Naja, auch kein wirkliches Problem.

Im Firefox wird der Submit- und der Reset-Button nur leicht, im Opera sehr stark abgeschnitten. Um das Problem im Opera mit Padding wieder zu beheben, riskiert man im IE7, dass der Button doch unschön breit wird. Und nu? Safari zeigt sich von all dem recht unbeeindruckt. Die Buttons sind schlank, kaum annähernd so breit wie im IE7 nach Padding-Kompensation für den Opera.

Die Restauration steht vor dem Problem, all diese form-Elemente, die vorher hübsch aussahen, wieder so hübsch hinzukriegen -- und zwar in allen OS, in allen Browsern. Das würde nur dann einfach sein, wenn alle Browser entweder das Stylen von form-Elementen erlauben oder untersagen würden. So, mit diesem Teils-Teils, ist das schwierig.

Weil es nicht definiert ist, wie form-Elemente darauf reagieren, kann man auch nicht wissen, was die nächste Serie an Browserversionen dazu sagt. Und das ist das eigentliche Problem. Deshalb, so die Begründung des Differenzierten Reset, sollte man besser nicht in Bereiche hineinresetten, die nicht definiert sind. Genau dies tut der Universelle Reset und damit auch die Restauration.

Inwieweit diese theoretischen und lediglich auf einem schnellen Testcase basierenden Überlegungen auf ein "real-world"-Projekt in der Wildnis zutreffen, kann ich nicht sagen. Sicher gibt es da noch viel zu testen bei den Form-Elementen. Mir ist auch im Moment unklar, was das für eine "best practice"-Aussage bedeutet. Es bleibt schwierig.

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="en" lang="en">
<head>

	<title>Reset</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Ingo Chao" />
<style type="text/css">
/*<![CDATA[*/

body {background: pink;}

* {margin: 0; padding:0;} /* universelles Reset */

/* eine moegliche Restauration fuer Firefox und Opera */
/*
option {padding: 0 0.5em 0 0.25em;}
input[type="submit"], 
input[type="reset"] {padding: 0 1em;}
*/

/*]]>*/
</style>
</head>

<body>
	<form action="">
		<fieldset>
			<legend>Legend</legend> 
			
			<input id="ip1" name="text" size="20" value="Default text." /> 
			
			<textarea id="ip2" name="textarea" rows="3" cols="20">Default text.</textarea>
			
			<input id="r1" type="radio" name="radio" value="1" />
			<input id="r2" type="radio" name="radio" value="2" checked="checked" /> 

			<input id="c1" type="checkbox" name="checkbox" />
			<input id="c2" type="checkbox" name="checkbox" checked="checked" /> 
			
			<select id="s1" name="sel1" size="1">
				<option>
					eins
				</option>

				<option selected="selected">
					zwei (default)
				</option>

				<option>
					drei
				</option>
			</select> 
			
			<select id="s2" name="sel2" size="3">
				<option>
					eins
				</option>

				<option selected="selected">
					zwei (default)
				</option>

				<option>
					drei
				</option>
			</select> 
			
			<input id="bla" type="submit" name="submit" value="Submit" /> 
			
			<input id="blub" type="reset" name="reset" value="Reset" />
			
		</fieldset>
	</form>
</body>
</html>

pmmueller · #10 (**permalink**) 19.08.2007, 20:48

Hallo Ingo,

erstmal vielen Dank für deinen ausführlichen Beitrag und auch für den Testcase. Was die Begrifflichkeiten "Universell", "Differenziert" und "Restauration" angeht, hatte ich dich richtig verstanden, und ich stimme völlig mit dir überein.

Der "Universal Reset" greift in die Abstände der Formelemente an, und das ist auch der Schwachpunkt. Bei der Gestaltung von Formularen "predige" ich auch Zurückhaltung im Sinne von "möglichst nicht gestalten, klappt sowieso nicht". Formal weirdness halt.

Zitat:

Zitat von IChao

Mir ist auch im Moment unklar, was das für eine "best practice"-Aussage bedeutet. Es bleibt schwierig.

Eine allgemeingültige Aussage ist denke ich nicht möglich, aber die Tendenz dürfte sein "Je intensiver Formulare eingesetzt werden, desto potentiell gefährlicher ist der universelle Reset".

Auf einer privaten Homepage mit einem einfachen Kontaktformular dürfte das nicht sonderlich problematisch sein, auf einer Site mit komplexen Bestell- und sonstigen Formularen könnte da schneller was in die Hose gehen.

Thanx again
Peter

P.S.
Vielleicht zur Erläuterung:
Ich bin Dozent/Autor und erst in zweiter Linie "Weber". Meine Entscheidungen gehen deshalb oft von einer Situation aus, in der ich (wie auch bei "Little Boxes") zu Gunsten der Verständlichkeit auf einige Details verzichte(n muss). Das ist natürlich eine Gratwanderung und die Kunst besteht darin, die richtigen Dinge wegzulassen ...

Aber dein Beitrag hat auf jeden Fall bewirkt, dass der universelle Reset nicht mehr ohne einen Hinweis auf potentielle Formularprobleme aus dem Haus geht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Frage zu position:fixed und dem IE	human	CSS	4	31.01.2007 22:13
Zeilenüberlappung bei margin-top mit negativem Wert	c.weber.os	CSS	15	15.10.2005 15:11
Browserneurose	SimonWpt	CSS	39	15.07.2005 10:51
Wichtige Frage zu DIV-Containern und dem CLEAR Befehl	groovyfunky	(X)HTML	120	24.04.2005 12:36
Scrollbares Textfeld mit purem CSS	Dancer	CSS	6	24.01.2005 15:58