Ein Interview mit Elad Shechter über 'The New CSS Reset'

In diesem Interview werden Elad Shechters innovatives CSS Reset-Projekt "The-New-CSS-Reset", ein moderner Ansatz, der modernste CSS-Funktionen nutzt, untersucht. Anstatt einfach den Code zu präsentieren, befassen wir uns mit dem Warum hinter seiner Erstellung und den Feinheiten seiner Funktionalität.

Der vollständige Reset -Code lautet:

 /*** Das neue CSS -Reset - Version 1.2.0 (zuletzt aktualisiert 23.7.2021) ***/

/ * Entfernen Sie alle Stile außer "Anzeige" *//
*: Wo (: nicht (Iframe, Leinwand, IMG, SVG, Video): nicht (SVG *)) {
  All: Uneinig;
  Anzeige: Rückkehr;
}

/ * Bevorzugte Boxgröße */
*,
*::vor,
*::nach {
  Kastengrößen: Border-Box;
}

/ * Listenstile entfernen *//
ol, ul {
  Listenstil: Keine;
}

/ * Verhindern, dass Bilder den Behälter überschreiten *//
img {
  Max-Breite: 100%;
}

/ * Zusammenbruch der Tischränder *///
Tisch {
  Grenzkollapse: Zusammenbruch;
}

/ * 'White-Space' für Safari Textareas *///
textarea {
  weißer Raum: Rückkehr;
}

Elad erklärt die Notwendigkeit eines neuen Resets, der hervorhebt, dass vorhandene Zurücksetzungen auf älteren CSS -Funktionen beruhen. Sein Ansatz nutzt neuere Funktionen für einen effizienteren und gültigen Zurücksetzen. Er kontrastiert seinen Ansatz mit Normalize.css (ein sanfterer Ansatz, der sich auf die Reparatur von Browser -Inkonsistenzen konzentriert) und Eric Meyers CSS -Reset (ein aggressiverer Ansatz, der die meisten Standardstile beseitigt). Elad befürwortet sowohl Normalize.css als auch ein hartes Zurücksetzen, wobei ihre Stärken kombiniert werden.

Der Kern des neuen Resets liegt all: unset; . Diese leistungsstarke Eigenschaft setzt alle ererbten Eigenschaften auf inherit und nicht untererdete Eigenschaften auf initial und effektive Entfernung des Standard-Browser-Stils zurück. display ist jedoch eine Ausnahme. all: unset; Die Anzeige display zu inline , was unerwünscht ist. Daher display: revert; wird verwendet, um den display des Browsers für jedes Element wiederherzustellen, um ein ordnungsgemäßes Layout zu gewährleisten. Das revert -Keyword ruft intelligent den Standard- display des Benutzer-Agent-Stylesheets ab, falls verfügbar, ansonsten zurück auf das unset Verhalten zurückgefallen.

Der Selektor *:where(:not(iframe, canvas, img, svg, video):not(svg *)) zielt fast alle Elemente ab, ausgenommen diese (wie<iframe></iframe> Anwesend<canvas></canvas> usw.) deren Dimensionen am besten über Attribute und nicht über CSS zurückgesetzt werden, wodurch unbeabsichtigte Konsequenzen verhindert werden. Die :where() Pseudo-Klasse minimiert die Spezifität und vermeidet Konflikte mit projektspezifischen Stilen. Ein separates :not(svg *) schützt die Integrität von SVG -Elementen.

Der Reset enthält auch merkmale Stile wie box-sizing: border-box , die zwar nicht als Browser-Inkonsistenz als bewährte Verfahren übernommen wird. Die Entfernung von Listenstilen ( list-style: none; ) ist durch die gemeinsame Verwendung von Listen für die Navigation gerechtfertigt, bei denen Marker trotz der semantischen Auswirkungen unnötig sind.

Elad diskutiert zukünftige potenzielle Ergänzungen, die von wiederkehrenden Bedürfnissen in seinen Projekten angetrieben werden. Die max-width: 100%; Die Regel für Bilder wird als wahrscheinlicher Kandidat dargestellt. Er spekuliert auch die Auswirkungen des kommenden Cascade-Ebenenmoduls, was darauf hindeutet, dass die Notwendigkeit von Techniken zur Spezifitätsreduzierung wie :where() durch einen Schichtansatz für die Überschreibung von Stilen geliefert werden könnte. Dies würde eine sauberere Trennung von Reset-Stilen von projektspezifischen Stilen ermöglichen.

Das obige ist der detaillierte Inhalt vonEin Interview mit Elad Shechter über 'The New CSS Reset'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!