Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups
Code

Apakah Anda Membuat 10 Kesalahan CSS?

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Rohmat Trimanto (you can also view the original English article)

Bekerja dengan CSS dapat terlihat seperti pertempuran terus-menerus. Browser selalu mengubah cara mereka membaca kode (* cough* Internet Explorer * cough *), dan tampaknya ada banyak "gotchas" CSS kecil kecil. Meskipun ini adalah bahasa yang sangat kuat, itu dapat dengan mudah digunakan secara tidak benar, yang akan menghancurkan perkembangan Anda untuk ketidaksempurnaan seumur hidup.

1. Mengabaikan Kompatibilitas Browser

Ini mungkin masalah nomor satu dengan pengembangan web, karena Anda harus memiliki layout yang terlihat sama, tidak peduli apa browser pengunjung situs menggunakan untuk menavigasi halaman. Fakta ini kadang-kadang tampak seperti kutukan eksistensi Anda: ada perbedaan mendasar dalam cara Internet Explorer merender halaman, versus Firefox. Meskipun tidak seburuk dulu, masih ada perbedaan antara browser.

Sangat mudah bagi pengembang web untuk menata halaman di browser favorit mereka dan tidak khawatir tentang bagaimana tampilannya di browser utama lainnya, karena Anda kemungkinan besar tidak akan melihat perbedaannya. (Saya adalah pelaku utama dari ini. Saya terkadang akan mendesain situs di Firefox dan lupa memeriksa IE sampai setelah selesai!) Meskipun ada beberapa metode yang dicoba dan benar untuk membantu menjaga tata letak Anda untuk perenderan browser yang berbeda, cara terbaik untuk memastikan semuanya terlihat konstan adalah dengan hanya menggunakan tangkapan layar. Screenshothot memberikan gambaran akurat tentang tampilan situs Anda di berbagai platform dan browser, memungkinkan Anda memastikan tidak ada yang tampak keren di browser.


Foto oleh lazlo-foto.

2. Tidak Akuntansi untuk Resolusi Browser yang Lebih Kecil

Sementara sejumlah besar dari kami pengembang web memiliki monitor komputer besar - dan cukup bangga dengan fakta - sebagian besar pengunjung ke situs Anda mungkin tidak. Anda dapat memeriksa program analitik Anda untuk melihat resolusi browser pengunjung Anda dan seberapa luas jangkauannya (Google Analytics melakukan hal ini dengan sangat baik). Namun, ada perbedaan dunia dalam cara desain terlihat dalam resolusi 1024x768 dibandingkan dengan resolusi 800x600. Bisa membuat desain cantik nyaris tidak berguna.

Saya baru-baru ini menemukan realisasi ini saat saya mengubah desain untuk Trendfo. Sebagian besar pengunjung situs menggunakan browser yang lebih kecil yang menyebabkan gambar memblokir sebagian iklan, memberi saya sedikit klik dan akhirnya mengurangi pendapatan dari situs.

Akuntansi untuk peramban yang lebih kecil berarti bahwa semua pengunjung Anda senang dan menemukan informasi yang mereka butuhkan.


Foto oleh Petteri Sulonen.

3. Tidak Menimbang Kerangka Kerja

Jika Anda mengembangkan tata letak CSS dari awal, Anda mungkin ingin bertanya pada diri sendiri mengapa. Sama seperti tidak ada yang baru di bawah matahari, hal yang sama berlaku dengan CSS. Ada banyak kerangka kerja CSS di luar sana seperti Blueprint framework dan 960 CSS framework. Ini dibuat untuk membantu Anda membuat tata letak antipeluru, tanpa harus memulai sesuatu dari awal. Tata letak ini memiliki kompatibilitas antar-browser dan telah diuji secara ketat. Sungguh, kecuali Anda melakukan sesuatu yang benar-benar radikal yang membutuhkan muatan kode khusus, cukup gunakan kerangka CSS.

Mengapa menemukan kembali roda?


Foto oleh nestor_galina.

4. Tidak Memanfaatkan Kelas Generik

Cukup mudah untuk tidak memikirkan masa depan ketika kami sedang mengembangkan situs web. Sering kali kami akan menyebutkan kelas CSS kami sesuatu yang berbeda setiap kali kami mengembangkan sebuah situs, dibandingkan dengan membuat kelas CSS sederhana yang dapat kami gunakan berulang kali di seluruh desain kami, tanpa harus menggali apa yang kami gunakan sebelumnya. Ini akan memastikan bahwa desain situs kami tetap konstan sepanjang perubahan desain.

Anda mungkin menggunakan kelas generik seperti:

(Catatan Editor: 'hak' ganda adalah hasil dari bug di penampil kode kami, kode yang benar tentu saja .right {float: right}.)

Untuk menjaga hal-hal mengambang ke arah yang benar ketika Anda menginginkannya. Jadi Anda bisa menata ID DIV seperti:

Saya biasanya menggunakan setidaknya tiga kelas umum ketika saya sedang membangun desain situs:


Foto oleh cnynfreelancer.

5. Tidak Memvalidasi HTML

Saya yakin Anda tidak tahu bahwa memvalidasi HTML Anda juga bisa memengaruhi CSS Anda, bukan? Yah, itu bisa. Pertama dan terpenting, Anda tidak dapat memvalidasi CSS Anda sampai Anda memiliki HTML yang valid. Kedua, ada banyak contoh bahwa HTML Anda dapat menyebabkan masalah Anda, bukan CSS Anda. Sering kali kita berpikir bahwa CSS kita mengubah tata letak padahal sebenarnya itu adalah sedikit cacat HTML yang membuat tata letak yang funky. DIV yang tidak ditutup di sini, kelas CSS yang salah label ... bisa jadi apa saja. Pastikan bahwa HTML Anda keluar sebelum Anda bahkan mencoba mendiagnosis masalah CSS.


