Selamat Siang Pengunjung blog dabloeng, Kepala pusing aja masih sempet posting nih. XD... Sharing kali ini Cara mengkompress CSS dengan metode manual. Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam, CSS juga dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
Sekedar memberi contoh jika kalian ingin mengcompress CSS secara manual Jika kode awal CSS kalian contohnya seperti ini:
Maka untuk mengcompressnya, Anda cukup menghapus spasi-spasi yang tidak berguna.
Jika kalian masih bingung bagian manakah spasi-spasi yang tidak berguna, Silahkan lihat code CSS di bawah ini, Warna merah adalah spasi di CSS, silahkan hapus bila CSS kalian ada spasinya.
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:
Selain itu, gabungkan juga CSS yang sama. Contohnya CSS untuk background. Coba lihat dibawah ini:
Kode background diatas terlalu banyak. Bisa kalian ringkas menjadi satu seperti ini:
Sekedar memberi contoh jika kalian ingin mengcompress CSS secara manual 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, Anda cukup menghapus spasi-spasi yang tidak berguna.
Jika kalian masih bingung bagian manakah spasi-spasi yang tidak berguna, Silahkan lihat code CSS di bawah ini, Warna merah adalah spasi di CSS, silahkan hapus bila CSS kalian ada spasinya.
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;
Mungkin bisa di mengerti kan. Semoga bermanfaat bagi pembacanya. XD.... Good Luck best friend's.
Tolong gan Kalo COPAS srtakan sumbernya. trims???
BalasHapusya soory sya Lupa kekekek Maklum sdh tua hehehehe
BalasHapus