Ved hjelp av Funksjonen for Gjenkjenning, Conditionals, og Grupper med Velgere

0
26

CSS er utformet på en måte som gjør det mulig for relativt sømløst tillegg av nye funksjoner. Siden begynnelsen av språket, spesifikasjoner har hatt behov for nettlesere å grasiøst ignorere alle egenskaper, verdier, velgere, eller på-regler de ikke støtter. Derfor, i de fleste tilfeller er det mulig å lykkes med å bruke en nyere teknologi uten å forårsake noen problemer i eldre nettlesere.

Vurdere den relativt nye innskuddet-color eiendom (det endrer fargen på markøren i-innganger). Deres støtte er fortsatt lav, men det betyr ikke at vi ikke skal bruke den i dag.

.myInput {
farge: blå;
innskuddet-color: red;
}

Legg merke til hvordan vi setter den rett ved siden av farge, en eiendom med praktisk talt universal nettleser støtter; en som vil bli brukt overalt. I dette tilfellet har vi ikke eksplisitt diskrimineres mellom moderne og eldre nettlesere. I stedet, vi bare stole på de eldre ignorerer har de ikke støtter.

Det viser seg at dette mønsteret er kraftig nok i de aller fleste situasjoner.

Når funksjonen for gjenkjenning er nødvendig

I noen tilfeller, men vi ville virkelig liker å bruke en moderne eiendom eller eiendom verdi hvis bruk er signifikant forskjellig fra sine tilbakefall. I de tilfeller @støtter kommer til unnsetning.

@støtter er en spesialtilbud på hoteller i-regel som tillater oss å betinget gjelder alle stiler i nettlesere som støtter en bestemt eiendel og dens verdi.

@støtter (visning: rutenett) {
/* Stiler for nettlesere som støtter grid layout… */
}

Det fungerer analog til @media-spørringer, som også gjelder bare stiler betinget når en viss predikat er oppfylt.

For å illustrere bruken av @støtter, bør du vurdere følgende eksempel: vi ønsker å vise en bruker opplastede avatar i en fin sirkel, men vi kan ikke garantere at selve filen vil være av kvadratiske dimensjoner. For at objektet-fit eiendommen ville være svært nyttig, men det støttes ikke av Internet Explorer (IE). Hva gjør vi da?

La oss starte med markup:

<div class=”avatar”>
<img class=”avatar-bildet” src=”…” alt=”…” />
</div>

Som en ikke-så-ganske fallback, vi vil presse bildet bredde i avatar på kostnadene som er større filer vil ikke dekke helt avatar området. I stedet våre ensfarget bakgrunn vil vises under.

.avatar {
position: relative;
bredde: 5em;
høyde: 5em;
border-radius: 50%;
overflow: hidden;
bakgrunn: #cccccc; /* Skifte farge */
}

.avatar-bilde {
position: absolute;
øverst: 50%;
høyre: 0;
nederst: 0;
venstre: 50%;
forvandle: translate(-50%, -50%);
maks bredde: 100%;
}

Du kan se dette i aksjon her:

Se Penn Demo fallback for objekt-plass ved Jirka Vebr (@JirkaVebr) på CodePen.

Legg merke til at det er en rettvinklet bilde, en stor en, og en høy en.

Nå, hvis vi bruker object-fit, kan vi la nettleseren bestemme den beste måten å plassere bildet, nemlig om å strekke bredde, høyde, eller ingen av delene.

@støtter (objekt-fit: cover) {
.avatar-bilde {
/* Vi trenger ikke lenger absolutt posisjonering eller noen forvandler */
posisjon: statiske;
forvandle: ingen;
objekt-fit: dekk;
bredde: 100%;
høyde: 100%;
}
}

Resultatet for samme sett av biletet, fungerer fint i moderne nettleserne:

Se Pen @støtter objekt-fit demo ved Jirka Vebr (@JirkaVebr) på CodePen.

Betinget støtte selector

Selv om Velgere Nivå 4-spesifikasjonen er fortsatt en Fungerende Utkast, noen av velgere definerer det — for eksempel :plassholder-vist — er allerede støttes av mange weblesere. Skal denne trenden fortsetter (og bør utkastet beholde mest mulig av sin nåværende forslag), dette nivået av spesifikasjonen vil introdusere flere nye velgere enn noen av sine forgjengere. I mellomtiden, og også mens IE er fortsatt i live, CSS utviklere vil ha for å dekke et enda mer mangfoldig og flyktige spekter av nettlesere med begynnende støtte for disse velgere.

