En Glidande Mardröm: att Förstå de Olika Ingång

0
63

Du kanske redan har sett en massa tutorials på hur man utformar de olika input. Även om detta är en annan artikel om detta ämne, det handlar inte om hur man får några specifika visuella resultat. I stället dyker in i webbläsaren inkonsekvenser, och beskriver i detalj vad var och en gör för att visa att reglaget på skärmen. Att förstå detta är viktigt eftersom det hjälper oss att ha en tydlig idé om hur vi kan göra vår reglaget ser ut och beter sig konsekvent i olika webbläsare och stilar som är nödvändiga för att göra så.

Titta inuti en rad ingång

Före allt annat måste vi se till att webbläsaren utsätter DOM inne i olika input.

I Chrome, tar vi upp DevTools, gå till Inställningar, Inställningar, Delar och se till att Visa user agent skugga DOM alternativet är aktiverat.

Sekvens av Chrome skärmdumpar som illustrerar några steg från ovan.

I Firefox, vi gå till about:config och se till att den devtools.inspektör.showAllAnonymousContent flagga är satt till true.

Sekvens av Firefox skärmdumpar som illustrerar några steg från ovan.

För en mycket lång tid, jag var övertygad om att Kanten inte erbjuder något sätt att se vad som finns inuti sådana element. Men samtidigt som jävlas med det, upptäckte jag att där det finns en vilja och (och några stumma lycka till) det finns ett sätt! Vi måste få upp DevTools, så gå till rad input vi vill inspektera, högerklicka på den, välj granska komponent och bam, DOM Explorer panel nu visar strukturen av våra glida!

Sekvens av Kanten skärmdumpar som illustrerar några steg från ovan.

Uppenbarligen är detta en bugg. Men det är också oerhört bra, så jag klagar inte.

Struktur inuti

Rätt från början, kan vi se en källa för potentiella problem: vi har helt olika djur inne för varje webbläsare.

I Chrome längst upp i skuggan DOM, vi har en div som vi inte åt längre. Detta brukade vara möjligt tillbaka när /djup/ var som stöds, men då förmågan att tränga genom den skugga barriär som kunde anses vara en bugg, så vad som brukade vara en användbar funktion togs bort. Inuti denna div, vi har en för banan, och inom spåret div, vi har en tredje div för tummen. Dessa två sista är både tydligt märkt med ett id-attribut, men en annan sak som jag tycker är konstigt är, att medan vi kan komma spåret med ::-webkit-reglaget-körbara-spåret och tummen med ::-webkit-reglaget-tumme, bara spåret div har en pseudo-attribut med detta värde.

Inre struktur i Chrome.

I Firefox ser vi också tre div-element inuti, bara den här gången de är inte nästlade – alla tre av dem är syskon. Dessutom, de är bara vanlig div-element, inte märkt av några attribut, så vi har inget sätt att berätta vilken som är vilken komponent när man tittar på dem för första gången. Lyckligtvis, att välja dem i den inspektör som belyser motsvarande komponent på sidan och så kan vi berätta att den första banan, den andra är utvecklingen och den tredje är tummen.

Inre struktur i Firefox.

Vi kan komma spåret (första div)::- moz-utbud-spår, framsteg (andra div)::- moz-rad-framsteg och tummen (sista div)::- moz-utbud-tumme.

Strukturen i Kanten är mycket mer komplex, och som i viss mån möjliggör en högre grad av kontroll över styling reglaget. Men vi kan bara få tillgång till de delar med -ms – prefix-Id, vilket innebär att det finns också en hel del element som vi inte kan komma, med bakade i stilar som vi hade ofta behöver förändring, som overflow: hidden om element mellan det faktiska bidrag och dess spår eller övergången på tummen är förälder.

Inre struktur i Kanten.

Att ha en annan struktur och att det inte går att komma åt alla element inuti för att styla allt som vi önskar medel för att uppnå samma resultat i alla webbläsare kan vara mycket svårt, om inte omöjligt, även om att använda olika pseudo-element för varje webbläsare hjälper till med att sätta individuella stilar.

