Frage zum Umgang mit dem "html" - Tag
 

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:

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:

???

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

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.

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).

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).

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

Grüße aus Groningen
Peter

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. :mrgreen:

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.

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" ;)

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.

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.

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

Ciao
Peter

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

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.

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.

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 ;)

Ich lese und staune.

Vor allem, was bei Browsern an Problemen auftaucht die doch eigentlich
Lappalien sein sollten (zB voreingestellt Werte). Alles "standardisiert".
Mannomann.

Laenger her aber immernoch aktuell...
 

Die Diskussion um das zuruecksetzen ist ja immernoch aktuell, gerade weil auch im FAQ auf diesen Beitrag verwiesen wird. Ich moechte mich mal dazu aussern: Ich sehe da naemlich kein Problem drin. Vollstaendiger reset klingt erstmal so kritisch. Wenn man aber nun die Beispiele genauer ansieht geht es ja nun wirklich nur um zwei Eigenschaften: padding und margin. Daher bleiben alle anderen Eigenschaften wie es Browserseitig eingstellt ist. Die Veraenderung ist nicht nennenswert gross, nur eben das es besser funktioniert und man sich eine Menge Schrott in seiner CSS-Datei spart und sie somit kleiner wird.
Ausserdem hat es sich als guenstig erwiesen margin und padding fuer Ueberschriften sowieso manuell anzugeben, schon allein, weil h1 sonst viele layouts sprengt und/oder nicht buendig mit dem Menue ist.

Was ich von dem >Yahoo Reset-Video halte ist sehr gut!

Vor allem die Berechnung der EM-Massangabe für IE und nicht IE find ich toll!

Pixel Breite / 13 = "EM breite"
EM Breie x 0.9757 = "EM breife für den IE"

sprich:
Sollte man sich irgendwo notieren. :)

Sei vorsichtig bei Berechnungen dieser Art. Die von dir zitierte gilt nur 13px als grundlegende Schriftgröße dient, wie z. B. innerhalb des YUI-CSS-Frameworks:

Oder noch besser: nicht anwenden!

Angaben wie:
und für die 5.x-6 IEs (z.B. über Conditional Comments):
lassen die Probleme bei der Berechnung erst gar nicht entstehen.
Alles weiteres gilt dann für alle Browser. Z.B.:
Grüße: Emil