Attention : les hacks CSS constituent une mauvais pratique! Il reste préférable de passer par un script qui détecte l’OS et le navigateur (et leurs versions respectives) et ajoute des classes aux éléments html ou body. Le plug-in JS Bowser à l’air de faire ça très bien mais je ne l’ai pas encore testé.
Retour d’expérience sur la méthode JS de détection du user-agent avec ajout d’une ou plusieurs classes sur l’élément html
Un client souhaite afficher un message aux utilisateurs d’IE 10- pour leur demander de mettre à jour leur navigateur.
Je me suis tourné vers un plugin JS qui détecte l’OS, le navigateur et sa version et ajoute des classes CSS en conséquence sur l’élément HTML de la page.
Problème : mon site est codé pour des navigateurs modernes et utilise le dernière version de jQuery (3.x) qui, elle n’assure pas le support des versions d’IE obsolètes.
En résulte des erreurs JS en console et, bien-sûr, impossible de faire fonctionner le plugin browser-detection dont la déclaration a pourtant été déclarée en toute première ressource JS à charger dans la page, avant jQuery.
Hypothèse : le plugin n’a soit pas le temps de détecter le navigateur et sa version avant plantage, soit les classes sont appliquées et écrasées par des classes de librairies tierces comme Modernizr (j’avoue ne pas avoir eu le courage de tester les outils de développement d’IE8 pour vérifier).
La documentation de browser-detection donne pourtant des exemples de CSS pointant des classes jusqu’à IE6.
Ont été testés tour à tour :
- La mise en place de commentaires conditionnels IE dans l’entête du document. Sans succès.
- L’utilisation de hacks CSS hors sources SASS (dont le compilateur n’aime pas du tout les hacks). )Tiens tiens, voir si on peut écrire du code dans les sources SASS qui serait ignoré par le compilateur mais ajouté à la feuille finale.
Il reste possible de charger un fichier CSS à part, pourquoi pas en utilisant les commentaires conditionnels IE.
Voir aussi (pour les dernières mises à jour) : Browserhacks – An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
Source : http://www.paulirish.com/2009/browser-specific-css-hacks/ et Target iPhone and iPad with CSS3 Media Queries.
Edge : CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* iPad [portrait + landscape] */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* IE 10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #veintiun { color: red; } } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /* FF 3.5+ */ body:not(:-moz-handler-blocked) #cuarenta { color: red; } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8, but also IE9 in some cases :( */ #diecinueve { color: blue\9; } /* IE7, IE8 */ #veinte { color/*\**/: blue\9; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */ /* IE8, IE9 */ #anotherone {color: blue\0/;} /* must go at the END of all rules */ /* IE9, IE10 */ @media screen and (min-width:0\0) { #veintidos { color: red} } |
Cibler iOS uniquement
(testé, fonctionne) source
|
1 2 3 4 5 6 7 |
@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ } |
Edge
Source : CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser.
Microsoft Edge Browser 12+ (All)
Cibler toutes les versions de Edge : edit: cible également Chrome, donc ne sert strictement à rien !!!
|
1 2 3 4 |
/* Microsoft Edge Browser 12+ (All) - @supports method */ @supports (-ms-ime-align:auto) { .selector { property:value; } } |
Internet Explorer 10+ et Microsoft Edge Browser
Pratique pour mettre en place des fixes Flexbox car couvre toutes les versions encore maintenues d’IE et toutes les versions d’Edge qui posent des problèmes de prises en charge de Flexbox.
Fonctionne, mais très chiant à mettre en place avec SASS car totalement incompatible avec les nested rules.
|
1 2 |
/* Internet Explorer 10+, Microsoft Edge Browser */ _:-ms-lang(x), .selector { property:value; } |
Ceci ne fonctionnera pas:
|
1 2 3 4 5 6 7 8 9 10 11 |
_:-ms-lang(x), .desktop { &-headband { &-left-container { width: 886.391px; } &-right-container { width: 295.609px; } } } |
Le seul moyen que j’ai trouvé pour faire passer ce hack est de reconstituer les noms des classes ciblées (ce qui revient à abandonner les facilités offertes par SASS pour écrire du CSS « pur ») :
|
1 2 3 4 5 6 7 8 |
_:-ms-lang(x), .desktop-headband-left-container { width: 886.391px; } _:-ms-lang(x), .desktop-headband-right-container { width: 295.609px; } |
|
1 2 3 4 |
/* Internet Explorer 11+, Microsoft Edge Browser */ /* Put this code in external stylesheet: ie11up.css */ @charset ""; _:-ms-lang(x), .selector { property:value; } |
Version-Specific CSS Hacks Continue Here:
|
1 2 3 4 5 6 |
/* Microsoft Edge Browser 15+ - @supports method */ @supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) { .selector { property:value; } } |
|
1 2 3 4 5 6 |
/* Microsoft Edge Browser 14+ - @supports method */ @supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) { .selector { property:value; } } |
|
1 2 3 4 5 6 7 |
/* Microsoft Edge Browser 14 - @supports method */ @supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) and (not (-webkit-text-stroke:initial)) { .selector { property:value; } } |
|
1 2 3 4 5 6 |
/* Microsoft Edge Browser 14- - @supports method */ @supports (-ms-ime-align:auto) and (not (-webkit-text-stroke:initial)) { .selector { property:value; } } |
And for those who like one-liners as well:
|
1 2 3 |
/* Microsoft Edge Browser 12+ (All) - one-liner method */ _:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; } |
Additional numbered versions follow:
|
1 2 3 |
/* Microsoft Edge Browser 13+ - one-liner method */ _:-ms-lang(x), _::-webkit-meter-bar, .selector { property:value; } |
|
1 2 3 4 5 |
/* Microsoft Edge Browser 13+ - @supports method */ @supports (-ms-ime-align:auto) and (color:unset) { .selector { property:value; } } |
|
1 2 3 4 5 |
/* Microsoft Edge Browser 13 - @supports method */ @supports (-ms-accelerator:true) and (color:unset) { .selector { property:value; } } |
|
1 2 3 4 5 |
/* Microsoft Edge Browser 13- (12-13) - @supports method */ @supports (-ms-accelerator:true) { .selector { property:value; } } |
|
1 2 3 4 5 |
/* Microsoft Edge Browser 12 */ @supports (-ms-accelerator:true) and (not (color:unset)) { .selector { property:value; } } |