Welches HTML5-Reset-CSS verwenden Sie und warum? [geschlossen]

123

Welches HTML5-Reset-CSS verwenden Sie und warum? Gibt es eine, die Sie gefunden haben, um mehr Fälle abzudecken?

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.

Darryl Hein
quelle
Es ist ja ähnlich, aber ich versuche eher, jemand anderen zu verwenden, als einen zu ändern, damit es zu einem späteren Zeitpunkt funktioniert. Bei Bedarf kann ich einfach eine neuere Version kopieren.
Darryl Hein
20
D_N Ich verstehe das, aber HTML5 hat Auswirkungen auf das CSS, insbesondere auf ein zurückgesetztes CSS, bei dem Sie jetzt andere Tags wie nav oder beiseite einfügen müssen.
Darryl Hein

Antworten:

40

Echtes Gerede: Trotz der Abschläge, die Kaikai hat, müssen Sie nur * padding & margin auf 0 zurücksetzen.

Leider verfügen 99% von uns nicht über Ressourcen oder Personal, 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 mir gerade http://html5reset.org/ angesehen.

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ücksetzblatts. Es werden zu viele Annahmen getroffen.

BluePrint Reset: (buchstäblich eine Blaupause)

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

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

Normalize.css: (Nicht normal)

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

Es begann gut mit einigen Webkit / dh Hacks aber

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 ist ein Ziel. & sie setzen die Linienhöhe des Körpers nicht zurück.

Ich bin mir sicher, dass all das die beabsichtigte Arbeit gut macht, aber wahrscheinlich mehr als nötig überschrieben wird.

Eric Meyer

YUI

HTML5Boilerplate

Die oben genannten sind eher für Profis gedacht, bei denen Boilerplate sich auf die (überfreundliche) Seite neigt. Ich bin mir sicher, dass dies aufgrund der Beliebtheit der Fall ist. Im Moment sind 80% meines benutzerdefinierten Resets Boilerplate.

Ich werde alle drei Stück für Stück durchgehen und mein eigenes machen, es ist keine Raketenwissenschaft.

Undefiniert
quelle
2
Beachten Sie, dass sich normalize.css inzwischen geändert hat. Schriftgrößen von Überschriften werden nicht mehr festgelegt.
Ruben Verborgh
2
Erwähnenswert ist, dass Normalize.css nicht nur Desktop-Browser verwaltet, sondern auch mobile Browser wie iOS Safari, Chrome für Android, Aktienbrowser usw., die für sich genommen einzigartig sind. Aus diesem und anderen Gründen wird Normalize in viele gängige Frameworks integriert.
Matt Smith
Früher habe ich 'Eric Meyer' verwendet, jetzt verwende ich aus diesem Grund
Daniel Sokolowski
19

Normalize.css eignet sich sowohl für Desktop- als auch für mobile Browser und wird in vielen gängigen HTML-Vorlagen verwendet.

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

{
    all: unset
}

CSS allbietet eine breite Unterstützung, außer in IE / Edge. Ähnliches gilt für unset.

Matt Smith
quelle
Interessant, aber es scheint die langsamste Lösung zu sein und wird nur in Firefox unterstützt, daher hat es (zumindest zu diesem Zeitpunkt) keine wirkliche Verwendung.
Thomasz86
Zwar unterstützt es derzeit nur Firefox, aber ich denke, es hat gute Chancen, in Lösungen wie Modernizr zu landen. github.com/Modernizr/Modernizr/issues/1219
Matt Smith
6

Die vom Blueprint CSS- Framework verwendete 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 Rapid Prototyping neuer Websites. Der Quellcode ist gut organisiert und es lohnt sich, daraus zu lernen.

Calvinf
quelle
4

Eric Meyer hat auch Version 2 seines CSS-Resets veröffentlicht (und das vor fast einem Jahr):

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

