Których tagów HTML5 mogę używać bez martwienia się o zgodność przeglądarki?


93

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.


48
Sprawdź caniuse.com i html5please.com , aby uzyskać aktualne informacje o zgodności przeglądarek.
rink.attendant 6

@deceze jakieś linki, aby dowiedzieć się więcej o podkładkach?
Swagg

4
HTML5 Boilerplate to dobre źródło informacji
Michael Peterson

47
IMHO, nie możesz używać niczego w tworzeniu stron internetowych, nie martwiąc się o zgodność przeglądarki ...
Uooo

2
Zobacz trzy poziomy wykorzystania HTML5 . Z rzeczy poziomu 1 można korzystać bez problemu. Funkcje poziomu 2 degradują się wdzięcznie. Funkcje poziomu 3 wymagają wypełnienia, jeśli problemem jest obsługa starszych przeglądarek.
Mathias Bynens,

Odpowiedzi:


100

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.


Ponadto, jeśli możesz określić, co to jest starszy IE? 6,7,8?
Swagg

4
Generalnie starsza
wersja

Uważaj na metatag X-UA-Compatible. Jeśli używasz czegoś takiego jak standardowy szablon html5, który ma warunkowe komentarze otaczające <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.
cheezone

Dzięki za informacje, wszelkie posty na blogu lub jakieś informacje, które mogę dodać do odpowiedzi na ten temat, byłyby dobre :)
iConnor

12

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


1
Muszę zauważyć, że localStorage i fileReader nie są tagami HTML, OP zapytał, które tagi HTML5 mają problemy ze zgodnością.
iConnor,

O tak. Istnieje duża lista znaczników semantycznych, które są wypychane w HTML5 jako sposób na uczynienie Twojej strony bardziej czytelną dla komputera i być może bardziej przyjazną dla SEO [a może nie]. Jest kilka nowych elementów wejściowych. Przypuszczam, że niektóre z nich mogą mieć problemy w jednej lub kilku przeglądarkach. Myślę, że caniuse może mieć te informacje ...
Paul,

8

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.


7
Chętnie użyłbym <!DOCTYPE html>jako pierwszej linii zamiast tych przeklętych, długich brzydkich rzeczy, które narzucano nam w dawnych czasach.
Paul,

Jeśli to jedyna rzecz, która zmienia się między dokumentami HTML 4 i „HTML 5”… po co? :)
deceze

4

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.


2

2
Uwaga: „Faktyczna dokładność tego artykułu może być zagrożona z powodu nieaktualnych informacji. Zaktualizuj ten artykuł, aby odzwierciedlał ostatnie wydarzenia lub nowo dostępne informacje. (Marzec 2013)”
gersande,

1
Tak, to prawdopodobnie prawda, ale ogólnie google html5 compatabilityjestem pewien, że istnieje wiele zasobów.
bradgonesurfing

2

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.