Renunță la prefixe!

Atunci când încerci să profiți de cele mai noi tehnologii din browsere, va trebui să te descurci inclusiv cu adăugarea prefixelor. O să-ți arăt o modalitate foarte simplă prin care poți evita repetarea codului de cinci ori ( -moz, -webkit, -ms, -o și varianta fără prefix).

CSS

Dacă te încăpățânezi să nu folosești un preprocesor CSS atunci treci peste această parte. Altfel, pentru SASS, poți folosi:

div{ 
  @each $prefix in -moz-, -webkit-, -ms-, -o-, '' {
    #{$prefix}transition-delay:   0s;
  }
}

Rezultatul compilat va fi totuși repetat de cinci ori, dar… altfel nu se poate (decât dacă vrei să folosești -prefix-free).

Mixins

SASS, printre altele, oferă și un fel de funcții (care se numesc mixins). În cazul în care folosești multe proprietăți ce au nevoie de prefixe, poți folosi următorul mixin:

@mixin prefixFree( $key, $value ){
  @each $prefix in -moz-, -webkit-, -ms-, -o-, '' {
    #{$prefix}#{$key}: $value;
  }
}

Pe care îl poți folosi astfel:

div { @include prefixFree( transition, (0.2s opacity ease-in, 0s margin-left linear 0.22s) ); }

JavaScript

Nu putem scăpa de un loop nici aici. M-am inspirat Exemplul este copiat din polyfill-ul pentru requestAnimationFrame*

var vendors  = [ 'ms', 'moz', 'webkit', 'o' ];
for( var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x ){
  window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
}

* Dacă ai ceva animații în pagină este musai să le faci cu RAF. De cele mai multe ori vei avea parte de o calitate crescută a animației (smoothness, CPU)