Ceci est une mise à jour et une version plus complète de ce post.

Sur les CSS, il est commun d’utiliser les préfixes -moz-, -webkit- ou -o- pour cibler tous les navigateurs.
Ceci dit, on n’en est plus du tout au début des CSS3 et pour pratiquement tout les navigateurs à jours, les préfixes sont totalement inutiles. On peut vérifier le support d’une propriété CSS sur le site caniuse.com.

Voici un petit récapitulatif.

border-radius

Border-radius est supporté par tous les navigateurs maintenant, et depuis plusieurs versions. Pour Opera et IE, ces préfixes n’ont jamais existé.

box-shadow

Même remarque que pour border-radius : les préfixes sont maintenant inutiles.

animation

Mettez la version normale (sans préfix) et la version webkit. Celles de Firefox et d’Opera ne sont plus nécessaires et celle d’IE n’a jamais existé.

transition

Même chose que pour animation.

linear-gradient

La nouvelle spécification — avec « to bottom » ou « to left » au lieu de « top » et « right » — est prise en compte dans tous les navigateurs à jours (Firefox 24+, Chrome 27+, Opera 12+, IE11+).

L’ancienne spec est tout de même encore supportée, avec préfixe uniquement, et la très ancienne spec de Webkit est parfois encore nécessaire pour les vieux iPhone.

box-sizing

Box-sizing est supporté dans tous les navigateurs, sauf Firefox qui a besoin du préfixe.

background-size

Pas besoin de préfixe non plus. Les seuls préfixes qui ont existé n’existent d’ailleurs plus depuis des années.

calc

Cette propriété n’a plus non plus besoin de préfixes, sauf si vous ciblez les Backberry auquel cas il faut le préfixe de webkit. Opera 12 ne le supporte pas, avec ou sans préfixe.

rgba

Pas besoin de préfixes ici, depuis bien longtemps.

border-image

Sauf pour le navigateur par défaut d’Android qui a besoin du préfixe de webkit et d’Opera 12x qui a besoin du -o-, plus personne n’a besoin des préfixes.

background-image

Je parle ici des images multiples : plus pas besoin de préfixes.

word-wrap

Jamais eu besoin de préfixes non plus.


C’est à peu prés tout ce que j’utilise en CSS3, et dont je sais que les préfixes sont utiles ou non.
Bien-sûr, ajouter les préfixes permet de supporter d’autres versions de navigateurs. Mais est-ce franchement encore utile de tripler la taille de son fichier CSS pour supporter Firefox 3.5 alors qu’on est à 26 ? Si je regarde mes stats sur les versions de Firefox, 3% de mes visiteurs sous Firefox utilisent la version 23 ou moins (soit même pas 1% de tous les visiteurs).

Fffuuu, bon ça y est : le gouvernement Français a adopté un texte qui donne aux opérateurs FAI le pouvoir de censurer les blagues sexistes sur le net.

Autrement dit, une simple blague de travers (par exemple sur les blondes, qui sont quand même nombreuses), et hop, c’est tout le site qui risque d’être censuré dans le pays parce que M. Orange ou M. SFR aura décidé que ce contenu dépasse les bornes qu’il aura lui même fixé. Il peut aussi décider d’être plus laxiste pour ses propres sites et forums que pour celui du concurrent, ou alors de choisir les sites en fonction de son auteur, son bord politique, son fournisseur internet…

C’est pas comme si les débordements n’auront pas lieu : le site Linux.com ou celui d’Amnesty International sont bloqués par le filtre anti-porno au Royaume-Uni.


Et pendant ce temps là, les bonbons Haribo de couleur noir (ceux en réglisse) sont interdits au Danemark et en Suède car jugés racistes. Non, ce n’est pas une blague.

Poussez pas, on va l’avoir notre société édulcorée, purifiée de tous les vices à la Demolition Man.

Pour faire des menus en CSS, il est d’usage d’utiliser une liste non-ordonnée <ul> et de mettre les éléments de listes <li> en flottants avec float: left;.

Cette solution malheureusement toujours très rencontrée en 2014, c’est du bricolage et ne doit plus être utilisée. Elle n’a que des inconvénients :

• les éléments étant flottants, ils sortent du flux et ils passent au dessus du reste de la page. Cela oblige donc d’utiliser un <br> bidon juste pour le « clear » ;
• de plus, il faut spécifier une hauteur minimale pour la liste, sinon elle vaut tout simplement 0px : c’est très chiant pour les images de fond ;
• si l’écran est trop petit, le dernier élément passe en dehors du menu et surplombe la page… Sans que le menu lui même n’est redimensionné ;
• si l’écran est trop petit, un flottant un peu trop grand sort du cadre de l’écran et déforme tout l’affichage ;
• le flottant est un placement compliqué à maîtriser et dont le comportement devient très vite imprévisible si plusieurs éléments flottants se rencontrent ;
• comment tu fais pour centrer un flottant ?