Vi bör alltid sträva efter att hålla den individuella stilar till ett minimum, men ibland är det bara inte möjligt, som att ställa samma stil kan ge mycket olika resultat på grund av att ha olika strukturer. Till exempel, för att ange egenskaper såsom opacitet eller filter eller ens förändra på banan skulle också påverka tummen i Chrome och Kanten (där det är ett barn/ en ättling av banan), men inte i Firefox (där det är som sina syskon).

Det mest effektiva sättet jag har funnit att fastställa gemensamma stilar är genom att använda en Sass mixin på grund av följande inte fungerar:

input::-webkit-reglaget-körbara-spår,
input::-moz-utbud-spår,
input::-ms-track { /* gemensamma stilar */ }

För att få det att fungera, vi skulle behöva att skriva det så här:

input::-webkit-reglaget-körbara-track { /* gemensamma stilar */ }
input::-moz-utbud-track { /* gemensamma stilar */ }
input::-ms-track { /* gemensamma stilar */ }

Men det är en hel del upprepningar och underhåll mardröm. Detta är vad som gör mixin lösning sanest alternativ: vi har bara att skriva den gemensamma stilar en gång så, om vi beslutar att ändra något i den gemensamma stilar, då vi bara behöver göra för att ändra på ett ställe – i mixin.

@mixin spår() { /* gemensamma stilar */ }

input {
&::-webkit-reglaget-körbara-track { @innehålla spår }
&::-moz-utbud-track { @innehålla spår }
&::-ms-track { @innehålla spår }
}

Observera att jag med hjälp av Sass här, men du kan använda något annat preprocessor. Vad du föredrar är bra så länge det inte upprepar sig och gör koden lättare att underhålla.

Första stilar

Nästa, vi tar en titt på några av de förvalda stilar reglaget och dess komponenter kommer med för att bättre förstå vilka egenskaper som behöver anges uttryckligen att undvika visuella inkonsekvenser mellan webbläsare.

Bara en varning i förväg: det är rörigt och komplicerat. Det är inte bara att vi har olika standard i olika webbläsare, men också att ändra en egenskap på en del kan ändra en annan på ett oväntat sätt (till exempel, när en inställning ändras även bakgrunden i färg och lägger till en kantlinje).

WebKit webbläsare och Edge (eftersom, ja, Edge gäller också en hel del av WebKit-prefix på saker) har också två nivåer av standardvärden för vissa egenskaper (till exempel när det gäller mått, gränser och bakgrunder), om vi kan kalla dem det – innan -webkit-utseende: ingen (utan vilka stilar satte vi kommer inte att fungera i dessa webbläsare) och efter att du installerat det. Fokus kommer att vara på standardvärden efter miljö -webkit-utseende: ingen grund i WebKit webbläsare, vi kan inte style utbudet in utan att ställa in denna och hela anledningen till att vi går igenom allt detta för att förstå hur vi kan göra våra liv enklare när du styling reglagen.

Observera att miljö -webkit-utseende: ingen på olika input och på tummen (banan redan har det som standard av någon anledning) orsakar reglaget för att helt försvinna i både Chrome och Edge. Varför det händer är något vi kommer att diskutera lite senare i denna artikel.

Den faktiska sortiment input-element

Den första egenskapen jag har tänkt på kontroll, box-sizing, råkar ha samma värde i alla webbläsare – innehåll-rutan. Vi kan se detta genom att titta upp box-sizing egendom i den Beräknade fliken i DevTools.

Rutan-dimensionering av olika indata, jämförande titt på alla tre webbläsare (från topp till botten: Chrome, Firefox, Kant).

Tyvärr, det är inte ett tecken på vad som komma skall. Detta blir uppenbart när vi har en titt på egenskaperna som ger oss del lådor – margin, border, padding, bredd, höjd.

Som standard är marginalen 2px i Chrome och Kant och 0 .7em i Firefox.

Innan vi går vidare, låt oss se hur vi fick värden ovan. De beräknade längd värden som vi får är alltid px värden.

Men Chrome visar oss hur webbläsaren stilar var inställd (user agent stylesheet regel ställer på en grå bakgrund). Ibland de beräknade värdena vi får inte uttryckligen anges, så det är ingen idé, men i det här fallet, kan vi se att marginalen var verkligen inställd som en px värde.

Spåra webbläsaren stilar i Chrome, marginalen i mål.

Firefox låter oss också spåra källan till webbläsaren stilar i vissa fall, som visas på skärmbilden nedan: