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)
