Le run-time rendering une technique qui permet d’afficher les images uniquement par l’intermédiaire du moteur graphique des navigateurs pour à terme remplacé l’usage d’éditeur graphique tel que Photoshop (ie ‘autor-time rendering).
Les navigateurs modernes sont de plus en plus capables d’afficher des éléments graphiques et de produire des effets développés uniquement en CSS et parfois avec un peu de JavaScript. Dégradés, lueurs externes, biseaux, ombres et animations, tout peut être créé en CSS bien que le support de certaines des techniques avancées reste approximatif. Bien qu’il est beaucoup moins intuitif de coder ce genre d’effets qu’à partir de l’interface graphique de Photoshop, il y a plusieurs avantages :
- Vitesse et bande passante : en supprimant les images, le temps de chargement peut être significativement réduit et la vitesse de chargement des pages améliorée.
- Évolutivité : comme tout est développé à base d’algo, il n’y a pas besoin de se soucier de la pixellisation. L’affichage des éléments et des effets sont net tout aussi bien sur des téléphones portables que sur votre écran 24 pouces.
- Flexibilité : forme, taille et couleur peuvent être modifiés comme bon vous semble sans passer par un éditeur graphique.
- Ré-utilisabilité : une classe peut être codée, éditée et appliquée à l’ensemble de votre application web.
Pour l’instant, cette manière de concevoir les éléments graphiques n’est supportée que de façon optimale par les navigateurs basés sur Webkit mais pas mal d’effets sont également compatibles sur les autres navigateurs. Il faudra juste ajouter les différents préfixes vendeurs (moz, webkit, ms, khtml, o).
Voici quelques exemples de rendus possible sous Chrome :
http://attasi.com/experiments/volume/
https://cordobo.com/wp-content/uploads/ie-pure-css-logo/
http://www.subcide.com/experiments/fail-whale/
