Den nyeste måter å håndtere overlappende, arv og spesifisitet

0
13

Cascade er en iboende del av CSS som de satte den direkte i navnet. Hvis du noen gang har hatt behov for å bruke !viktig å påvirke spesifisitet i cascade, vet du at det kan være en vanskelig ting å forholde seg til. I de tidlige dagene av CSS, det var vanlig å se svært spesifikke velgere som dette:

#sidebar ul li {}

Vi er alle mye bedre til å håndtere spesifisitet i dag. Det er en allment akseptert beste praksis for å holde lav spesifisitet og flatskjerm—for å unngå ID-velgere, for å gjøre liberal bruk av klasser, og for å unngå unødvendige hekkende. Men det er fortsatt nok av situasjoner der en mer spesifikk selector vil være nyttig. Med lanseringen av en nylig foreslått pseudo-klasse, mer støtte av skyggen DOM, og bruk av all eiendom, vi vil snart være i stand til å håndtere arv og spesifisitet på nye og spennende måter.

I :er Pseudo-Klasse

Lea Verou nylig foreslått dette nye pseudo-klasse som er spesielt designet til å kontrollere spesifisitet. Det er allerede gjort sin vei til CSS-Nivå 4 Velgere spec. Lea har en skrive opp av hvorfor det er nyttig og det er noen dekning for det i CSS-Triks almanac.

La oss ta :ikke som et eksempel. Spesifisiteten av :ikke er lik spesifisiteten av argument. Dette gjør du bruker :ikke ganske smertefullt. Ta følgende eksempel:

Se Penn :ikke og spesifisitet ved CSS-Triks (@css-triks) på CodePen.

Vi kan forvente at .rød-klassen har høyere spesifisitet fordi det er lavere i kaskade. Men for noen stiler å overstyre div:ikke(.foobar) de ville trenge minst matche spesifisitet av en kombinert element selector (div) og klasse selector (.foobar). En annen tilnærming ville være div.røde, men det er en bedre måte. Dette er der :kan hjelpe.

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

Av :ikke-velgeren ikke lenger legger noen spesifisitet, slik at det totale spesifisitet av de ovennevnte selector er rett og slett som ett element selector (div). .rød klasse vil nå være i stand til å overstyre det i kaskade. Når det er gjennomført, spesifisitet hacks vil være en ting fra fortiden.

Shadow DOM

I dag, mange mennesker bruker klasser i HTML som dette:

<form class=”site-søk nettstedet-søk–full”>
<input type=”text” class=”site-søk__feltet”>
<- knappen type=”Submit” class=”site-søk__ – knappen”>søk</button>
</form>

Når du bruker shadow DOM, snarere enn å følge en detaljert naming convention, vil vi være i stand til å utelate klasser helt. Stiler definert i skyggen DOM er omfattet til å søke bare innenfor komponent. Styling kan oppnås med enkle element velgere uten å bekymre deg for om velgere vil forstyrre elementer annet sted på siden.

Se Penn skygge dom av CSS RUTENETT (@cssgrid) på CodePen.

Det er befriende å skrive en slik enkel CSS. Ikke mer krefter brukt navngi ting. Shadow DOM ser ut som det er endelig gjør sin vei til full nettleserstøtte. Det er sannsynlig å gjøre det i neste versjon av Firefox mens Edge har implementering som en høy prioritet.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
53 40 Ingen Ingen Ingen TP

Mobil / Nettbrett

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

All Eiendom

All eiendom er en måte å sette alle CSS-egenskaper på en gang—alt fra juster-innhold til z-index. Hva verdiene betyr det å akseptere? Jeg kan ikke tenke på noen use case når jeg ønsker alle egenskaper til å arve, men det er et alternativ. Så er det første som er mer som å bruke en CSS-reset hvor alle stiler er borte. Ingen polstring. Ingen margin. Den første verdien er satt per eiendom, uavhengig av element det er brukt til. Den første verdien av skjermen er inline, selv om du har brukt den til div. Font-stil i en em-koden er normal, så er skriften-vekt av en sterk tag. Link teksten vil bli svart. Du får ideen. (Du kan finne den opprinnelige verdien av alle CSS-egenskapen på MDN.) Dette gjør kanskje begrense nytten, går lenger enn vi kanskje liker ved å fjerne alle stiler, uavhengig av kontekst.

Se Penn alle: første av CSS RUTENETT (@cssgrid) på CodePen.

Dessverre, de mest nyttige verdi for alle er også den minst bred oppslutning: gå tilbake. Det kan fjerne stiler som du som utbygger har søkt, mens man lar den standard user-agent stiler intakt. Vi har alle sett en side av HTML-uten et stylesheet—svart Times New Roman på en hvit (transparent) bakgrunn med blå understreket lenker. Hvis du virkelig ønsker å unngå arv, så alt: gå tilbake har du dekket. Alle divs vil være display: block og spenner vil være inline. Alle em-tagger vil være kursiv og sterk-tagger vil bli fet. Linker være blå og understreket.

Se Penn alle: gå av CSS RUTENETT (@cssgrid) på CodePen.

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
Ingen Ingen Ingen Ingen Ingen 9.1

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.3 Ingen Ingen Ingen Ingen Ingen

Fremtiden?

CSS-i-JS er et rop om hjelp. Vi i @csswg bør ta hensyn til dette og løse problemer før det blir verre.https://t.co/lWQ4ct61ir

— Lea Verou (@LeaVerou) Mai 24, 2017

Den miscellany av rival unstandardized metoder for å skrive CSS-i-JS var et forsøk på å omgå disse samme spørsmål. Denne tilnærmingen har fått popularitet de siste flere år. Noen av dens talsmenn har vurdert arv, cascade og spesifisitet som fundamentalt feil design beslutninger av språket. CSS arbeidsgruppe på W3C er å svare ved å forbedre kraften av CSS og den innebygde web-plattformen. Det vil være interessant å se resultatet…