Det vil være svært nyttig for å utføre funksjonen for gjenkjenning på velgere. Dessverre, @støtter er bare beregnet for testing støtte av egenskaper og verdier, og selv de nyeste utkast av sin spesifikasjon ser ikke ut til å endre det. Helt siden oppstarten, og det har imidlertid definert en spesiell produksjon regel i sin grammatikk hvis eneste formål er å gi rom for en potensiell bakover-kompatibel utvidelser, og dermed er det fullt mulig for en fremtidig versjon for å legge til muligheten til tilstand på støtte for bestemte velgere. Likevel, denne muligheten er fortsatt helt hypotetisk.

Velgeren motstykke til @støtter

Først av alt, det er viktig å understreke at, analogt til de nevnte innskuddet-farge eksempel hvor @støtter er sannsynligvis ikke nødvendig, mange velgere ikke trenger å være eksplisitt testet for heller. For eksempel, vi kan bare prøve å matche ::valg og ikke bekymre deg for nettlesere som ikke støtter det, siden det vil ikke være slutten på verden hvis utvalget utseende fortsatt er nettleseren standard.

Likevel, det er tilfeller hvor eksplisitt funksjon for gjenkjenning for velgere ville være svært ønskelig. I resten av denne artikkelen, vil vi introdusere et mønster for å møte slike behov, og deretter bruke den med :plassholder-vist å bygge en CSS-eneste alternativ til de Materielle Utforming av tekst-feltet med en flytende etiketten.

Grunnleggende eiendom grupper av velgere

For å unngå duplisering, det er mulig å kombinere flere identiske erklæringer i en komma-separert liste av velgere, som er referert til som gruppe av velgere.

Dermed kan vi slå:

.foo { color: red }
.bar { color: red }

…inn:

.foo, .bar { color: red }

Men, som Velgere Nivå 3 spesifikasjon advarer, disse er bare tilsvarende fordi alle velgere som er involvert er gyldig. I henhold til spesifikasjon, hvis noen av velgere i gruppe er ugyldig, hele konsernet er ignorert. Følgelig er det velgere:

..foo { color: red } /* vær Oppmerksom på at ekstra prikk */
.bar { color: red }

…kan ikke være trygt gruppert, som tidligere selector er ugyldig. Hvis vi gruppert dem, vi ville få leseren til å ignorere erklæring for den siste også.

Det er verdt å peke på at, så langt som en nettleser er bekymret, det er ingen forskjell mellom en ugyldig velgeren og en velger som er kun gyldig som per en nyere versjon av spesifikasjonen, eller en som leseren ikke kjenner. Til nettleseren, som begge er rett og slett ugyldig.

Vi kan dra nytte av denne eiendommen for å teste for støtte av en bestemt velgeren. Alt vi trenger er en selector at vi kan garantere kamper ingenting. I våre eksempler, vil vi bruke :ikke(*).

.foo { color: red }

:ikke(*):plassholder-vist,
.foo {
farge: grønn
}

La oss bryte ned hva som skjer her. En eldre nettleser vil lykkes gjelder den første regelen, men når behandling resten, det vil finne den første selector i gruppen ugyldig fordi den ikke vet :plassholder-vist, og dermed det vil ignorere hele selector gruppe. Følgelig, alle matchende elementer .foo vil forbli rødt. I kontrast, mens en nyere nettleser vil trolig roll sin robot øyne på møte :ikke(*) (som aldri treff for noe) det vil ikke forkaste hele selector gruppe. I stedet, vil det overstyre den tidligere regelen, og dermed alle matchende elementer .foo vil være grønn.

Legg merke til likheten til @støtter (eller noen @media-spørring, for den saks skyld) i form av hvordan det brukes. Vi først angi tilbakefall og deretter overstyre det for nettlesere som tilfredsstiller et predikat, som i dette tilfellet er støtten for en bestemt selector — selv om den er skrevet i en noe tvetydig måte.

Se Pen @støtter for velgere ved Jirka Vebr (@JirkaVebr) på CodePen.

Eksemplet fra den virkelige verden

Vi kan bruke denne teknikken for vår inngang med en flytende etiketten for å skille nettlesere som gjør fra de som ikke støtter :plassholder-vist, en pseudo-klassen som er helt avgjørende for dette eksemplet. På grunn av den relative enkelhet, på tross av beste UI praksis, vil vi velge vår skifte til bare å være den faktiske plassholder.

