Formulaires : quand les CSS 3 vous changent la vie

Souvenez-vous, l’an dernier j’avais rédigé un billet sur les apports de CSS 3 pour les formulaires (voir ce billet ici : Des formulaires standardisés) et notamment sur les pseudo-classes comme :valid, :invalid ou encore :required. Le Gou Blog vient de nous publier un billet sur le même thème qui tombe à pic : Un peu de CSS3 pour les formulaires…. L’auteur nous parle entre autre de pseudo-classes comme :disabled, :focus ou encore :checked.

Pourquoi cet article tombe à pic ? Tout simplement parce qu’à l’époque où j’ai rédigé mon billet, toutes ces pseudo-classes étaient encore de la science-fiction, alors qu’avec la sortie de Firefox 1.5 et autres Opera 8.5, ces pseudo-classes peuvent enfin être exploitées. Si vous n’êtes pas convaincu, je vous invite à regarder le formulaire test du sieur Gou ou encore à admirer cette superbe mise en page à deux colonnes réalisée bien entendu à l’aide de propriétés CSS 3.

Au cas où vous ne l’auriez pas compris, l’utilité de ces pseudo-classes est de standardiser la façon de concevoir un formulaire en proposant du code toujours plus limpide et un comportement uniforme.

Un commentaire sur “Formulaires : quand les CSS 3 vous changent la vie

  1. Malheureusement pas grand chose de prévu sous IE 7… Je pense que la nécessité de prévoir des gabarits à vitesse variable va être de plus en plus forte. A savoir 2 versions d’une même page : une version légère, sémantique et flexible pour les navigateurs récents (Firefox, Opera, Safari) et les moteurs d’indexation (Google Bot, Kinja…) et une autre lourde et rigide pour IE. C’est malheureux mais c’est comme ça, la lenteur d’évolution d’IE ne doit pas freiner le progrès. /Fred

  2. D’histoire, je me rappelle que déja il y’a quelque années, ça couinait déja qu’il fallait scinder le code javascript afin de permettre les pages de fonctionner dans tous les navigateurs. On devrait avoir l’habitude maintenant, si ça recommence avec les CSS :) Je me rappelle encore auparant la vacherie qu’étaient les terminaux textes vt100, vt220, hpterm … « elle est écrite pour quel type de term ton appli ? hpterm ! Ah flûte ». L’histoire est un éternel recommencement. Surtout dans ce métier …

  3. A la vue de la progression constante des navigateurs récents, lors de la sortie d’IE7 le marché n’aura plus le même poids. Rhalala, quand on voit le rêve qu’est de faire du CSS3 (XHTML2 à l’air bien sympa aussi avec des tag précis), vivement demain ! En espérant qu’il n’y aura plus de navigateur bloqué dans son développement…

  4. comment ça 2 colonnes ? 1, 2 ou 3 colonnes selon la taille de la fenêtre ;o) et ça fait rêver ! bon ça n’est encore que du -moz-css

    -moz-column-width: 20em; -moz-column-gap: 1em;

    vivement demain…

  5. Comment ça c’est du -moz-css ? Pas du tout tonin, Firefox 1.5 est tout à fait capable d’interpréter les attributs column des CSS 3 ! /Fred

  6. Justement, -moz- signifie que cette fonctionnalité n’est disponible que pour les navigateurs de la fondation mozilla (dont Firefox fait partie :P)

  7. En fait quand je remplace les moz-column-… par leur équivalent CSS3, ça donne:

    column-width: 20em; column-gap: 1em;

    et là, il n’y a plus de magie… Je pense qu’il me faut plus me renseigner sur le rôle des -moz-… qui seraient des sortes de pré-support de fonctionnalités CSS par Gecko. à préciser…

  8. Je confirme les dires de Tonin. Quand j’ai fait le test des colonnes, j’ai remarqué que les balises sans le -moz- ne fonctionnaient carrément plus! Dommage… Surtout parce que l’implémentation de la balise standard ne nuirait pas, non? quel est l’intérêt d’ajouter un -moz- à une balise qui, éventuellement, devrait être acceptée comme un standard?

  9. Je signale en passant qu’il n’y a pas de « profils navigateurs » pour CSS 3, donc que les navigateurs peuvent implémenter ce qu’ils veulent et donc ne sont pas soumis à une interopérabilité totale.

Laisser un commentaire