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)
- Posted in:
- CSS,
- JavaScript
- Tags:
- CSS3,
- JavaScript,
- Tips,
- Tutorial
Foarte util acest articol. Multi asa zisi web-designeri ar trebui sa bage la capatana aceste tehnici.
Am si eu o mica curiozitate, de ce nu scoti outline-ul de la link-ul pus pe logo-ul blogului?
Ștefan: mă bucur că te-a ajutat articolul. Outline nu îl scot pentru că ar trebui să poți naviga și fără mouse cumva, nu?