Comment faire une feuille de style spécifique Chrome / Opera?

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

Question

Je dois faire chrome / opéra hacks en raison d'un script de remplacement de la police voulue par le client qui brise les choses ... c'est triste, mais tout fonctionne dans IE6-7, et FF2-3 Safari. Je n'ai aucun moyen de fixer lui-même le script, je ne peux pirater autour utilisant CSS et HTML.

Je suis en train de faire quelque chose dans les lignes suivantes: 

<!--[if IE 6]>
   <link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->

Est-il possible?

J'ai vu cette façon de faire des corrections spécifiques chrome comme: 

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

Est-ce travail? Y at-il un moyen plus simple? Qu'en est-Opera?

Merci!

Était-ce utile?

La solution

Une façon javascript propre à faire: http://rafael.adm.br/css_browser_selector/

annonces navigateur classes spécifiques à la balise body de votre code HTML que vous pouvez utiliser dans votre css comme: 

.opera #thingie, .chrome #thingie {
  do: this;
}

Hope this helps.

Autres conseils

Évitez hacks CSS. Ils briseront.

Google Chrome: 

@media not all and (-webkit-min-device-pixel-ratio:0)
{  
    #example
    {
        width: 200px;
    }
}

Safari: 

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #example
    {
        width: 200px;
    }
}

Opera: 

@media not screen and (1)
{
    #example
    {
        width: 200px;
    }
}

CSS Faire appliquer seulement pour Opera 11

Comment rendre visible CSS seulement pour Opera

Future preuve hack CSS pour le LTE Opera 10

pour Google (et Safari), vous pouvez simplement utiliser ce qui suit: 

<link rel="stylesheet" href="style-sheet_chrome.css" type="text/chrome/safari" />

cela chargera feuille de style spécifique webkit. Le « type » peut être nommé tout ce que vous voulez, mais doit être inclus.

Vous allez de l'avant et de créer votre feuille de style que vous plaît et tous les navigateurs non-webkit n'ignorer tout simplement.

Vous devez utiliser les hacks ci-dessus pour l'Opéra. Ce qui suit a le mieux fonctionné pour moi: 

@media not screen and (1)
    {
    #example
    {
    width: 200px;
    }
}

Je l'ai utilisé pour charger @ spécifiques au navigateur des déclarations font-face.

Je ne l'ai pas testé cette solution, mais selon cette entrée de blog , vous pouvez essayer ce qui suit pour Chrome: 

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
{
     var chromeCss = document.createElement("link");

     chromeCss.rel = "stylesheet";
     chromeCss.href = "ChromeStyle.css";

     document.getElementsByTagName("head")[0].appendChild(chromeCss);
}

.ie - Internet Explorer (toutes versions)
.ie10 - Internet Explorer 10.x
.ie9 - Internet Explorer 9.x
.ie8 - Internet Explorer 8.x
.ie7 - Internet Explorer 7.x
.ie6 - Internet Explorer 6.x
.ie5 - Internet Explorer 5.x
.gecko - Firefox (toutes les versions), Camino,
.ffxx Seamonkey - Firefox xx (xx changement avec le nombre de version spécifique) nouvelle
.ff4 - Firefox 4.x
.ff3 - Firefox 3.x
.ff2 - Firefox 2.x
.opera - Opera (Tous versions)
.opera12 - Opera 12.x
.opera11 - Opera 11.x
.opera10 - Opera 10.x
.opera9 - Opera 9.x
.opera8 - Opera 8 .x
.konqueror - Konqueror de la .webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome de .chrome - Google Chrome (Toutes les versions)
.chromexx - xx Chrome (changement xx avec le numéro de la version spécifique) nouvelle
.safari - Safari (Toutes les versions) nouveau
.iron - SRWare Iron

    .. [Code OS] [Code navigateur] .yourclass {padding-left: 5px; Font-size: 14px}
body {background-color: # 000}
corps .ie8 {background-color: # 111} (spécifique pour Internet Explorer 8.x)
.win. corps IE8 {background-color: # 222} (spécifique pour Internet Explorer 8.x, sur Microsoft Windows toutes versions)
.opera body {background-color: # 333} (Opera toutes les versions)
.ff15 corps {background-color: # 444} (spécifique pour Firefox 15.x)
.linux.gecko body {background-color: # 555} (Firefox, Camino, SeaMonkey toutes les versions, sur x11 et Linux)
< br> .ie7 #right, .ie7 #probablement {width: 320px}
    

Pour plus d'informations, visitez ce lien http://cssbs.altervista.org/

Rappelez-vous simplement que: "renifler User-Agent est baaaddd"

Ce n'est pas et ne sera jamais une bonne pratique.

Il est juste une douleur dans le cul pour maintenir un site Web où reniflage User-Agent est mis en œuvre.

Vous devriez préférer ou séparés les feuilles de style CSS hacks si elles sont en faible quantité ou si vous n'avez pas le temps de faire plusieurs feuilles de style.

Pour Opera, vous pouvez utiliser cette astuce: 

@media all and (-webkit-min-device-pixel-ratio:10000),
    not all and (-webkit-min-device-pixel-ratio:0) { 
     #id {
         css rule;
     }
 }

Malheureusement, tous les hacks Chrome css sont également applyed Safari.

Il n'y a pas moyen de séparer les 2 rendus exceptées les anciennes versions de Safari (<= Safari3 si je me souviens bien)

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