Hai să animăm doar ce trebuie!

Unul dintre lucrurile bune aduse de CSS3 este reprezentat de animații. Din păcate însă, unul dintre cele mai rele lucruri aduse de CSS este reprezentat tot de animații.

Cum se fac animațiile în ?

.foo {
  transition:all 1s ease;
}

O linie simplă, ce ne asigură că toate proprietățile* vor fi animate. Doar că, în majoritatea cazurilor, avem nevoie doar de una-două proprietăți animate.

Acum câțiva ani, elementele textarea au început să permită redimensionarea. Adică se stabilește din cod o dimensiune inițială iar utilizatorul poate redimensiona toată povestea după nevoie. Este foarte util atunci când scrii un comentariu mai lung pe un blog. Nu comentez pe seama faptului că cei ce codează teme de bloguri au facut un obicei în a folosi overflow:hidden peste tot, ci doar că, împreună cu transition:all apar niște efecte cel puțin dubioase:

* Evident, mă refer la proprietățile ce pot fi animate.

In Memoriam Mihai Șucan

Am aflat de pe forum că Marius Șucan nu mai este printre noi. Nu l-am cunoscut niciodată, dar am auzit ocazional de el de-a lungul timpului. A scris pe blog povestea vieții lui.

Mai mult de atât nu știu ce să scriu.

Despre tipografie

Văd aceeași greșeală de atât de multe ori încât simt că este nevoie de o însemnare pe blog. Nu că asta ar schimba multe, dar… să încercăm.

Sunt doi factori ce contribuie foarte mult la lizibilitatea unui text: font-weight și line-height.

font-weight

Până acum vreo doi ani, majoritatea fonturilor comune știau de două unități: normal și bold. Sau 400 și 700. Dar cum webfonts au devenit tot mai comune, s-au dezvoltat foarte mult și restul mărimilor (de la 100 la 900, în increment de 100). Prin urmare, un font-weight diferit de 400 (sau normal) pe conținut ar putea genera un text mai dificil de citit:

font-weight

În stânga este textul la font-weight:300, în dreapta este font-weight:400. (sursa)

O problemă suplimentară – dincolo de lizibilitate – apare la anumite fonturi, ce nu sunt complete: nu conțin diacriticile românești pe toate variantele. Și apar situații în care textul este afișat cu font-weight:300, dar diacriticile apar boldate.

Păi și când ar trebui să folosești altceva în afară de normal și bold?

Varianta sigură? Niciodată! Varianta mai puțin radicală? Doar atunci când ai un motiv bine întemeiat. Adică așa cum folosești bold sau italic pentru a scoate în evidență ceva, la fel ar trebui să folosești și un font-weight diferit de normal. Varianta cea mai comună? Titluri.

line-height

Despre line-height am scris acum mai bine de cinci ani. Lucrurile rămân valabile, cu o completare: am tot observat că se practică foarte mult specificarea unei unități atunci când se setează line-height. Adică lucruri de genul line-height:26px sau line-height:1.3em. Chiar dacă nu este neapărat o practică greșită, este mult mai util să se specifice o valoare fără nici o unitate, de exemplu line-height:1.5. Asta înseamnă că va avea întotdeauna o valoare relativă la dimensiunea fontului.