Pour y remédier, une solution très simple et supportée dans tous les navigateurs jusqu’à IE7 : mettre les éléments de liste <li> en affichage « inline-block; ».
Vous pouvez alors :

• les dimensionner comme vous le voulez et ils seront les uns à côté des autres ;
• ils ne sortent plus du flux de la page : si le dernier passe sur la ligne suivante, il repousse le bloc suivant au lieu de le masquer et agrandit le bloc parent au lieu d’en sortir ;
• il est possible de centrer le menu ;

Dans le futur, on pourra utiliser des solutions beaucoup plus puissantes. Les CSS3 on en effet une nouvelle disposition nommé « flexible » (flex). Celle-ci permettra d’afficher les blocs plus simplement sans se soucier de marges ou quoi que ce soit, par exemple comme les mots dans une ligne de texte justifiée (avec « space-between »), ou en faisant en sorte que les x derniers éléments se partagent la place restante alors que les autres ont une taille fixe.

Mais pour le moment, le module flexbox n’est ni finalisé (il y a au moins trois spécifications différentes) ni supporté uniformément par tous les navigateurs (voir le module Flexbox sur Alsacréations).

En attendant le modèle flexible, je vous conseil donc grandement d’utiliser le inline-block pour vos menus : inline-block est fait pour placer en ligne des éléments de type bloc, contrairement à float qui a un autre but.
Vous vous rendrez également un service immense lorsque vous voudrez faire un site responsive : le modèle des blocs-en-ligne s’adapte parfaitement à un écran de taille variable.


En CSS, soyez logique et évitez de composer des positionnement absolues avec des flottants et d’autres affichages en tableau. Pour mettre des éléments de type blocs en ligne, utilisez simplement « display: inline-block; ». C’est là pour ça.

Vos messages sont bien mignons, à me dire « vous allez me tuer », « vous êtes inconscients », « si le web est gratuit c’est grâce à la publicité ».

Mais quand je vois en plus des tas de messages de ce genre là :

La majorité des internautes qui bloquent la pub n'ont pas conscience du rôle essentiel qu'elle joue. Éduquez-les avec le message qui s'affichera sous forme de barre pour les convaincre de désactiver leur bloqueur de pub.

J’ai envie de faire pareil, mais dans l’autre sens. Comme cela :

La majorité des webmasters qui mettent de la pub n’ont pas conscience du rôle psychologique qu’elle a sur les enfants, ni de son impact désastreux sur la vie privée, ni de son pouvoir sur les dits-webmasters eux-mêmes. Éduquez-les avec un commentaire sur leur blog pour les convaincre de changer de modèle économique.

Car quand Mediapart nous demande de nous poser la question « à qui appartient votre journal ? », et qu’on a vu certains blogs finir par s’autocensurer juste pour ne pas que Môsieur Google leur coupe les vivres, ben je me dis que la question est particulièrement pertinente.
Car avec la pub, le blog n’appartient plus à celui qui écrit : celui qui propose les publicités a aussi un pouvoir sur ce que vous avez le droit de dire.

Et sérieux, si l’argent est vraiment important pour votre site, ne misez pas tout sur Paypal, Flattr, Visa/Mastercard ou une autre plate-forme unique : ces derniers n’hésiteront pas à vous couper les vivres aussi.

Et à ceux qui n’aiment pas les blogs et préfèrent les journaux classiques : vous savez qui donne l’argent aux journaux ? L’État.
Tu parle d’une indépendance.

(j’en avais déjà parlé là, mais visiblement le message passe mal)

L’user-agent est une chaîne de caractères que votre navigateur envoie au site que vous visitez, et qui contient diverses informations sur le navigateur et l’ordinateur.

Bien que je ne le recommande pas si vous ne savez pas ce que vous faites, vous pouvez modifier l’user-agent de Firefox assez facilement.

Allez sur la page « about-config » et tapez « useragent » dans le champ de recherche.
Si la clé general.useragent.override n’existe pas déjà (auquel cas un double clic dessus suffit), faites un clic-droit sur la page, puis « nouvelle » puis « chaîne de caractères » et mettez general.useragent.override pour le nom.
Pour la valeur, mettez ce que vous voulez.

Si vous voulez vous identifier comme Chrome sous Windows 8, mettez :

Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36

Pour Firefox Mobile sous Android, mettez :

Mozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0 Firefox/26.0

Pour Opera sous GNU/Linux :

Opera/9.80 (X11; Linux x86_64; Edition Linux Mint) Presto/2.12.388 Version/12.16

Pour revenir à la valeur par défaut, faites un clic droit sur cette clé et « réinitialiser ».

Vous pouvez tester ce que ça donne sur cette page.


(source et pour d’autres navigateurs)