Sekarang HTML5 Elemen Semantik Dapat Digunakan
agresive02.blogspot.com - Selama tahun lalu, argumen tentang apakah atau tidak menggunakan unsur-unsur semantik HTML5 baru telah berubah menjadi bagaimana menggunakan unsur-unsur semantik HTML5 baru. Semua browser utama resmi mendukung elemen-elemen ini sebelum akhir tahun (banyak sebelum akhir kuartal), dan karena itu, waktu untuk mulai menggunakan elemen-elemen baru sekarang. Tentu saja, dunia tidak hanya terdiri dari browser HTML5 berkemampuan dan pertanyaan tentang menulis untuk kompatibilitas mundur adalah pertanyaan besar yang banyak telah mencoba untuk menjawab.
Masalahnya
Masalah terbesar dengan menggunakan unsur-unsur semantik baru adalah bagaimana non-mendukung browser menangani mereka. Pada dasarnya ada tiga hasil yang mungkin ketika elemen HTML5 digunakan dalam halaman:
1. Tag dianggap kesalahan dan benar-benar diabaikan. DOM dibangun seolah-olah tag tidak ada.
2. Tag dianggap kesalahan dan DOM node dibuat sebagai pengganti. DOM dibangun seperti yang ditunjukkan oleh kode tetapi tag tidak memiliki gaya diterapkan (dianggap sebagai elemen inline).
3. Tag diakui sebagai tag HTML5 dan DOM node diciptakan untuk mewakili itu. DOM dibangun seperti yang ditunjukkan oleh kode dan tag memiliki styling yang tepat diterapkan (dalam banyak kasus, sebagai elemen blok).
Sebagai contoh konkret, perhatikan kode ini:
<div class="outer">
<section>
<h1> judul </ h1>
<p> teks </ p>
</ Section>
</ Div>
Banyak browser (seperti Firefox 3.6 dan Safari 4) akan mengurai ini sebagai elemen <div> tingkat atas dengan elemen anak yang tidak diketahui (<section>) yang dibuat dalam DOM, tetapi diperlakukan sebagai elemen inline. Para <h1> dan elemen <p> adalah anak-anak <section>. Karena <section> diwakili dalam DOM, adalah mungkin untuk gaya elemen. Ini merupakan kasus # 2.
Internet Explorer sebelum 9 mem-parsing ini sebagai <div> tingkat atas tetapi melihat <section> sebagai kesalahan. Jadi <section> diabaikan dan kemudian <h1> dan <p> adalah parsing, baik menjadi anak-anak <div>. Penutupan </ section> juga dilihat sebagai kesalahan dan dilewati. Pemahaman efektif kode ini di browser setara dengan:
<div class="outer">
<h1> judul </ h1>
<p> teks </ p>
</ Div>
Jadi lebih tua sebenarnya browser Internet Explorer pulih cukup baik dari unsur-unsur yang tidak diketahui tetapi menciptakan struktur DOM berbeda dari browser lainnya. Karena tidak ada perwakilan DOM dari elemen yang tidak diketahui, Anda juga tidak dapat menerapkan gaya untuk <section>. Ini merupakan kasus # 1.
Tentu saja, browser HTML5 berkemampuan seperti Internet, Explorer 9 Firefox 4, dan Safari 5 menciptakan struktur DOM benar dan juga menerapkan gaya default yang tepat untuk elemen yang sebagaimana ditentukan dalam HTML5.
Jadi masalah besar adalah browser yang menghasilkan tidak hanya struktur yang berbeda DOM untuk kode yang sama, tetapi aturan styling juga berbeda untuk struktur DOM yang sama.
Solusi
Sejumlah orang telah datang dengan sejumlah solusi yang berbeda untuk menggunakan elemen HTML5 di halaman saat ini. Setiap upaya untuk menyerang satu atau lebih masalah tertentu yang telah disebutkan dalam upaya untuk menyediakan kompatibilitas cross-browser.
JavaScript shims
JavaScript shims terutama bertujuan untuk memecahkan masalah styling unsur HTML5 di browser Internet Explorer lebih tua. Ada kekhasan sekarang terkenal di Internet Explorer di mana ia tidak akan mengenali unsur-unsur yang tidak diketahui kecuali salah satu elemen ini telah dibuat melalui document.createElement (). Jadi browser akan membuat elemen DOM dan akan memungkinkan styling dari unsur <section> selama document.createElement ("bagian") disebut.
Shims seperti html5shim [1] menggunakan kemampuan ini untuk memastikan bahwa elemen HTML5 benar membuat elemen DOM di Internet Explorer dan karena itu memungkinkan Anda untuk menerapkan gaya. Shims biasanya juga menetapkan HTML5 elemen blok untuk menampilkan: blok sehingga mereka tampil dengan benar di browser lain juga.
Aku tidak suka pendekatan ini karena melanggar salah satu prinsip utama saya aplikasi web: JavaScript tidak boleh diandalkan untuk tata letak. Ini adalah lebih dibandingkan membuat pengalaman buruk bagi mereka dengan JavaScript dinonaktifkan, ini tentang membuat aplikasi web basis kode diprediksi dan dipelihara di mana ada pemisahan yang jelas dari keprihatinan di kalangan lapisan. Ini memang memiliki manfaat menghasilkan struktur DOM sama di semua browser, sehingga memastikan Anda JavaScript dan CSS bekerja sama persis sama di mana-mana, tetapi manfaat yang tidak melebihi downside menurut pendapat saya.
Namespace hack
Jangan singkat tentang hacks, Internet Explorer juga memiliki teknik lain untuk membuat browser mengenali unsur-unsur yang tidak diketahui. Yang satu ini pertama mendapat perhatian luas melalui artikel Elco Klingen's, elemen HTML5 di Internet Explorer tanpa JavaScript [2]. Teknik ini melibatkan mendeklarasikan namespace XML-gaya dan kemudian menggunakan elemen dengan awalan namespace, seperti:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<body>
<html5:section>
<-! Konten ->
</ HTML5: section>
</ Body>
</ Html>
Awalan HTML5 hanya murni berpura-pura dan tidak resmi sama sekali - Anda hanya bisa juga memiliki prefiks harus "foo" dan dampak akan sama. Dengan awalan di tempat, Internet Explorer akan mengenali unsur-unsur baru sehingga Anda dapat menerapkan gaya. Hal ini juga bekerja di browser lain, sehingga Anda akan berakhir dengan DOM yang sama dan gaya yang sama di mana-mana.
Kekurangannya jelas: Anda harus menggunakan XML namespaces-gaya dalam sebuah dokumen HTML dan juga menggunakan mereka dalam CSS, yang berarti sesuatu seperti ini:
HTML5 \: bagian {
display: block;
}
Ini bukan cara saya ingin pengembang web harus menulis kode mereka. Ini adalah solusi yang cemerlang untuk masalah tapi satu yang mengajarkan apa yang saya anggap sebagai sebuah aplikasi tidak alami dari unsur-unsur baru. Saya tidak ingin melihat file yang penuh dengan unsur namespaced.
"Bulletproof" teknik
Saya pertama kali terkena teknik ini di YUIConf 2010, ketika Tantek Çelik memberi ceramah berjudul, HTML5: Disini, Right Now [3]. Dalam pembicaraan itu, Tantek menyarankan menggunakan elemen <div> batin untuk setiap elemen blok HTML5 baru, dan untuk menyertakan nama kelas CSS pada yang <div> menunjukkan bahwa ini merupakan elemen HTML5. Sebagai contoh:
<section> <div class="section">
<-! Konten ->
</ Div> </ section>
Maksud dari pendekatan ini adalah untuk memastikan bahwa konten yang mengalir benar di seluruh browser. Menggunakan satu blok elemen dalam elemen HTML5 yang harus blok berarti Anda baik akan memiliki elemen blok tunggal (Internet Explorer <9), elemen blok dalam elemen inline (Firefox 3.6, Safari 4, dll), atau elemen blok dalam blok elemen (Internet Explorer 9, Firefox 4, Safari 5, dll). Dalam masing-masing tiga kasus, rendering default adalah sama.
Tantek tidak mencatat satu pengecualian di mana hal ini tidak bekerja, dan itu adalah dengan <hgroup>, yang secara eksplisit melarang non-pos elemen anak. Untuk itu ia merekomendasikan meletakkan <div> di bagian luar:
<div class="hgroup"> <hgroup>
<-! Konten ->
</ Hgroup> </ div>
Untuk styling, Tantek disarankan untuk tidak mencoba gaya elemen HTML5 itu sendiri tetapi lebih untuk gaya <div> pengganti. Jadi, bukannya ini:
bagian {
warna: biru;
}
Gunakan ini:
. Bagian {
warna: biru;
}
Alasannya adalah bahwa hal itu akan mudah untuk secara otomatis mengubah pola ini menjadi satu referensi elemen HTML5 nama tag di kemudian hari. Saya bukan penggemar bagian saran nya, karena saya biasanya tidak suka menerapkan gaya melalui tag nama.
Kelemahan dari pendekatan ini adalah bahwa browser yang berbeda menciptakan struktur DOM berbeda dan sehingga Anda harus berhati-hati dalam cara Anda menulis JavaScript dan CSS. Misalnya, menggunakan pemilih anak langsung (>) di seluruh elemen HTML5 tidak akan bekerja di semua browser. Juga, langsung mengakses parentNode mungkin mengakibatkan sebuah node yang berbeda di browser yang berbeda. Hal ini terutama jelas dalam kode seperti:
<div class="outer">
class="section <div <section> main">
<-! Konten ->
</ Div> </ section>
</ Div>
Jika Anda kemudian memiliki pemilih seperti> bagian utama,. Itu tidak akan diterapkan di Internet Explorer 8 dan sebelumnya. Setiap kali Anda menyeberang HTML 4 untuk HTML5 ke HTML 4 penghalang, Anda akan berakhir dengan masalah ini.
Teknik Reverse antipeluru
Ada pesan lainnya, seperti Thierry Koblentz's, elemen HTML dan divs pengganti [4] yang telah dieksplorasi membalikkan pendekatan Tantek begitu bahwa unsur-unsur HTML5 muncul dalam elemen <div>. Sebagai contoh:
<div class="section"> <section>
<-! Konten ->
</ Section> <div>
Satu-satunya perbedaan adalah penempatan elemen HTML5 - segala sesuatu yang lain adalah sama. Para pendukung seperti teknik ini karena konsistensinya (bekerja sama untuk semua elemen, termasuk <hgroup>). Ini perlu dicatat bahwa pendekatan ini memiliki peringatan yang sama seperti Tantek sebagai bagian sebagai pemilih dan penggunaan JavaScript traversal DOM pergi. Ini Keuntungan utama adalah konsistensi teknik.
Pendekatan saya
Tujuan utama saya dalam memilih pendekatan adalah untuk memastikan bahwa saya hanya harus melakukan perubahan pada halaman HTML. Bahwa nol berarti perubahan baik CSS atau JavaScript. Kenapa membuat persyaratan seperti itu? Semakin banyak lapisan aplikasi web (atau aplikasi apapun) yang harus mengubah, semakin besar kemungkinan Anda untuk memperkenalkan bug. Membatasi perubahan satu lapisan batas pengenalan bug, dan jika mereka terjadi, membatasi pencarian Anda untuk masalah mendasar pada satu daerah. Misalnya, jika istirahat layout, saya akan tahu itu karena saya menambahkan <section> daripada kombinasi yang ditambah perubahan ke CSS yang gaya wilayah.
Setelah meneliti masing-masing teknik, melakukan beberapa prototipe dan pengujian, akhirnya saya tiba kembali di pendekatan Tantek's. Ini adalah satu-satunya di mana aku bisa mendapatkan semua halaman yang sudah ada saya prototipe dengan bekerja tanpa memerlukan perubahan pada CSS dan JavaScript. Sekarang, saya tidak mengikuti pendekatan untuk huruf dan membuat beberapa perubahan di mana saya pikir yang perlu diperbaiki.
Pertama, saya pun tidak pernah ditata berdasarkan nama kelas yang mewakili unsur HTML5 (jadi tidak ada. Sectionin selektor saya). Aku terus elemen <div> sama yang sudah dalam halaman dan menggunakan nama kelas semantik yang diterapkan pada elemen-elemen sebagai gaya saya dan JavaScript kait. Sebagai contoh, kode ini:
<div class="content">
<-! Konten ->
</ Div>
Jadi kode ini:
class="section <div <section> content">
<-! Konten ->
</ Div> </ section>
Dengan perubahan ini, saya masih menggunakan konten sebagai gaya dan hook scripting untuk yang area halaman.. Dalam melakukannya, JavaScript dan CSS saya sudah tidak perlu berubah.
Kedua, daripada memiliki kasus khusus untuk <hgroup>, saya memilih untuk tidak menggunakannya. Kebenaran jujur adalah bahwa saya tidak menemukan di mana pun dalam setiap halaman yang sudah ada saya di mana elemen ini akan menjadi berguna. Karena <hgroup> hanya dapat berisi judul, itu sebagian besar aman untuk memasukkan <hgroup> sendiri jika Anda benar-benar ingin (asumsi yang terkandung dalam elemen lain blok).
Saya menghabiskan banyak waktu memantul bolak-balik antara peluru dan reverse antipeluru mencoba untuk menentukan mana yang bekerja paling baik. Faktor menentukan kunci bagi saya adalah bahwa antipeluru sebaliknya diperlukan saya untuk menambahkan CSS untuk membuatnya bekerja. Dalam browser yang menciptakan DOM node untuk elemen HTML5 tapi tidak berlaku styling default, memiliki elemen blok HTML5 dalam sebuah <div> mengacaukan layout saya pada lebih dari satu kali karena mereka menjadi unsur inline di browser lama. Aku harus secara eksplisit menambahkan aturan untuk membuat mereka menjadi elemen-elemen blok untuk membuat pekerjaan layout saya, dan yang pecah kebutuhan saya sendiri tidak berubah CSS untuk membuat sesuatu bekerja.
Buktinya
Salah satu hal yang saya telah menemukan sangat frustasi di alam ini pembahasan adalah bagaimana orang-orang terlalu cepat membubarkan satu pendekatan karena mereka dapat menemukan setidaknya satu situasi dimana tidak bekerja. Tak satu pun dari solusi saya disajikan di sini adalah sempurna, tidak satupun dari mereka bekerja dalam setiap situasi yang anda dapat menjalankan ke. Jika Anda memberikan saya apapun teknik yang saya hampir bisa menjamin Anda bahwa seseorang dapat datang dengan situasi dimana itu tidak akan berhasil. Itu tidak membatalkan teknik, itu hanya memberitahu Anda tentang keterbatasan teknik ini sehingga Anda dapat membuat keputusan yang lebih baik.
Dalam penelitian, saya mengambil beberapa halaman yang sudah ada dan dikonversi mereka untuk menggunakan teknik peluru dimodifikasi. Aku menempatkan mereka dalam halaman dengan tata letak sederhana dan tata letak yang kompleks, halaman dengan dan tanpa interaksi JavaScript. Dalam setiap kasus, perubahan hanya saya buat adalah untuk HTML dan segala sesuatu terus bekerja dengan benar (tidak ada perubahan pada JavaScript atau CSS). Bagaimana dengan mereka peringatan tentang node anak dan hubungan orang tua simpul? Hal yang menarik adalah bahwa saya tidak pernah berlari ke dalam masalah ini.
Memang, alasan mungkin telah begitu mudah bagi saya adalah karena kekakuan saya berlaku untuk coding saya. Aku agama memeriksa bahwa:
* Tag nama dan ID yang tidak digunakan untuk menerapkan gaya (hanya menggunakan nama kelas)
selektor CSS * adalah sebagai umum mungkin dan digunakan sebagai pemilih jenis sesedikit mungkin
* JavaScript tidak bergantung pada struktur DOM tertentu untuk bekerja
* Tag nama-nama yang tidak digunakan untuk memanipulasi DOM
Hal lain yang menarik saya dicatat adalah bahwa saya menggunakan elemen HTML5 sebagai wadah. Unsur-unsur baru benar-benar hanya batas antara kelompok fungsi bukan dari apa pun. Anda menghabiskan sebagian besar waktu Anda dan gaya item scripting dalam batas-batas daripada yang melintasi batas-batas sendiri. Karena saya JavaScript dan CSS target apa yang terjadi di dalam kontainer, semuanya terus bekerja. Saya menduga ini akan menjadi kasus untuk kebanyakan situs yang telah baik-kode.
Kesimpulan
Teknik Saya akhirnya memutuskan dan akan merekomendasikan kepada orang lain merupakan modifikasi dari teknik antipeluru Tantek's. Jelas nama adalah sedikit keliru karena ada beberapa efek samping pada CSS dan JavaScript, tetapi dalam percobaan saya itu benar-benar tampaknya menjadi pendekatan yang memungkinkan saya untuk mengubah hanya HTML halaman dan memiliki segala sesuatu yang terus bekerja . Aku yakin perdebatan akan terus baik di dalam perusahaan dan di Internet pada umumnya, dan saya berharap posting ini membantu Anda membuat keputusan.
This post was written by: Author Name
Author description goes here. Author description goes here. Follow him on Twitter
Langganan:
Posting Komentar (Atom)
0 Responses to “Sekarang HTML5 Elemen Semantik Dapat Digunakan”
Posting Komentar