De nieuwste manieren om om te gaan met de cascade, erfenis en specificiteit

0
71

De cascade is een intrinsiek onderdeel van CSS, dat ze het daar in de naam. Als je ooit nodig om te gebruiken !belangrijk om invloed op de specificiteit in de cascade, weet je dat het een lastig ding om te gaan met. In de vroege dagen van CSS, was het gebruikelijk om te zien, zeer specifieke keuzemogelijkheden zoals:

#sidebar ul li {}

We zijn veel beter in het beheren van de specificiteit van tegenwoordig. Het is een algemeen aanvaarde beste praktijken te houden specificiteit laag en een flatscreen—te mijden ID-selectors te maken vrijelijk gebruik van klassen, en het vermijden van onnodige nesten. Maar er zijn nog tal van situaties waarin een meer specifieke kiezen nuttig zal zijn. Met de introductie van een nieuw voorgestelde pseudo-class, meer ondersteuning van de schaduw van de DOM, en het gebruik van alle goederen, zullen wij snel kunnen omgaan met een erfenis en specificiteit in de nieuwe en spannende manieren.

Het :is Pseudo-Class

Lea Verou onlangs voorgesteld deze nieuwe pseudo-class specifiek ontworpen om de controle van de specificiteit. Het is al de weg naar de CSS Selectors Level 4 spec. Lea heeft een schrijven van waarom het nuttig is en er is wat de dekking van het in de CSS-Tricks almanak.

Laten we niet als een voorbeeld. De specificiteit van :niet gelijk is aan de specificiteit van het argument. Dit maakt het gebruik :niet eerder pijnlijk. Neem het volgende voorbeeld:

Zie de Pen niet en specificiteit door het CSS-Tricks (@css-tricks) op CodePen.

We verwachten dat de .rode klasse zou een hogere specificiteit hebben, omdat het lager is in de cascade. Echter, voor om het even welke stijlen te overschrijven div: (.foobar) zouden ze moeten op zijn minst overeenkomen met de specificiteit van een combinatie-element selector (div) en de class selector (.foobar). Een andere benadering zou div.rood, maar er is een betere manier. Dit is waar :u kan helpen.

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

De :niet kiezen niet langer voegt specificiteit, dus de totale specificiteit van de bovengenoemde selector is gewoon dat van een element selector (div). Het .rode klasse zou nu kunnen worden overschreven in de cascade. Eenmaal geïmplementeerd, specificiteit hacks zal een ding van het verleden.

Schaduw van de DOM

Vandaag de dag, veel mensen zijn met behulp van klassen in de HTML zoals deze:

<form class=”site-site zoeken-zoeken–full”>
<input type=”text” class=”site-zoeken__veld”>
<button type=”Submit” class=”site-zoeken__knop”>zoeken</button>
</form>

Bij het gebruik van schaduw DOM, eerder dan het volgen van een uitgebreide naamgeving, kunnen we weglaten lessen in totaal. Stijlen gedefinieerd in de schaduw DOM zijn afgestemd te zijn alleen van toepassing binnen het onderdeel. Styling kan gehaald worden met een eenvoudige element selectors zonder je zorgen te maken over de vraag of de kiezers zal interfereren met elementen elders op de pagina.

Zie de Pen schaduw dom door CSS GRID (@cssgrid) op CodePen.

Het is bevrijdend om te schrijven zo eenvoudig CSS. Niet meer moeite besteed aan het benoemen van dingen. Schaduw DOM lijkt eindelijk zijn weg naar de volledige steun van de browser. Het is waarschijnlijk om het te maken in de volgende versie van Firefox, terwijl Edge implementatie als een hoge prioriteit.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
53 40 Geen Geen Geen TP

Mobiele / Tablet

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

De Woning

De woning is een manier om alle CSS-eigenschappen in een keer alles van lijn-inhoud van z-index. Welke waarden aanvaardt? Ik kan niet denken aan een use case als ik zou willen dat alle eigenschappen om te erven, maar dat is een optie. Dan is er het eerste is meer zoals het toepassen van een CSS reset waar alle stijlen zijn gegaan. Geen vulling. Geen marge. De eerste waarde is ingesteld per woning, ongeacht het element wordt toegepast. De initiële waarde van display inline, zelfs als je het op een div. De font-style van een em-tag is normaal, net als het font-weight van een sterke tag. Link tekst wordt zwart. Je krijgt het idee. (U vindt de initiële waarde van de CSS-eigenschap op MDN.) Dit heeft misschien te beperken zijn nut, verder te gaan dan we zouden willen door het verwijderen van alle stijlen, ongeacht de context.

Zie de Pen al: de eerste door CSS GRID (@cssgrid) op CodePen.

Helaas, de meest bruikbare waarde voor alle is ook het minste op grote schaal geïmplementeerd: terugkeren. Het kan verwijderen van de stijlen die je als ontwikkelaar hebt toegepast, terwijl het verlaten van de standaard user-agent stijlen intact. We hebben allemaal gezien dat een pagina met HTML-zonder een stylesheet—zwart Times New Roman op een witte (transparante) achtergrond met blauwe onderstreepte links. Als je echt wilt om te voorkomen dat de erfenis, dan zijn alle: revert heeft u gedekt. Alle divs zal worden met een display: block en overspanningen worden inline. Alle em-tags zullen worden cursief en sterke tags zullen worden vet weergegeven. Links in het blauw en onderstreept.

Zie de Pen al: ongedaan maken door CSS GRID (@cssgrid) op CodePen.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
Geen Geen Geen Geen Geen 9.1

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.3 Geen Geen Geen Geen Geen

De toekomst?

CSS-JS is een schreeuw om hulp. Wij bij @csswg moeten aandacht besteden aan deze en de problemen aan te pakken voordat het erger wordt.https://t.co/lWQ4ct61ir

— Lea Verou (@LeaVerou) 24 Mei 2017

De bloemlezing van rivaal unstandardized methoden voor het schrijven van CSS-JS werd een poging te omzeilen dezelfde problemen. Die aanpak heeft opgedaan populariteit de afgelopen jaren. Sommige voorstanders hebben geacht erfenis, de cascade en specificiteit als fundamenteel gebrekkig ontwerp beslissingen van de taal. De CSS werkgroep van het W3C reageert door het verbeteren van de kracht van CSS en de inheemse web platform. Het zal interessant zijn om het resultaat te zien…