Comment rendre CSS visible uniquement pour Opera

Question

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

Answer 1

fonctionne très bien pour Opera 10.63

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

Answer 2

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.

Answer 3

Avec pure CSS hack vous risquez de ne pas sécuritaire de la limite supérieure de la version que vous voulez de piratage (par exemple, -o-prefocus peut être pris en charge longtemps après votre hack cesse de fixer 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 dans le CSS:

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

Mais veuillez double-vérifier CSS en premier pour s'assurer que ce que vous êtes le piratage est en fait un bug. Opera 10 a plein de CSS2.1 prise en charge et passe tous les tests, donc si quelque chose ne semble pas droit, cela peut être dû à d'autres raisons (erreur quelque part ailleurs dans le code, de détail ou d'angle cas, vous ne devriez pas compter sur l', etc.)

Answer 4

Opera12

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

Answer 5

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