La confusione tra presentazione e comportamento: le animazioni CSS

La confusione tra presentazione e comportamento: le animazioni CSS

Tutti abbiamo imparato che per ogni documento web strutturato esistono tre livelli: il livello strutturale (HTML), il livello presentazionale (CSS) e il livello comportamentale (JavaScript). Con l'introduzione delle animazioni CSS3 questa suddivisione fondamentale entra in crisi. Per gli implementatori di browser, membri del CSS Working Group, le animazioni fanno ancora parte del livello presentazionale. Ma è davvero così?

Se in jQuery abbiamo:


$('#anim').animate({
    left: 100
}, 600);

Siamo concordi nell’affermare che ci troviamo nel livello di comportamento e che questa è un'animazione. Ma se nel CSS abbiamo:


#anim {
  animation: move 600ms;
}

@keyframes move {
  from: {
    left: 0px;
  }
  to: {
    left: 100px;
  }
}

Siamo concordi nel dire che ci troviamo nel livello presentazionale e che questa è un’animazione. Ma se in entrambi i livelli possiamo avere animazioni, qual è la differenza tra presentazione e comportamento?

L'unica differenza è una maggiore performance nelle animazioni CSS: essendo implementate nel linguaggio nativo del browser, sono ovviamente più veloci. I CSS si sostituiranno a JavaScript? Cosa resterà degli effetti JavaScript quando le animazioni CSS verranno pienamente supportate? E soprattutto: il modello a livelli è ancora valido in questo scenario?

Torna su