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)

2 Comentarii to “Renunță la prefixe!”

  1. 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? :)

  2. Staicu Ionuț-Bogdan

    Ș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? :)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter