Buduję aplikację internetową do użytku na komputerach. Co to są tagi HTML5, których należy unikać, aby zapobiec problemom ze zgodnością z przeglądarkami takimi jak IE8 i nowszymi?Z jakich tagów HTML mogę korzystać bez obawy o zgodność przeglądarki?
Uwaga: Większość pytań dotyczy 1-3 lat.
Zapytałeś, z jakich tagów HTML nie korzystać.
Cóż Niektóre tagi z HTML5 z mojej wiedzy zostały wykonane ze względów semantycznych. jak na przykład poniższe.
<article> <section> <aside> <nav> <header> <footer> ..ect
Są prawie dobrze pracować, i po prostu wymaga trochę CSS np. display: block; do pracy normalnie w większości przeglądarek, chociaż w starszych przeglądarkach tj. W przeglądarce Internet Explorer musisz utworzyć element w Javascript, aby był zgodny.
Oto przykład.
document.createElement('article');
Czy ustawić element <article> się do stosowania w starszych Internet Explorer.
Bardziej zaawansowane znaczniki HTML5, które wymagają działania Javascript, są podobne do poniższych.
<audio> <video> <source> <track> <embed> And most importantly <canvas>
Te elementy są trudniejsze do wsparcia/Shiva w starszych przeglądarkach. Chociaż umieściłem na dole link do krzyżujących się przeglądarek, chociaż osobiście ich nie zbadałem.
Powiedziałbym więc, że każdy element, który nie wymaga funkcjonalności Javascript, jest doskonale w porządku z niewielkim kodem obsługi wielu przeglądarek.
Jeśli kierujesz na stronę > IE8, powinieneś być w porządku, jeśli używasz shiv.
Co mam nazywać starszymi przeglądarkami? < IE9
Obsługa dzisiejszych znaczników HTML5 już dziś.
<section>, <article>, <aside>, <header>, <footer>,
<nav>, <figure>, <figcaption>, <time>, <mark>
nie są obsługiwane przez Internet Explorer mniej niż ale może być ustalona w taki 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
Warto również zajrzeć do tego tagu.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Ten meta tag mówi Internet Explorer, aby wyświetlić stronę w trybie najwyższej IE dostępne, zamiast iść w trybie zgodności i renderowania strony jak IE7 lub 8 zrobi. Więcej informacji na ten temat: Here.
Przez rozruch można sprawdzić HTML5 BoilerPlate
Na stołach wsparcia zgodności przeglądarki można sprawdzić - http://caniuse.com/
HTML5 Shiv - https://github.com/afarkas/html5shiv
Lista HTML5 Polyfills - https://github.com/Modernizr/Modernizr/wiki/...
Aktualizacja
Jak wspomniano w komentarzu
Bądź ostrożny z meta tagu X -UA-Kompatybilny. Jeśli użyjesz czegoś takiego jak zestaw html5 z uwarunkowanymi komentarzami otaczającymi element (to samo dzieje się z dokumentem IIRC html5), możesz napotkać problemy z IE9, zmuszając się do trybu standardowego IE7, nawet z tagiem. IE ponownie uderza
Być może zechcesz się przyjrzeć temu, nie mam w tej chwili nic do poparcia.
Szukasz dla kompatybilności matrycy HTML5
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
Uwaga: "Rzeczywista dokładność tego artykułu może zostać naruszona ze względu na nieaktualne informacje. Zaktualizuj ten artykuł, aby uwzględnić ostatnie wydarzenia lub nowo dostępne informacje." (Marzec 2013) " – gersande
Tak, to prawda, ale ogólnie Google" 'zgodność html5'' Jestem pewien, że istnieje wiele zasobów. – bradgonesurfing
Generalnie istnieją problemy.
Powiedziano mi, że pytanie brzmi zapytać o HTML 5 tagów ale jest także przydatna patrzeć na nowe funkcje w świetle wszelkich JavaScript może znaleźć ani pisać.
W praktyce zalecaną metodą jest sprawdzenie istnienia funkcji zamiast konkretnej przeglądarki. Skrypt Modernizr może być pomocny w tym zakresie, ale istnieją również raporty o undetectable features in HTML5.
Niektóre funkcje, takie jak local storage, powracają do IE8.
Inni, jak FileReader wymagają IE10/Firefox21/Chrome27
Aktualne informacje, spróbuj http://caniuse.com
Muszę zauważyć, że localStorage i fileReader nie są znacznikami HTML, OP zapytał, jakie znaczniki HTML mają problemy ze zgodnością. – iConnor
O tak. Istnieje duża lista znaczników semantycznych, które są wypychane w HTML5, aby uczynić twoją stronę bardziej czytelną maszynowo i być może bardziej przyjazną SEO [lub być może nie]. Istnieje kilka nowych elementów wejściowych. Przypuszczam, że niektóre z nich mogą powodować problemy w co najmniej jednej przeglądarce. Sądzę, że caniuse może mieć te informacje ... – Paul
zapisu HTML 5 jak ty normalnie i używać Shims w celu zapewnienia zgodności ze starszymi przeglądarkami. Musisz tylko uważać na API JavaScript, ponieważ są one trudne do zsynchronizowania. Jeśli próbujesz zachować zgodność z podstawowym językiem HTML 4, nie ma sensu używanie HTML 5.
Szybkie porównanie, jakie tagi są dostępne w jakich przeglądarkach i jaki poziom wsparcia dla każdego tagu, to html5test.com wspaniały zasób.
Ponadto, aby uzyskać najlepszą kompatybilność z przeglądarką, sugeruję użycie tego reset.css stworzonego przez Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Powoduje to, że elementy różnią się między przeglądarkami, aby zachowywać się tak samo we wszystkich przeglądarkach.
Sprawdź http://caniuse.com i http://html5please.com pod kątem aktualnych informacji o kompatybilności przeglądarek. –
@deceze żadnych linków, aby dowiedzieć się więcej o podkładkach? – Swagg
[Kaseta HTML5] (http://html5boilerplate.com) to dobry zasób –