IE10 + nie obsługuje już tagów wykrywania przeglądarki w celu identyfikacji przeglądarki.
Do wykrywania IE10 używam JavaScript i ms
zdefiniowano technikę testowania możliwości w celu wykrycia pewnych stylów z przedrostkami, takich jak msTouchAction
i msWrapFlow
.
Chcę zrobić to samo dla IE11, ale zakładam, że wszystkie style IE10 będą również obsługiwane w IE11. Czy ktoś może mi pomóc zidentyfikować tylko style lub możliwości IE11, które pozwolą mi je rozróżnić?
Informacje dodatkowe
- Nie chcę używać wykrywania typu User Agent, ponieważ jest tak nierówny i można go zmienić, a także wydaje mi się, że czytałem, że IE11 celowo próbuje ukryć fakt, że jest to Internet Explorer.
- Aby zobaczyć, jak działa testowanie wydajności IE10, użyłem tego JsFiddle (nie mojego) jako podstawy do moich testów.
- Spodziewam się też wielu odpowiedzi „To zły pomysł…”. Jedną z moich potrzeb jest to, że IE10 twierdzi, że coś obsługuje, ale jest bardzo źle zaimplementowany i chcę móc odróżnić IE10 od IE11 +, aby móc w przyszłości przejść do metody wykrywania opartej na możliwościach.
- Ten test jest połączony z testem Modernizr, który po prostu sprawi, że niektóre funkcje będą „zastępować” mniej efektowne zachowanie. Nie mówimy o krytycznej funkcjonalności.
TAKŻE używam już Modernizr, ale to nie pomaga tutaj. Potrzebuję pomocy w rozwiązaniu mojego jasno zadanego pytania.
Odpowiedzi:
W świetle rozwijającego się wątku zaktualizowałem poniżej:
IE 6
lub
IE 7
lub
IE 6 i 7
lub
lub
IE 6, 7 i 8
IE 8
lub
Tylko tryb standardów IE 8
IE 8,9 i 10
Tylko IE 9
IE 9 i nowsze
IE 9 i 10
Tylko IE 10
IE 10 i nowsze
lub
Użycie
-ms-high-contrast
oznacza, że MS Edge nie będzie celem, ponieważ Edge nie obsługuje-ms-high-contrast
.IE 11
Alternatywy dla JavaScript
Modernizr
Wybór klienta użytkownika
JavaScript:
Dodaje (np.) Poniższe do
html
elementu:Umożliwienie bardzo ukierunkowanych selektorów CSS, np .:
Notatka
Jeśli to możliwe, zidentyfikuj i napraw wszelkie problemy bez hacków. Wspieraj stopniowe ulepszanie i wdzięczną degradację . Jest to jednak scenariusz „idealnego świata”, który nie zawsze jest możliwy do uzyskania, jako taki - powyższe powinno pomóc w zapewnieniu kilku dobrych opcji.
Atrybucja / Essential Reading
źródło
clip: auto\9;
nadal jest interpretowany tak, jakclip: auto;
w IE 11. W jakiś sposób nie jest to ignorowane ...@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }
znalazłem ją na mediacurrent.com/blog/ ...-ms-high-contrast: active
może być coś, czego należy unikać, ponieważ zgodnie ze specyfikacjami MS faktycznie będziesz kierować reklamy do użytkowników o wysokim kontraście w Edge z regułami IE 10/11. Na stronie, do której prowadzi ta odpowiedź-ms-high-contrast
, w rzeczywistości mówi, że tylko-ms-high-contrast: none
wartość nie jest już obsługiwana. Myślę, że nikt o tym nie wspomina, ponieważ większość ludzi nie ma włączonego trybu wysokiego kontrastu i większość ludzi nie używa Edge. Ale nadal jest ktoś , kto ma taką konfigurację i prawdopodobnie nie jest to dla niego fajne.Aby kierować reklamy tylko na IE10 i IE11 (a nie Edge):
źródło
Więc w końcu znalazłem własne rozwiązanie tego problemu.
Po przeszukaniu dokumentacji Microsoftu udało mi się znaleźć nowy styl tylko dla IE11
msTextCombineHorizontal
W moim teście sprawdzam style IE10 i jeśli są one zgodne, sprawdzam tylko styl IE11. Jeśli go znajdę, to IE11 +, jeśli nie, to IE10.
Przykład kodu: Wykryj IE10 i IE11 za pomocą testów możliwości CSS (JSFiddle)
Pokaż fragment kodu
/** Target IE 10 with JavaScript and CSS property detection. # 2013 by Tim Pietrusky # timpietrusky.com **/ // IE 10 only CSS properties var ie10Styles = [ 'msTouchAction', 'msWrapFlow', 'msWrapMargin', 'msWrapThrough', 'msOverflowStyle', 'msScrollChaining', 'msScrollLimit', 'msScrollLimitXMin', 'msScrollLimitYMin', 'msScrollLimitXMax', 'msScrollLimitYMax', 'msScrollRails', 'msScrollSnapPointsX', 'msScrollSnapPointsY', 'msScrollSnapType', 'msScrollSnapX', 'msScrollSnapY', 'msScrollTranslation', 'msFlexbox', 'msFlex', 'msFlexOrder']; var ie11Styles = [ 'msTextCombineHorizontal']; /* * Test all IE only CSS properties */ var d = document; var b = d.body; var s = b.style; var ieVersion = null; var property; // Test IE10 properties for (var i = 0; i < ie10Styles.length; i++) { property = ie10Styles[i]; if (s[property] != undefined) { ieVersion = "ie10"; createEl("IE10 style found: " + property); } } // Test IE11 properties for (var i = 0; i < ie11Styles.length; i++) { property = ie11Styles[i]; if (s[property] != undefined) { ieVersion = "ie11"; createEl("IE11 style found: " + property); } } if (ieVersion) { b.className = ieVersion; $('#versionId').html('Version: ' + ieVersion); } else { createEl('Not IE10 or 11.'); } /* * Just a little helper to create a DOM element */ function createEl(content) { el = d.createElement('div'); el.innerHTML = content; b.appendChild(el); } /* * List of IE CSS stuff: * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx */
body { font: 1.25em sans-serif; } div { background: red; color:#fff; padding: 1em; } .ie10 div { background: green; margin-bottom:.5em; } .ie11 div { background: purple; margin-bottom:.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h1>Detect IE10 and IE11 by CSS Capability Testing</h1> <h2 id="versionId"></h2>
Zaktualizuję przykładowy kod o więcej stylów, gdy je odkryję.
UWAGA: To prawie na pewno zidentyfikuje IE12 i IE13 jako „IE11”, ponieważ te style prawdopodobnie będą kontynuowane. Dodam kolejne testy, gdy pojawią się nowe wersje i mam nadzieję, że będę mógł ponownie polegać na Modernizrze.
Używam tego testu do zachowania awaryjnego. Zachowanie rezerwowe jest po prostu mniej efektowną stylizacją, nie ma ograniczonej funkcjonalności.
źródło
if (document.documentMode === 11) { ... }
? Chyba że, oczywiście, chcesz użyć właściwości CSS w@supports
regule at (która, nawiasem mówiąc, nie jest jeszcze obsługiwana w IE).To wydaje się działać:
https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/
źródło
Możesz napisać swój kod IE11 w normalny sposób, a następnie użyć
@supports
i sprawdzić na przykład właściwość, która nie jest obsługiwana w IE11grid-area: auto
.Następnie możesz w nim napisać nowoczesne style przeglądarki. IE nie obsługuje
@supports
reguły i użyje oryginalnych stylów, podczas gdy te zostaną nadpisane w nowoczesnych przeglądarkach, które obsługują@supports
.źródło
@supports
, więc ignoruje wszystko w@supports
bloku. Możesz więc umieścić cokolwiek w warunku @supports (np.@supports (display: block)
), A IE11 nadal będzie to pomijać.Oto odpowiedź na 2017 rok, gdzie prawdopodobnie zależy Ci tylko na odróżnieniu <= IE11 od> IE11 ("Edge"):
@supports not (old: ie) { /* code for not old IE here */ }
Bardziej poglądowy przykład:
body:before { content: 'old ie'; } /**/@supports not (old: ie) { body:before { content: 'not old ie'; } /**/}
To działa, ponieważ IE11 w rzeczywistości nawet nie obsługuje
@supports
, a wszystkie inne odpowiednie kombinacje przeglądarki / wersji tak.źródło
To zadziałało dla mnie
A potem w pliku css rzeczy z prefiksem
Kiedy ta przeglądarka jest gotowa na śmierć?
źródło
Spróbuj tego:
źródło
Spójrz na ten artykuł: CSS: selektory agenta użytkownika
Zasadniczo, gdy używasz tego skryptu:
Możesz teraz używać CSS do kierowania reklam na dowolną przeglądarkę / wersję.
Więc dla IE11 możemy to zrobić:
SKRZYPCE
źródło
rv:11.0
w swoim ciągu agenta użytkownika.Użyj następujących właściwości:
źródło
Powinieneś użyć Modernizr, doda klasę do tagu body.
również:
Należy zauważyć, że IE11 jest nadal w wersji zapoznawczej, a agent użytkownika może ulec zmianie przed wydaniem.
Ciąg agenta użytkownika dla IE 11 to obecnie:
Oznacza to, że możesz po prostu przetestować, dla wersji 11.xx,
źródło
Być może Layout Engine v0.7.0 jest dobrym rozwiązaniem w Twojej sytuacji. Wykorzystuje wykrywanie funkcji przeglądarki i może wykryć nie tylko IE11 i IE10, ale także IE9, IE8 i IE7. Wykrywa także inne popularne przeglądarki, w tym niektóre przeglądarki mobilne. Dodaje klasę do tagu html, jest łatwy w użyciu i dobrze się sprawdza w dość dokładnych testach.
http://mattstow.com/layout-engine.html
źródło
Jeśli używasz Modernizr - możesz łatwo odróżnić IE10 od IE11.
IE10 nie obsługuje tej
pointer-events
właściwości. IE11 tak. ( caniuse )Teraz, w oparciu o klasę wstawioną przez Modernizr, możesz mieć następujący CSS:
źródło
Możesz użyć js i dodać klasę w html, aby zachować standard warunkowych komentarzy :
Lub użyj biblioteki, takiej jak bowser:
https://github.com/ded/bowser
Lub zmodernizuj do wykrywania funkcji:
http://modernizr.com/
źródło
Wykrywanie IE i jego wersji jest w rzeczywistości niezwykle łatwe, a przynajmniej niezwykle intuicyjne:
.
W ten sposób wychwytujesz również wersje z wysokim IE w trybie / widoku zgodności. Następnie chodzi o przypisanie klas warunkowych:
źródło
Możesz spróbować tego:
źródło
Napotkałem ten sam problem z Gravity Form (WordPress) w IE11. Styl kolumny formularza „display: inline-grid” zepsuł układ; zastosowanie powyższych odpowiedzi rozwiązało tę rozbieżność!
źródło
Cofnij się: dlaczego w ogóle próbujesz wykryć „Internet Explorer” zamiast „moja witryna musi wykonać X. Czy ta przeglądarka obsługuje tę funkcję? Jeśli tak, dobra przeglądarka. Jeśli nie, to powinienem ostrzec użytkownika”.
Powinieneś trafić na http://modernizr.com/ zamiast kontynuować to, co robisz.
źródło