Haruskah saya menggunakan HTML5 dan / atau CSS3 untuk membangun situs web saya?
16
Hal-hal baru HTML5 / CSS3 (Web8!) Terdengar keren! Haruskah saya mulai menggunakannya sekarang atau tetap dengan css / xhtml tunggu sampai lebih banyak browser dapat menggunakannya?
HTML5 didukung oleh semua browser sekarang, bahkan IE5! (Jika Anda menggunakan skrip html5shiv). Saya sangat merekomendasikan membaca http://diveintohtml5.org Ini adalah salah satu sumber HTML5 terbaik di luar sana.
Adapun CSS3, jika Anda menggunakannya, pastikan untuk menggunakan vendor predix juga, di atas sintaks biasa. misalnya
batas-jari-jari
-moz-border-radius
-webkit-border-radius
Saya percaya pada peningkatan progresif. Dukungan css3 IE9 terdengar sangat menjanjikan.
Saya pikir Anda bermaksud untuk menempatkan radius perbatasan di bagian bawah, kan?
Grant Palin
1
Sayangnya, situs Dive Into HTML5 yang asli sudah tidak ada. Ada banyak mirror yang tersedia. Ini satu: diveintohtml5.info
M. Dudley
12
Mungkin.
Ada bagian HTML5 yang dapat Anda gunakan sekarang, hari ini. Formulir misalnya. Jika Anda <input type="email">menggunakan peramban yang tidak mendukung HTML5 (ya, bahkan IE6), Anda hanya akan melihat hal yang sama dengan yang Anda lihat jika Anda gunakan <input type="text">. Namun pada peramban yang mendukung elemen formulir HTML5, Anda mendapatkan keuntungan dari emailjenisnya: yaitu klien akan kesalahan memeriksa nilai tanpa memerlukan JS tambahan. Meskipun ya, Anda masih memerlukan JS untuk browser non-HTML5, Anda akan memiliki satu lapisan validasi lagi di browser pendukung.
Pertanyaan lain di situs ini memberikan gambaran yang baik tentang fitur-fitur baru yang tersedia untuk Anda melalui HTML5 dan CSS3. Ada banyak data bagus tentang formulir dalam pertanyaan itu juga.
Karena Internet Explorer (dan versi Safari dan Firefox yang lebih lama, meskipun jarang), tidak mendukung banyak fitur ini yang tersisa dengan pustaka JavaScript untuk mengisi kekosongan. Ini termasuk hit kinerja (meskipun itu hanya untuk browser yang perlu menggunakannya) jadi perhatikan pengguna Anda saat mempekerjakan mereka.
Untuk mengurangi masalah dengan kurangnya dukungan fitur, jika Anda memutuskan bahwa fitur-fitur baru ini sepadan, gunakan sumber daya berikut:
html5shiv: JavaScript shiv untuk IE untuk mengenali dan menata elemen HTML5.
Pie CSS3: perilaku terlampir IE (.htcfile) yang membuat Internet Explorer 6-8 mampu menampilkan beberapa fitur dekorasi CSS3 yang paling berguna. Ketika diterapkan pada elemen, memungkinkan IE untuk mengenali dan tampilanborder-radius,box-shadow,border-image, beberapa gambar latar belakang, danlinear-gradientsebagai gambar latar belakang.
Modernizr: pustaka Javascript yang menggunakan deteksi fitur untuk menguji browser saat ini terhadap fitur CSS3 / HTML5 mendatang, menambahkan kelas ke elemen <html> untuk yang didukung. Juga membuat objek JavaScript global self-titled yang berisi properti boolean untuk setiap fitur,truejika didukung danfalsejika tidak. Menambahkan dukungan untuk penataan dan pencetakan elemen HTML5 sehingga Anda dapat menggunakan elemen seperti<section>,<header>dan<nav>.
ie-css3.js: memungkinkan Internet Explorer mengidentifikasi selektor pseudo-kelas CSS3 dan membuat aturan gaya apa pun yang didefinisikan dengannya. Mendukung pemilih CSS3 berbeda berdasarkan perpustakaan JavaScript mana yang digunakan situs Anda.
DD_belatedPNG: perpustakaan Javascript yang menambahkan dukungan gambar PNG ke IE6. Anda dapat menggunakan PNGs sebagaisrcsuatu<img />unsur atau sebagaibackground-imageproperti di CSS. Tidak sepertiAlphaImageLoader,background-positiondanbackground-repeatberfungsi sebagaimana dimaksud, dan elemen akan merespons ke kelasa:hoversemu.
TwinHelix IE PNG Fix: perilaku terlampir IE (.htcfile) yang menambahkan dukungan PNG dengan alpha opacity ke IE 6. Penempatan dan latar belakang CSS penuh mendukung (termasuk sprite CSS) dengan tambahan (termasuk) JavaScript.
Apa pun: melayang: perilaku terlampir IE (.htcfile) yang secara otomatis menambal: melayang,: aktif dan: fokus untuk IE6, IE7 dan kebiasaan IE8, membiarkan Anda menggunakannya seperti yang Anda lakukan di browser lain. Termasuk dukungan AJAX, yang berarti bahwa setiap html yang dimasukkan ke dalam dokumen melalui javascript juga akan memicu:hover,:activedan:focusgaya di IE.
Menarik untuk dicatat bahwa DD_belatedPNG memecahkan kedua masalah yang ditangani oleh Apapun: hover dan TwinHelix's IE PNG Fix dengan JavaScript murni, sedangkan Apapun: hover dan TwinHelix's IE PNG Fix menggunakan kombinasi perilaku JavaScript dan IE yang terpasang ( .htc files).
Umumnya orang yang menggunakan peramban non-IE memutakhirkannya ketika diminta, dan karenanya, IE mendapat beban "Tapi beberapa peramban tidak mendukung fitur ini!" keluhan. Modernizr akan menambahkan kemampuan untuk menggunakan HTML5 / CSS3 ke browser apa pun yang cenderung Anda lihat dan bukan hanya IE. ie-css3.js akan melakukan hal yang sama, Anda hanya perlu mengimplementasikannya tanpa komentar bersyarat IE (yang berarti semua browser pada akhirnya akan mendapatkannya kecuali Anda memasukkannya dengan cek agen-pengguna sisi server - ini akan sangat mengurangi kinerja untuk semua pengunjung Anda, bukan hanya pengguna IE Anda.)
Maaf Bryson tetapi hal-hal yang menambahkan dukungan HTML5 ke Internet Explorer adalah mimpi buruk untuk tujuan praktis.
1
Saya telah memperbarui posting saya dengan sedikit lebih banyak info, dan mengakui kinerja hit menggunakan perpustakaan JS ini. Namun, saya tidak setuju dengan Anda bahwa penggunaannya adalah mimpi buruk. Saya telah menggunakan semua ini setidaknya sekali, dan mereka semua memiliki tujuan. Mereka juga tidak menyebabkan saya sakit kepala tambahan. Apa yang membuat Anda mengatakan bahwa itu adalah mimpi buruk?
Bryson
OK, "mengucapkan mimpi buruk" mungkin merupakan cara yang terlalu kuat untuk mengutarakan sesuatu tetapi kinerjanya sering sangat buruk sehingga halaman menjadi tidak dapat digunakan, jadi saya pikir Anda melebih-lebihkan kasus ini.
5
Gunakan teknologi apa pun yang paling sesuai dengan kebutuhan Anda.
Eric Meyer menulis artikel yang bagus tentang mengapa mulai menggunakan awalan khusus vendor pada aturan CSS tidak sama seperti menggunakan hack filter css dulu.
Saya pikir hal yang sama berlaku untuk HTML5. Jika Anda dapat memeriksa dukungan browser untuk fitur yang berbeda, mengapa tidak menggunakannya. Selama situs itu terdegradasi dengan anggun, jalani saja.
Beberapa tautan bermanfaat lainnya, ketika memutuskan fitur CSS3 apa yang mungkin ingin Anda gunakan:
http://caniuse.com/ (memberikan rincian yang bagus tentang elemen dan penyeleksi apa yang dapat digunakan di platform mana)
http://css3please.com/ (taman bermain dalam-halaman yang dapat diedit untuk mengacaukan fitur CSS3, ini juga memberikan beberapa saran tentang teknik dan fitur mana yang didukung oleh platform mana untuk stylings yang umum diminta, seperti sudut bundar, latar belakang gradien, dll.)
Saya menggunakannya untuk meningkatkan pengalaman di browser modern sehingga pengguna dengan browser yang baik mendapatkan "hadiah" dengan UI yang tampak lebih bagus (sudut membulat, bayangan, hal-hal yang agak). Saya kira Anda tidak boleh menggunakannya sebagai pengganti untuk katakanlah validasi formulir clientside Anda saat ini, kecuali jika Anda mendapatkan semacam JS fallback untuk itu.
Ia menggunakan HTML5 Boilerplate di backend, dan menambahkan beberapa opsi sendiri untuk memberi Anda templat yang dapat Anda gunakan di situs Anda sendiri. Ini termasuk perpustakaan Javascript (seperti HTML Shiv atau Modernizr), yang akan membuat situs Anda kompatibel dengan browser yang lebih lama.
Bergantung pada apa itu audiens dan fitur apa yang ingin Anda gunakan. Saya berharap itu akan beberapa tahun lagi sebelum proyek rata-rata dapat memberikan dukungan untuk ie6 :(
Jika situs Anda adalah intranet pribadi dan Anda dapat mengontrol peramban, atau memiliki peramban terbatas untuk diatasi, maka jangan ragu untuk bekerja di sisi teknologi yang sedang berdarah.
Jika tidak, apa pun yang Anda gunakan, Anda harus selalu mempertimbangkan penyebut umum terendah. Dalam hal ini mungkin beberapa kombinasi IE 6 dan berbagai browser seluler. Jadi, jika Anda melanjutkan dengan HTML 5 Anda memiliki masalah tambahan untuk memastikan situs Anda 'menurun' dengan baik.
Jawaban:
HTML5 didukung oleh semua browser sekarang, bahkan IE5! (Jika Anda menggunakan skrip html5shiv). Saya sangat merekomendasikan membaca http://diveintohtml5.org Ini adalah salah satu sumber HTML5 terbaik di luar sana.
Adapun CSS3, jika Anda menggunakannya, pastikan untuk menggunakan vendor predix juga, di atas sintaks biasa. misalnya
batas-jari-jari
-moz-border-radius
-webkit-border-radius
Saya percaya pada peningkatan progresif. Dukungan css3 IE9 terdengar sangat menjanjikan.
sumber
Mungkin.
Ada bagian HTML5 yang dapat Anda gunakan sekarang, hari ini. Formulir misalnya. Jika Anda
<input type="email">menggunakan peramban yang tidak mendukung HTML5 (ya, bahkan IE6), Anda hanya akan melihat hal yang sama dengan yang Anda lihat jika Anda gunakan<input type="text">. Namun pada peramban yang mendukung elemen formulir HTML5, Anda mendapatkan keuntungan dariemailjenisnya: yaitu klien akan kesalahan memeriksa nilai tanpa memerlukan JS tambahan. Meskipun ya, Anda masih memerlukan JS untuk browser non-HTML5, Anda akan memiliki satu lapisan validasi lagi di browser pendukung.Pertanyaan lain di situs ini memberikan gambaran yang baik tentang fitur-fitur baru yang tersedia untuk Anda melalui HTML5 dan CSS3. Ada banyak data bagus tentang formulir dalam pertanyaan itu juga.
Karena Internet Explorer (dan versi Safari dan Firefox yang lebih lama, meskipun jarang), tidak mendukung banyak fitur ini yang tersisa dengan pustaka JavaScript untuk mengisi kekosongan. Ini termasuk hit kinerja (meskipun itu hanya untuk browser yang perlu menggunakannya) jadi perhatikan pengguna Anda saat mempekerjakan mereka.
Untuk mengurangi masalah dengan kurangnya dukungan fitur, jika Anda memutuskan bahwa fitur-fitur baru ini sepadan, gunakan sumber daya berikut:
.htcfile) yang membuat Internet Explorer 6-8 mampu menampilkan beberapa fitur dekorasi CSS3 yang paling berguna. Ketika diterapkan pada elemen, memungkinkan IE untuk mengenali dan tampilanborder-radius,box-shadow,border-image, beberapa gambar latar belakang, danlinear-gradientsebagai gambar latar belakang.truejika didukung danfalsejika tidak. Menambahkan dukungan untuk penataan dan pencetakan elemen HTML5 sehingga Anda dapat menggunakan elemen seperti<section>,<header>dan<nav>.srcsuatu<img />unsur atau sebagaibackground-imageproperti di CSS. Tidak sepertiAlphaImageLoader,background-positiondanbackground-repeatberfungsi sebagaimana dimaksud, dan elemen akan merespons ke kelasa:hoversemu..htcfile) yang menambahkan dukungan PNG dengan alpha opacity ke IE 6. Penempatan dan latar belakang CSS penuh mendukung (termasuk sprite CSS) dengan tambahan (termasuk) JavaScript..htcfile) yang secara otomatis menambal: melayang,: aktif dan: fokus untuk IE6, IE7 dan kebiasaan IE8, membiarkan Anda menggunakannya seperti yang Anda lakukan di browser lain. Termasuk dukungan AJAX, yang berarti bahwa setiap html yang dimasukkan ke dalam dokumen melalui javascript juga akan memicu:hover,:activedan:focusgaya di IE.Menarik untuk dicatat bahwa DD_belatedPNG memecahkan kedua masalah yang ditangani oleh Apapun: hover dan TwinHelix's IE PNG Fix dengan JavaScript murni, sedangkan Apapun: hover dan TwinHelix's IE PNG Fix menggunakan kombinasi perilaku JavaScript dan IE yang terpasang (
.htc files).Umumnya orang yang menggunakan peramban non-IE memutakhirkannya ketika diminta, dan karenanya, IE mendapat beban "Tapi beberapa peramban tidak mendukung fitur ini!" keluhan. Modernizr akan menambahkan kemampuan untuk menggunakan HTML5 / CSS3 ke browser apa pun yang cenderung Anda lihat dan bukan hanya IE. ie-css3.js akan melakukan hal yang sama, Anda hanya perlu mengimplementasikannya tanpa komentar bersyarat IE (yang berarti semua browser pada akhirnya akan mendapatkannya kecuali Anda memasukkannya dengan cek agen-pengguna sisi server - ini akan sangat mengurangi kinerja untuk semua pengunjung Anda, bukan hanya pengguna IE Anda.)
sumber
Gunakan teknologi apa pun yang paling sesuai dengan kebutuhan Anda.
Eric Meyer menulis artikel yang bagus tentang mengapa mulai menggunakan awalan khusus vendor pada aturan CSS tidak sama seperti menggunakan hack filter css dulu.
Saya pikir hal yang sama berlaku untuk HTML5. Jika Anda dapat memeriksa dukungan browser untuk fitur yang berbeda, mengapa tidak menggunakannya. Selama situs itu terdegradasi dengan anggun, jalani saja.
sumber
Beberapa tautan bermanfaat lainnya, ketika memutuskan fitur CSS3 apa yang mungkin ingin Anda gunakan: http://caniuse.com/ (memberikan rincian yang bagus tentang elemen dan penyeleksi apa yang dapat digunakan di platform mana)
http://css3please.com/ (taman bermain dalam-halaman yang dapat diedit untuk mengacaukan fitur CSS3, ini juga memberikan beberapa saran tentang teknik dan fitur mana yang didukung oleh platform mana untuk stylings yang umum diminta, seperti sudut bundar, latar belakang gradien, dll.)
sumber
Saya menggunakannya untuk meningkatkan pengalaman di browser modern sehingga pengguna dengan browser yang baik mendapatkan "hadiah" dengan UI yang tampak lebih bagus (sudut membulat, bayangan, hal-hal yang agak). Saya kira Anda tidak boleh menggunakannya sebagai pengganti untuk katakanlah validasi formulir clientside Anda saat ini, kecuali jika Anda mendapatkan semacam JS fallback untuk itu.
sumber
Jika Anda memulai proyek baru menggunakan HTML5 yang juga harus didukung di browser lama, opsi terbaik adalah menggunakan Initializr -
http://www.initializr.com/
Ia menggunakan HTML5 Boilerplate di backend, dan menambahkan beberapa opsi sendiri untuk memberi Anda templat yang dapat Anda gunakan di situs Anda sendiri. Ini termasuk perpustakaan Javascript (seperti HTML Shiv atau Modernizr), yang akan membuat situs Anda kompatibel dengan browser yang lebih lama.
sumber
Bergantung pada apa itu audiens dan fitur apa yang ingin Anda gunakan. Saya berharap itu akan beberapa tahun lagi sebelum proyek rata-rata dapat memberikan dukungan untuk ie6 :(
sumber
Jika situs Anda adalah intranet pribadi dan Anda dapat mengontrol peramban, atau memiliki peramban terbatas untuk diatasi, maka jangan ragu untuk bekerja di sisi teknologi yang sedang berdarah.
Jika tidak, apa pun yang Anda gunakan, Anda harus selalu mempertimbangkan penyebut umum terendah. Dalam hal ini mungkin beberapa kombinasi IE 6 dan berbagai browser seluler. Jadi, jika Anda melanjutkan dengan HTML 5 Anda memiliki masalah tambahan untuk memastikan situs Anda 'menurun' dengan baik.
sumber