CSS (Cascading Stylesheet) - 7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui

Artikel CSS (Cascading Stylesheet)

• Home
  • » CSS (Cascading Stylesheet)
    • » 7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui

7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui

Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 5200 kali

Langsung lihat komentar

CSS pasti sudah menjadi hal yang wajib dipelajari jika anda ingin membuat website. Meneruskan artikel saya yang lalu tentang dasar-dasar CSS, sekarang saya akan memberitahu rahasia CSS yang mungkin belum anda ketahui dan wajib diketahui, karena dapat memperkecil ukuran file CSS anda. Inilah dia rahasia CSS yang (mungkin) belum anda ketahui:

1. Memasang 2 class pada 1 tag HTML

Hei, apa anda tau bahwa kita bisa memasang 2 class untuk satu tag HTML? Jawabannya bisa.. Jika kita biasanya hanya membuat kode seperti ini:

<p class="content">

Maka jika kita ingin bahwa <p> mengikuti dua aturan class yang berbeda maka kita cukup mengubahnya menjadi:

<p class="content isi">

Jadi jika anda memiliki class content dan isi maka kedua aturan pada class tersebut akan dimasukkan kedalam <p>. Ingat hanya 2 tidak bisa lebih dan dipisahkan dengan spasi.

2. Hilangkan px untuk nilai 0

Oke, katakanlah anda memiliki kode CSS seperti ini:

.box {

border-top:10px;

border-left:0px;

padding:0px;

}

px disini berarti satuannya pixel dan kita harus menuliskannya, tetapi ternyata ada pengecualian untuk angka 0 (angka 0 saja) jadi kita bisa menuliskannya seperti ini:

.box {

border-top:10px;

border-left:0;

padding:0;

}

Ya, angka 0 tidak perlu menggunakan px, ini berarti kita memperkecil sedikit ukuran file CSS kita :)

3. Gunakanlah selalu shorthand

Apa sih shorthand? Shorthand merupakan aturan di CSS untuk menyingkat kode CSS anda. margin, dan padding merupakan contoh yang bisa kita singkat. Perhatikan contoh CSS berikut ini:

.box {

border-top:10px;

border-left:0;

border-right:20px;

border-bottom:15px;

padding-top:0;

padding-bottom:10px;

padding-left:12px;

padding-right:9px;

}

Dapat anda singkat menjadi:

.box {

border:10px 20px 15px 0;

padding:0 9px 10px 12px;

}

Lihat berapa banyak yang bisa kita hemat :) yang paling penting adalah urutannya dari kiri ke kanan dimulai dari posisi atas kemudian bergerak searah jarum jam.

4. Shorthand pada warna

Yap, warna pun bisa kita singkat, jika kita memiliki warna putih maka kita menggunakan #ffffff bisa disingkat menjadi #fff. Demikian juga jika kita memiliki warna #111111 menjadi #111. Tapi kita tidak bisa menyingkat warna #abcdef. Harus warna yang memiliki angka hexa yang sama.

5. Shorthand pada font

Siapa bilang font tidak bisa disingkat? Jika anda memiliki kode seperti ini:

.box {

font-style: italic;

font-weight: bold;

font-variant: small-caps;

font-size: 1em;

line-height: 1.5em;

font-family: verdana,sans-serif;

}

Dapat anda singkat menjadi 1 baris: font: bold italic small-caps 1em/1.5em verdana,sans-serif
Perlu diingat bahwa untuk menyingkat font anda wajib mengatur font-size dan font-family yang diletakkan paling akhir. Untuk yang lainnya tidak wajib ada.

6. Menyingkat yang sudah disingkat

Kita bisa menyingkat yang sudah disingkat. Sudah singkat tapi masih bisa disingkat lagi? Nggak masuk akal.. Bisa. Perhatikan contoh berikut ini:

.box {

border-top:10px;

border-left:20px;

border-right:20px;

border-bottom:10px;

padding-top:0;

padding-bottom:0;

padding-left:15px;

padding-right:15px;

}

Oke, jika kode diatas disingkat maka hasilnya seperti ini:

.box {

border:10px 20px 10px 20px;

padding:0 15px 0 15px;

}

Dan karena nilai atas dan bawah serta kiri dan kanan nya sama. Maka bisa disingkat lagi menjadi:

.box {

border:10px 20px;

padding:0 15px;

}

Sip kan.. Ingat ini hanya berlaku jika nilai atas dan bawah serta kiri dan kanan sama.

7. Menengahkan objek

Anda ingin menengahkan suatu objek, misal images atau div. Gampang gunakan saja auto pada margin. Perhatikan contoh berikut ini:

#content
{
width: 600px;
margin: 0 auto;
} 

auto disini berarti kita membiarkan CSS mendeteksi lebar kiri dan kanan secara otomatis berdasarkan lebar layar. Maka otomatis hasilnya akan ketengah. Tidak berlaku jika kita ingin menengahkan secara vertikal.

Bagaimana menarik bukan? itu baru sebagian kecil, dan masih banyak lagi rahasia dan trik CSS yang perlu diketahui.

Simpan artikel ini ke:

Komentar [13]

Kirim Komentar: