Sondage sur la validation CSS 2.1 W3C

Bonjour,

Je suis en train de créer des templates de site destinées à un large public (soit gratuites, soit payantes). Mes templates sont valides XHTML. Mais pas CSS 2.1 car utilise des hacks, et de "nouvelles" balises telle que:

* {zoom: 1.0;} 

pour les problèmes de superposition de float dans IE7

-webkit-border-radius:5px;
-moz-border-radius:5px;

pour les bords arrondis

filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;

Pour l'opacité.

Je voulais donc savoir l'importance que vous accordiez à cette validation
Merci, pour vos réponses

Bonjour,

pour moi ça n'a aucune importance, seul le rendu compte. J'entends par la que, par exemple, si tes bords arrondis deviennent des angles droit sous ie6, ça ne gène aucunement. A l'inverse, si ton site devient illisible sans la transparence, il faut trouver une solution alternative.

Et comme d'habitude, tout dépend du contexte.
Modifié par bzh (07 May 2009 - 11:53)

Pour moi les hacks devraient être dans une feuille de style séparé.

Le but d'avoir une css valide n'est pas d'avoir un truc joli pour les geeks.
Mais que le rendu soit le plus rapide possible pour tous les navigateurs.
Plus de la moitié du code des navigateurs sert à la gestions des mauvaises pages HTML ou des mauvaises feuilles CSS. (Me demandez pas où j'ai vu se chiffre je ne m'en rappelle plus... )

En plus gérer des feuille de style séparé permet d'éviter de charger des styles inutiles...

"Pour info zoom:1 est remplaçable par un position:relative et un width fixe."

Pour moi c'est "presque" indispensable. Il m'arrive d'utiliser -moz-border-radius en toute connaissance de cause (dans ce cas je considère que mon site est à coins non arrondis, sauf un ptit truc en plus pour les utilisateurs de Mozilla).

A part ça, l'immense majorité des "hacks" non valides peut être remplacée par des déclarations valides en utilisant les commentaires conditionnels pour IE.

Je n'utilise pas le CSS3 car il n'est presque jamais supporté par les navigateurs de mes visiteurs. En attendant ce jour béni, point de CSS3.

Quant à l'opacité, même si c'est chiant, je la gère avec les images directement. Ca évite aussi, comme le CSS3, que ça ne soit efficace que pour quelques % de visiteurs et ça permet que tout le monde en profite !

De notre côté, on ne se gêne pas trop pour employer du CSS3 si ça peut améliorer l'ergonomie sur les navigateurs compatibles.

Par contre pour les bidouilles spécial IE, on passe aux commentaires conditionnels.

PS : pour ce qui est du "* {zoom: 1.0;}", c'est à dire de donner le Layout à tous les éléments, c'est bien trop risqué.

Raphael a écrit :
De notre côté, on ne se gêne pas trop pour employer du CSS3 si ça peut améliorer l'ergonomie sur les navigateurs compatibles.

"CSS3 might become valid" ?

En fait c'est un peu à considérer comme javascript (ou mon exemple du -moz-border-radius)... une couche supplémentaire pour agrémenter un peu plus pour ceux qui le supportent... mais dans ce cas, garder impérativement en tête la fameuse "amélioration progressive". On fait un truc joli et valide CSS2, et on le "dévalide" avec un poil de CSS3 pour faire encore plus chouette !

Il faudrait que je m'y mette... pas eu le temps encore !

beal2912 a écrit :
Mais pas CSS 2.1 car utilise des hacks

Pas bien. Commentaires conditionnels, etc.

beal2912 a écrit :
et de "nouvelles" balises

Il s'agit de propriétés, pas de balises. Et la validation peut être faite en CSS 3 sur le validateur du W3C (la norme évoluant, il est possible que le validateur soit un peu en retard, ou que cette fonctionnalité soit expérimentale).

* {zoom: 1.0;}

Ce code est une horreur, en plus de n'avoir rien à voire avec une nouvelle propriété (CSS 3). Concrètement, ce code confère le layout à tous les éléments de rendu bloc dans la page. C'est une très mauvaise idée. À lire: http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html

-moz-opacity:0.2;

Obsolète depuis des années, à virer des feuilles de styles.

beal2912 a écrit :
Je voulais donc savoir l'importance que vous accordiez à cette validation.

Presque jamais. Je valide le HTML pour repérer les erreurs d'inattention dans le codage, mais en CSS j'en fais peu/pas, les erreurs se repèrent plus directement (styles ignorés si la syntaxe est «cassée»), et j'utilise à l'occasion zoom:1 (mais limitant l'usage au maximum).
Modifié par Florent V. (07 May 2009 - 13:34)

masseuro a écrit :
Pour moi les hacks devraient être dans une feuille de style séparé.

Ce qui pose deux problèmes:
- maintenance (problème sensible, constaté régulièrement);
- performance (un hit HTTP supplémentaire).

masseuro a écrit :
Plus de la moitié du code des navigateurs sert à la gestions des mauvaises pages HTML ou des mauvaises feuilles CSS. (Me demandez pas où j'ai vu se chiffre je ne m'en rappelle plus... )

C'est globalement vrai pour le code HTML. C'est faux pour le code CSS, les navigateurs sont beaucoup moins souples sur la syntaxe CSS et la moindre erreur fait qu'une ou plusieurs lignes peuvent être ignorées. Quand bien même la présence d'un hack (pas bien) ou d'une propriété expérimentale (type -vendor-property, bien) ferait travailler le navigateur un peu plus, l'impact est vraiment négligeable.

masseuro a écrit :
Pour info zoom:1 est remplaçable par un position:relative et un width fixe.

Largeur fixe (ou fluide, en fait avec toute autre valeur que "auto"): oui. Mais ce n'est pas toujours utilisable ou souhaitable. Positionnement relatif: non, strictement rien à voir.

Merci, pour vos réponses c'est intéressant, surtout pour le zoom qui était pour moi une solution à un problème plus qu'un problème en lui même.

a écrit :
Je n'utilise pas le CSS3 car il n'est presque jamais supporté par les navigateurs de mes visiteurs. En attendant ce jour béni, point de CSS3.

@mistike : ayant une certain nombre de sites avec moins de 30% de ie6 + ie7 pour moi c'est plutôt l'inverse