En Glidende Mareritt: Forstå Rekkevidden Inngang

0
62

Du har kanskje allerede sett en haug med tutorials på hvordan stil området inngang. Mens dette er en artikkel om dette emnet, det handler ikke om hvordan å få noen spesifikke visuelle resultatet. I stedet, det dykk inn i nettleseren inkonsekvenser, som forteller om hva hver enkelt gjør for å vise at kontrollen på skjermen. Å forstå dette er viktig fordi det hjelper oss å ha en klar idé om vi kan gjøre våre glidebryteren og oppfører seg konsekvent på tvers av nettlesere og hvilke maler som er nødvendig for å gjøre det.

Leter du inne en rekke innspill

Før noe annet, må vi sørge for at nettleseren viser DOM inne i spekter-inngang.

I Chrome, kan vi ta opp DevTools, gå til Innstillinger, Preferanser, Elementer og kontroller at Vis user agent skygge DOM alternativet er aktivert.

Sekvens av Chrome skjermbilder for å illustrere fremgangsmåten ovenfor.

I Firefox går vi til ” about:config og sørg for at den devtools.inspektør.showAllAnonymousContent flagget er satt til true.

Sekvens av Firefox skjermbilder for å illustrere fremgangsmåten ovenfor.

For en veldig lang tid, jeg var overbevist om at Kanten tilbyr ingen måte av å se hva som er inni slike elementer. Men mens rote med det, oppdaget jeg at der det er vilje og (og litt flaks) det er en måte! Vi trenger å ta opp DevTools, så gå til området innspill vi ønsker å kontrollere, høyreklikk den, velger du Inspisere Element og bam, DOM Explorer panelet nå viser strukturen av våre glidebryteren!

Sekvens av Kanten skjermbilder for å illustrere fremgangsmåten ovenfor.

Angivelig, dette er en feil. Men det er også utrolig nyttig, så jeg klager ikke.

Strukturen inne

Helt fra starten av, kan vi se en kilde for potensielle problemer: vi har svært forskjellige dyr inne for hver nettleser.

I Chrome, på toppen av skyggen DOM, har vi en div-vi har ikke tilgang til lenger. Dette pleide å være mulig tilbake når /dyp/ ble støttet, men da muligheten til å pierce gjennom skyggen barriere ble ansett for å være en feil, så hva pleide å være en nyttig funksjon ble droppet. Inne i dette div, vi har en annen for sporet og i sporet div, har vi en tredje div for tommelen. Disse to siste er både tydelig merket med en id-attributt, men en annen ting jeg finner merkelig er at selv om vi kan få tilgang til sporet med ::-webkit-slider-kjørbart-spor og tommelen med ::-webkit-slider-tommel, bare spor div har en pseudo-attributt med denne verdien.

Indre strukturen i Chrome.

I Firefox ser vi også tre div-elementer inne, bare denne gangen de er ikke nestede – alle tre av dem er søsken. Videre, de er bare ren div-elementer, ikke merket med noen attributt, så har vi ingen mate a fortelle noe som er som komponent når du ser på dem for første gang. Heldigvis, velge dem i inspektøren fremhever den tilsvarende komponenten på siden, og det er hvordan vi kan fortelle at den første er spor, det andre er det fremgang, og den tredje er tommelen.

Indre strukturen i Firefox.

Vi kan få tilgang til sporet (første div) med ::-moz-range-spor, den pågår (andre div) med ::-moz-range-progress og tommelen (siste div) med ::-moz-range-tommelen.

Strukturen i Kanten er mye mer kompleks, noe som til en viss grad åpner for en større grad av kontroll over styling glidebryteren. Men, vi kan bare få tilgang til elementene med -ms – prefiks Id-ene, noe som betyr at det er også mange elementer vi ikke har tilgang, med bakt i stiler vi vil ofte ha behov for å endre, som overflow: hidden på elementer mellom den faktiske inndata og dens spor eller overgang på tommelen morselskap.

Indre strukturen i Kanten.

Å ha en annen struktur og være i stand til å få tilgang til alle elementene inne for å style alt som vi ønsker det betyr at du oppnår samme resultat i alle nettlesere kan være svært vanskelig, om ikke umulig, selv om det å måtte bruke en annen pseudo-element for hver webleser hjelper til med å sette individuelle stiler.

Vi bør alltid ta sikte på å holde den individuelle stiler til et minimum, men noen ganger er det bare ikke mulig, som å sette samme stil kan gi svært ulike resultater grunn til å ha ulike strukturer. For eksempel, angi egenskaper som tetthet eller filter eller til og med forandre på banen vil også påvirke tommelen i Chrome og Kant (hvor det er et barn/ etterkommer av spor), men ikke i Firefox (der det er søsken).

