10 Aturan Dasar untuk Menulis Kode HTML yang Kompatible Antar Browser - Peteng Pikir : Artikel Seputar SEO, Film, Webiste, HTML, Gadget, dan Masih Banyak Lagi

Post Top Ad

Thursday, 21 September 2017

10 Aturan Dasar untuk Menulis Kode HTML yang Kompatible Antar Browser



Membuat situs web Anda kompatibel dengan sejumlah besar browser mungkin adalah tugas tersulit bagi pengembang front-end. Cara terbaik adalah membangun situs Anda sehingga bisa berjalan secara konsisten di semua browser. Metode ini dikenal dengan cross-browser encoding (atau multi-browser). Di kebanyakan browser, ada beberapa hal yang dapat Anda lakukan untuk meningkatkan peluang Anda membuat situs yang berjalan di semua platform.
Ketika kami memutuskan untuk membangun sebuah situs web, kami perlu menggunakan beberapa praktik paling umum dan sederhana, yang jika diikuti dapat menghemat waktu yang berharga selama uji lintas browser.
Berikut adalah 10 prinsip dasar yang perlu kita gunakan saat mendesain halaman HTML.

1. Validasi Kode

Sebelum mengupload situs Anda, Anda perlu memeriksa kode HTML dan CSS melalui validator. Setelah Anda memeriksa kode, itu mungkin tidak bekerja dengan sempurna pada semua browser. Jika Anda tidak lulus kode melalui validator, selalu ada kemungkinan mengalami masalah yang bisa dengan mudah dipecahkan.

Validator HTML wc3 dan validator CSS adalah tempat yang baik untuk memeriksa kode. Anda juga bisa menggunakan ekstensi validator HTML Firefox untuk memeriksa halaman yang dilihat di browser secara real time.

2. Usahakan Menjaga Struktur Situs sesederhana mungkin
Menggunakan header, beberapa kolom dan footer - dan menghindari banyak kode HTML dan CSS yang kompleks - membuatnya lebih mudah untuk meraih kesuksesan. Jadi, singkirkan beberapa kesalahan dan bug dengan menghindari kotak samping tambahan dan pemformatan yang tidak perlu. Untuk membuat menu, gunakan <ul> dan <li>, bukan tabel. Hindari menggunakan item bersarang dan sisipkan hanya item yang diperlukan.

3. Jangan Bekerja dengan Browser Quirks Mode
Sebagai aturan, jika laman Anda tidak menyertakan Doctype, peramban akan beralih ke kebiasaan secara otomatis. Sertakan tipe pernyataan (Doctype) untuk menghindari kebiasaan. Beberapa browser memiliki mode quirks, memungkinkan situs web yang lebih tua untuk bekerja dengan peramban modern. Namun, mode quirks bisa membuat banyak sakit kepala dan kesalahan yang tidak perlu

4. Gunakan Register Reset CSS
Setiap browser memiliki nilai default masing-masing untuk aspek tertentu seperti lebar dan tinggi baris. Nilai default ini terkadang bertentangan dengan aturan CSS khusus dan mendistorsi tampilan halaman web. Anda dapat melakukan semua pengaturan ulang pada awal file CSS agar tidak menyesuaikan setiap aturan CSS yang Anda tulis. Anda dapat yakin bahwa setelah menambahkan aturan ini ke style sheet (atau ke file terpisah), ini akan bekerja dari titik yang sama untuk semua browser.

5. Gunakan Mozzila Firefox

Sebagai aturan, pengembang situs web menguji situs melalui satu browser, Firefox. Setelah itu, mereka memeriksa situs yang sama di browser lain dan terus melakukan perubahan yang diperlukan dari satu browser ke browser lainnya. Ini adalah metode klasik, daripada memvalidasi situs web di semua browser pada tahap pertama proyek.
Jika situs terlihat bagus di Firefox, pastinya juga akan terlihat bagus di Opera atau Safari.

