Neustart, Zurücksetzungen und Überlegungen

Ich habe neulich in einem Artikel von Nicholas Cerminara (vorsichtig beim Besuch dieses Links, sieht so aus, als hätten sie einige Tracking-Skripte außer Kontrolle) gelesen, dass Bootstrap 4 einen neuen CSS-Reset integriert hat, den sie Reboot nennen.

Reboot, eine Sammlung elementbezogener CSS-Änderungen in einer einzigen Datei, startet Bootstrap, um eine elegante, konsistente und einfache Basis zum Aufbau zu bieten.

Wenn Sie neu in der CSS-Entwicklung sind, besteht die gesamte Idee eines CSS-Resets darin, sich mit Stilinkonsistenzen über verschiedene Browser hinweg zu befassen. Zum Beispiel habe ich gerade jetzt ein <button>-Element auf eine Seite mit keinerlei weiterer Formatierung gesetzt. Chrome wendet padding: 2px 6px 3px; an – Firefox wendet padding: 0 8px; an. Ein CSS-Reset würde neues padding auf dieses Element anwenden, damit alle Browser konsistent sind, was sie anwenden. Davon gibt es viele Beispiele.

Ein wenig zur Geschichte...

Im Jahr 2007 sammelte Jeff Starr eine Reihe verschiedener CSS-Resets. Der älteste davon ist Tantek Çeliks undohtml.css (das ist ein direkter Link zur Quelle). Wir sehen, dass der Zweck dahinter darin bestand, Standardstile abzustreifen.

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

Bei weitem der beliebteste Reset kam kurz darauf: der Meyer-Reset. Er enthält andere Dinge als Tanteks (er wurde sogar mit einigen HTML5-Elementen aktualisiert), aber der Geist ist derselbe: Standardstile entfernen. Sie werden diesen berühmten Codeblock wahrscheinlich erkennen, der überall in Ihrem DevTools-Style-Panel zu finden ist.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Beginnen Sie mit einem Reset wie diesem (am Anfang Ihres Produktions-Stylesheets), und die Stile, die Sie danach schreiben, werden auf einem soliden Fundament stehen.

Jahre später, als HTML5 realer wurde, gewannen Resets wie Richard Clarks HTML5 Reset an Popularität. Es war immer noch eine modifizierte Version des Meyer-Resets, und er behielt diesen Geist bei.

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

Überall dazwischen gab es viele Entwickler, die minimalistisch vorgingen, indem sie einfach Margin und Padding von allem entfernten und es dabei beließen.

* {
  padding: 0;
  margin: 0;
}

Dumme Trivia: Das CSS-Tricks-Logo wurde vom Universal-Selektor und dieser Idee inspiriert.

Nun kommt Normalize.css...

Normalize.css stellt die erste sinnvolle Änderung im Geiste dessen dar, was ein CSS-Reset tun sollte. Das schien mir so anders zu sein.

• Es war eine neue Bewertung von allem, was sich browserübergreifend unterschiedlich stylen ließ, und es adressierte alles. Während ältere CSS-Resets eine Handvoll Codezeilen waren, ist das unkomprimierte und dokumentierte Normalize 447 Zeilen lang.
• Es entfernte keine Stile von Elementen, die bereits browserübergreifend konsistent waren (größtenteils). Zum Beispiel gibt es in Normalize nichts für h2-h6-Elemente, nur eine Korrektur für eine seltsame h1-Sache. Das bedeutet, Sie löschen keine Header-Hierarchie, diese Standardstile bleiben erhalten.
• Es war eher entgegenkommend für die Idee, es zu verändern, anstatt es einfach nur einzubinden. Zum Beispiel gibt es einen Abschnitt nur für das <pre>-Tag und eine Zeile davon setzt seine font-family. Sie könnten das zu der gewünschten Schriftart ändern, und es wäre genauso effektiv wie ein Reset.

Der Code ist zufriedenstellend zu lesen, da er erklärt, was er tut, ohne sich in Details zu verlieren.

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

Heute ist Normalize bei Version 7.0.0 und hat fast 30.000 GitHub-Sterne. Es ist unglaublich beliebt.

Können Resets also voreingenommen sein?

Wir haben viele verschiedene Ansichten zu CSS-Resets gesehen und grundlegende Änderungen im Ansatz miterlebt, daher denke ich, es ist fair zu sagen, dass CSS-Resets eine voreingenommene Haltung einnehmen können.

Betrachten wir einige Möglichkeiten...

• Berührt der Reset jedes einzelne mögliche Element? Oder eine Teilmenge von Elementen? Wie entscheidet er, welche Elemente berührt und welche nicht?
• Welche Eigenschaften werden geändert? Nur solche mit browserübergreifenden Unterschieden? Oder ein anderes Kriterium, wie die Ähnlichkeit zu anderen Elementen, die Änderungen benötigten? Ist es in Ordnung, Eigenschaften auf Elemente anzuwenden, die keine browserübergreifenden Probleme haben, im Namen von Konsistenz und Effizienz?
• Versuchen Sie, den Geist der User-Agent-Stylesheet zu bewahren? Sinnvolle Standardwerte?
• Wenden Sie Eigenschaften an, die keine browserübergreifenden Probleme haben, aber als "Reset" von Vorteil angesehen werden könnten, wie typografische Standardwerte oder box-sizing?
• Nehmen Sie "Toolbox"-Klassen für gängige Bedürfnisse auf? Oder überlassen Sie das anderen Projekten?
• Macht die Größe Ihnen Sorgen?
• Verwenden Sie einen Präprozessor oder andere Tools?

