wake-up-neo.com

Welches HTML5-Reset-CSS verwenden Sie und warum?

Welches HTML5-Reset-CSS verwenden Sie und warum? Gibt es einen, den Sie gefunden haben, um mehr Fälle zu behandeln?

Ich habe angefangen HTML5 Doctor's zu verwenden: http://html5doctor.com/html-5-reset-stylesheet/ Es scheint zu funktionieren, aber ich frage mich, ob es da draußen etwas besseres gibt.

121
Darryl Hein

Echtes Gespräch: Trotz der Abschläge kaikai ist es richtig, Sie müssen nur * padding & margin auf 0 zurücksetzen.

Leider haben 99% von uns keine Ressourcen und nicht die Kraft, um mit den Hunderten von Browserversionen Schritt zu halten. Ein Reset-Blatt ist daher für die typische Website unerlässlich.

html5reset: (es ist zu störend) 

Ich habe gerade einen Blick auf http://html5reset.org/

img,
object,
embed {max-width: 100%;}

Und:

html {overflow-y: scroll;}

Ich verstehe, dass es gute Absichten hat, aber das ist nicht die Aufgabe eines Rücksetzbogens. Es werden zu viele Annahmen gemacht.

BluePrint Reset: (wörtlich eine Blaupause) 

body {
  line-height: 1.5;
  background: white;
}

Was ist los mit 1.5. Und warum Hintergrund weiß? (Ich weiß, dass es zur Korrektur ist, aber immer noch nicht notwendig) 

Normalize.css: (nicht normal) 

https://github.com/necolas/normalize.css/blob/master/normalize.css

Mit einigen Webkits/Hacks fing es aber gut an

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Jedes Header-Tag wird als Ziel festgelegt. & Sie setzen die Linienhöhe des Körpers nicht zurück.

Ich bin sicher, dass alle oben genannten Aufgaben die beabsichtigte Arbeit gut machen, aber wahrscheinlich mehr als nötig überschrieben werden. 

Eric Meyer

YUI

HTML5Boilerplate

Die oben genannten sind eher für Profis mit Boilerplate, die an die (über freundliche) Seite gelehnt sind. Momentan sind 80% meines benutzerdefinierten Resets Boilerplate.

Ich gehe alle drei Stück für Stück durch und mache meine eigenen, es ist keine Hexerei.

40
Undefined

Normalize.css ist ideal für Desktop- und mobile Browser und wird in vielen gängigen HTML-Vorlagen verwendet.

Aber was ist mit der CSS-Eigenschaft all, die CSS-Eigenschaften außer direction und unicode-bidi zurücksetzt? Auf diese Weise müssen Sie keine zusätzlichen Dateien hinzufügen:

* { all: unset }

Es wird derzeit von Firefox unterstützt und hoffentlich werden andere folgen, was den Reset-Vorgang sehr einfach macht.

19
Matt Smith

Das von Blueprint CSS verwendete Framework reset.css funktioniert gut und enthält HTML5-Elemente. Es wird in die Datei screen.css aufgenommen.

Blueprint ist eine nützliche Ressource für das schnelle Prototyping neuer Websites. Der Quellcode ist gut organisiert und es lohnt sich, daraus zu lernen.

6
calvinf
  1. Behält nützliche Einstellungen im Gegensatz zu vielen CSS-Resets bei. 
  2. Normalisiert Stile für eine Vielzahl von HTML-Elementen. 
  3. Behebt Fehler und häufig auftretende Browserinkonsistenzen. 
  4. Verbessert die Benutzerfreundlichkeit mit subtilen Verbesserungen.
  5. Erläutert, was der Code mit ausführlichen Kommentaren macht.

normalize.css

3
zzart

Eric Meyer hat auch v2 seines CSS-Reset veröffentlicht (und das vor fast einem Jahr):

http://meyerweb.com/eric/tools/css/reset/

3
Illes Peter

Die HTML5-Spezifikation enthält empfohlene CSS-Deklarationen für CSS-fähige Browser. Zum Spaß nahm ich sie und wandte sie wieder um, wo es Sinn macht. Sie können das Ergebnis in diesem Artikel sehen.

Allerdings, ich empfehle die Verwendung in der Produktion nicht. Es ist eher ein Proof of Concept und kann besser als Hinweis für ein All-Reset-Stylesheet verwendet werden. Alle anderen Vorschläge können eine bessere Wahl sein.

2
Boldewyn
* {
    margin: 0;
    padding: 0;
}

einfach und doch ganz effektiv. vielleicht einwerfen:

body {
    font-size: small;
}

für ein gutes Maß.

2
kaikai

Ich verwende Normalize oder den Reset von HTML5 Doctor und ändere es an das Projekt, an dem ich gerade arbeite.

Übrigens ist es nur das Konzept, einen Reset zu verwenden, der mehr oder weniger zum Standard geworden ist.

0
cornishninja