Comment écrire du CSS spécifique pour mozilla, chrome et IE
Quelle serait la déclaration conditionnelle CSS que vous pouvez utiliser pour inclure des CSS spécifiques pour IE, Mozilla, Chrome.
If IE
#container { top: 5px; }
If Mozilla
#container { top: 7px; }
If Chrome
#container { top: 9px; }
Quels seraient les "si" respectifs?
Pour ça
- Vous pouvez analyser l'agent utilisateur et découvrir quel navigateur, sa version. Y compris les styles spécifiques OS pour OS
- Vous pouvez utiliser divers Hacks CSS pour un navigateur spécifique
- Scripts ou plugins pour identifier le navigateur et appliquer différentes classes aux éléments
Utiliser PHP
Voir
- http://php.net/manual/en/function.get-browser.php
- http://techpatterns.com/downloads/php-browser-detection-basic.php
- http://techpatterns.com/downloads/php_browser_detection.php (contient également JS)
Ensuite, créez le fichier CSS dynamique selon le navigateur détecté
Voici une liste CSS Hacks
/***** 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 }
}
/* 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 }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { 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 */
#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 */
Source: http://paulirish.com/2009/browser-specific-css-hacks/
Si vous souhaitez utiliser le plugin, en voici un
Vous pouvez utiliser php pour faire écho au nom du navigateur en tant que classe body, par exemple.
<body class="mozilla">
Ensuite, votre CSS conditionnel ressemblerait à
.ie #container { top: 5px;}
.mozilla #container { top: 5px;}
.chrome #container { top: 5px;}
Pour un code propre, vous pouvez utiliser le fichier javascript ici: http://rafael.adm.br/css_browser_selector/ En incluant la ligne:
<script src="css_browser_selector.js" type="text/javascript"></script>
Vous pouvez écrire des CSS subséquents avec le modèle simple suivant:
.ie7 [thing] {
background-color: orange
}
.chrome [thing] {
background-color: gray
}
Puisque vous avez également PHP dans la balise, je vais suggérer quelques options côté serveur.
La solution la plus simple est celle que la plupart des gens suggèrent ici. Le problème que j'ai généralement avec cela, c'est qu'il peut faire en sorte que vos fichiers CSS ou balises <style> soient jusqu'à 20 fois plus gros que vos documents html et peut provoquer des ralentissements du navigateur pour l'analyse et le traitement des balises qu'il ne peut pas comprendre -moz-border-radius contre -webkit-border-radius
La deuxième meilleure solution (que j'ai trouvée) est de faire en sorte que php génère votre fichier CSS réel, c'est-à-dire.
<link rel="stylesheet" type="text/css" href="mycss.php">
où
<? php
en-tête ("Content-Type: text/css");
if (preg_match ("/ chrome /", $ _SERVER ['HTTP_USER_AGENT'])) {
// sortie chrome style CSS spécifique
} else {
// sortie style CSS par défaut
}
?>
Cela vous permet de créer des fichiers plus petits et plus faciles à traiter pour le navigateur.
La meilleure méthode que j'ai trouvée est cependant spécifique à Apache. La méthode consiste à utiliser PerlMapToStorageHandler de mod_rewrite ou mod_Perl pour remapper l'URL à un fichier sur le système basé sur le moteur de rendu.
dites que votre site Web est http://www.myexample.com/ et il pointe vers /srv/www/html. Pour Chrome, si vous demandez main.css, au lieu de charger /srv/www/html/main.css il vérifie s'il y a un /srv/www/html/main.webkit.css et s'il existe, il le vide, sinon il affichera le fichier main.css. Pour IE, il essaie main.trident.css, pour Firefox, il essaie main.gecko.css. Comme ci-dessus, cela me permet de créer des fichiers CSS plus petits et plus ciblés, mais cela me permet également d'utiliser mieux la mise en cache, car le navigateur tentera de retélécharger le fichier et le serveur Web présentera au navigateur les 304 appropriés pour le lui dire. , vous n'avez pas besoin de le télécharger à nouveau. Cela permet également à mes développeurs Web un peu plus de liberté sans avoir à écrire du code backend sur les plates-formes cibles. J'ai également des fichiers .js redirigés vers des moteurs javascript également, pour main.js, dans chrome il essaie main.v8.js, en safari, main.nitro.js, dans firefox, main.gecko.js. Cela permet la sortie de javascript spécifique qui sera plus rapide (moins de test de code/fonctionnalité de test du navigateur). Certes, les développeurs n'ont pas à cibler spécifiquement et peuvent écrire un main.js et pas faire main.<js engine>.js et ça se chargera normalement. c'est-à-dire ayant un main.js et un main.jscript.js fichier signifie que IE obtient le jscript, et tout le monde obtient le js par défaut, de même avec les fichiers css.
vous pouvez utiliser ce code dans votre fichier css:
-webkit-top:9px;
-moz-top:7px;
top:5px;
le code -webkit-top: 9px; est pour chrome, -moz-top: 7px est pour mozilla et le dernier est pour IE. S'amuser!!!
L'approche de Paul Irish à IE CSS spécifique est la plus élégante que j'ai vue. Elle utilise des instructions conditionnelles pour ajouter des classes à l'élément HTML, qui peuvent ensuite être utilisées pour appliquer une IE CSS spécifique à la version sans recourir à des hacks. Le CSS valide, et il continuera à travailler sur la ligne pour les futures versions du navigateur.
Les détails complets de l'approche peuvent être vus sur son site .
Cela ne couvre pas les hacks spécifiques au navigateur pour Mozilla et Chrome ... mais je ne trouve pas vraiment que j'en ai besoin de toute façon.
Placez votre css dans le script suivant et collez-le dans votre fichier CSS.
Écran @media et (-webkit-min-device-pixel-ratio: 0) {votre style css complet}
Par exemple: écran @media et (-webkit-min-device-pixel-ratio: 0) {container {margin-top: 120px;}}
Fonctionne comme un charme.
Consultez ce lien: http://webdesignerwall.com/tutorials/css-specific-for-internet-Explorer
2 règles CSS spécifiques à l'explorateur (hacks CSS IE)
Une autre option consiste à déclarer des règles CSS qui ne peuvent être lues que par Explorer. Par exemple, ajoutez un astérisque (*) avant que la propriété CSS ne cible IE7 ou ajoutez un trait de soulignement avant que la propriété ne cible IE6. Cependant, cette méthode n'est pas recommandée car ce n'est pas une syntaxe CSS valide.
IE8 ou inférieur: pour écrire des règles CSS spécifiquement dans IE8 ou inférieur, ajoutez une barre oblique inverse et 9 (\ 9) à la fin avant le point-virgule. IE7 ou inférieur: ajoutez un astérisque (*) avant la propriété CSS. IE6: ajoutez un trait de soulignement (_) avant la propriété. .boîte {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
utiliser le détecteur d'agent, puis avec votre programme de création de langue Web pour créer css
par exemple en python
csscreator()
useragent = detector()
if useragent == "Firefox":
css = "your css"
...
return css