Time to share: Autoprefixer

We komen allemaal weleens dingen tegen tijdens het surfen op het net waarbij je via een zijstraat op iets terecht komt wat toch eigenlijk wel interessant blijkt te zijn. Via "Time to share" brengen wij leuke weetjes, oplossingen, etc. aan de man die je als het even meezit kunt meenemen in je eigen werkzaamheden, je net het juiste duwtje in de rug kunnen geven en/of kunt delen met anderen. Wees gerust, het zal geen ellenlange proza worden!

Ditmaal de eer aan het fenomeen: autoprefixer.

Wat is autoprefixer?

Autoprefixer is een grunt taak die css parst en vendor prefixed css properties toevoegd vanuit de "Can i Use" database.

Waarom autoprefixer?

Voor iedereen die een beetje bekend is met vendor prefixes weet dat je hiermee gebruikt kunt maken van css features die nog niet officieel zijn opgenomen in de css specificatie. Mooi dat je in veel gevallen gebruikt kunt maken van mooie nieuwe features maar je krijgt al snel te maken repeterende stukken code die uiteindelijk hetzelfde doen. Hierbij komt autoprefixer om de hoek kijken. Zonder er al te diep op in te gaan komt het erop neer dat je bij het kloppen van de css code geen rekening meer hoeft te houden met alle vendor prefixes omdat autoprefixer dit automatisch toevoegd.

Normaal gesproken ziet het er als volgt uit:


 
  1. a {
  2. -webkit-transition: all 4s ease;
  3. -moz-transition: all 4s ease;
  4. -ms-transition: all 4s ease;
  5. -o-transition: all 4s ease;
  6. transition: all 4s ease;
  7. }

Maar dankzij autoprefixer is dit voldoende:


 
  1. a {
  2. transition: all 4s ease;
  3. }

Meer informatie?

Voor uitgebreide informatie over autoprefixer, zie de guest post op css-tricks door Andrey Sitnik, de maker van de autoprefixer tool.

Neem dan eens contact op met:
Nick
Visueel ontwikkelaar
010 8200 320