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.

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 metatag 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 .

Linki pomocnicze HTML5

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.

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 storagepowró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.

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)

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.