Czy powinienem używać HTML5 i / lub CSS3 do budowy mojej witryny?
16
Nowe rzeczy HTML5 / CSS3 (Web8!) Brzmią fajnie! Czy powinienem zacząć go używać teraz, czy trzymać się css / xhtml czekać, aż więcej przeglądarek będzie mogło go używać?
HTML5 jest teraz obsługiwany przez wszystkie przeglądarki, nawet IE5! (Jeśli używasz skryptu html5shiv). Bardzo polecam przeczytanie http://diveintohtml5.org Jest to jeden z najlepszych zasobów HTML5.
Jeśli chodzi o CSS3, jeśli go używasz, pamiętaj o użyciu przedrostka dostawcy, oprócz zwykłej składni. na przykład
promień granicy
-moz-border-radius
-webkit-border-radius
Wierzę w stopniowe ulepszanie. Obsługa css3 w IE9 brzmi bardzo obiecująco.
Myślę, że masz zamiar umieścić promień granicy na dole, prawda?
Grant Palin
1
Niestety, nie ma oryginalnej strony Dive Into HTML5. Dostępnych jest wiele kopii lustrzanych. Oto jeden: diveintohtml5.info
M. Dudley
12
Prawdopodobnie.
Istnieją części HTML5, z których możesz teraz korzystać. Formularze na przykład. Jeśli masz <input type="email">w przeglądarce, która nie obsługuje HTML5 (tak, nawet IE6), zobaczysz po prostu to samo, co zobaczyłbyś, gdybyś używał <input type="text">. Jednak w przeglądarce obsługującej elementy formularza HTML5 zyskujesz zalety tego emailtypu: mianowicie klient sprawdzi błąd, nie wymagając dodatkowego JS. Chociaż tak, nadal potrzebujesz JS dla przeglądarek innych niż HTML5, będziesz mieć jeszcze jedną warstwę sprawdzania poprawności w przeglądarkach obsługujących.
Kolejne pytanie na tej stronie zapewnia dobry przegląd nowych funkcji dostępnych w HTML5 i CSS3. W tym pytaniu jest również wiele dobrych danych na temat formularzy.
Ponieważ Internet Explorer (i starsze wersje Safari i Firefox, jakkolwiek rzadkie mogą być) nie obsługują wielu z tych funkcji, które mają biblioteki JavaScript do wypełnienia pustki. Obejmują one spadek wydajności (nawet jeśli dotyczą tylko przeglądarek, które muszą z nich korzystać), więc należy pamiętać o użytkownikach, którzy je stosują.
Aby złagodzić problemy związane z brakiem obsługi funkcji, jeśli zdecydujesz, że te nowe funkcje są tego warte, skorzystaj z następujących zasobów:
html5shiv: shiv JavaScript dla IE do rozpoznawania i stylizowania elementów HTML5.
CSS3 Pie: zachowanie dołączone do IE (.htcplik), które sprawia, że Internet Explorer 6-8 jest w stanie renderować kilka najbardziej przydatnych funkcji dekoracyjnych CSS3. Kiedy stosuje się do elementu, pozwala IE rozpoznać i wyświetlaczborder-radius,box-shadow,border-image, wielokrotne obrazy tła, ilinear-gradientjako obraz tła.
Modernizr: biblioteka JavaScript, która wykorzystuje wykrywanie funkcji do testowania bieżącej przeglądarki pod kątem nadchodzących funkcji CSS3 / HTML5, dodając klasy do elementu <html> dla tych, które są obsługiwane. Tworzy również samozwańczy globalny obiekt JavaScript, który zawiera właściwość logiczną dla każdej funkcji,truejeśli jest obsługiwana, afalsejeśli nie. Dodaje wsparcie dla stylizacji i drukowania elementów HTML5, dzięki czemu można korzystać z elementów, takich jak<section>,<header>i<nav>.
ie-css3.js: umożliwia programowi Internet Explorer identyfikację selektorów pseudoklasowych CSS3 i renderowanie dowolnych reguł stylu z nimi zdefiniowanych. Obsługuje różne selektory CSS3 w oparciu o bibliotekę JavaScript, z której korzysta Twoja witryna.
DD_belatedPNG: biblioteka JavaScript, która dodaje obsługę obrazów PNG do IE6. Można używać PNG jakosrco<img />elemencie lub jakobackground-imagewłasności w CSS. W przeciwieństwieAlphaImageLoader,background-positionibackground-repeatdziałać zgodnie z przeznaczeniem, a elementy będą reagować naa:hoverpseudo-klasie.
TwinHelix IE PNG Fix: zachowanie dołączone do IE (.htcplik), które dodaje obsługę PNG z nieprzezroczystością alfa do IE 6. Pełne pozycjonowanie i powtarzanie tła CSS obsługuje (w tym duszki CSS) z dodatkowym (dołączonym) JavaScript.
Cokolwiek: hover: zachowanie dołączone do IE (.htcplik), które automatycznie łata: hover,: active i: focus dla dziwactw IE6, IE7 i IE8, umożliwiając korzystanie z nich tak, jak w każdej innej przeglądarce. Obejmuje obsługę AJAX, co oznacza, że każdy HTML, który zostanie wstawiony do dokumentu za pomocą javascript, również się uruchomi:hover,:activea:focusstyle w IE.
Ciekawe, że DD_belatedPNG rozwiązuje oba problemy rozwiązane przez Whthing: hover i poprawkę IE PNG TwinHelix za pomocą czystego JavaScript, podczas gdy cokolwiek: hover i poprawka IE PNG TwinHelix używają kombinacji zachowań JavaScript i IE ( .htc files).
Zasadniczo ludzie, którzy używają przeglądarek innych niż IE, aktualizują je, gdy jest o to poproszony, więc IE ponosi ciężar „Ale niektóre przeglądarki nie obsługują tej funkcji!” uskarżanie się. Modernizr doda możliwość używania HTML5 / CSS3 do dowolnej przeglądarki, którą prawdopodobnie zobaczysz, a nie tylko IE. ie-css3.js zrobi to samo, po prostu musisz go zaimplementować bez komentarza warunkowego IE (co oznacza, że wszystkie przeglądarki go otrzymają, chyba że dodasz go do sprawdzania agenta użytkownika po stronie serwera - to znacznie obniży wydajność dla wszystkich odwiedzających, a nie tylko dla użytkowników IE).
Przepraszam Bryson, ale te, które dodają obsługę HTML5 do Internet Explorera, są koszmarami praktycznymi.
1
Zaktualizowałem swój post o kilka dodatkowych fragmentów informacji i potwierdziłem wyniki wydajności w korzystaniu z tych bibliotek JS. Nie zgadzam się jednak z tobą, że ich użycie jest koszmarem. Użyłem ich wszystkich przynajmniej raz i wszystkie one służą celowi. Nie spowodowały też żadnych dodatkowych bólów głowy. Co sprawia, że mówisz, że to koszmary?
Bryson,
OK, „kompletne koszmary” mogą być zbyt silnym sposobem na sformułowanie rzeczy, ale wydajność często cierpi wystarczająco mocno, aby strona stała się nieużywalna, więc myślę, że przesadzasz.
5
Używaj technologii, która najbardziej odpowiada Twoim potrzebom.
Eric Meyer napisał fajny artykuł na temat tego, dlaczego rozpoczęcie używania prefiksów specyficznych dla dostawcy w regułach CSS nie jest kiepskie, jak kiedyś używanie hacków filtrujących css.
Myślę, że to samo dotyczy HTML5. Jeśli możesz sprawdzić obsługę przeglądarki dla różnych funkcji, skorzystaj z niej. Tak długo, jak witryna pogarsza się z gracją, żyj nią.
Kilka innych przydatnych linków, decydując, jakich funkcji CSS3 możesz użyć:
http://caniuse.com/ (daje dobry podział na to, jakie elementy i selektory są użyteczne na różnych platformach)
http://css3please.com/ (plac zabaw, który można edytować na stronie, aby zadzierać z funkcjami CSS3, daje to również porady na temat tego, jakie techniki i funkcje są obsługiwane przez platformy dla często używanych stylizacji, takich jak zaokrąglone rogi, gradientowe tła, itp.)
Używam go, aby poprawić wrażenia w nowoczesnych przeglądarkach, aby użytkownicy z dobrą przeglądarką zostali „nagrodzeni” ładniej wyglądającym interfejsem użytkownika (zaokrąglone rogi, cienie itp.). Myślę, że nie powinieneś używać go jako zamiennika dla powiedzmy, że twoja obecna walidacja formularza po stronie klienta, chyba że otrzymałeś coś w zamian za JS.
Jeśli zaczynasz nowy projekt za pomocą HTML5, który powinien być również obsługiwany w starszych przeglądarkach, najlepszą opcją jest użycie Initializr -
Wykorzystuje HTML5 Boilerplate na zapleczu i dodaje kilka własnych opcji, aby dać ci szablon, który możesz wdrożyć na własnej stronie. Zawiera biblioteki JavaScript (takie jak HTML Shiv lub Modernizr), dzięki którym Twoja strona będzie kompatybilna ze starszymi przeglądarkami.
Zależy od tego, kim są odbiorcy i jakich funkcji chcesz używać. Spodziewam się, że minie jeszcze kilka lat, zanim przeciętny projekt może porzucić wsparcie dla ie6 :(
Jeśli Twoja witryna jest prywatnym intranetem i albo kontrolujesz przeglądarkę, albo masz ograniczony zakres przeglądarek, możesz swobodnie pracować nad najnowszą technologią.
Jeśli nie, bez względu na to, czego użyjesz, zawsze będziesz musiał wziąć pod uwagę najniższy wspólny mianownik. W tym przypadku jest to prawdopodobnie kombinacja IE 6 i szeregu przeglądarek mobilnych. Tak więc, jeśli przejdziesz do przodu z HTML 5, masz dodatkowy problem polegający na tym, aby twoja strona ładnie się „degradowała”.
Odpowiedzi:
HTML5 jest teraz obsługiwany przez wszystkie przeglądarki, nawet IE5! (Jeśli używasz skryptu html5shiv). Bardzo polecam przeczytanie http://diveintohtml5.org Jest to jeden z najlepszych zasobów HTML5.
Jeśli chodzi o CSS3, jeśli go używasz, pamiętaj o użyciu przedrostka dostawcy, oprócz zwykłej składni. na przykład
promień granicy
-moz-border-radius
-webkit-border-radius
Wierzę w stopniowe ulepszanie. Obsługa css3 w IE9 brzmi bardzo obiecująco.
źródło
Prawdopodobnie.
Istnieją części HTML5, z których możesz teraz korzystać. Formularze na przykład. Jeśli masz
<input type="email">w przeglądarce, która nie obsługuje HTML5 (tak, nawet IE6), zobaczysz po prostu to samo, co zobaczyłbyś, gdybyś używał<input type="text">. Jednak w przeglądarce obsługującej elementy formularza HTML5 zyskujesz zalety tegoemailtypu: mianowicie klient sprawdzi błąd, nie wymagając dodatkowego JS. Chociaż tak, nadal potrzebujesz JS dla przeglądarek innych niż HTML5, będziesz mieć jeszcze jedną warstwę sprawdzania poprawności w przeglądarkach obsługujących.Kolejne pytanie na tej stronie zapewnia dobry przegląd nowych funkcji dostępnych w HTML5 i CSS3. W tym pytaniu jest również wiele dobrych danych na temat formularzy.
Ponieważ Internet Explorer (i starsze wersje Safari i Firefox, jakkolwiek rzadkie mogą być) nie obsługują wielu z tych funkcji, które mają biblioteki JavaScript do wypełnienia pustki. Obejmują one spadek wydajności (nawet jeśli dotyczą tylko przeglądarek, które muszą z nich korzystać), więc należy pamiętać o użytkownikach, którzy je stosują.
Aby złagodzić problemy związane z brakiem obsługi funkcji, jeśli zdecydujesz, że te nowe funkcje są tego warte, skorzystaj z następujących zasobów:
.htcplik), które sprawia, że Internet Explorer 6-8 jest w stanie renderować kilka najbardziej przydatnych funkcji dekoracyjnych CSS3. Kiedy stosuje się do elementu, pozwala IE rozpoznać i wyświetlaczborder-radius,box-shadow,border-image, wielokrotne obrazy tła, ilinear-gradientjako obraz tła.truejeśli jest obsługiwana, afalsejeśli nie. Dodaje wsparcie dla stylizacji i drukowania elementów HTML5, dzięki czemu można korzystać z elementów, takich jak<section>,<header>i<nav>.srco<img />elemencie lub jakobackground-imagewłasności w CSS. W przeciwieństwieAlphaImageLoader,background-positionibackground-repeatdziałać zgodnie z przeznaczeniem, a elementy będą reagować naa:hoverpseudo-klasie..htcplik), które dodaje obsługę PNG z nieprzezroczystością alfa do IE 6. Pełne pozycjonowanie i powtarzanie tła CSS obsługuje (w tym duszki CSS) z dodatkowym (dołączonym) JavaScript..htcplik), które automatycznie łata: hover,: active i: focus dla dziwactw IE6, IE7 i IE8, umożliwiając korzystanie z nich tak, jak w każdej innej przeglądarce. Obejmuje obsługę AJAX, co oznacza, że każdy HTML, który zostanie wstawiony do dokumentu za pomocą javascript, również się uruchomi:hover,:activea:focusstyle w IE.Ciekawe, że DD_belatedPNG rozwiązuje oba problemy rozwiązane przez Whthing: hover i poprawkę IE PNG TwinHelix za pomocą czystego JavaScript, podczas gdy cokolwiek: hover i poprawka IE PNG TwinHelix używają kombinacji zachowań JavaScript i IE (
.htc files).Zasadniczo ludzie, którzy używają przeglądarek innych niż IE, aktualizują je, gdy jest o to poproszony, więc IE ponosi ciężar „Ale niektóre przeglądarki nie obsługują tej funkcji!” uskarżanie się. Modernizr doda możliwość używania HTML5 / CSS3 do dowolnej przeglądarki, którą prawdopodobnie zobaczysz, a nie tylko IE. ie-css3.js zrobi to samo, po prostu musisz go zaimplementować bez komentarza warunkowego IE (co oznacza, że wszystkie przeglądarki go otrzymają, chyba że dodasz go do sprawdzania agenta użytkownika po stronie serwera - to znacznie obniży wydajność dla wszystkich odwiedzających, a nie tylko dla użytkowników IE).
źródło
Używaj technologii, która najbardziej odpowiada Twoim potrzebom.
Eric Meyer napisał fajny artykuł na temat tego, dlaczego rozpoczęcie używania prefiksów specyficznych dla dostawcy w regułach CSS nie jest kiepskie, jak kiedyś używanie hacków filtrujących css.
Myślę, że to samo dotyczy HTML5. Jeśli możesz sprawdzić obsługę przeglądarki dla różnych funkcji, skorzystaj z niej. Tak długo, jak witryna pogarsza się z gracją, żyj nią.
źródło
Kilka innych przydatnych linków, decydując, jakich funkcji CSS3 możesz użyć: http://caniuse.com/ (daje dobry podział na to, jakie elementy i selektory są użyteczne na różnych platformach)
http://css3please.com/ (plac zabaw, który można edytować na stronie, aby zadzierać z funkcjami CSS3, daje to również porady na temat tego, jakie techniki i funkcje są obsługiwane przez platformy dla często używanych stylizacji, takich jak zaokrąglone rogi, gradientowe tła, itp.)
źródło
Używam go, aby poprawić wrażenia w nowoczesnych przeglądarkach, aby użytkownicy z dobrą przeglądarką zostali „nagrodzeni” ładniej wyglądającym interfejsem użytkownika (zaokrąglone rogi, cienie itp.). Myślę, że nie powinieneś używać go jako zamiennika dla powiedzmy, że twoja obecna walidacja formularza po stronie klienta, chyba że otrzymałeś coś w zamian za JS.
źródło
Jeśli zaczynasz nowy projekt za pomocą HTML5, który powinien być również obsługiwany w starszych przeglądarkach, najlepszą opcją jest użycie Initializr -
http://www.initializr.com/
Wykorzystuje HTML5 Boilerplate na zapleczu i dodaje kilka własnych opcji, aby dać ci szablon, który możesz wdrożyć na własnej stronie. Zawiera biblioteki JavaScript (takie jak HTML Shiv lub Modernizr), dzięki którym Twoja strona będzie kompatybilna ze starszymi przeglądarkami.
źródło
Zależy od tego, kim są odbiorcy i jakich funkcji chcesz używać. Spodziewam się, że minie jeszcze kilka lat, zanim przeciętny projekt może porzucić wsparcie dla ie6 :(
źródło
Jeśli Twoja witryna jest prywatnym intranetem i albo kontrolujesz przeglądarkę, albo masz ograniczony zakres przeglądarek, możesz swobodnie pracować nad najnowszą technologią.
Jeśli nie, bez względu na to, czego użyjesz, zawsze będziesz musiał wziąć pod uwagę najniższy wspólny mianownik. W tym przypadku jest to prawdopodobnie kombinacja IE 6 i szeregu przeglądarek mobilnych. Tak więc, jeśli przejdziesz do przodu z HTML 5, masz dodatkowy problem polegający na tym, aby twoja strona ładnie się „degradowała”.
źródło