Illes Peter
quelle
Einfach, aber effektiv und schneller als Zurücksetzen, die auf dem * Universal-Selektor basieren.
Thomasz86
3
  1. Behält nützliche Standardeinstellungen bei, im Gegensatz zu vielen CSS-Resets.
  2. Normalisiert Stile für eine Vielzahl von HTML-Elementen.
  3. Behebt Fehler und häufige Browser-Inkonsistenzen.
  4. Verbessert die Benutzerfreundlichkeit durch subtile Verbesserungen.
  5. Erklärt anhand detaillierter Kommentare, was Code bewirkt.

normalize.css

zzart
quelle
2
* {
    margin: 0;
    padding: 0;
}

einfach und doch völlig effektiv. vielleicht werfen Sie ein:

body {
    font-size: small;
}

für ein gutes Maß.

Kaikai
quelle
9
Das Zappen des Standardrandes und das Auffüllen von Formularsteuerelementen kann unerwünschte Auswirkungen haben, und benannte Schlüsselwörter in Schriftgröße weisen in allen Browsern kein vollständig konsistentes Verhalten auf. Das ist zu simpel. Außerdem können keine Stile für in HTML 5 eingeführte Elemente festgelegt werden, sodass sie erhalten bleiben display: inline.
Quentin
4
Ich bin nicht einverstanden. Rand und Polsterung sind die einzigen unvorhersehbaren Eigenschaften. Die Eigenschaft "Schriftgröße" verwendet ein benanntes Schlüsselwort, um speziell auf Browser abzuzielen, die diese lesen. Dadurch wird die YUI-Schriftart in allen gängigen Browsern wirksam ( developer.yahoo.com/yui/examples/fonts/fonts-size_source.html ). Ich würde auch niemals den normalen Fluss von Elementen auferlegen wollen und daher diese HTML 5-Elemente in Ruhe lassen und nur ihren Anzeigetyp oder ihre Positionierung nach Bedarf ändern. Mir ist klar, dass meine Wahl unbeliebt ist, aber sie ist weitaus eleganter als andere Lösungen und funktioniert.
Kaikai
3
Nein nein Nein Nein Nein! Für HTML5-Elemente ist die Anzeigeeigenschaft nicht festgelegt, sodass sie ordnungsgemäß auf die Standardeinstellung zurückgreifen display: inline. Haben Sie jemals ein Site-Diagramm gesehen, in dem Kopf- und Fußzeile, Navigation, Seitenspalten und praktisch jeder Seitenabschnitt inline fließen? Sorry Kaikai, aber das ist einfach nicht akzeptabel!
Filip Dupanović
Alter, ich bin (noch) nicht einmal ein HTML5-Guru und ich weiß, dass dies nicht der richtige Weg zum Zurücksetzen ist.
Icemanind
4
Absolut gültige Antwort. Der einzige Nachteil könnte sein, dass die *Selektoren langsam sind, hörte ich.
Anton Strogonoff
2

Die HTML5-Spezifikation enthält empfohlene CSS-Deklarationen für CSS-fähige Browser. Zum Spaß habe ich sie genommen und zurückgesetzt, wo es Sinn macht. Sie können das Ergebnis in diesem Artikel anzeigen .

Aber ich, wird nicht empfohlen , diese in der Produktion. Es ist eher ein Proof of Concept und kann besser als Hinweis verwendet werden, als als Allzweck-Reset-Stylesheet. Alle anderen Vorschläge zuvor könnten eine bessere Wahl sein.

Boldewyn
quelle
0

Ich verwende Normalize oder das Zurücksetzen von HTML5 Doctor und ändere es an das Projekt, an dem ich arbeite.

Übrigens ist es nur das Konzept der Verwendung eines Resets, das mehr oder weniger zum Standard geworden ist.

cornishninja
quelle
Haben Sie weitere Details?
James A Mohler
Ich lasse keine Elemente übrig, die ich nicht für ein bestimmtes Projekt verwende. Zum Beispiel entferne ich Formularelemente, wenn ich keine Formulare verwende. Ich bin sicher, Sie haben die Idee. Es macht keinen Sinn, Elemente zurückzusetzen, die Sie nicht verwenden.
Cornishninja
Um meinen Standpunkt zum Ändern des Zurücksetzens an meine Bedürfnisse zu untermauern
cornishninja