CSS vendor prefixes

Geschreven door: op dinsdag 20 februari 2018

Leestijd:

Bij CSS is het voor een aantal stijl regels mogelijk om aan te geven in welke browser deze gebruikt moet worden. Hiervoor wordt het type browser toegevoegd voor de stijl regel. Dit wordt een prefix (of ook wel vendor prefix) genoemd.

Dit wordt voornamelijk gebruikt voor nieuwe features die toegevoegd worden aan de browser. Wanneer een stijl regel net is toegevoegd bestaat er de mogelijkheid dat deze regel anders werkt dan bedoeld, of afwijkt van andere browsers. Door de feature eerst met een vendor prefix toe te voegen kan voor de specifieke browser de regel anders ingesteld worden dan de rest mocht dit nodig zijn. Wanneer blijkt dat de stijlregel correct werkt wordt de originele regel toegevoegd.

Voorbeeld

Bij de regel voor schaduwen (box-shadow) zou dit bijvoorbeeld een implementatie kunnen zijn:


box-shadow: 0 0 1px gray;

Deze regel wordt inmiddels ondersteund door alle moderne browsers. Overigens zijn er nog altijd een aantal oudere versie van browsers in de omloop waar ook rekening mee gehouden moet worden. Deze ondersteunen slechts de schaduw regel met de specifieke prefix. Daarvoor zou de volledige implementatie er zo uit komen te zien:


-webkit-box-shadow: 0 0 1px gray;
-moz-box-shadow: 0 0 1px gray;
-ms-box-shadow: 0 0 1px gray;
-o-box-shadow: 0 0 1px gray;
box-shadow: 0 0 1px gray;

De onderste regel is dezelfde als de regel die eerder genoemd is en hier wordt standaard gebruik van gemaakt. Wanneer deze regel echter onbekend is wordt er teruggevallen op de regels die er boven staan. Zo zou bijvoorbeeld een oude versie van chrome in plaats van ‘box-shadow’ de ‘-webkit-box-shadow’ gebruiken. ‘-webkit-‘ is in dit geval de prefix. De prefix namen staan voor het volgende:

  • Webkit: de engine die gebruikt wordt door onder andere Google Chrome en Safari.
  • Moz: Mozilla Firefox
  • Ms: Microsoft, Internet explorer en Edge
  • O: Opera (inmiddels maakt Opera ook gebruik van webkit)

Verder zijn er nog een aantal minder gebruikte prefixes. Een volledige lijst is te vinden op: https://en.wikipedia.org/wiki/CSS_hack#Browser_prefixes

Zie ook: CSS auto prefixing


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 ›