web-dev-qa-db-fra.com

Comment créer une feuille de style spécifique à Chrome / Opera?

J'ai besoin de faire chrome/opera hacks à cause d'un script de remplacement de police voulu par le client qui casse les choses ... c'est triste mais tout fonctionne dans IE6-7, FF2-3 et Safari. Je n'ai aucun moyen de réparer le script lui-même, je ne peux que le pirater en utilisant CSS et HTML.

J'essaie de faire quelque chose comme:

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

C'est possible?

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

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

Est-ce que ça marche? Existe-t-il un moyen plus simple? Et Opera?

Merci!

cssgoogle-chromeoperaspecific-stylesheets
23
marcgg

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

Il annonce des classes spécifiques au navigateur à la balise body de votre html que vous pouvez utiliser dans votre css comme:

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

J'espère que cela t'aides.

39
Thomas Maas

Évitez les hacks CSS. Ils vont casser.

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;
    }
}

Opéra:

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

Faire appliquer CSS uniquement pour Opera 11?

Comment rendre CSS visible uniquement pour Opera

Hack CSS à l'épreuve du temps pour LTE Opera 1

14
XP1

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

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

ceci chargera une feuille de style spécifique au webkit. Le "type" peut être nommé comme vous le souhaitez mais doit être inclus.

Allez-y et créez votre feuille de style à votre guise et tous les navigateurs non-webkit l'ignoreront simplement.

Vous devrez utiliser les hacks ci-dessus pour l'opéra. Les éléments suivants ont fonctionné le mieux pour moi:

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

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

11
Dylan Edwards

Je n'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);
}
3
Lobstrosity

.ie - Internet Explorer (toutes les 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, SeaMonkey
. ffxx - Firefox xx (changer xx avec le numéro de version spécifique) nouveau
. ff4 - Firefox 4.x
. ff3 - Firefox 3.x
. ff2 - Firefox 2.x
. opera - Opera (Toutes les versions)
. opera12 - Opera 12.x
. opera11 - Opera 11.x
. opera10 - Opera 10.x
. opera9 - Opera 9.x
. opera8 - Opera 8.x
. konqueror - Konqueror
. webkit - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
. chrome - Google Chrome (Toutes les versions)
. chromexx - Chrome xx (changer xx avec le numéro de version spécifique) nouveau
. safari - Safari (toutes les versions) nouveau
. fer - SRWare Iron












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

2
Sabir

Rappelez-vous juste que: "Le reniflement de l'agent utilisateur est baaaddd"

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

Il est juste difficile de maintenir un site Web sur lequel le reniflage d'agent utilisateur est implémenté.

Vous devriez préférer les feuilles de style séparées, ou les hacks CSS s'ils sont en faible quantité ou si vous n'avez pas le temps de créer 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;
     }
 }

Et malheureusement, tous les Chrome css hacks sont également appliqués à Safari.

Il n'y a aucun moyen de séparer les 2 rendus à l'exception des anciennes versions de Safari (<= safari3 si je me souviens bien)

0
TwystO