it-swarm-id.com

Haruskah saya menggunakan HTML5 dan / atau CSS3 untuk membangun situs web saya?

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?

16
Jason

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 daya HTML5 terbaik di luar sana.

Sedangkan untuk 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.

13
Jin

Mungkin.

Ada bagian HTML5 yang dapat Anda gunakan sekarang, hari ini. Formulir misalnya. Jika Anda memiliki <input type="email"> di browser yang tidak mendukung HTML5 (ya, bahkan IE6), Anda hanya akan melihat hal yang sama dengan yang Anda lihat jika Anda menggunakan <input type="text">. Namun pada browser yang mendukung elemen bentuk HTML5, Anda mendapatkan keuntungan dari tipe email: 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.

Lain pertanyaan di situs ini memberikan ikhtisar yang baik dari 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, walaupun 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 memberi style pada elemen HTML5.
  • Pie CSS3: sebuah IE perilaku terlampir (file .htc)) yang membuat Internet Explorer 6-8 mampu menampilkan beberapa fitur dekorasi CSS3 yang paling berguna. Ketika diterapkan pada suatu elemen, ini memungkinkan IE untuk mengenali dan menampilkan border-radius, box-shadow, border-image, beberapa gambar latar belakang, dan linear-gradient sebagai gambar latar belakang .
  • Modernizr: perpustakaan 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, true jika didukung dan false jika 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 untuk mengidentifikasi penyeleksi kelas semu CSS3 dan membuat aturan gaya apa pun yang didefinisikan bersama mereka. Mendukung pemilih CSS3 berbeda berdasarkan perpustakaan JavaScript mana yang digunakan situs Anda.
  • DD_belatedPNG: pustaka Javascript yang menambahkan dukungan gambar PNG ke IE6. Anda dapat menggunakan PNG sebagai src dari elemen <img /> atau sebagai properti background-image di CSS. Tidak seperti AlphaImageLoader, background-position dan background-repeat bekerja sebagaimana dimaksud, dan elemen-elemen akan merespons ke a:hover pseudo-class.
  • TwinHelix IE PNG Fix: sebuah IE perilaku terlampir (an .htc file) yang menambahkan dukungan PNG dengan opacity alfa ke IE 6. Penempatan dan pengulangan latar belakang CSS lengkap mendukung (termasuk sprite CSS) dengan tambahan (termasuk) JavaScript.
  • Apa pun: hover: sebuah IE perilaku terlampir (file .htc)) yang secara otomatis tambalan: hover,: aktif dan: fokus untuk IE6, IE7 dan IE8 quirks, 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 Perbaiki dengan JavaScript murni, sedangkan Apapun: hover dan TwinHelix's IE PNG Fix menggunakan kombinasi JavaScript dan IE perilaku terlampir (.htc files).

Umumnya orang yang menggunakan peramban non-IE memutakhirkannya ketika diminta, jadi IE menanggung 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 kondisional IE (yang berarti semua browser pada akhirnya akan mendapatkannya kecuali jika Anda menyertakannya dengan cek agen pengguna sisi server - ini akan sangat mengurangi kinerja untuk semua pengunjung Anda, bukan hanya pengguna IE Anda.)

12
Bryson

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 lemah 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.

5
jessegavin

Beberapa tautan bermanfaat lainnya, ketika memutuskan fitur CSS3 apa yang mungkin ingin Anda gunakan: http://caniuse.com/ (memberikan uraian 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 membulat, latar belakang gradien, dll.)

2

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.

1
D4V360

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.

1
Mozan Sykol

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 :(

0
theotherreceive

Jika situs Anda adalah intranet pribadi dan Anda dapat mengontrol peramban, atau memiliki peramban terbatas untuk diatasi, maka jangan ragu untuk mengerjakan Edge of technology yang berdarah.

Jika tidak, apa pun yang Anda gunakan, Anda harus selalu mempertimbangkan penyebut umum terendah. Dalam hal ini mungkin kombinasi dari IE 6 dan serangkaian browser seluler. Jadi, jika Anda melanjutkan dengan HTML 5 Anda memiliki masalah tambahan untuk memastikan situs Anda 'menurun' dengan baik.

0
Gary.Ray