web-dev-qa-db-fra.com

Comment rendre CSS visible uniquement pour Opera

Existe-t-il un moyen de rendre certaines règles CSS visibles uniquement pour Opera (9.5 +))?

cssoperacss-hack
31
Calin Don

Ce hack fonctionne pour le dernier opéra:

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

Pour autant que je l'ai testé, il ne touche aucun autre navigateur, mais cela peut être réel pendant plusieurs mois, avec l'essor des technologies Web, etc.

15
certainlyakey

fonctionne très bien pour Opera 10.63

noindex:-o-prefocus, .class {
  color:#fff;
}
60
Vitaly Batonov

Avec un hack CSS pur, vous ne pourrez peut-être pas limiter en toute sécurité la version supérieure que vous piratez (par exemple -o-prefocus peut être pris en charge longtemps après que votre hack cesse de réparer les choses et commence à les casser).

// remember to limit maximum version, because hacking all future versions
// will eventually break the page 
if (window.opera && window.opera.version() < 10)     
{
   document.documentElement.className += ' opera9';
}

et en CSS:

.opera9 .element-to-hack { /*declarations for opera <= 9 only*/ }

Mais s'il vous plaît vérifiez d'abord les spécifications CSS pour vous assurer que ce que vous piratez est bien un bug. Opera 10 a une prise en charge complète de CSS2.1 et passe tous les tests Acid, donc si quelque chose ne semble pas correct, cela peut être dû à d'autres raisons (erreur ailleurs dans le code, le détail ou le coin) cas où vous ne devriez pas compter, etc.)

8
Kornel

Ne pensez pas "détecter Opera".

Pensez "détecter les navigateurs qui ne prennent pas en charge la fonction x". Par exemple, cette instruction JavaScript vous permet de détecter les navigateurs qui prennent en charge moz-border-radius:

typeof (getComputedStyle(document.body, '').MozBorderRadius)=='string'

et c'est l'équivalent pour les navigateurs WebKit (Safari, Chrome):

typeof (getComputedStyle(document.body, '').WebKitBorderRadius)=='string'

Mettre cela ensemble, nous pouvons trouver quelque chose comme

function detectBorderRadiusSupport(){
    var styleObj;
    if( window.getComputedStyle ){
        styleObj=window.getComputedStyle(document.body, '');
    }else{
        styleObj=document.body.currentStyle;
    }
    return typeof styleObj.BorderRadius != 'undefined' || typeof styleObj.MozBorderRadius != 'undefined' || typeof styleObj.WebKitBorderRadius != 'undefined';
}

// the below must be inside code that runs when document.body exists, for example from onload/document.ready/DOMContentLoaded event or inline in body

if(!detectBorderRadiusSupport())document.body.className+=' fakeBorderRadius';

CSS:

body.fakeBorderRadius .roundMyCorners{
    /* CSS for Opera and others to emulate rounded corners goes here, 
    typically various background-image and background-position properties */
}

Avertissement: non testé :-p

6
hallvors

Opera12

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .class {
        background: red;
    };
}
6
Jane

Vous pouvez utiliser Modernizr ( http://www.modernizr.com/ ) pour détecter les fonctionnalités CSS que vous souhaitez utiliser - il applique des noms de classe à l'élément body afin que vous puissiez ensuite construire votre CSS en conséquence.

3
riddle

J'ai écrit une extension jQuery $ .support pour détecter la prise en charge des propriétés css.

http://Gist.github.com/556448

De plus, j'ai écrit un petit extrait pour faire de très petits piratages de fournisseurs:

// Sets browser infos as html.className
var params = [];
$.each($.browser, function(k, v) {
  var pat = /^[a-z].*/i;
  if(pat.test(k)) { params.Push(k); }
});
params = params.join(' ');
$('html').addClass(params);

Cela se traduit par exemple par:

<html lang="de" class="webkit version safari">
or
<html lang="de" class="opera version">

Dans vos feuilles de style, utilisez-le de cette façon:

html.opera #content_lock {
  background:rgba(0,0,0,0.33);
}
3
JackFuchs

<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />

Bien que cette solution soit plutôt un hack CSS et il n'y a aucune garantie qu'elle sera prise en charge dans les futures versions d'Opera. Vous pouvez également envisager d'utiliser la solution suivante:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {

.element{/*style for opera only*/}

}

http://bookmarks-online.net/link/1308/css-including-style-for-opera-only

1
user234726

La seule façon dont je peux penser est de vérifier l'agent utilisateur et de référencer la feuille de style uniquement lorsqu'il s'agit d'un navigateur opera. Étant donné que l'agent utilisateur peut être gêné, cela peut ne pas être fiable à 100%.

1
JoshBerke

Vous pouvez utiliser javascript pour écrire un <link> pour inclure un fichier CSS spécifique.

if (navigator.userAgent.indexOf(’Opera’) != -1) {
    document.write(””);
}
else {
    document.write(””);
}

Pour Opera 7, vous pouvez utiliser ceci:

/*Visible to only Opera*/
@media all and (min-width: 0) {
    /* css rules here */
}

Cependant, c'est généralement une mauvaise pratique de faire un style basé sur le sniffing du navigateur.

1
amr

<link href = "opera.css" rel = "stylesheet" type = "text/opera" media = "all" />

exemple ici

1
valentin

@certainlyakey fonctionne très bien pour moi:

@media all et (-webkit-min-device-pixel-ratio: 10000), pas tous et (-webkit-min-device-pixel-ratio: 0) {#id {règle css}}

J'ai une page avec un bouton et le texte ne s'afficherait pas correctement dans Opera. Le bouton apparaît plusieurs fois (ajouter au panier). Après avoir appliqué ce correctif, cela a fonctionné parfaitement.

0
Kaos

Pas du tout, je recommanderais.

Vérifiez Javascript ou PHP sniffers de navigateur sur Google. Certains peuvent être tellement obsolètes que vous devez ajouter la détection de Opera 9.5+, cependant).

Les renifleurs de navigateur (pour le style) sont généralement de mauvaises pratiques.

Notez également que Opera 9.5+ donne aux utilisateurs la possibilité de masquer leur navigateur comme IE, rendant tout type de reniflement inutile.

Edit: Comme vous pouvez le voir dans une autre réponse, il y a window.opera.version(). Je ne connaissais pas le window.opera l'objet contenait ces informations. CEPENDANT, vous devriez probablement regarder pour voir si cet objet est toujours disponible quand quelqu'un a défini Opera pour être vu comme IE ou un autre navigateur).

0
user136565