Utilisation de styles CSS différents pour des navigateurs spécifiques

StackOverflow https://stackoverflow.com/questions/1637534

  •  07-07-2019
  •  | 
  •  

Question

Quel est le meilleur moyen d’avoir un CSS distinct pour IE et les autres navigateurs? Je songe à ne cibler que les utilisateurs d'IE, Firefox et Safari. Surtout maintenant avec la prise en charge de CSS3 dans la plupart des navigateurs, mais IE.

Les différentes façons de faire que j'ai rencontrées sont

  1. chargement de feuilles de style séparées conditionnellement en utilisant <!--[if IE] >
  2. souligner le hack et divers autres hacks IE intégrés

Je préfère (2) car (1) est un travail supplémentaire, en particulier lors du développement. Mais (2) ne semble pas fonctionner tout le temps. Quel est le moyen le plus efficace?

Était-ce utile?

La solution

J'aurais une feuille de style que tout reprend en haut de votre document.

dessous, faites votre        [! - [si IE]] feuille de style conditionnelle.

Ici, remplacez simplement les styles qui posent des problèmes dans IE. - le dernier style choisi pour une classe particulière est celui qui sera suivi.

Autres conseils

Notre équipe gère CSS en suivant trois règles:

  1. Assurez-vous que les fichiers CSS généraux / communs fonctionnent comme ils le devraient avec tous les navigateurs aussi proches que possible.
  2. Traite tous les IE " bugs " dans des fichiers séparés, contrôlez le chargement des feuilles de style avec les conditions IE.
  3. Aucun piratage autorisé sauf s'il n'est pas possible de le faire fonctionner selon les deux premières règles.

Je suis d'accord pour conserver tous vos fichiers CSS centraux dans un seul fichier. Si vous utilisez ASP.NET, vous pouvez utiliser un WebHandler pour gérer le fichier CSS envoyé. Je suis sûr que d'autres langues proposent des solutions similaires. Cela vous permet d’envoyer uniquement ce dont vous avez besoin et de le mettre en cache. L’autre avantage est que vous pouvez combiner plusieurs fichiers CSS (si c’est ainsi que vous le faites) et n'en présenter qu’un. C’est une bonne pratique car vous réduisez le nombre de demandes adressées au serveur Web.

Vous pouvez alors écrire des choses comme [if lt IE 8] margin: 0px; et il ne serait pas envoyé à IE8 ou FF, etc.

Si vous utilisez uniquement HTML, vous devez respecter les conditions de style [! - [if IE]] mentionnées ci-dessus.

Nous utilisons un WebHandler dans notre très grand projet et je ne le ferais jamais autrement.

Voir http://www.conditional-css.com/download . Il est disponible pour PHP, C # et C

Bonne chance. 

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

Cette astuce utilise largement Yandex (alias " russe google ")) pour réduire les requêtes HTTP. market.yandex.ru , par exemple.

Vous pouvez également utiliser cette méthode. Parfois, les conditions risquent de ne pas fonctionner car nous devons écrire les styles au milieu du code. 

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>

Vérifiez le $browser avec:

IE & # 8211; & # 8220; MSIE & # 8221;

Firefox & # 8211; & # 8220; Firefox & # 8221;

Safari & # 8211; & # 8220; Safari & # 8221;

Opera & # 8211; & # 8220; Opera & # 8221;

Chrome & # 8211; & # 8220; Chrome & # 8221;

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top