Foto oleh Focal Intent.

6. Tidak Memvalidasi CSS

Saya biasa terus-menerus mengganggu seorang teman untuk bantuan dengan masalah CSS saat saya mencoba mempermainkan desain saya. Dia dengan sabar bertanya kepada saya setiap kali 'Apakah CSS memvalidasi? Jika tidak, apa kesalahannya?" Tidak lama kemudian saya belajar memvalidasi CSS sebelum saya meminta bantuan Thomas di kemudian hari, dan biasanya memvalidasi memperbaiki masalah untuk saya.

Jika Anda memiliki kode CSS yang valid, Anda jauh lebih mungkin untuk memiliki CSS yang jauh lebih kompatibel di seluruh browser dan cenderung tidak akan rusak.

7. Menggunakan Mammoth Background Images

Sering kali desainer baru akan menggunakan gambar latar belakang besar dalam tata letaknya. Misalnya, menggunakan gambar latar belakang 3.000px X 5.000px untuk memperhitungkan ukuran browser apa pun yang mungkin. Alih-alih menggunakan gambar yang sangat besar, mereka bisa menggunakan gambar berulang yang sangat kecil dengan sentuhan sihir CSS. Perbedaannya sangat besar: Alih-alih memuat gambar 200kb, Anda dapat memuat gambar hanya beberapa byte dalam ukuran dan memiliki CSS mengulanginya di latar belakang.

Jika Anda memiliki gambar latar belakang yang sangat besar, Anda kehilangan dua cara:

  1. Itu berarti menggunakan bandwidth yang tidak perlu
  2. Anda membuat pengunjung menunggu lebih lama untuk memuat gambar

Terkadang gambar latar belakang yang besar tidak dapat dihindari, terutama dengan tren baru-baru ini mendesain tata letak web yang ilustratif. Namun, menggunakan gambar berulang atau warna solid di latar belakang adalah praktik yang jauh lebih baik.


Foto oleh Petteri Sulonen.

8. Menggunakan CSS Untuk Semuanya

Ketika orang pertama kali belajar tentang teknologi, mereka menjadi bersemangat tentang itu dan ingin menggunakannya di mana-mana, bahkan ketika itu benar-benar dapat melawan apa yang akan bekerja paling baik untuk proyek tersebut.

Sebagai pengembang web, terkadang kita terjebak dalam menginginkan teknologi untuk melakukan sesuatu yang canggih dan spesifik, padahal sebenarnya kita dapat menggunakan teknologi yang berbeda jauh lebih mudah. Sebagai contoh, kadang-kadang jauh lebih mudah untuk menggunakan tabel untuk mengatur data daripada membuat tata letak berbasis CSS yang rumit dengan DIV mengambang dan sejenisnya. Kita harus ingat, alasan mengapa kami menggunakan teknologi seperti CSS adalah karena itu harus mempercepat waktu pengembangan. Ketika mulai memperlambat kita, mungkin kita akan sedikit berlebihan.


Foto oleh Timm Williams.

9. Menggunakan CSS sebaris

Ini adalah dosa utama bagi pengembang web, dan itu terjadi lebih dari yang ingin Anda ketahui. Jika Anda sedang membangun desain, Anda hampir selalu ingin menjaga CSS dan HTML Anda terpisah. Ini memastikan bahwa ketika (perhatikan saya tidak mengatakan "jika") Anda memutuskan untuk mengubah desain situs, Anda tidak perlu menggali melalui HTML dari setiap tata letak dan menemukan CSS nakal yang melekat pada elemen inline.

Alih-alih menggunakan ini:

Anda harus memindahkan bisnis gaya ke style sheet eksternal seperti ini:

CSS sebaris hampir selalu harus dihindari. Sangat mudah digunakan dan bagus untuk pengujian, tetapi selain itu Anda mungkin tidak menginginkannya dalam kode produksi Anda.


Foto oleh nestor_galina.

10. Menggunakan Terlalu Banyak File

Pernahkah Anda melihat desain dengan 12 file CSS berbeda yang melekat padanya? Ini adalah mimpi buruk bagi siapa pun yang mencoba mengubah tata letak Anda. Tidak hanya itu, memperlambat waktu memproses setiap file, karena browser harus membuat permintaan untuk setiap file. Lebih baik menggunakan skema CSS sederhana yang menggunakan 1 atau 2 file. Waktu yang dihabiskan untuk mem-parsing 12 file versus satu file cukup signifikan. Tidak hanya itu, Anda akan menyelamatkan orang berikutnya yang harus membuat perubahan pada tata letak Anda banyak kerumitan.

Tidak ada yang ingin membuka 12 file untuk membuat perubahan sederhana di seluruh situs!


Foto oleh lightmatter.
  • Berlangganan NETTUTS RSS Feed untuk lebih banyak tutorial dan artikel pengembangan web harian.

Glen Stansberry adalah pengembang web dan blogger yang berjuang lebih dari yang ingin dia akui dengan CSS. Anda dapat membaca lebih banyak kiat tentang pengembangan web di blognya Web Jackalope.

Suka posting ini? Pilih di Digg di bawah ini. Terima kasih!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.