Les préfixes constructeurs, comment bien les utiliser ? (le 10 février 2012)

Afin de bien travailler, si vous utilisez une propriété CSS qui n'est pas encore standardisée, si vous voulez la voir interprétée par les navigateurs, il faut donc la préfixer avec les fameux préfixes constructeurs.

Prenons un exemple avec la propriété box-shadow :

-moz-box-shadow: #000 0 0px 2px;
-webkit-box-shadow: #000 0 0px 2px;
-o-box-shadow: #000 0 0px 2px;
-ms-box-shadow: #000 0 0px 2px;
-khtml-box-shadow: #000 0 0px 2px;
box-shadow: #000 0 0px 2px;

La plupart des intégrateurs mettront les 2 premières lignes, mais beaucoup oublieront les 3 suivantes, respectivement pour Opera, Microsoft (oui, ça fait sourire), et Konqueror (certes anecdotique, mais ce n'est pas une raison).

Quant à la dernière sans préfixe, normalement, le jour où la propriété devient standard, elle doit remplacer les versions préfixées. C'est la théorie.

Quelques légers problèmes (ça c'est la pratique) :

il n'est pas toujours possible de revenir sur tous les sites sur lesquels on a travaillé pour faire ce changement,
les navigateurs peuvent ne pas être mis à jour et donc nécessiter les versions préfixées,
le validateur CSS risque de ronchonner un peu sur les propriétés préfixées (mais ce n'est pas bien grave),
et dans certains cas, on n'a aucune idée de quand la propriété va être supportée, que ce soit expérimentalement ou en tant que standard.
Ajout : pas besoin d'un fichier javascript pour émuler ce qui est déjà fait en dur dans la feuille de style, ainsi, on évite tous les problèmes inhérents à utiliser du javascript pour faire de la CSS.

Certes c'est un peu lourd, pas excessivement beau… mais honnêtement, ce n'est pas dramatique. L'effort à fournir est quand même ridiculement petit, le copier/coller ou l'auto-complétion permet de faire le sale boulot.

En faisant ainsi, vous ne ferez pas de discrimination envers un navigateur ou un moteur de rendu (même s'il a de très petites parts de marché), vous arroserez large si j'ose dire, cela vous évitera de revenir sur votre intégration dans le futur. Et à plus grande échelle, vous rendez modestement service au Web Ouvert, donc n'hésitez pas, faites-le !

Permalien : https://www.nicolas-hoffmann.net/source/1452-Les-prefixes-constructeurs-comment-bien-les-utiliser.html

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1452

13 commentaires

Posté par Victor Brito le 10/02/2012 à 23:02:10

Le préfixe -khtml- est-il réellement utile, vu les parts de marché plutôt confidentielles de Konqueror, si confidentielles que des statistiques globales comme StatCounter le passe sous silence ? D'ailleurs, n'est-il pas prévu (depuis longtemps, d'ailleurs) l'abandon par Konqueror de son propre moteur de rendu, KHTML, au profit de WebKit, qui, ironie de l'histoire, a été développé sur la base de KHTML ?

Posté par Nico le 11/02/2012 à 0:09:56

Effectivement, le -khtml est plus ou moins voué à disparaître d'après ce que j'ai compris. Après, je ne suis pas expert linuxien, donc, avant d'avoir une source fiable qui me dit que c'est effectivement et totalement inutile, je préfère le laisser.

Car l'argument des faibles parts de marché me semble un poil vaseux, ça revient à dire qu'on fait du tri selon une part de marché : ce n'est pas bien pour un monopole, ce n'est pas bien pour un tout p'tit poucet. ^^

Posté par Victor le 11/02/2012 à 9:23:48

Si on se base sur CanIUse, la propriété box-shadow est accepté partout pratiquement sans préfixe.
Mis à part pour Android et les anciennes version d'iOs. (Donc en gros du -webkit-)
http://caniuse.com/#search=box-shadow
Est ce bien utile de le laisser pour ce genre de propriété ? Idem pour border-radius.

Posté par Nico le 11/02/2012 à 10:21:18

En effet, mais comme vous l'avez écrit : mis à part pour Android et les anciennes versions de...

Comme je l'ai écrit "les navigateurs peuvent ne pas être mis à jour et donc nécessiter les versions préfixées", ce que je préconise ci-dessus est bourrin, pas parfait, même pas très élégant, mais ça évite d'y revenir.

Posté par ReBleach le 11/02/2012 à 14:55:34

Bien sympathique ton article. Le CSS3 c'est bien, les préfixes aussi, toutefois il fait se rappeler que si on supporte IE<=8 on doit faire une dégradation gracieuse. De ce fait laisser le site utilisable peu importe le navigateur. Le CSS3 c'est juste du bling bling en quelque sorte.

Pour ce qui est des préfixes, et ainsi en revenir au sujet, je suis totalement d'accord avec toi. Il y a énormément de personnes qui utilisent encore les versions 3.6.X de Firefox qui requièrent les préfixes, y compris pour le box-shadow...

Et pour les vieilles versions d'iOS dont il est question dans un des commentaires elles sont encore bien présentent, car par exemple l'iPhone 3G est resté en version 3.X, et pas mal de 3GS n'ont pas fait le saut vers la version 5.0.1. Il en va de même pour Android, mais là c'est plus la faute des constructeurs qui ne portent pas les mAJ de l'OS sur leurs modèles. (mais encore là n'est pas la question).

Pour ce qui est de mon utilisation des préfixes, jutilise(pratiquement tout le temps) les préfixes -moz, -WebKit, -o, et -ms, et leurs équivalents en filtres Microsoft. Par contre je délaisse le -khtml car j'y pense pas. Est-ce un tort ? Je pense que oui, car si ces préfixes existent ce n'est pas pour rien, mais bon on ne peut pas être parfait. Par contre il est impératif, selon moi, de penser à mettre la version non préfixée de la propriété.

Sur ces belles paroles, je retourne à mon Doliprane qui m'attends pour essayer de chasser le mal de crâne qui dure maintenant depuis 24h (vive le week-end).

Posté par axel le 14/02/2012 à 0:17:18

et avec mixin scss.
c'est pas de la balle ?

@mixin item_bg($first:darken($bg_color,20%), $second:$bg_color) {
background:$bg_color;
@include background-image(linear-gradient(top, $second, $first));
}

Posté par Nico le 14/02/2012 à 0:34:06

Axel : si c'est côté serveur et que ça contente tous les navigateurs au final côté client, pourquoi pas, même sas être fan de Less et autre SCSS et SASS, je ne suis pas sectaire !

Posté par Anthony Ricaud le 14/02/2012 à 0:36:34

Si je ne dis pas de bêtises, khtml est inutile, il est identique à webkit sur les navigateurs encore utilisés.

Autre chose, est-ce une bonne pratique d'inclure la version non-préfixée ? Si la propriété change pendant sa spécification, cela sera inutile. Et puis si on inclut la propriété non-préfixée, pourquoi est-elle préfixée en premier lieu ?

Pour moi, la première chose, c'est de faire une bonne page sans les préfixes et ensuite de les ajouter. Comme ça, si la propriété n'est plus appliquée (parce qu'elle change, est supprimée, etc), la page reste consultable avec le fallback.

Posté par Nico le 14/02/2012 à 0:44:28

Pour khtml, j'aimerais juste une source fiable à ce sujet, j'arrive pas à trouver une info récente là-dessus.

La version non préfixée permettra, si les navigateurs se mettent à jour et que la propriété devient un standard (là dans ce cas, ils ne sont censés plus supporter les versions préfixées il me semble), que l'affichage reste le même dans le futur.

Si la propriété change pendant sa spécification, quoi qu'il arrive, il faudra la changer (quel que soit le système utilisé).

Après, il ne faut pas se focaliser sur l'ordre, que tu ajoutes les préfixes avant ou après, tant qu'il y a tout, c'est l'essentiel à mon humble avis.

Posté par dhoko le 14/02/2012 à 14:45:09

Personnellement je zappe quasiment tout le temps les 3 lignes suivantes. POurquoi ? Car j'utilise dans SublimeText2 le plugin prefix de Nettuts et il ne génère que moz et webkit :/ Ok je suis une faignasse je le reconnais.

Cela dit, si je veux être de mauvaise fois mais cohérent, je pense que favoriser un parc informatique qui est vieux est mauvais. Tenter de faire une expérience similaire avec des vieux navigateurs est con:

- Box shodow rame sec sur FF3.6 si on dépasse une certaines taille. Le site aura donc le même rendu cool. Mais l'expérience dans tout ça ? Immonde.
- Border radius, opacity... bref ça rame

Puis si on reste avec ces vielles bouses et qu'on a un rendu comme sous un FF10, pourquoi mettre à jour ? Au final on a un panel important de navigateur, on a un gros bordel et on se tire une balle dans le pied.

Donc de même qu'on fait de la dégradation gracieuse pourIE autant faire de même pour les autres. Surtout qu'aujourd'hui on a FF et Chrome qui jouent à qui a la plus grosse.

/Fin de mauvaise foi rationnelle.

Pour KHTML je pense que le préfixe est useless. Sous KDE 3.5 ok mais depuis KDE4.5 je crois que c'est devenu inutile. Puis depuis des années Konqueror est en nette perte de vitesse (seul a utiliser Konqueror). Depuis l'univers du LL avance vite donc il y a très peu voir aucune chance d'avoir un KDE4 pas à jour (sachant que plus il avance plus il est rapide) et encore un KDE3.5. Donc basé sur ça je pense qu'on peut l'enlever.

Au moins chez les libristes ont a des logiciels à jours !

PS: désolé pour le pavé et les fautes

Posté par Nico le 14/02/2012 à 21:30:00

Si jamais, je comprends ton idée, mais est-ce que les parcs informatiques sont bien mis à jour ? Dans les grands comptes, j'ai pu voir de mes propres yeux que ça n'était pas le cas. Et la question que je me pose : est-ce que dans d'autres pays, les vieux navigateurs ne sont pas encore légion ? J'ai ouï dire qu'en Chine, y avait encore beaucoup d'IE6...

Sujet pas simple !

Posté par dhoko le 17/02/2012 à 9:20:27

Yep mais bon perso je ne bosse pas pour faire des sites aux chinois donc leurs IE osef

Après si je fais un truc anglophone why not... Mais dans ce cas ce n'est qu'un soucis mineur j'ai envie de dire.

Après le soucis des parcs à jours c'est un putain de bordel... Où je suis en ce moment j'ai masses de FF3.6 (j'ai appris cette semaine on a eut l& 3.6.26 !!! de sortie !).
Je fais les majs à la main et je bataille pour instaurer chrome comme ça l'excuse "le réseau n'est configuré que pour IE" ne tient pas car Chrome récupère cette conf

(J'ai un beau bilan, plus d'une 50aine de pc équipé par mes soins unitairement avec du Chrome ou du FF si possible

)

PS: Wep je zappe Opera car je ne sais pas pourquoi les gens ne semblent pas l'aimer :/

Posté par Nico le 17/02/2012 à 9:33:17

Ah quand tu as un site international qui s'adresse à tout le monde, c'est à prendre en compte, malheureusement pour nous.

Firefox 3.6 est une vraie plaie, j'ai eu pas mal de soucis avec aussi, sur des pages assez complexes.

Opera, c'est un mystère, c'est un très bon navigateur, mais il n'a jamais percé... enfin en tout cas ici, dans d'autres pays, il est bien aimé.

Les préfixes constructeurs, comment bien les utiliser ?

Les préfixes constructeurs, comment bien les utiliser ? (le 10 février 2012)

13 commentaires

Ajouter un commentaire