Die neuesten Möglichkeiten zum Umgang mit der Kaskade, Vererbung und Spezifität

0
56

Die Kaskade ist wie eine intrinsische Teil von CSS, dass Sie es gleich im Namen. Wenn Sie jemals benötigt, um zu verwenden !wichtig, um Einfluss auf die Spezifität der Kaskade, wirst du wissen, dass es kann eine schwierige Sache zu behandeln. In den frühen Tagen von CSS war es üblich, um zu sehen, hoch spezifische Selektoren wie diesen:

#sidebar ul li {}

Wir sind alle viel besser bei der Verwaltung der Besonderheit heutzutage. Es ist eine allgemein anerkannte beste Praxis zu halten, die Spezifität niedrig und flach—shun-ID-Selektoren, um liberale Verwendung von Klassen und vermeiden unnötiges verschachteln. Aber es gibt immer noch viele Situationen, in denen ein spezifischer Selektor nützlich sein wird. Mit der Einführung eines neu vorgeschlagenen pseudo-Klasse, mehr Unterstützung für die shadow-DOM, und die Verwendung des gesamten Eigentums, werden wir bald in der Lage sein zu handhaben, Vererbung und Spezifität in neue und aufregende Weise.

Das :ist eine Pseudo-Klasse

Lea Verou vor kurzem vorgeschlagen, diese neuen pseudo-Klasse speziell entwickelt zur Kontrolle der Spezifität. Es ist bereits seinen Weg zu den CSS-Selektoren Stufe 4 Spez. Lea hat ein schreiben, warum es ist nützlich und es gibt einige Berichterstattung in der CSS-Tricks-Almanach.

Lassen Sie uns nehmen :nicht als ein Beispiel. Die Besonderheit :nicht gleich auf die Besonderheit des Arguments. Dies macht die Verwendung :nicht, eher schmerzhaft. Nehmen Sie das folgende als Beispiel:

Siehe Stift :nicht und Spezifität von CSS-Tricks (@css-tricks) auf CodePen.

Wir erwarten, dass die .rote-Klasse, würde eine höhere Genauigkeit haben, weil es sich weiter unten in der Kaskade. Jedoch ist für alle Stile zu überschreiben div:not(.foobar) müssen Sie mindestens match die Spezifität einer kombinierten element-Selektor (div) und class-Selektor (.foobar). Ein anderer Ansatz wäre, div.rot, aber es gibt einen besseren Weg. Dies ist, wo :ist helfen können.

div: (: not(.foobar)) {
background-color: black;
}

Das :nicht-Selektor nicht mehr, fügt jede Spezifität, so dass die Gesamt-Spezifität der oben genannten Selektor ist einfach, dass von einem element-Selektor (div). Die .rote-Klasse ist jetzt in der Lage, um es zu überschreiben, die in der Kaskade. Einmal implementiert, Spezifität hacks sind eine Sache der Vergangenheit.

Shadow DOM

Heute, viele Menschen sind mit Klassen in HTML so:

<form class=”site-Suche Website-Suche–full”>
<input type=”text” class=”site-Suche__field”>
<button type=”Submit” class=”site-Suche__button”>suchen</button>
</form>

Wenn die shadow-DOM, anstatt nach einem verbose naming convention, wir werden in der Lage sein, um Sie wegzulassen Klassen insgesamt. Definierte Stile innerhalb des shadow DOM beschränkt, gelten nur innerhalb der Komponente. Styling erreicht werden kann, mit einfachen element-Selektoren, ohne sich Gedanken darüber, ob die Selektoren stören Elemente, die an anderer Stelle auf der Seite.

Finden Sie die Stift-shadow-dom, indem Sie CSS-GRID (@cssgrid) auf CodePen.

Es ist befreiend zu schreiben, wie einfach CSS. Nicht mehr Aufwand, die Benennung der Dinge. Shadow-DOM ” wie es aussieht, ist endlich seinen Weg auf die volle browser-Unterstützung. Es ist wahrscheinlich, um es in der nächsten Version von Firefox, während Edge haben Umsetzung hohe Priorität einräumen.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
53 40 Keine Keine Keine TP

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11.0-11.2 Keine Keine 62 62 Keine

Die alle Eigentum

Das ganze Eigentum ist eine Möglichkeit, Einstellung, die alle CSS-Eigenschaften auf einmal—alles von align-content z-index. Welche Werte gilt es zu akzeptieren? Ich kann mir nicht vorstellen, dass es eine use-case -, wenn ich wollen würde, alle Eigenschaften zu Erben, aber das ist eine option. Dann gibt ‘ s erste, das ist mehr wie die Anwendung eines CSS-reset, wo alle styles sind Weg. Keine Polsterung. Keine margin. Der erste Wert pro Eigenschaft, unabhängig von dem element, an das es aufgetragen wird. Der anfängliche Wert display inline, auch wenn Sie es anwenden, um eine div. Die font-style-der ein em-tag ist normal, da wird die schriftart-Gewicht der einen starken tag. Link-text wird schwarz. Sie bekommen die Idee. (Sie finden den anfänglichen Wert jeder CSS-Eigenschaft auf MDN.) Dies gilt vielleicht begrenzen Ihre Nützlichkeit, weiter zu gehen als wir vielleicht möchten, indem Sie alle Stile, unabhängig vom Kontext.

Finden Sie die Stift-alle: erste CSS-GRID (@cssgrid) auf CodePen.

Leider, die meisten nützlichen Wert für alle ist auch die am wenigsten weit umgesetzt: revert. Es kann entfernen Sie die Stile, dass Sie als Entwickler beworben haben, während die Standard-Benutzer-agent-Stile bleiben erhalten. Wir haben alle gesehen, eine Seite in HTML ohne stylesheet—black Times New Roman auf eine weiße (transparente) hintergrund mit blauen unterstrichenen links. Wenn Sie wirklich wollen, um zu vermeiden, Vererbung, dann alle: zurücksetzen hat Sie bedeckt. Alle divs werden display: block und überspannt werden inline. Alle em-tags wird Kursiv und strong-tags wird Fett formatiert. Links werden blau und Unterstrichen.

Finden Sie den Stift alle: zurücksetzen von CSS-GRID (@cssgrid) auf CodePen.

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Keine Keine Keine Keine Keine 9.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.3 Keine Keine Keine Keine Keine

Die Zukunft?

CSS-JS ist ein Schrei nach Hilfe. Wir bei @csswg sollte die Aufmerksamkeit auf diese Fragen, bevor es schlimmer wird.https://t.co/lWQ4ct61ir

— Lea Verou (@LeaVerou) 24 Mai, 2017

Die miscellany von rival unstandardized Methoden für das schreiben von CSS-JS war ein Versuch, sidestep die gleichen Probleme. Dieser Ansatz hat an Popularität gewann in den letzten Jahren. Einige von seinen Befürwortern als Vererbung, Kaskade und Spezifität als grundfalsch design-Entscheidungen der Sprache. Die CSS-Arbeitsgruppe des W3C reagiert, indem Sie die Verbesserung der Leistung von CSS und der einheitlichen web-Plattform. Es wird interessant sein zu sehen, das Ergebnis…