2011-09-06 13 views
19

Odkąd IE pozbywa się warunkowych komentarzy w wersji 10, pilnie potrzebuję znaleźć "hackowanie CSS" specjalnie dla IE10. Zauważ, że musi to być selektor selektora, który dostaje "zhakowane", a nie właściwości CSS.Czy istnieją specjalne selektory CSS ukierunkowane na IE10?

W Mozilli, można użyć:

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

natomiast w Webkit, zwykle zrobić:

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

Jak chciałbym zrobić coś podobnego w IE10?

+0

Po prostu użyłbym warunkowego komentowania IE. Poza tym żaden z moich znajomych ani rodziny nawet nie wie o IE 10. –

+7

IE10 będzie prawdopodobnie standardem na tyle zgodnym, że nie będzie potrzebował żadnych hacków. I Tyler, to pytanie mówi, że nie obsługuje komentarzy warunkowych. – BoltClock

+2

@BoltClock Niestety istnieją pewne dziwne odmiany, nawet wśród standardowych zgodnych przeglądarek internetowych (Webkit/Firefox/Opera), więc selektor taki jak @ -moz-document naprawdę pomaga, próbując stworzyć piksel doskonały dla wszystkich przeglądarek. Chociaż jestem wielkim fanem pozwalającym przeglądarkom wyświetlać nieco inne wrażenia dla ich użytkowników - mój klient tego nie robi. – kunambi

Odpowiedz

33

Poniższy przykład pokazuje, jak to zrobić

/* 
#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; } 
} 

Warning: prawdopodobnie będzie działać w IE11 +, zbyt.

+0

Dziękuję za Twój wkład, zaakceptowałem to jako odpowiedź. Postaraj się, by celował w IE11, czy nie, to coś, o czym nie myślę, że ktokolwiek z nas powinien się martwić, przez jakiś czas :-) – kunambi

+5

To jest niebezpieczne myślenie. Nawet jeśli minie dużo czasu, zanim pojawi się IE11, oznacza to, że kod będzie mniej świeży w twoim umyśle i być może trudniejszy do naprawienia. Nikt tak naprawdę nie wie, kiedy pojawi się kolejna wersja IE, lub błąd, nad którym pracujesz, zostanie naprawiony. Używałbym takiego hacka tylko do czegoś, co nie pęknie, jeśli błąd zostanie naprawiony w późniejszej wersji. –

+1

Właśnie próbowałem używać tej metody. Działa tylko w środowisku dev, a nie w produkcji. – agassi0430

3

O ile mi wiadomo, nie ma takiego selektora CSS. Jeśli chcesz specjalnie ukierunkować się na IE10, dlaczego nie wystarczy napisać trochę javascriptu, aby ustawić klasę na obiekcie o nazwie ie10, a następnie utworzyć określone style dla IE10?

2

Nie jestem pewien, czy to pasuje do selektora w stosunku do wymagań nieruchomości, ale wymyśliłem następującą metodę, próbując podrobić text-shadow w IE7-9, a następnie wyłączyć hack w IE10. Kluczem jest użycie nowych rzeczy w IE10 -ms-animation.

.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\9; 
    *filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); 
    opacity: 0.75\9; 

    /* 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; 
    } 
} 
+6

Jest to wyraźnie dzieło szalonego człowieka! –

5

Za pomocą selektora przeglądarki css z http://rafael.adm.br/css_browser_selector/ możesz dodać proste + do kodu i wywołać IE10 ze swojego CSS.

Wyszukaj numer /msie\s(\d)/ i zmień go na /msie\s(\d+)/.

Teraz w CSS tylko dodać .ie10 przed selektorem tak:

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

Powinieneś teraz zobaczyć IE10 renderowania szerokość 100px i wszystkich innych przeglądarek renderowania szerokość 90px.