picture picture
décembre 19, 2009 CSS 2 Commentaires

un hack CSS pour Chrome (3.5 et+) et Safari ?

kesako les hacks ? Ce sont « petites bidouilles » du code CSS pour appliquer des règles de mise en forme CSS uniquement à certains navigateurs et pas aux autres…

En pratique c’est assez moche en terme de code, tout le monde sait que les navigateurs évoluent et interprètent différemment les règles CSS selon les versions : une mise à jour peut donc complètement « casser » des hacks et entraîner une mauvaise mise en page du site.
En pratique aussi … il est difficile de s’en passer quand on veut tenter d’afficher les pages sur le maximum de navigateurs. Le plus gourmand en hack a bien entendu été Internet Explorer qui avait tendance à croire que ses règles d’interprétation du code faisaient office de loi. Il a bien évolué et la dernière version est nettement plus fidèles aux normes communes du W3C.

La question est donc maintenant de trouver des hacks pour les « navigateurs montants » en terme de popularité, c’est à dire entre autre Chrome et Safari, qui ont eux aussi parfois des caprices étranges…

L’autre jour j’ai eu un calque qui refusait d’interpreter correctement un « float » pour ces deux navigateurs.
Après pas mal de recherches j’ai fini par trouver ceci, qui fonctionne bien à ce jour… mais à l’inconvénient de ne pas être valide W3C. Il faut faire des concessions …

Ce code :

<style type="text-css">
<!--
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color:#CCC; }
}
-->
</style>

ne sera lu que par Chrome et Safari…
Internet Explorer et Firefox ne verront aucune couleur de fond sur la page…

:gne: pas terrible mais ça dépanne…

2 Responses to “un hack CSS pour Chrome (3.5 et+) et Safari ?”

2 Commentaires

  1. >NO dit :

    Bonjour,
    ceci fonctionne à merveille.
    Merci infiniment pour cette utile et précieuse information.

  2. ange dit :

    thx ça marche merci

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: