Bedah CSS: Tombol Barunya Gmail


Sejak Google merilis tampilan barunya pada 2011, antarmuka pengguna (user interface) dari Gmail yang termasuk salah satu layanannya pun ikut berubah dan rasanya menjadi lebih nyaman. Salah satu komponen yang saya perhatikan cukup menarik adalah tombol-tombolnya yang warnanya oren dan biru itu yang entah mengapa meski terlihat sederhana tapi tampak hidup. Apa rahasianya?

Untuk melihat CSS dari sebuah elemen kita bisa menggunakan tool WebKit Inspector yang biasanya terinstall di browser seperti Google Chrome & Safari, atau kalau menggunakan browser Mozilla Firefox bisa menginstall add-on yang namanya Firebug. Silakan pilih yang mana saja, hanya kebetulan disini saya menggunakan Google Chrome.

Oke, mari kita teliti!

Buka halaman Gmail, kemudian kita lakukan klik kanan pada tombol yang ingin dilihat sourcenya > pilih “Inspect element”

Lihat bahwa tombol tersebut sebenarnya bukan elemen <button> tapi elemen <a> yang distyle sedemikian rupa. Disini kita bisa melihat class CSSnya adalah g-button dan g-button-red, apa saja rule CSS dari kedua class tersebut bisa dilihat di kolom sebelah kanan.

Cukup menarik, Google menggunakan banyak property CSS3 seperti text-shadow yang memberikan kedalaman pada teks, text-transform yang secara otomatis mengubah case teks (disini menjadi huruf kapital), gradient yang memberikan efek gradasi warna pada tombol dengan pemilihan warna yang nilai hexanya berdekatan tampak sangat menyatu, border-radius yang memberi efek lekukan dinamis pada sudut-sudut tombol, transition yang memberikan efek animasi pada perubahan state default ke state hover, dst.

Bagaimana CSS dari tombol tersebut pada saat hover? oke kita centang :hover pada inspector untuk melihatnya

Apa yang berubah? ternyata Google hanya mengubah warna dari gradient dan menambahkan property box-shadow dengan transparansi 0,2 namun dengan adanya property transition di kedua arah perubahan dari bayangannya sangat haluus

Nah kode CSSnya sudah kita dapatkan, sekarang kita bisa buat replikanya untuk melihat demonya buat sebuah file HTML (bisa pake notepad atau text editor apapun) dengan isi sebagai berikut:

