CSS vendor prefixes

Geschreven door: op dinsdag 20 februari 2018

Leestijd: 2 minuten

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

  • Hoe kan je meer leads genereren EN online verkopen?

    Geschreven door: op woensdag 8 september 2021

    Een website die leads genereert en online verkopen faciliteert? Met behulp van een website met geïntegreerde webshop kunt u direct meer business realiseren. Directe verkopen van standaard producten zo ...

    Bekijk het artikel »
  • Even voorstellen: Nick van Leijden

    Geschreven door: op donderdag 22 juli 2021

    Hoi, volgens mij kennen wij elkaar nog niet! Ik ben Nick van Leijden, een 24 jaar oude User Experience designer en sinds kort werkzaam bij Sigma Solutions als UX developer. Als UX developer is het mij ...

    Bekijk het artikel »
  • Even voorstellen: Renzo Korver

    Geschreven door: op dinsdag 20 juli 2021

    Mijn naam is Renzo Korver, ik ben 24 jaar en ik kom uit Oudkarspel. Eind januari 2021 ben ik bij Sigma Solutions gestart met mijn afstudeerstage voor de opleiding Communicatie aan de Hogeschool van Am ...

    Bekijk het artikel »
Bel 072 5345 888
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator:
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book Â»

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º