zzzombie

Une petite page d’illustration de différentes possibilités qui nous sont offertes par les navigateurs modernes.
Il n’y en a que peu de mises en place mais ce sont les principales à mon avis, celles qui reviennent tout le temps et qui seraient les plus utiles si tous les navigateurs les supportaient.
Pas question ici de tests poussés en SVG ou ce genre de choses qui demandent un certain investissement de temps, il s’agit surtout de mettre en évidence des moyens élégants de faire des choses sur lesquelles ont s’est tous énervés un jour et dont on a tous raz le bol.

A tester avec Webkit, Firefox 3.1 beta et Opera.
Avec IE aussi si vous voulez, mais vous ne verrez qu’une page “cassée”. Passez la souris sur le titre pour voir l’animation CSS (webkit).

http://www.zzzombie.com/css-novelas/

Voici les possibilités mises en avant et entre parenthèses, le ou les navigateurs qui n’implémentent pas cette fonctionnalité.

- bords arrondis (OP)
- couleurs RGBA (OP)
- choix d’une police truetype (titre de la page d’exemple) (OP)
- transformations, ici les rotations (OP). Au passage, comparez le rendu du texte oblique : propre avec WK, alors que Firefox fait des espèces de vagues.
- dégradés (FF, OP)
- tag vidéo compatible avec les codecs de l’O.S. (FF, OP)
- zone de drag’n'drop (FF, OP). Pour ça il suffirait que les navigateurs acceptent tous le drag’n'drop sur le bouton submit comme Safari en standard. A la place, on doit passer par des trucs comme Browser Plus de Yahoo… autant dire qu’à part en intranet, ça n’a aucun intérêt.
- ombres sur du texte. (OP)
- contour sur le texte (FF, OP)
- masques (FF, OP)
- utilisation d’une image SVG comme image de fond (FF, WK)
- réflexions (FF, OP)
- animations en CSS

Bien sûr, le fait qu’un navigateur ne soit pas compatible avec les techniques utilisées dans la page de test ne signifie pas que le navigateur ne soit pas capable de faire tout ce qui est dans la liste.

jQuery et ses plugins permettent par exemple d’avoir déjà accès aux ombres, aux bords arrondis et aux dégradés avec tous les  navigateurs.

Pour retrouver le nom des plugins, j’ai tapé “shadows jquery” dans Google, et c’est la page suivante qui est arrivée première :
http://www.bioneural.net/2008/02/13/corners-gradients-and-shadows-with-jquery/

C’est la suite de l’article dont je j’avais donné la référence en fin de l’article “Apprenez  à mal coder avec les tutoriaux MSDN“. Admirez la cohérence involontaire au fil des articles !