Den mest effektive måten jeg har funnet for å sette vanlige stiler ved hjelp av en Sass mixin fordi det følgende vil ikke fungere:

inngang::-webkit-slider-kjørbart-spor,
inngang::-moz-range-spor,
inngang::-ms-spor { /* vanlige stiler */ }

For å gjøre det arbeidet, vi hadde behov for å skrive det slik:

inngang::-webkit-slider-kjørbart-spor { /* vanlige stiler */ }
inngang::-moz-range-spor { /* vanlige stiler */ }
inngang::-ms-spor { /* vanlige stiler */ }

Men det er mye repetisjon og vedlikehold mareritt. Dette er det som gjør mixin-løsning sanest alternativ: vi har bare å skrive den vanlige stiler gang, så hvis vi beslutter å endre noe i den vanlige stiler, så vi trenger bare å gjøre som du vil endre på ett sted – i mixin.

@mixin spor() { /* vanlige stiler */ }

input {
&::-webkit-slider-kjørbart-spor { @inkluderer spor }
&::-moz-range-spor { @inkluderer spor }
&::-ms-spor { @inkluderer spor }
}

Merk at jeg bruker Sass her, men du kan bruke andre preprosessor. Uansett hva du foretrekker er bra så lenge man unngår repetisjon og gjør koden enklere å vedlikeholde.

Første stiler

Neste, vi tar en titt på noen av standardstilene glidebryteren og dens komponenter kommer med for å bedre forstå hvilke egenskaper trenger å være eksplisitt angitt for å unngå visuelle forskjeller mellom nettlesere.

Bare en advarsel på forhånd: ting er rotete og komplisert. Det er ikke bare det at vi har ulike standarder i ulike nettlesere, men også å endre en eiendom på ett element, kan du endre en annen i en uventet måte (for eksempel når du angir en bakgrunn som endrer også farge, og legger til en kantlinje).

WebKit nettlesere og Edge (fordi, ja, Edge gjelder også mye av WebKit prefiks ting) har også to nivåer av standarder for visse egenskaper (for eksempel de som er knyttet til mål, kantlinjer og bakgrunner), hvis vi kan kalle dem det – før innstillingen -webkit-utseende: ingen (uten noe som stiler setter vi vil ikke fungere i disse nettleserne) og etter å ha satt den. Fokuset kommer til å være likevel på standarder etter innstilling -webkit-utseende: ingen grunn, i WebKit nettlesere, kan vi ikke stil området inngang uten å sette dette, og hele grunnen til at vi går gjennom alt dette er å forstå hvordan vi kan gjøre livene våre lettere når styling glidere.

Vær oppmerksom på at innstillingen -webkit-utseende: ingen på området inngang og på tommelen (sporet allerede har det som standard satt for noen grunn) fører til glidebryteren til å fullstendig forsvinne i både Chrome og Edge. Hvorfor dette skjer er noe vi skal diskutere litt senere i denne artikkelen.

Den faktiske utvalg input-elementet

Den første egenskapen jeg har tenkt på å sjekke, safe-dimensjonering, skjer for å ha samme verdi i alle nettlesere – innhold-boksen. Vi kan se dette ved å se opp boksen-dimensjonering eiendel i den Beregnede – fanen i DevTools.

Boksen-dimensjonering av området inngang, komparative blikk på alle tre nettlesere (fra øverst til nederst: Chrome, Firefox, Edge).

Dessverre, det er ikke en indikasjon på hva som kommer. Dette blir åpenbart når vi har en titt på egenskaper som kan gi oss elementet er bokser – margin, border, padding, bredde, høyde.

Standard margin er 2px i Chrome og Kant og 0 .7em i Firefox.

Før vi går videre, la oss se hvordan vi kom verdiene ovenfor. Den utregnede lengden verdier vi får er alltid px verdier.

Imidlertid, Chrome viser oss hvordan nettleseren stiler ble satt (user agent “stylesheet” regelsett på en grå bakgrunn). Noen ganger de beregnede verdiene vi får ikke var eksplisitt, så det er ingen bruk, men i dette tilfellet, kan vi se at marginen var virkelig satt som et px verdi.

Sporing nettleser stiler i Krom, margin tilfelle.

Firefox lar oss spore kilden til nettleseren stiler i noen tilfeller, som vist i skjermbildet under: