MODUL BELAJAR DICODING

FRONT END DEVELOPER

w
 PENDALAMAN CSS

A. Opacity (Tingkat Transparansi)

Opacity adalah seberapa besar tingkat terlihat suatu objek. Semakin
besar tingkat transparansi suatu objek, semakin tak terlihat objek
tersebut. Namun, semakin besar tingkat opacity suatu objek, semakin
terlihat objek tersebut (solid).

Contoh penerapan opacity pada dokumen

1. Opacity pada warna

 Opacity bisa diterapkan pada keseluruhan elemen

B. Box Model
Berikut adalah penjelasan dari gambar di atas.

 Content
Content atau konten merupakan sebuah inti dari kotak elemen yang merupakan konten
dari elemen itu sendiri.

 Padding
Area yang menjadi jarak antara border elemen dengan konten yang ditampilkan. Ketika
kita menerapkan background-color, warna tersebut diterapkan pada area padding.
Penerapan ukuran padding pada elemen adalah opsional.

 Border
Border merupakan garis yang mencakup konten beserta padding. Penerapan border pada
elemen adalah opsional.

 Margin
Berbeda dengan padding, margin merupakan area jarak di luar border. Pada ilustrasi di
atas, margin ditunjukkan dengan warna merah muda. Namun, pada aslinya margin selalu
transparan dan penerapan margin pada elemen adalah opsional.

 Edge of Element
Edge of element merupakan batas dari suatu elemen. Di dalamnya terdapat margin,
 border, padding, dan konten. Pada ilustrasi di atas, batas elemen ditunjukkan dengan garis
putus, tetapi pada aslinya batas elemen selalu tidak terlihat.

1. Dimension

 Standarnya, sebuah box yang dihasilkan tiap elemen selalu cukup

untuk menampung konten. Namun, kita dapat mengatur nilai
dimensi dari box tersebut dengan properti width dan height.

 Cara yang paling banyak digunakan dalam menentukan dimensi

kotak adalah menggunakan piksel, persentase, atau ems. Secara
tradisional, piksel merupakan cara yang paling populer karena kita
dapat merancang dan mengontrol ukuran secara akurat.

 Berbeda ketika kita menggunakan persentase, ukuran kotak akan

relatif atau menyesuaikan dari ukuran lain, seperti ukuran jendela
browser atau ukuran induk yang menaunginya. Namun ketika
menggunakan ems, nilai dimensi kotak akan menyesuaikan
berdasarkan ukuran teks yang ditampilkan pada konten elemen
tersebut.

 Pada saat ini, banyak developer mulai merancang menggunakan

persentase dan ems untuk menetapkan ukuran box agar dapat
menyesuaikan dengan berbagai macam ukuran layar.
2. Limiting Dimension

Beberapa website yang ada sekarang menampilkan layout yang dapat

melebar dan menyempit mengikuti ukuran layar pengguna. Pada prinsip
tampilan tersebut, mungkin kita memerlukan sebuah limitasi ukuran
yang harus ditetapkan agar konten selalu ditampilkan secara
proporsional. Untuk melakukannya kita manfaatkan properti min-
width dan max-width.

 min-width: menetapkan nilai lebar minimal yang harus dimiliki

elemen.
 max-width: menetapkan nilai lebar maksimal yang harus dimiliki
elemen.

Keduanya merupakan properti yang sangat membantu untuk

memastikan konten halaman dapat terbaca oleh pengguna (terutama
ketika pengguna menggunakan ponsel). Misalnya, kita dapat
menggunakan properti max-width untuk memastikan bahwa baris teks
yang muncul tidak terlalu lebar.
3. Overflowing Content

Dimensi box yang dihasilkan elemen selalu cukup untuk menampung

konten, tetapi hal ini tidak berlaku jika kita tetapkan secara manual
panjang dan lebarnya. Tak jarang terjadi overflow ketika kita menerapkan
ukuran pada elemen dengan konten di dalamnya yang begitu banyak.

Contohnya berikut.
Untuk menangani kasus seperti ini kita bisa gunakan properti overflow,
properti ini dapat bernilai berikut.

 visible
Visible merupakan nilai default pada properti ini. Konten yang tidak
tertampung (overflow) akan tetap ditampilkan seperti pada
standarnya.
 hidden
Jika terjadi overflow, konten yang tidak tertampung akan
disembunyikan.
 scroll
Memunculkan scroll bar pada pinggir elemen sehingga konten yang
tidak tertampung akan ditampilkan dengan scroll bar. Jika
menggunakan nilai ini, scroll bar akan tetap muncul walaupun
konten tidak terjadi overflow.
 auto
Sama seperti scroll, hanya jika tidak terjadi overflow, nilai visible
yang akan diterapkan.

Berikut adalah contoh penerapan seluruh nilai properti ini.

4. Box-Sizing
Sebelum CSS3, ukuran lebar dan panjang elemen mengacu pada konten
elemen (content-box). Itu berarti ukuran elemen seluruhnya merupakan
nilai panjang (width) dan lebar (height) yang kita spesifikasikan ditambah
dengan nilai padding dan border yang diterapkan pada elemen. Hal
tersebut membuat sebagian developer menjadi sulit dalam menetapkan
ukuran dimensi.

Pada CSS3, kita dapat memilih tipe pengukuran lain dalam menentukan
dimensi elemen. Dengan menggunakan properti box-sizing, kita dapat
menentukannya berdasarkan border box. Ukuran elemen sudah
termasuk content, padding, dan border. Dengan metode ini, hasil elemen
yang ditampilkan (termasuk padding dan border) akan memiliki dimensi
yang sama persis seperti yang kita tentukan.
5. Border
Border merupakan sebuah garis yang mengelilingi area konten dan
padding (opsional). Kita bisa mengatur tipe, ketebalan, serta warna garis
yang ditampilkan sesuai dengan yang kita inginkan. Kita juga bisa
mengatur dalam menampilkan sebagian atau keseluruhan garis pada
elemen.

a. Border Width

Properti border-width digunakan untuk mengatur ketebalan dari border,

nilai dari properti ini dapat berupa piksel atau menggunakan predefined
names value, seperti thin, medium, dan thick. Kita tidak bisa
menggunakan nilai persentase (%) pada properti ini.

Kita dapat mengatur ukuran garis secara individual dengan

menggunakan empat properti terpisah seperti berikut.

Namun, kita juga dapat menetapkan nilai keempatnya sekaligus dalam

satu properti seperti ini.

Properti border-width dapat ditentukan dengan menggunakan satu, dua,

tiga, atau empat nilai. Berikut penjelasannya.
  Ketika satu nilai ditentukan, nilai berlaku untuk empat sisi.
 Ketika dua nilai ditentukan, nilai pertama berlaku untuk sisi atas
dan bawah, nilai kedua untuk sisi kiri dan kanan.
 Ketika tiga nilai ditentukan, nilai pertama berlaku untuk sisi atas,
nilai yang kedua untuk sisi kiri dan kanan, nilai ketiga untuk sisi
bawah.
 Ketika empat nilai ditentukan, nilai pertama berlaku untuk sisi atas,
nilai yang kedua untuk sisi kanan, nilai yang ketiga untuk sisi bawah,
dan nilai yang keempat untuk sisi kiri. Urutan tersebut berdasarkan
arah jarum jam (clockwise).

b. Border Style
Kita juga bisa menetapkan tipe garis secara individual pada sisi
elemen dengan menggunakan empat properti terpisah. Contohnya
berikut.

c. Border Color

Properti ini digunakan untuk menentukan warna pada garis dengan

menggunakan nilai RGB, Hex, atau nama warna pada CSS.

Sama seperti properti border yang lain, kita dapat menentukan warna
individual sisi pada elemen dengan menggunakan properti yang terpisah.
Untuk menyingkat cara, kita juga dapat menetapkan nilai keempatnya
sekaligus dalam satu properti seperti berikut.

6. Shorthand (Pengankut banyak property)

Untuk menerapkan border pada elemen kita harus mendefinisikan

seluruh properti border yang ada. Dimulai dari menetapkan ketebalan
(border-width), tipe (border-type), dan warna (border-color). Jika kita lupa
menetapkan salah satu properti tersebut, garis tidak akan tampak pada
elemen.

Dengan demikian, kita butuh menuliskan properti yang banyak untuk

menetapkan border pada elemen, bukan? Ya memang, tetapi CSS
menyediakan jalan pintas (shorthand) untuk membuat border dengan satu
properti saja. Properti border memiliki tiga buah nilai yang digunakan
untuk menentukan ketebalan, tipe, dan warna pada border. Berikut
contoh penerapannya.

