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?
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?
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.
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 email
jenisnya: 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:
.htc
file) 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-gradient
sebagai gambar latar belakang.true
jika didukung danfalse
jika tidak. Menambahkan dukungan untuk penataan dan pencetakan elemen HTML5 sehingga Anda dapat menggunakan elemen seperti<section>
,<header>
dan<nav>
.src
suatu<img />
unsur atau sebagaibackground-image
properti di CSS. Tidak sepertiAlphaImageLoader
,background-position
danbackground-repeat
berfungsi sebagaimana dimaksud, dan elemen akan merespons ke kelasa:hover
semu..htc
file) yang menambahkan dukungan PNG dengan alpha opacity ke IE 6. Penempatan dan latar belakang CSS penuh mendukung (termasuk sprite CSS) dengan tambahan (termasuk) JavaScript..htc
file) 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
,:active
dan:focus
gaya 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.)
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.
Jika Anda memulai proyek baru menggunakan HTML5 yang juga harus didukung di browser lama, opsi terbaik adalah menggunakan Initializr -
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.