Sont-t-Il des Sélecteurs CSS Ciblage IE10?

Depuis IE est de se débarrasser des commentaires conditionnels dans la version 10, je suis dans le besoin de trouver un "CSS hack" ciblage IE10, en particulier. Notez qu'il doit être le sélecteur de où il y a "piraté" et non pas des propriétés CSS.

Dans Mozilla, vous pouvez utiliser: 

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

Tandis que dans Webkit, vous n'avez généralement:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  h1 {
    color: blue;
  }
}

Comment pourrais-je faire quelque chose de similaire dans IE10?

  • Je venais d'utiliser IE conditionnel commenter. En outre, aucun de mes amis ou de la famille même de connaître, IE 10.
  • IE10 va probablement être conformes aux normes suffisamment pour ne pas avoir besoin tous les hacks. Et Tyler, la question a dit qu'il ne supporte pas les commentaires conditionnels.
  • Malheureusement il y a quelques étranges variations, même parmi les conformes à la norme que les navigateurs Webkit/Firefox/Opera) donc un sélecteur tels que @-moz-document aide vraiment dehors, lors de la tentative de créer un pixel de l'expérience sur tous les navigateurs. Même si je suis un grand fan de permettre aux navigateurs d'afficher une expérience légèrement différente pour leurs utilisateurs - mon client ne prend pas.
InformationsquelleAutor kunambi | 2011-09-06
  1. 33

    L'exemple suivant montre comment faire

    /* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

    Avertissement: fonctionnera probablement dans IE11+, trop.

    • Merci pour vos commentaires, j'ai accepté cela comme une réponse. Si il cible les IE11 ou pas, c'est quelque chose que je ne pense pas que l'un de nous en inquiéter, depuis un certain temps 🙂
    • C'est dangereux de penser. Même si c'est un long temps avant que IE11 sort, cela signifie que le code sera moins frais dans votre esprit et peut-être plus difficile à corriger. Aussi, on ne sait pas vraiment quand la prochaine version de IE va sortir, ou le bogue que vous travaillez autour de vous être fixe. J'avais utiliser un hack comme ça pour quelque chose qui ne cassera pas si le bug est corrigé dans une version ultérieure.
    • Juste essayé d'utiliser cette méthode. Fonctionne uniquement dans l'environnement de dev, pas de production.
    InformationsquelleAutor Alex Kloss
  2. 5

    À l'aide de la css navigateur sélecteur de http://rafael.adm.br/css_browser_selector/ vous pouvez ajouter un simple + le code et appeler IE10 à partir de votre CSS.

    Recherchez /msie\s(\d)/ et de le modifier pour /msie\s(\d+)/.

    Maintenant dans votre CSS juste ajouter .ie10 avant de votre sélection comme ceci:

    .ie10 .class-name { width: 100px; }

    .class-name { width: 90px; }

    Vous devriez maintenant voir IE10 rendu de la 100px de largeur et de tous les autres navigateurs rendu de la 90px largeur.

    InformationsquelleAutor chuckscroggs
  3. 3

    Autant que je sache, aucun de ces sélecteur CSS existe. Si vous souhaitez cibler IE10 plus précisément, pourquoi ne pas simplement écrire un peu de code javascript pour définir une classe sur la body élément appelé ie10, puis créer un des styles spécifiques pour IE10?

    InformationsquelleAutor NT3RP
  4. 2

    Je ne sais pas si cela correspond à votre sélecteur vs propriété exigences, mais je suis venu avec la méthode suivante, tout en essayant de faux text-shadow dans IE7-9, puis éteignez le hack dans IE10. La clé est d'utiliser le nouveau -ms-animation trucs dans IE10.

    .header {
    /* For browsers that support it to add a little more punch to a @font-face */
    text-shadow: rgba(100, 100, 100, 0.5) 0 0 2px;

    /* Make IE7-9 do faux bold instead and then turn down the opacity to match */
    *font-weight: bold;
    font-weight: bold;
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75;

    /* Uh oh! We've also caught IE10 in our above hack */

    /* But IE10 supports CSS3 animations. Will a high duration keep CPU usage down? */
    -ms-animation: text-shadow 60s infinite;
}

/* Define the animation */
@-ms-keyframes text-shadow {
    0%, 100% {
        font-weight: normal;
        opacity: 1;
    }
}
    InformationsquelleAutor Kyle MacFarlane