Schauen Sie sich Vanilla CSS Un-Reset an. Viele Meinungen hier, beginnend mit der Idee, dass es dazu dient, Elemente neu zu stylen, nachdem Sie sie mit einem Reset un-gestylt haben. Es setzt die Body-Schriftgröße in pt, wählt eine sehr spezifische monospace Schriftart aus, enthält einen ol ol ol ol-Selektor, einen clearfix und Ausrichtungshilfeklassen. Kein Urteil hier. Leute erschaffen Dinge, um ihre eigenen Probleme zu lösen, und ich bin sicher, das war dem Schöpfer hilfreich. Aber wir können die Meinungen dort glänzen sehen.

Schauen Sie sich jetzt MiniReset.css an. Ganz anders! Es löscht Typografiestile "damit die Verwendung von semantischem Markup das Styling nicht beeinflusst", lässt aber einige Standardwerte bewusst bestehen "damit Schaltflächen und Eingaben ihr Standardlayout beibehalten", fügt einige Dinge hinzu, die keine browserübergreifenden Probleme haben, aber global nützlich sind (box-sizing), und fügt einige kleine Helfer für responsives Design hinzu.

Ein völlig anderer Satz von Meinungen dort.

Jonathan Neal hat einen Reset namens sanitize.css erstellt, der sehr klar seine Meinungen darlegt. Suchen Sie nach dem Wort "opinionated" im Quellcode und Sie werden es 19 Mal finden. All dies sind Entscheidungen, die Jonathan auf der Grundlage von Recherchen und dem, was wie moderne Best Practices aussieht, getroffen hat, und zweifellos mit seinen eigenen Bedürfnissen und Wünschen für das, was in einem Reset enthalten sein sollte, gespickt.

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */

::-moz-selection {
	background-color: #b3d4fc; /* 1 */
	color: #000000; /* 1 */
	text-shadow: none;
}

::selection {
	background-color: #b3d4fc; /* 1 */
	color: #000000; /* 1 */
	text-shadow: none;
}

Das Wort "Reset"

Persönlich denke ich, es ist nützlich, sie alle unter dem gleichen Oberbegriff zu betrachten und sich einfach der philosophischen Unterschiede bewusst zu sein. Aber Normalize trennt sich bewusst.

Eine moderne, HTML5-fähige Alternative zu CSS-Resets

Sanitize nennt sich selbst eine CSS-Bibliothek und verwendet das Wort "reset" nicht, außer um den Meyer-Reset zu zitieren.

Neustart

Reboot ist interessant, da es vielleicht der neueste Akteur in dieser Welt ist. Seine Dateihistorie reicht bis 2015 zurück, was wahrscheinlich damit zusammenhängt, dass Bootstrap 4 nach Bootstrap 3 eine Weile zum Veröffentlichen brauchte. Reboot hat kein eigenes Repository, es ist Teil von Bootstrap. Hier ist die direkte Datei und die Dokumentation.

Die Art und Weise, wie sie darüber denken, ist interessant.

Reboot baut auf Normalize auf und liefert vielen HTML-Elementen etwas voreingenommene Stile, indem es nur Elementselektoren verwendet. Zusätzliche Formatierung erfolgt nur mit Klassen. Zum Beispiel starten wir einige <table>-Stile für eine einfachere Basis neu und stellen später .table, .table-bordered und mehr zur Verfügung.

Sie können eine Klasse haben, die Stile anwendet, aber wenn Sie einen Reset verwenden, müssen Sie diese Klasse nicht mit Reset-Stilen überladen, die browserübergreifende Konsistenzprobleme lösen.

//
// Tables
//

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

Es ist definitiv voreingenommen, aber auf eine Weise, die gut zu Bootstrap passt. Die Tatsache, dass es in Bootstrap eingebettet ist, signalisiert ziemlich gut, dass es für diese Welt konzipiert ist und nicht als Drop-in für jedes Projekt. Dennoch habe ich mein Bestes getan, eine reine CSS-Version davon hier zu kompilieren.

Anpassen eines Resets basierend auf der Browserunterstützung

Solange wir über Vergangenheit und Zukunft von Resets sprechen, lohnt es sich, Browserslist noch einmal zu erwähnen, was ein standardisiertes Format zur Deklaration der von einem Projekt unterstützten Browser/Versionen ist.

Ein Reset könnte so aufgebaut sein, dass die enthaltenen Elemente wissen, warum sie da sind. Genau welchen Browser und welche Version sie unterstützen sollen. Wenn dann die Browserslist-Konfiguration besagt, dass dieser spezielle Browser sowieso nicht vom Projekt unterstützt wird, könnte dieser CSS-Code entfernt werden.

Das ist es, was PostCSS Normalize tut.