Wat zijn de vendorprefixes?

Dit zijn niet-standaard voorvoegsels die browserontwikkelaars gebruiken om ondersteuning toe te voegen voor nieuwe of experimentele CSS-eigenschappen voordat ze officieel worden goedgekeurd en opgenomen in de standaarden. Ze maken het mogelijk om nieuwe functies geleidelijk in het web te introduceren, maar vereisen een zorgvuldige aanpak.

Belangrijkste voorvoegsels:

• -webkit-: Chrome, Safari, Opera (sommige versies), de meeste mobiele browsers (inclusief Android en iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (sommige versies).
• -o-: Opera (oude versies).

Bij het gebruik van vendor voorvoegsels is het belangrijk om de schrijfvolgorde te respecteren: eerst de voorvoegsels, daarna de standaard eigenschap. Dit zorgt ervoor dat wanneer browsers de standaard eigenschap ondersteunen, deze de voorvoegsels overschrijft.

.element {
  -webkit-border-radius: 10px; /* Safari versies 5 en ouder */
  -moz-border-radius: 10px; /* Firefox versies 4 en ouder */
  border-radius: 10px; /* Standaard eigenschap */
}

Tegenwoordig is het gebruik van vendor voorvoegsels aanzienlijk afgenomen dankzij een meer actieve adoptie van nieuwe CSS-eigenschappen door alle browsers. Ze kunnen echter nodig zijn om oudere browserversies te ondersteunen of bij het werken met experimentele API's.

Voor het automatiseren van het beheer van vendor voorvoegsels wordt vaak PostCSS met de Autoprefixer plugin gebruikt.

// Voorbeeld van PostCSS-configuratie met Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versies', '> 1%'] // Ondersteunde browsers
    })
  ]
};

Autoprefixer analyseert CSS en voegt de benodigde voorvoegsels toe op basis van de compatibiliteitsinstellingen met browsers. Dit vereenvoudigt de ontwikkeling en vermindert de kans op fouten die verband houden met handmatige toevoeging en beheer van voorvoegsels.