Tutorial Compress CSS Secara Manual

Compress CSS
Mungkin kalian malas menggunakan cara manual untuk mengcompress CSS. Berikut ini petunjuk dasar compress CSS secara manual. Karena Dark Ard memang terbiasa ngetik manual CSS nya ==v Karena ketika aku menggunakan CSS Compressor Online, masih ada spasi yang belum terbuang, dan tanda titik koma (;) yang paling akhir ternyata hilang. Waduh, kok makin gak beres nih CSS nya.
Memangnya kode titik koma ; berpengaruh ya? Tentu saja, karena titik koma merupakan penanda bahwa pengaturan style CSS tersebut selesai (sorry gue pake istilah asal-asalan karena gak ngerti namanya :P ). Jika tanda titik koma ; tidak ada, maka browser tetap memproses bagian tersebut karena belum dianggap selesai (nambah loading jadi lama dikit).
Sekedar memberi contoh jika kalian ingin mengcompress CSS secara manual ==v Jika kode awal CSS kalian contohnya seperti ini:
body {
margin : 0px;
padding : 0px;
font-family : Arial;
font-size : 12pt;
color : black;
border : 1px solid #ff0000;
     }
Maka untuk mengcompressnya, cukup hapus saja spasi-spasi yang tidak berguna ==v.
Jika kalian bingun bagian manakah spasi-spasi yang tidak berguna, coba lihat dibawah ini yang aku beri warna merah:
body {
margin : 0px;
padding : 0px;
font-family : Arial;
font-size : 12pt;
color : black;
border : 1px solid #ff0000;
       }
Apakah Break Space juga dihapus? Yuph, hapus Break Space juga. Apa sih Break Space itu? Break Space itu adalah ganti baris (ketika kalian tekan ENTER, akan ganti baris. Kurang jelas? SPasi kebawah itu namanya Break Space). Jadi nanti hasilnya seperti ini:
body{margin:0px;padding:0px;font-family:Arial;font-size:12pt;color:black;border:1px solid #ff0000;}
Selain itu, gabungkan juga CSS yang sama. Contohnya CSS untuk background. Coba lihat dibawah ini:
background-image: url(http://blabla.com/gambar.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: white;
Kode background diatas terlalu banyak. Bisa kalian ringkas menjadi satu seperti ini:
background:url(http://blabla.com/gambar.jpg) no-repeat center center fixed white;
Masih pusing dengan tutorial diatas? Sama, aku juga pusing. Aku bingung menulis kata-katanya agar mudah dimengerti. Tapi yasudahlah... Yang penting sudah diposting. :P
Comments

8 comments:

  1. Mungkin cara ini membuat orang pusing... meding kasih tutorial nya yg pake tool online nya langsung.. ^_^

    ReplyDelete
  2. hahaha,trik yang mudah di ingat saudaraku :D

    #thanks sudah berbagi :D

    ReplyDelete
  3. gampang bgt kok
    aku juga pake ini~ <3
    XD

    ReplyDelete
  4. [Re:Irvan Kadhafi]
    Ingat!! Dunia ini tidak ada yang simple

    ReplyDelete
  5. Gmana cara masukin ini ke html

    -webkit-box-shadow:12px 12px 100px 2px rgba(150, 0, 0, 100);
    box-shadow:12px 12px 100px 2px rgba(150, 0, 0, 100);

    ReplyDelete
  6. Bagaimana cara masukan Css3 ini ke HTML

    -webkit-box-shadow:12px 12px 100px 2px rgba(150, 0, 0, 100);
    box-shadow:12px 12px 100px 2px rgba(150, 0, 0, 100);

    ReplyDelete
  7. Na, ini dia.
    Makasi kak, gampang taunyak :v

    kalo make CSS Compressor online, cepet sih cepet
    tapi, page loader di blog ak, yg dari om johanes ga jalan2 xD
    ga kebuka-kebuka jadinya xD

    sukur yg manual ado~

    ReplyDelete
Related posts
Guestbook
Author
Other


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other