Een Glijdende Nachtmerrie: Inzicht in het Bereik Input

0
113

Je kan al een heleboel tutorials over hoe je de stijl van het bereik input. Terwijl dit in een ander artikel over dat onderwerp, het gaat niet over hoe je een specifieke visuele resultaat. In plaats daarvan duiken in browser inconsistenties, waarin wordt vastgesteld wat ieder doet dat u wilt weergeven schuifbalk op het scherm. Om dit te kunnen begrijpen is belangrijk, omdat het helpt ons een duidelijk idee over of we onze schuifregelaar kijken en zich gedragen consequent in verschillende browsers en welke stijlen zijn nodig om dit te doen.

Zoeken binnen een bereik input

Voordat iets anders, moeten we ervoor zorgen dat de browser stelt de DOM binnen het bereik input.

In Chrome, brengen we tot DevTools, ga naar Instellingen, Voorkeuren, Elementen en zorg ervoor dat de Toon van de user-agent schaduw DOM optie is ingeschakeld.

Volgorde van Chrome screenshots ter illustratie van de stappen van hierboven.

In Firefox, we gaan naar about:config en zorg ervoor dat de devtools.inspecteur.showAllAnonymousContent vlag is ingesteld op true.

Volgorde van Firefox screenshots ter illustratie van de stappen van hierboven.

Voor een zeer lange tijd, ik was ervan overtuigd dat Edge biedt geen enkele manier van het zien van wat er in deze elementen. Maar terwijl het knoeien met, ontdekte ik dat waar er een wil is en (en sommige stom geluk) er is een weg! We moeten om DevTools, ga dan naar het bereik input die we willen controleren, klik erop met de rechtermuisknop, selecteer Inspecteer Element en bam, de DOM Explorer paneel toont nu de structuur van onze slider!

Volgorde van Edge screenshots ter illustratie van de stappen van hierboven.

Dit is blijkbaar een bug. Maar het is ook enorm handig, dus ik klaag niet.

De structuur binnen

Direct vanaf het begin zien we een bron voor mogelijke problemen: we hebben zeer verschillende dieren in voor elke browser.

In Chrome, op de top van de schaduw DOM, we hebben een div wij geen toegang meer. Deze gebruikt worden om mogelijk terug wanneer /diep/ werd ondersteund, maar dan is de mogelijkheid om te doorprikken van de shadow barrier werd geacht om een bug, dus wat vroeger een handige functie is vervallen. Binnen deze div, we hebben nog een voor de baan en binnen de track div, hebben we een derde div voor de duim. Deze laatste twee zijn beide duidelijk gelabeld met een id-attribuut, maar een ander ding wat ik vreemd vind is dat we, hoewel we toegang kunnen krijgen tot de baan met:- webkit-slider-draaibaar-track en de duim met:- webkit-slider-duim, alleen de track div heeft een pseudo-kenmerk met deze waarde.

Innerlijke structuur in Chrome.

In Firefox, zien we ook drie div elementen binnen, alleen deze keer is ze niet genest – alle drie van hen zijn broers en zussen. Bovendien, ze zijn gewoon de div-elementen, niet aangeduid door een attribuut, dus we hebben geen manier van vertellen, die is welk onderdeel wanneer ze voor de eerste keer. Gelukkig, ze te selecteren in de inspecteur van de hoogtepunten van het desbetreffende onderdeel op de pagina en op die manier kunnen wij vertellen dat de eerste is de track, de tweede is de vooruitgang en de derde is de duim.

Innerlijke structuur in Firefox.

We kunnen de toegang van de track (eerste div) met ::-moz-range-track, de vooruitgang (tweede div) met ::-moz-range-voortgang en de duim (laatste div) met ::-moz-range-duim.

De structuur in de Rand is veel meer complex, dat, in zekere mate, zorgt voor een grotere mate van controle over de styling van de schuifregelaar. We kunnen echter alleen toegang tot de elementen met-de-ms – prefix-Id ‘ s, dat betekent dat er ook veel elementen in die we niet toegankelijk is, en gebakken in stijlen die we vaak zou moeten veranderen, net als de overflow: hidden op de elementen tussen de werkelijke verbruik en de track of de overgang op de duim van de ouder.

Innerlijke structuur in de Rand.

Het hebben van een verschillende structuur en niet in staat om toegang te krijgen tot alle elementen binnen om de stijl van alles zoals we willen dat betekent dat het zelfde resultaat behalen bij alle browsers kan het zeer moeilijk, zo niet onmogelijk, zelfs als het hebben van een andere pseudo-element voor elke browser helpt met het instellen van een individuele stijlen.

