Tworzę aplikację internetową do użytku na komputerach PC. Jakie tagi HTML5 należy unikać, aby uniknąć problemów ze zgodnością z przeglądarkami, takimi jak IE8 i nowsze?
Uwaga: większość pytań na ten temat ma od 1 do 3 lat.
Tworzę aplikację internetową do użytku na komputerach PC. Jakie tagi HTML5 należy unikać, aby uniknąć problemów ze zgodnością z przeglądarkami, takimi jak IE8 i nowsze?
Uwaga: większość pytań na ten temat ma od 1 do 3 lat.
Odpowiedzi:
Zapytałeś, jakich tagów HTML5 unikać.
Cóż, niektóre tagi z HTML5 z mojej wiedzy zostały stworzone z powodów semantycznych. jak na przykład poniżej.
<article> <section> <aside> <nav> <header> <footer> ..ect
Są prawie w porządku i wymagają tylko trochę CSS, np. display: block;
działać normalnie w większości przeglądarek, chociaż w starszych przeglądarkach tj. Internet Explorer musisz utworzyć element w Javascript, aby był zgodny.
Oto przykład.
document.createElement('article');
Czy ustawienie <article>
elementu w górę do użytku w starszym Internet Explorer.
W przypadku bardziej zaawansowanych tagów HTML5, które do działania wymagają funkcji JavaScript, można wymienić następujące.
<audio> <video> <source> <track> <embed> And most importantly <canvas>
Te elementy są trudniejsze do obsługi / shiv w starszych przeglądarkach. Chociaż na dole umieściłem link do wypełniaczy w różnych przeglądarkach, chociaż osobiście ich nie zbadałem.
Więc powiedziałbym, że każdy element, który nie wymaga funkcjonalności Javascript, jest idealny w użyciu z odrobiną kodu obsługującego różne przeglądarki.
Jeśli Twoje kierowanie > IE8 , powinno być dobrze, jeśli używasz shiv.
Jak nazywam starsze przeglądarki? <IE9
Obecnie przeglądarka obsługuje znaczniki HTML5.
<section>, <article>, <aside>, <header>, <footer>,
<nav>, <figure>, <figcaption>, <time>, <mark>
Nie są obsługiwane przez Internet Explorer mniej niż 8, ale można je naprawić w ten sposób.
CSS:
section, article, aside, header, footer, nav, figure, figcaption{
display: block;
}
time, mark {
display: inline-block;
}
JavaScript:
var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
document.createElement(elements[i]);
}
I <audio> <video> <canvas>
nie są obsługiwane w <IE 9
<embed>
Element ma częściowe wsparcie w > IE8
Powinieneś również zajrzeć do tego tagu.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Ten meta
tag informuje program Internet Explorer, aby wyświetlał stronę w najwyższym dostępnym trybie IE, zamiast przechodzić w tryb zgodności i renderować stronę tak, jak zrobiłby to IE7 lub 8. Więcej informacji na ten temat tutaj .
Na dobry początek możesz sprawdzić HTML5 BoilerPlate
Aby zapoznać się z tabelami obsługi zgodności przeglądarek, możesz sprawdzić - http://caniuse.com/
HTML5 Shiv - https://github.com/afarkas/html5shiv
Lista polityk HTML5 - https: //github.com/Modernizr/Modernizr/wiki / ...
Aktualizacja
Jak wspomniano w komentarzu
Uważaj na metatag X-UA-Compatible. Jeśli używasz czegoś takiego jak standardowy szablon html5, który ma warunkowe komentarze otaczające element (dzieje się tak również w przypadku dokumentu HTML5 doctype IIRC), możesz napotkać problemy z przestawieniem się IE9 w tryb standardów IE7 nawet z tagiem. IE uderza ponownie
Może zechcesz się temu przyjrzeć, w tej chwili nie mam nic do poparcia.
<html>
element (dzieje się tak również w przypadku dokumentu HTML5 doctype IIRC), możesz napotkać problemy z przestawieniem się IE9 w tryb standardów IE7 nawet z tagiem. IE uderza ponownie.
Ogólnie rzecz biorąc, są problemy.
Powiedziano mi, że twoje pytanie dotyczy tagów HTML 5 , ale przydatne jest również przyjrzenie się nowym funkcjom w świetle dowolnego kodu JavaScript, który możesz znaleźć lub napisać.
W praktyce zalecaną metodą jest sprawdzenie istnienia tej funkcji, a nie określonej przeglądarki. Modernizr skrypt może być pomocne w tym względzie, ale istnieją również doniesienia o niewykrywalnych funkcji w HTML5 .
Niektóre funkcje, takie jak local storage
powrót do IE8.
Inne, na przykład FileReader
, wymagają IE10 / Firefox21 / Chrome27
Aby uzyskać aktualne informacje, spróbuj http://caniuse.com
Napisz HTML 5 tak jak zwykle i użyj podkładek, aby zapewnić zgodność ze starszymi przeglądarkami. Musisz tylko naprawdę uważać na interfejsy API Javascript, ponieważ prawie nie można ich podmienić. Jeśli próbujesz trzymać się podstawowego HTML 4 ze względu na zgodność, nie ma sensu używać HTML 5.
<!DOCTYPE html>
jako pierwszej linii zamiast tych przeklętych, długich brzydkich rzeczy, które narzucano nam w dawnych czasach.
Aby szybko porównać, jakie tagi są dostępne w jakich przeglądarkach i jaki jest poziom obsługi każdego tagu, html5test.com jest świetnym źródłem informacji.
Szukasz macierzy zgodności HTML5
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
html5 compatability
jestem pewien, że istnieje wiele zasobów.
Ponadto, aby uzyskać najlepszą kompatybilność z różnymi przeglądarkami, sugeruję użycie tego pliku reset.css utworzonego przez Erica Meyera. http://meyerweb.com/eric/tools/css/reset/ Dzięki temu elementy, które różnią się w zależności od przeglądarki, zachowują się tak samo we wszystkich przeglądarkach.