6. Pengujian
Ini sangat penting untuk menguji situs web Anda sebanyak mungkin browser. Ini adalah browser web utama: Internet Explorer 6,7 dan 8, Opera, Safari, Firefox.
Untuk menguji di IE 6.7 dan 8 di komputer yang sama, ada program online yang membuat tangkapan layar situs Anda (browsershots; browsercam), sehingga tidak perlu memiliki 3 PC berbeda dengan 3 sistem operasi. Penangkapan ini dikirim melalui email atau tersedia untuk diunduh.

7. Gunakan Komentar Bersyarat
Ada kalanya, bahkan jika Anda melakukan yang terbaik dan Anda bekerja secara profesional, tidak mungkin situs Anda bekerja dengan sempurna di Internet Explorer. Sebagai solusi pertama, Anda bisa memasukkan kode HTML untuk IE hanya dengan komentar terkondisi. Anda bisa menambahkan HTML, CSS dan JavaScript hanya untuk IE, yang memungkinkan Anda memperbaiki kesalahan kode.\

8. Buatlah IE6 Kompatibel dengan Format PNG
Anda dapat menggunakan gambar PNG transparan yang memungkinkan Anda memiliki hingga 250 tingkat transparansi dalam satu gambar, yang berarti Anda dapat menggunakan tembus pandang dan tepi yang halus pada latar belakang manapun.
Sayangnya, IE 6 tidak menampilkan gambarnya seperti apa adanya. Ada solusi bagus untuk masalah ini, yaitu IE PNG Fix.

9. Tambahkan fallback
Sebagian besar web browser kompatibel dengan JavaScript dan Flash, namun disarankan untuk menggunakan alternatif dari fitur ini, karena mereka tidak selalu berfungsi seperti yang diharapkan bagi pengguna atau memperlambat pemuatan browser. Misalnya, dengan browser Safari di iPhone, menu navigasi Flash menjadi tidak berguna karena iOS tidak mendukung Flash.
Inilah solusi sederhana yang akan menghemat waktu berharga Anda.

  • Gambar - Anda harus memastikan bahwa setiap tag yang memiliki ekstensi img berisi atribut lain yang menggambarkan gambar.
  • Flash Movies - Jangan gunakan Flash untuk hal-hal penting di situs Anda, seperti browsing, namun berikan alternatif non-Flash.
  • JavaScript - Hindari penggunaan JavaScript untuk fungsi penting. Sebagai gantinya, Anda bisa menggunakannya untuk membuat segalanya lebih cepat dan mudah. Gunakan styling non-script untuk memberikan alternatif non-JavaScript.

10. Pilih Manual Encoding
Menggunakan alat Dreamweaver atau KompoZer dapat menghemat banyak waktu dan berguna jika Anda tidak mengetahui HTML. Namun, total kontrol atas situs Anda, dan pengoptimalan yang lebih mudah, dicapai dengan pengkodean manual dari semua kode HTML, xHTML dan CSS. Di Internet, Anda dapat menemukan banyak editor halaman web berbasis teks. Anda bisa mencoba salah satu dari berikut ini:
  • Coffee Cup (Windows)
  • Atom Sublim Teks
  • Coda (Mac)
  • CkEditor
Prinsip dan rekomendasi yang diuraikan di atas harus memberikan dasar yang kuat bagi pengembang situs web untuk menciptakan pengalaman browsing yang konsisten - sekaligus menciptakan pengalaman yang indah dan intuitif bagi pengguna. Anda tidak hanya akan memastikan bahwa situs tersebut dapat diakses oleh publik, namun juga pengunjungnya bahagia, yang sangat penting.
Example:
<link rel="import" href="chunks.html">: 
<script>/* script chunk A goes here */</script>
<script>/* script chunk B goes here */</script>
<script>/* script chunk C goes here */</script>

Source : http://www.htmlgoodies.com/

1 comment:

Post Bottom Ad