Perlu kita perhatikan bahwa penulisan urutan harus benar. Nilai pertama
digunakan untuk ketebalan, kedua untuk tipe, dan ketiga untuk warna
garis. Perhatikan gambar berikut untuk lebih jelasnya.
7. Padding
Padding merupakan jarak antara area konten dan border. Padding
banyak diterapkan pada elemen jika elemen tersebut menerapkan warna
latar atau pun border. Padding memberikan sedikit ruang sehingga
konten di dalam elemen dapat lebih nyaman untuk ditampilkan.

Berikut adalah contoh implementasi dari padding.

Piksel merupakan satuan yang sering digunakan dalam menetapkan nilai

properti ini (meskipun kita bisa juga menggunakan persentase atau ems).
Jika menetapkan menggunakan persentase, nilai akan relative pada
elemen induk atau jendela browser (jika tidak memiliki induk elemen).

Kita dapat menentukan nilai padding yang berbeda untuk masing-masing

sisi elemen dengan menggunakan daftar properti berikut.

Selain itu, hal di atas dapat juga dilakukan dengan menggunakan

shorthand seperti berikut.
Berikut hasil dari penerapannya.

9. Margin
Seperti padding, margin merupakan ruang atau jarak pada sebuah
elemen. Namun, jarak tersebut terletak diluar dari konten dan border
element. Margin digunakan untuk menjaga elemen agar tidak
bertabrakan satu sama lain atau dari tepi jendela browser.
Margin ini bersifat collapsed, yang artinya dapat menumpuk jika terdapat
dua margin yang saling bertumpukkan. Kalian bisa melihat pada margin
bawah dan margin atas pada kedua elemen tersebut. Hal itu menjelaskan
alasan jarak vertikal antar elemen tersebut tidak sebesar 40px, tetapi
sebesar 20px. Jika terjadi pertumpukan margin, nilai yang paling besar
yang akan diterapkan.

Kita dapat menentukan nilai margin yang berbeda untuk masing-masing

sisi elemen dengan menggunakan contoh daftar properti berikut.

Selain itu, kita juga dapat menggunakan shorthand untuk menetapkan

keempat nilai di atas dalam satu properti berikut.

10. Centering Content

Jika kita ingin membuat sebuah kotak berada tepat pada tengah sebuah
halaman atau di dalam elemen induknya, margin kanan dan kiri bisa
diatur dengan nilai auto. Untuk membuat kotak berada di tengah kita
juga harus menentukan lebar dari kotak tersebut (menggunakan properti
width). Jika tidak, kotak akan mengambil lebar penuh pada halaman atau
induk elemen.

Setelah kita menentukan lebar kotak dan mengatur margin kiri dan kanan
menjadi auto, secara otomatis browser akan memberi jarak yang sama di
setiap sisi horizontal kotak sehingga membuat kotak berada di tengah
halaman.

Contoh :

c. Display Roles
Kita pernah membahas mengenai inline dan block pada modul HTML
sebelumnya bahwa standarnya setiap elemen HTML memiliki dua tipe,
yaitu block dan inline. Untuk lebih jelasnya berikut adalah sifat-sifat yang
ada pada elemen block dan inline.
Dengan menggunakan properti display, kita dapat mengubah sebuah
elemen inline menjadi block, begitu pun sebaliknya. Properti ini juga
dapat digunakan untuk menyembunyikan elemen yang ditampilkan.

Nilai dari properti ini dapat berupa hal berikut.

 inline: mengubah elemen block berperilaku seperti elemen inline.

 block: mengubah elemen inline berperilaku seperti elemen block.
 inline-block: membuat elemen block tidak menambahkan baris
baru ketika dibuat, tetapi tetap mempertahankan sifat lain dari
elemen block.
 none: menyembunyikan elemen dari halaman.

Properti ini banyak sekali digunakan dalam kasus dalam pembuatan

navigasi. Biasanya, navigasi dibuat menggunakan elemen list yang
memiliki sifat block sehingga item list selalu ditampilkan dalam baris
baru. Dengan menggunakan properti display, kita dapat mengubah
perilaku elemen list tersebut dengan menerapkan inline. Jadi, item list
dapat ditampilkan secara horizontal.
D. Box Shadow
Nilai dan cara kerja dari properti box-shadow mirip seperti text-shadow,
yaitu nilainya menentukan jarak vertikal dan horizontal, tingkat
keburaman, dan warna pada bayangan. Pada box shadow, kita juga dapat
menentukan tingkat sebaran (spread) bayangan. Jika nilai semakin besar,
bayangan yang tampak akan semakin luas.

Berikut adalah contoh penerapan box shadow pada CSS.

Berikut adalah penjelasan tiap-tiap nilai dari propertinya.

 Nilai pertama: menunjukkan seberapa jauh ke kiri atau kanan

(horizontal) bayangan harus ditampakkan.
 Nilai kedua: menunjukkan jarak ke atas atau ke bawah (vertical)
bayangan harus ditampakkan.
 Nilai ketiga (opsional): menentukan tingkat keburaman yang harus
diterapkan pada bayangan.
  Nilai keempat (opsional): tingkat sebaran (spread) bayangan.
Semakin besar nilai yang ditentukan, bayangan yang tampak akan
semakin luas.
 Nilai kelima: menentukan warna yang digunakan pada bayangan.

E. Rounded Corner
CSS3 memperkenalkan kemampuan untuk membuat rounded corner atau
sudut bundar pada box dengan menggunakan properti border-radius.
Nilai dari properti ini merupakan tingkat lengkungan border dalam piksel.

Contohnya berikut.

Kita bisa menetapkan nilai pada individu siku kotak dengan

menggunakan properti yang terpisah seperti berikut.

Selain itu, kita dapat menggunakan shorthand property sehingga dapat

menetapkan keempat nilainya dalam satu properti.
F. Positioning
Berguna untuk memindahkan posisi elemen tanpa mengganggu posisi elemen lainnya.

Berikut adalah nilai dari properti position yang ada pada CSS.

 Normal Flow/Static Flow

Ia adalah default behaviour yang dimiliki elemen, yakni setiap elemen block akan
ditampilkan dalam baris baru ketika dibuat. Jadi, setiap elemen block selalu muncul di
bawah dari elemen block sebelumnya. Bahkan, jika masih terdapat ruang kosong pada
samping elemennya, mereka tidak akan tampak bersebelahan.
 Relative Positioning
Membuat elemen dapat melakukan perpindahan posisi ke atas, kanan, bawah, ataupun
kiri dari posisi semula atau posisi seharusnya elemen tersebut berada. Perpindahan posisi
ini tidak akan berpengaruh terhadap posisi elemen di sekitarnya karena ketika
menggunakan relative positioning elemen tersebut akan dipindahkan dari normal flow.
 Absolute Positioning
Sama seperti relative, elemen akan dipindahkan keluar dari normal flow sehingga kita
dapat memindahkan posisi elemen ke atas, kanan, bawah, ataupun kiri secara leluasa
tanpa mengganggu elemen di sekitarnya. Namun, posisinya relatif terhadap jendela
browser dan posisinya dapat relatif pada induk elemen selama induk elemen juga berada
di luar dari normal flow.
 Fixed Positioning
Ia merupakan absolute position. Namun, posisinya selalu relatif pada jendela browser,
bahkan ketika pengguna melakukan scrolling posisinya akan tetap tampak pada posisinya
di layar.
1. Perbedaan Static Flow dan Non-Static Flow
Untuk mengubah posisi elemen yang berada di non-static flow, kita dapat
menggunakan properti top, right, bottom, ataupun left (hanya akan
berpengaruh pada elemen yang menerapkan non-static flow, yaitu
elemen yang menerapkan nilai relative, absolute, dan fixed pada
properti position).

Kalau static flow itu mempengaruhi elemen didekatnya sedangkan non-

static flow tidak.

2. Normal flow
Dalam flow normal, setiap elemen block ditempatkan di bawah elemen
sebelumnya. Kita tidak perlu menetapkan nilai properti position ketika
ingin membuat perilaku seperti ini. Namun, secara sintaks perilaku ini
ditetapkan dengan nilai static.

3. Relative Positioning
Kita dapat melakukan perpindahan posisi elemen ke atas, kanan, bawah,
ataupun kiri. Perpindahan posisi yang dilakukan tidak akan berpengaruh
terhadap posisi elemen di sekitarnya.
Pada contoh di atas, setelah menetapkan nilai position pada paragraf
kedua, kita mengubah posisinya menjadi 10 piksel lebih bawah dan 100
piksel lebih ke kanan dari posisi yang seharusnya. Perlu kita ingat bahwa
perpindahan posisi mengacu pada posisi elemen seharusnya.

