CSS auto prefixer

Geschreven door: op dinsdag 20 februari 2018

Leestijd:

In een eerder blog over vendor prefixes was te zien hoe met behulp van prefixes experimentele stijling regels voor specifieke browser toegepast kunnen worden.

Hoewel het gebruik van prefixes in deze gevallen een uitkomst bied, levert dit wel extra werk en onderhoud op. Voor de verschillende css regels moet bijgehouden worden wanneer er prefixes benodigd zijn en elke keer dat deze regel gebruikt wordt moeten er een aantal extra css regels toegevoegd worden.

Hier is echter een oplossing bedacht, de auto prefixer. Dit is een tool die automatisch de correcte prefixes toevoegt aan de css. Bij het opstellen van stijl zijn slechts de basis regels benodigd. Zo zij bij het genoemde voorbeeld van schaduwen in de prefix blog slechts de regel van ‘box-shadow’ toegevoegd hoeven worden. Nadat de stijling compleet is wordt deze verwerkt door de auto prefixer tool. Deze voegt dan automatisch de correcte prefixes toe waar nodig. Verder herkent de tool ook prefix regels die inmiddels niet meer nodig zijn en deze zullen niet toegevoegd of zelfs verwijderd worden. Dit scheelt weer in de hoeveelheid css code die naar elke browser wordt gestuurd wat een website dus sneller en efficiënter maakt.

Browserlist

Zoals eerder genoemd weet auto prefixer welke prefix regels wel of niet benodigd zijn. Dit wordt gedaan doormiddel van een browserlist. Van internet wordt een lijst gehaald met de meest gebruikte browsers en de versies hiervan. Standaard wordt ervoor gezorgd dat altijd de nieuwste twee browsers en alle browsers die voor 99% van het verkeer van internet opmaken ondersteund worden.

De prefixes die voor de browsers in deze lijst benodigd zijn zullen dus toegevoegd worden. Alle andere prefixes worden verwijderd.

Het is ook mogelijk om de browserlist zelf samen te stellen. Er kan via tekst opgegeven worden welke browsers en welke versies hiervan wel of niet ondersteund moeten worden. Een aantal voorbeelden hiervan:

IE 8

Chrome 52

Dit zou Internet Explorer 8 een Google Chrome versie 52 toevoegen

            IE >= 8

Dit zou Internet Explorer 8 en nieuwer (dus versie 9, 10 en 11) toevoegen

            Last 2 versions

            Last 5 Chrome versions

Dit zou de laatste twee versies van alle browsers gebruiken en de laatste 5 versies van Google Chrome.

            > 1%

Browsers die gebruikt worden door meer dan 1% van de gebruikers van het totale internet verkeer. Zie Browserlist voor een uitgebreide lijst en probeer welke browsers binnen deze regels vallen op browserl.ist

Deze gegevens worden vanaf de Global usage statistics opgehaald en zijn hierdoor altijd up-to-date. Als er bijvoorbeeld is ingesteld om de laatste twee versies van chrome te gebruiken en een nieuwe versie wordt uitgegeven, dan wordt deze automatisch toegevoegd aan de lijst en de nu op 2 na nieuwste versie wordt niet langer ondersteund.

Met de verkregen lijst van browsers wordt vervolgens met behulp van Can I use bepaald welke vendor prefixes benodigd zijn. Dit brengt ons uiteindelijk tot het gewenste resultaat van het automatisch invullen van vendor prefix in de geschreven css. Zo kunnen developers zich weer focussen op het inrichten van de website.


Andere blogartikelen

  • Plugins maken in jQuery

    Geschreven door: op vrijdag 29 juni 2018

    Door zelf code die je vaak gebruikt om te zetten naar jQuery-plugins, zorg je ervoor dat je deze code eenvoudig kan toepassen in andere projecten en je je kan bezighouden met het maken van nieuwe func ...

    Bekijk het artikel »
  • Dependency injection

    Geschreven door: op dinsdag 26 juni 2018

    Vanuit een programmeer standpunt gezien is indeling van code een van de belangrijkste aspecten van het programmeren. Een rommelige werkomgeving maakt het lastig om te vinden wat je nodig hebt. Het opr ...

    Bekijk het artikel »
  • Databasetypen

    Geschreven door: op dinsdag 26 juni 2018

    Bij de meeste websites behoort een database waarin gegevens van de website worden opgeslagen. Er zijn verschillende manieren waarop deze gegevens kunnen worden bijgehouden. De meest gebruikte methode ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
partners-logo.jpg

mockup_tablet.png

Bedient u uw (potentiële) klant optimaal binnen het online koopproces? 

Vul de Online Scorecard in ›