Einzelnen Beitrag anzeigen
  #9 (permalink)  
Alt 19.08.2007, 20:09
IChao IChao ist offline
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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>
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (19.08.2007 um 20:18 Uhr)
Mit Zitat antworten
Sponsored Links