3. Absolute Positioning
Ketika properti position diberikan nilai absolute, ia akan berperilaku sama
dengan relative. Namun, hal yang membedakannya adalah elemen ini
benar-benar tidak dianggap ada oleh elemen yang berada pada normal
flow. Dampaknya, lokasi awal elemen yang diberikan nilai absolute akan
ditempati oleh elemen di bawahnya.

Pada contoh di atas, kita bisa lihat bahwa ketika elemen heading
menerapkan properti position dengan nilai absolute, elemen di
bawahnya (paragraf) akan menempati posisi yang sebelumnya ditempati
oleh elemen heading tersebut. Selain itu, perpindahan posisi ketika
menggunakan absolute akan mengikuti ukuran jendela browser.
Nilai ini juga dapat relatif pada elemen yang menaunginya (elemen induk)
selama elemen tersebut juga berada di luar normal flow. Jika tidak,
elemen akan tidak menghiraukan elemen induknya tersebut. Contohnya
seperti kode berikut.

Pada contoh kode di atas, bisa dilihat bahwa kita tidak menetapkan
properti position pada elemen .parent sehingga elemen tersebut tetap
berada pada flow normal. Jadi, elemen heading akan mengabaikan
elemen induknya.

Berbeda ketika .parent menerapkan properti position dengan nilai yang

dapat mengeluarkannya dari normal flow. Contohnya, nilai relative.

Dengan demikian, posisi elemen heading akan relatif terhadap .parent.

4. Fixed Positioning
Fixed positioning merupakan absolute position. Namun, posisinya selalu
relatif pada jendela browser (meskipun diletakkan dalam induk elemen di
luar flow normal). Bahkan, ketika pengguna melakukan scrolling,
posisinya akan tetap tampak pada posisinya di layar.

Pada contoh di atas, elemen heading diposisikan di sudut kiri atas jendela
browser dengan properti berikut.

Ketika pengguna melakukan scrolling pada halaman, elemen heading

tetap berada pada posisi yang sama dan paragraf yang ditampilkan
tampak di belakang elemen heading tersebut.

G. FLOATING
Secara sederhananya, properti float dapat membuat elemen berada pada
sebelah kanan atau kiri. Bahkan, jika diterapkan pada elemen inline
memungkinkan elemen di sekitarnya mengelilingi elemen tersebut
(wrap).

Selain dalam membuat text wrapping, float juga merupakan salah satu
teknik dalam membuat layout website. Teknik ini masih banyak
digunakan oleh developer karena sangat mudah dipahami dan tergolong
mudah untuk multiple column seperti gambar berikut.
Hal ini dapat dilakukan dengan mudah menggunakan
properti float karena nilai dari properti ini adalah left dan right. Nilai
tersebut menunjukkan posisi elemen harus diletakkan. Contoh
penerapannya seperti berikut.
Dari contoh di atas, kita bisa melihat pada selector .left-
content dan .right-content ditetapkan properti float dengan
nilai left dan right sehingga elemen tersebut dapat diposisikan secara
bersebelahan.

Ketika menggunakan properti float, jangan lupa untuk menentukan

ukuran lebar dari propertinya karena nilai dari lebar menentukan
seberapa banyak ruang yang dicakup oleh elemen. Pada contoh di atas,
kita menetapkan nilai 30% untuk konten kiri dan 70% untuk konten
sebelah kanan.

Lantas, jika nilainya hanya left dan right, bagaimana apabila terdapat
lebih dari dua kolom dalam menyusun layout? Hal tersebut sangat
mudah dilakukan, kita hanya perlu menetapkan nilai left pada ketiga
kolomnya, dengan demikian maka kolom akan tampil bersebelahan
sesuai urutan penulisan elemennya.
1. Permasalahan Penerapan Float
Masalah yang akan ditimbulkan adalah jika sebuah elemen induk yang
hanya memiliki satu elemen dengan menerapkan properti float akan
memiliki nilai tinggi 0px. Contohnya berikut.
Pada contoh tersebut, kita bisa melihat bahwa elemen gambar berada
dalam sebuah container div. Namun, container tersebut tidak memiliki
tinggi senilai gambar yang ditampilkan. Mengapa bisa demikian? Untuk
lebih jelasnya, kita coba tambahkan paragraf di dalam container tersebut
tanpa menggunakan properti float.

