Tagnavigateurs

[CSS] Collection de polices de caractères prises en charge par le plus grand nombre de supports

Source : http://cssfontstack.com/
CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts

[CSS] Liste des hacks permettant de cibler spécifiquement un navigateur.

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.

Cibler iOS uniquement

(testé, fonctionne) source

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 !!!

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.

Ceci ne fonctionnera pas:

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 ») :

Version-Specific CSS Hacks Continue Here:

And for those who like one-liners as well:

Additional numbered versions follow:

© 2020 devfrontend.info

Theme by Anders NorénUp ↑