Browser Css Selectors, la fin des hacks Css
Posé ici le lundi 10 novembre 2008 à 19:32 par
Ryan Singer de chez 37Signals propose une idée intéressante dans l'un de ses billets. Ce genre d'idée qu'on s'étonne de ne pas avoir eu avant. Plutôt que de batailler avec une liste incantatoire de filtres pour contourner les rendus hasardeux, pourquoi ne pas créer quelques sélecteurs spécifiques à chaque navigateur grâce à Javascript. Rafael Lima a rapidement transposé cette idée en code. Je me suis amusé à le faire en jQuery.
Principe
Le principe est simple. Javascript détecte le navigateur et la plateforme du visiteur puis applique une classe spécifique à l'élément html. De ce fait, tous les éléments de la page seront ainsi hiérarchiquement sous cette classe.
jQuery détecte déjà quelques navigateurs en natif. J'en ajoute quelques-uns, ainsi que la détection de plateforme.
jQuery
$(function() {
var ua = navigator.userAgent.toLowerCase();
var myBrowsers = {
// Déjà détectés en natif par jQuery
mozilla: $.browser.mozilla,
safari: $.browser.safari,
opera: $.browser.opera,
ie: $.browser.msie,
// Quelques améliorations et ajouts
ie6: $.browser.msie && ($.browser.version < 7),
ie7: $.browser.msie && ($.browser.version == 8),
ie8: $.browser.msie && ($.browser.version > 7),
iphone: /iphone/.test(ua),
chrome: /chrome/.test(ua),
firefox: /firefox/.test(ua),
webkit: /webkit/.test(ua),
// Détection de plateformes
osx: /mac os x/.test(ua),
win: /win/.test(ua),
linux: /linux/.test(ua)
};
$.each(myBrowsers, function(a, b) {
if (b) $('html').addClass(a);
});
});
Par exemple, selon le navigateur du visiteur, le tag html sera classé ainsi :
Firefox Windows
<html class="firefox mozilla win">
Safari Mac OSX
<html class="safari webkit osx">
Les sélecteurs suivants seront disponibles selon les cas :
.firefox, .safari, .opera, .ie,
.ie6, .ie7, .ie8, .iphone,
.mozilla, .webkit et .osx, .win,
.linux pour les plateformes. La liste peut facilement être enrichie en piochant dans le User Agent délivré par le navigateur visiteur.
Usage
Rien de plus simple.
Quelques exemples
.firefox body { /* Pour Firefox */
background:red;
}
.ie body { /* Pour toutes les versions d'Internet Explorer */
border:10px solid blue;
}
.ie6 body { /* Seulement Internet Explorer 6 */
background:darkblue;
}
.ie7 body { /* Seulement Internet Explorer 7 */
background:lightblue;
}
.safari.osx body { /* Pour Safari Mac */
background:yellow;
}
.safari.win body { /* Pour Safari Windows */
background:orange;
}
Les liens
Browser selectors in CSS
http://www.37signals.com/svn/archives2/browser_selectors_in_css.php
Ce contenu est mis à disposition selon les termes de la licence Creative Commons 2.0 France : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.
Context
Thématiques :
Trackbacks
0 trackback
Commentaires
5 commentaires
Effectivement, très bonne idée !
1. Par A. Bombo le lundi 10 novembre 2008 à 21:23
Oui l'idée est bonne ! Je me sers régulièrement d'un système similaire depuis plusieurs mois ! J'en avais parlé ici: Webinventif.fr/…-via-javascript
Mais pour ceux qui n'utilise pas jQuery, Rafael Lima a mis au point une méthode tout aussi efficace, à voir ici: Rafael.adm.br/c…rowser_selector
;)
2. Par Julien le samedi 15 novembre 2008 à 18:46
Bonsoir Julien,
Je ne connaissais pas le billet sur WebInventif (que je consulte portant régulièrement), merci pour le complément d'information. En revanche la version de Raphael Lima était déjà précisée dans l'intro :)
3. Par Jay Salvat le dimanche 16 novembre 2008 à 17:55
Ah zut je n'avais effectivement pas vu le lien vers Raphael Lima, désolé !
4. Par Julien le vendredi 28 novembre 2008 à 20:42
Very cool. I wish I found this a day ago when I was writing a jquery widget for a web site and Safari was about 5px off from firefox for some reason. Thanks!
5. Par Oscar Godson le vendredi 28 novembre 2008 à 23:56