Hal ini menunjukkan bahwa elemen yang menerapkan float “tidak

dianggap ada” oleh induk elemen yang menaunginya karena dengan
menggunakannya float elemen akan dikeluarkan dari normal flow.

Ada dua cara yang akan dibahas di sini untuk menangani hal tersebut,
yakni dengan menggunakan properti clear dan menetapkan
nilai overflow: auto pada container.

a). Clear Property

Properti clear memang dibuat untuk menghilangkan sifat float. Dengan
demikian, elemen yang menerapkan properti float akan kembali
“dianggap ada”. Namun, untuk menerapkan properti ini kita perlu
membuat sebuah elemen kosong (biasanya menggunakan div tanpa
konten) yang menerapkan properti clear.

Nilai dari properti clear merupakan nilai yang digunakan pada properti
float. Sebab, properti clear akan menghapus sifat float sesuai dengan
nilai yang ditetapkan. Contohnya berikut.
Jika mengubah clear menjadi clear: right, hasilnya akan kembali seperti
hasil sebelum menerapkannya.

Lalu, bagaimana jika terdapat dua elemen yang menerapkan nilai float
berbeda (left dan right)? Ada satu nilai lagi yang dapat menghilangkan
kedua sifat float tersebut, yakni nilai both. Gunakanlah nilai tersebut jika
kita ingin sepenuhnya menghilangkan sifat float pada elemen.

b). Teknik Overflow

Cara kedua adalah dengan menetapkan properti overflow: auto pada
elemen yang menampung elemen float. Sebagian developer lebih
memilih menggunakan cara ini karena lebih praktis dan tidak perlu
membuat elemen baru ketika menggunakannya.
Untuk menerapkannya sangatlah simpel, hanya tambahkan
properti overflow dengan nilai auto pada container.

H. Konfigurasi Meta Tag Viewport untuk

Responsibilitas Layout
(menyesuaikan ukuran website dengan ukuran hp)
I. Specific Style dengan Media Query
Walaupun sudah menetapkan meta tag, viewport tampilan pada mobile
device belum baik. Hal ini karena informasi yang ditampilkan pada elemen
<article> terlalu sempit, malahan informasi dalam elemen <aside> sulit
terbaca.

Berikut adalah aturan penulisan media query.

Pada aturan di atas, kita dapat jabarkan sebagai berikut.

 Media-type: jenis media sebagai acuan bagi browser dalam

menerapkan kode styling. Tipe yang dapat diberikan adalah print,
screen, atau semuanya.
 Media-feature-rule: aturan atau kondisi yang harus terpenuhi agar
kode styling dapat diterapkan. Kondisi yang dimaksud seperti
ukuran viewport, orientasi layar, dan jenis penggunaan perangkat
tunjuk (touchsceen, keyboard navigation, atau mouse).
 Media-block: sekumpulan CSS rule yang akan diterapkan jika
kedua poin sebelumnya terpenuhi.

J. STICKY POSITION

Agar halaman profile tetap muncul diatas

K. Mencari Kesalahan CSS

Salah satu cara yang paling cepat untuk memastikan bahwa CSS yang
telah Anda tulis itu valid dan dapat berjalan adalah menggunakan
berbagai tools online yang tersedia secara gratis. Pengecekan cukup
dengan cara copy-paste kode CSS, upload berkas CSS, atau menulis
alamat situs yang ingin diperiksa.

Berikut beberapa opsi gratis yang tersedia.

 CSS Validation Service by W3C

 CSS Validator Online by codebeautify.org
 CSS Lint

L. Kecilkan Ukuran CSS

Ukuran CSS sangat penting untuk dapat dihemat karena akan memengaruhi seberapa cepat situs
Anda dapat dimuat pada browser. Cara untuk menghemat ukuran berkas CSS adalah dengan
menghapus spasi atau karakter yang tidak diperlukan dari kode. Berikut adalah contoh spasi atau
karakter yang dapat dihapus.

 New line characters (Baris baru).

 Whitespace characters (Spasi).
 Block delimiters (Pembatas block).
 CSS comments (Komentar CSS).

Perbaikan di atas dapat dilakukan secara manual, tetapi Anda juga dapat menggunakan tools
online yang dapat memperbaiki secara otomatis. Inilah beberapa opsi yang tersedia.

 CSSNANO Playground
 CSS Minifier Tool and Compressor
 Minify - JavaScript and CSS minifier