<!doctype html>
<html>
  <head>
    <style>
      html {
        font: 81.25% arial, helvetica, sans-serif;
      }
      a {
        text-decoration: none;
      }
      .tombol {
        display: inline-block;
        min-width: 46px;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        height: 27px;
        padding: 0 8px;
        line-height: 27px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid transparent;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        text-transform: uppercase;
        background-color: #D14836;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#D14836));
        background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
        background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
        background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
        background-image: -o-linear-gradient(top,#DD4B39,#D14836);
        background-image: linear-gradient(top,#DD4B39,#D14836);
      }
      .tombol:hover {
        text-decoration: none;
        -webkit-transition: all 0.0s;
        -moz-transition: all 0.0s;
        -ms-transition: all 0.0s;
        -o-transition: all 0.0s;
        transition: all 0.0s;
        border: 1px solid #B0281A;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        background-color: #C53727;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#C53727));
        background-image: -webkit-linear-gradient(top,#DD4B39,#C53727);
        background-image: -moz-linear-gradient(top,#DD4B39,#C53727);
        background-image: -ms-linear-gradient(top,#DD4B39,#C53727);
        background-image: -o-linear-gradient(top,#DD4B39,#C53727);
        background-image: linear-gradient(top,#DD4B39,#C53727);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
      }
    </style>
  </head>
  <body>
    <a href="#" class="tombol">F4154LMAN</a>
  </body>
</html>

Coba jalankan di browser, dan…

Wow, sik asik! 😉

CSS3 Accordion Tanpa JavaScript


Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+

Tips & Trik Minimisasi CSS ala CSS1K


Jika anda mengikuti perkembangan dunia persilatan, eh, maksud saya.. perCSSan, mungkin pernah mendengar CSS1K, apa itu? CSS1K merupakan sebuah situs yang diinisiasi oleh Jacob Rask (seorang software developer di Opera) yang dimaksudkan untuk mendemonstrasikan kemampuan layout CSS (mirip-mirip CSS Zen Garden) namun dengan ukuran yang hanya 1KB (mirip seperti kontes JS1K). Adalah sebuah tantangan tersendiri tentunya untuk bisa membuat sebuah visualisasi kreatif atas sebuah struktur HTML tertentu namun dengan jumlah karakter CSS yang dibatasi maksimum sebanyak 1 Kibibyte. Dengan 1 Kibibyte sama dengan 1024 bytes dan 1 karakter menghabiskan 1 byte, maka batasannya adalah 1024 karakter, sebuah jumlah yang sedikit dibandingkan ukuran stylesheet pada umumnya.

Diantara demo yang ada, "Typhon" by eswat, merupakan salah satu tema favorit saya

Setiap orang boleh berpartisipasi dengan mengirimkan tema CSSnya melalui email atau github, saya sendiri mensubmitnya lewat pull request di github ke https://github.com/jacobrask/CSS1K/ karena kebetulan punya akun github dan lebih praktis saja rasanya. Bagaimana demonya? bisa dilihat di situs CSS1K, silakan cari yang mana hehe.. 😀 Prototip CSS yang saya buat awalnya memang jauh lebih besar dari 1024 bytes, wajar karena banyak elemen yang distyle sedemikian rupa, sehingga akhirnya harus memutuskan untuk menghilangkan banyak rule yang sebenarnya menarik namun tidak terlalu berdampak pada konsep desain yang saya buat secara keseluruhan. Setelah itu dirasa tidak dapat dikurangi lagi namun masih belum memenuhi batas 1K, masih ada beberapa cara yang bisa dilakukan untuk meminimisasi ukuran CSS, berikut saya rangkumkan diantaranya:

1. Satukan beberapa selector yang sebagian besar atau seluruh nilai propertiesnya redundant

Sebagai contoh, lihat kesamaan rule antara kedua selector ini:

h1 {
    color: red;
    font-weight: bold;
    text-align: center;
}
h2 {
    color: blue;
    font-weight: bold;
    text-align: center;
}

dengan menyatukan kesamaannya, kita dapat menyederhanakannya menjadi:

h1, h2 {
    color: red;
    font-weight: bold;
    text-align: center;
}

h2 {
    color: blue;
}

2. Manfaatkan CSS shorthand untuk menyatukan properties setipe yang bisa disatukan

Beberapa shorthand antara lain font, background, margin, padding, list-style, dst. Sebagai contoh:

font-family: sans-serif;
font-size: 12px;
line-height: 20px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;

dapat disederhanakan menjadi cukup

font: 12px/20px sans-serif;

padding: 5px 10px 15px;

3. Gunakan selector equivalen yang terpendek yang paling mungkin

Ada banyak cara untuk menunjukkan sebuah elemen, apakah itu melalui id, class, atau attribute. Gunakan mana yang paling pendek diantara kesemuanya. Sebagai contoh misalkan ada sebuah elemen HTML seperti ini

<a id="faisalman" class="anchor" href="#">a link</a>

pada CSS kita dapat menunjukkan elemen ini dengan banyak cara

#faisalman {}
a.anchor {}
a[href="#"] {}
a[customattr="apapunlah"] {}

kita dapat memilih salah satu diantara kesemuanya, meskipun tidak selalu yang terpendek bisa dipilih karena tergantung lingkup selector yang diinginkan juga.

4. Hapus semicolon paling akhir di setiap rule

Titik koma di akhir bersifat optional, sehingga pada contoh di bawah ini

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

kita bisa hilangkan tanda titik koma di ujungnya menjadi

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

5. Hapus whitespace yang tidak perlu

Spasi dianggap sebagai sebuah karakter yang termasuk dalam 1KB, karena itu salah satu cara termudah untuk meminimisasi adalah dengan meminimalkan penggunaan spasi. Sebagai contoh

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

bisa dituliskan menjadi

h1{margin:0 5px;padding:0;border:0;outline:0;background:transparent}

namun perhatikan bahwa ada spasi yang tidak boleh diabaikan karena untuk memisahkan 2 nilai seperti pada property margin di atas.

6. Unit dengan nilai 0 tidak perlu menggunakan satuan px

Sebagai contoh

box-shadow: 0px 0px 1px #000;

cukup dituliskan dengan

box-shadow: 0 0 1px #000;

7. Angka 0 di depan titik boleh tidak dituliskan pada unit bertipe floating point

sebagai contoh

transition: all 0.1s linear;

cukup dituliskan tanpa angka 0

transition: all .1s linear;

8. Gunakan list-style dibandingkan list-style-type jika tidak menggunakan custom image atau posisi pada list

Masih berhubungan dengan CSS shorthand, jika kita hanya menset nilai tipenya

list-style-type: none;

cukup tuliskan shorthandnya saja

list-style: none;

9. Gantikan nilai none dengan 0 dimana bisa

Salah satunya pada property border, dimana kita dapat menggantikan

border: none;

dengan

border: 0;

karena pada property border, masih berhubungan dengan bahasan CSS shorthand, keduanya merujuk pada property yang berbeda, dimana

border: none;

merupakan kependekan dari

border-style: none;

sedangkan

border: 0;

merupakan kependekan dari

border-width: 0;

Namun karena pada akhirnya keduanya menghasilkan efek yang sama, menggunakan 0 jelas lebih singkat dari none bukan?

10. Persingkat nilai hexa warna hingga ke 3 digit terdekat

Untuk menghemat karakter kita bisa melakukan antara lain dengan mengubah ke nilai terdekat yang sama untuk setiap #RRGGBB sehingga cukup dituliskan #RGB, tentu saja dengan kompensasi berupa warna yang tidak sesuai asalnya lagi meskipun mirip. Sebagai contoh

color: #f3e597;

nilai tiap warna terdekatnya bisa kita tuliskan menjadi

color: #ffee99;

sehingga cukup dituliskan nilai ekuivalennya

color: #fe9;

Selain itu, yang menarik ada definisi warna yang cukup singkat yaitu warna merah dimana kita cukup menuliskan

color: red;

lebih singkat penulisannya (3 karakter) dibandingkan jika kita menuliskan nilai hexanya (4 karakter) yaitu

color: #f00;

11. kalau jumlah direct child hanya 2, kita bisa mengganti last-child selector dengan adjacent selector

Misalnya, jika a sebagai child dari li hanya berjumlah 2, maka

li > a:last-child { }

adalah equivalen dengan

li > a+a { }

12. kalau jumlah direct child hanya 1, cukup ganti tipe elemen child tersebut dengan tanda bintang saja

Karena tipe child sudah dapat dipastikan, kita tidak perlu menuliskannya, sehingga

article > section:hover { }

secara pasti bisa kita ganti dengan

article > *:hover { }

13. Dan lain-lain

Masih banyak lagi sebenarnya tips lain yang mungkin belum tercakup disini hanya saja belum kepikiran.. 😛 Akhirul kalam, mohon maaf kalau ada salah-salah kata, dan kalau ada yang ingin berbagi trik-trik lain dalam hal menghemat karakter CSS silakan tambahkan lewat kolom komentar dibawah 😉

Beberapa referensi dan tautan lain yang mungkin berhubungan dengan bahasan ini:
CSS1K @Github
– The 30 CSS Selectors you Must Memorize
– Introduction to CSS Shorthand