We zouden altijd moeten proberen om de individuele stijlen tot een minimum, maar soms is het gewoon niet mogelijk is, zoals het instellen van de dezelfde stijl kan resulteren in zeer verschillende resultaten als gevolg van het hebben van verschillende structuren. Bijvoorbeeld het instellen van de eigenschappen, zoals de dekking of het filter of zelfs transformatie op het spoor zou ook van invloed op de duim in Chrome en Rand (waar het een kind/ nakomeling van de track), maar niet in Firefox (waar zijn broer).

De meest efficiënte manier die ik heb gevonden om gemeenschappelijke stijlen is met behulp van een Sass mixin omdat het volgende werkt niet:

input::-webkit-slider-draaibaar-track,
input::-moz-range-track,
input::-ms-track { /* common stijlen */ }

Om het te laten werken, zouden we moeten schrijven het zo:

input::-webkit-slider-draaibaar-track { /* common stijlen */ }
input::-moz-range-track { /* common stijlen */ }
input::-ms-track { /* common stijlen */ }

Maar dat is een veel herhaling en een onderhoudbaarheid nachtmerrie. Dit is wat maakt het mixin oplossing de sanest optie: we hebben alleen tot het schrijven van de gemeenschappelijke stijlen eenmaal zo, als we besluiten te wijzigen, iets in de gemeenschappelijke stijlen, dan hoeven we alleen maar om dat te laten veranderen in een plaats – in de mixin.

@mixin track() { /* common stijlen */ }

input {
&::-webkit-slider-draaibaar-track { @include track }
&::-moz-range-track { @include track }
&::-ms-track { @include track }
}

Merk op dat ik met Sass hier, maar je kan gebruik maken van alle andere preprocessor. Wat je voorkeur is goed zolang het voorkomt herhaling en de code gemakkelijker te onderhouden.

Eerste stijlen

Vervolgens nemen we een kijkje bij enkele van de standaard stijlen op de schuifregelaar en zijn componenten hebben om beter te begrijpen welke eigenschappen moet expliciet worden ingesteld om te voorkomen dat de visuele verschillen tussen browsers.

Gewoon een waarschuwing vooraf: de dingen zijn rommelig en ingewikkeld. Het is niet alleen dat wij hebben verschillende standaard in verschillende browsers, maar ook het veranderen van een eigenschap van een element kan een ander op een onverwachte manier (bijvoorbeeld bij het instellen van een achtergrond, verandert ook de kleur en voegt een grens).

WebKit browsers en Rand (want, ja, Edge geldt ook voor veel van de WebKit prefix dingen) hebben ook twee niveaus van standaardwaarden voor bepaalde eigenschappen (bijvoorbeeld die met betrekking tot afmetingen, randen en achtergronden), als we ze kunnen noemen dat – vóór het instellen van de -webkit-uiterlijk: geen (zonder dat de stijlen die we stellen niet werkt in deze browsers) en na de instelling. De aandacht gaat echter op de standaardinstellingen na het instellen van de -webkit-uiterlijk: geen, omdat, in WebKit browsers, kunnen we niet de stijl van het bereik input, zonder dat dit en de hele reden we gaan door dit alles is om te begrijpen hoe kunnen we ons leven gemakkelijker maken bij het stylen van de schuifregelaars.

Let op dat de instelling -webkit-uiterlijk: niemand op het bereik input en op de duim (de track heeft al standaard ingesteld voor een of andere reden), wordt de schuifregelaar om volledig te verdwijnen in zowel Chrome als de Rand. Waarom dat gebeurt is iets wat we zullen bespreken wat later in dit artikel.

Het werkelijke bereik input element

De eerste eigenschap heb ik nagedacht over het controleren, box-sizing, gebeurt met dezelfde waarde in alle browsers – content-box. We kunnen dit zien door de box-sizing eigendom in de Berekende tabblad in DevTools.

De box-sizing van het bereik input, vergelijkende blik op alle drie de browsers (van boven naar beneden: Chrome, Firefox, Edge).

Helaas, dat is niet een indicatie van wat komen gaat. Dit wordt duidelijk wanneer we kijken naar de eigenschappen die ons naar het element dozen – margin, border, padding, breedte, hoogte.

Standaard is de marge is 2px in Chrome en Rand en 0 .7em in Firefox.

Voordat we verder gaan, laten we zien hoe we de waarden hierboven. De berekende lengte waarden krijgen we altijd px-waarden.

Echter, Chrome toont ons hoe de browser stijlen werden ingesteld (de user agent stylesheet regel stelt op een grijze achtergrond). Soms is de berekende waarden krijgen we niet expliciet zijn ingesteld, dus dat is niet te gebruiken, maar in dit specifieke geval, kunnen we zien dat de marge werd er inderdaad als een px-waarde.

Tracing browser stijlen in Chrome, de marge geval.

Firefox laat ons ook het traceren van de bron van de browser stijlen in sommige gevallen, zoals in de screenshot hieronder: