Source : http://cssfontstack.com/
CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts
Source : http://cssfontstack.com/
CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts
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é.
htmlUn 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 :
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} } |
(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 */ } |
Source : CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser.
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; } } |
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; } |
|
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; } } |