La oss starte med markup:

<div class=”input”>
<input class=”inndata-control” type=”e-post” name=”e-post” plassholder=”E-post” id=”e-post” nødvendig />
<label class=”inndata-label” for=”e-post”>E</label>
</div>

Som før, nøkkelen er å først legge til stiler for eldre nettlesere. Vi skjul på etikett og angi fargen på plassholder.

.input {
høyde: 3.2 em;
position: relative;
skjerm: flex;
juster-elementer: center;
font-size: 1em;
}

.input-kontroll {
flex: 1;
z-index: 2; /* Slik at det alltid er “over” etiketten */
ramme: ingen;
padding: 0 0 0 1em;
bakgrunn: transparent;
position: relative;
}

.input-label {
position: absolute;
øverst: 50%;
høyre: 0;
nederst: 0;
left: 1em; /* Justere dette med kontroll er polstring */
z-index: 1;
display: none; /* Skjule dette for gamle nettlesere */
transform-opprinnelse: øverst til venstre;
text-align: left;
}

For moderne nettlesere, kan vi effektivt deaktivere plassholder ved å sette sin farge til gjennomsiktig. Vi kan også justere input og etiketten i forhold til en annen, for når plassholder er vist. Til slutt, kan vi også utnytte den søsken selector for å stil etiketten med hensyn til staten av input.

.input-kontroll:plassholder-vist::plassholder {
farge: transparent;
}

.input-kontroll:plassholder-vist ~ .input-label {
forvandle: translateY(-50%)
}

.input-kontroll:plassholder-vist {
forvandle: translateY(0);
}

Til slutt, triks! Akkurat som ovenfor, vi overstyrer stiler for etikett og inngang for moderne nettlesere og staten der plassholder er ikke vist. Det innebærer at du flytter etiketten ut av veien og krympende det litt.

:ikke(*):plassholder-vist,
.input-label {
display: block;
forvandle: translateY(-70%) skala(.7);

}
:ikke(*):plassholder-vist,
.input-kontroll {
forvandle: translateY(35%);
}

Med alle bitene sammen, samt flere stiler og konfigurasjon alternativer som er ortogonale til dette eksemplet, kan du se den fullstendige demo:

Se Penn CSS-bare @støtter for velgere demo ved Jirka Vebr (@JirkaVebr) på CodePen.

Pålitelighet og begrensninger av denne teknikken

Fundamentalt, er denne teknikken krever at en velger som stemmer ingenting. Til slutt, vi har brukt :ikke(*); imidlertid, sin støtte er også begrenset. Universal selector * støttes også av IE 7, mens den :ikke pseudo-klasse har bare blitt gjennomført siden IE 9, som er dermed den eldste nettleser som denne tilnærmingen fungerer. Eldre weblesere, til å ville avvise våre selector grupper for feil årsak — de støtter ikke :ikke! Alternativt kan vi bruke en klasse velgeren for eksempel .foo eller en type-velgeren slik som foo, og dermed støtter også de gamle nettlesere. Likevel, disse gjør-kode mindre lesbar som de ikke formidle at de aldri skal matche noe, og dermed for de fleste moderne nettsteder :ikke(*) virker som det beste alternativet.

Som for hvorvidt eiendommen av grupper av velgere at vi har tatt nytte av innehar også i eldre weblesere, problemet er illustrert i et eksempel som en del av CSS-1-delen på frem-kompatibel parsing. Videre, CSS 2.1 spesifikasjonen så eksplisitt mandater dette problemet. Å sette en alder av denne spesifikasjonen i perspektiv, og dette er den som introduserte :hover. Kort sagt, mens denne teknikken har ikke blitt grundig testet i de eldste eller mest obskure nettlesere, støtte bør være svært bredt.

Til slutt, det er en liten påminnelse for Sass brukere (Sass, ikke SCSS): etter møte :ikke(*):plassholder-vist selector, kompilatoren blir lurt av de ledende kolon, forsøk på å analysere det som en eiendel, og når du møter den feil, det råder utvikleren for å unnslippe selector som så: :ikke(*):plassholder-vist, og som ikke ser veldig hyggelig. En bedre løsning er kanskje å erstatte den omvendte skråstreken med enda en universell velgeren for å få tak i *:ikke(*):plassholder-vist siden, som per spesifikasjon, det er underforstått likevel i dette tilfellet.