Cara Penggunaan
1. Masukkan Kode CSS:
Paste atau ketikkan kode CSS yang ingin Anda padatkan di dalam `textarea`.
2. Pilih Opsi Tidy:
Gunakan `checkbox` yang tersedia untuk memilih opsi Tidy yang Anda inginkan. Misalnya, Anda dapat menghapus semua komentar dengan mencentang `Strip all comments`.
3. Jalankan Generator:
Klik tombol `Generate` untuk menjalankan Generator kode CSS sesuai dengan opsi yang Anda pilih.
4. Tambahan:
Anda dapat menggunakan tombol `Clear Field` untuk membersihkan `textarea`.
Gunakan tombol `Select All` untuk memilih semua teks di dalam `textarea` untuk kemudian dapat di-copy.
Untuk memudahkan pemahaman, disini aku akan coba buatkan contohnya, cuss simak penjelasan lengkapnya dibawah.
Contoh Strip All Comments:
Sebelum opsi ini diaplikasikan, mungkin terdapat komentar di dalam kode CSS:
/* CSS sebelum menghapus semua komentar */
.header {
/* Warna latar belakang */
background-color: #333;
color: #fff; /* Warna teks */
}
/* Komentar tentang tombol */
.button {
background-color: #007bff;
color: #fff;
}
Setelah menghapus semua komentar menggunakan opsi "Strip all comments":
.header {
background-color: #333;
color: #fff;
}
.button {
background-color: #007bff;
color: #fff;
}
Komentar-komentar dihapus untuk menghasilkan kode CSS yang lebih bersih dan lebih ringkas.
Contoh Super Compact:
Sebelum opsi "Super compact" diaplikasikan, mungkin terdapat indentasi dan ruang yang berlebihan:
/* CSS sebelum compact */
.header {
background-color: #333;
color: #fff;
}
.button {
background-color: #007bff;
color: #fff;
}
Setelah menerapkan opsi "Super compact":
/* CSS setelah super compact */
.header{background-color:#333;color:#fff;}.button{background-color:#007bff;color:#fff;}
Opsi ini menghilangkan indentasi, spasi tambahan, dan memampatkan kode CSS sehingga lebih efisien.
Contoh Keep Indentation:
Sebelum opsi "Keep indentation" diaplikasikan, mungkin terdapat indentasi untuk meningkatkan kejelasan:
/* CSS sebelum mempertahankan indentasi */
.header {
background-color: #333;
color: #fff;
}
.button {
background-color: #007bff;
color: #fff;
}
Setelah menerapkan opsi "Keep indentation":
/* CSS sebelum mempertahankan indentasi */
.header {
background-color: #333;
color: #fff;
}
.button {
background-color: #007bff;
color: #fff;
}
Opsi ini mempertahankan indentasi asli yang digunakan untuk meningkatkan kejelasan dan pemeliharaan kode CSS.
Contoh Remove the Last Semicolon:
Sebelum opsi ini diaplikasikan, mungkin ada beberapa aturan dengan titik koma terakhir yang mungkin tidak diperlukan:
/* CSS sebelum menghapus titik koma terakhir */
.header {
background-color: #333;
color: #fff;
}
.button {
background-color: #007bff;
color: #fff;
}
Setelah menghapus titik koma terakhir
/* CSS setelah menghapus titik koma terakhir */
.header {
background-color: #333;
color: #fff
}
.button {
background-color: #007bff;
color: #fff
}
Opsi ini menghapus titik koma terakhir dari setiap aturan, memastikan hanya satu titik koma digunakan di akhir setiap deklarasi.
Contoh Optimize Colors:
Sebelum optimasi, mungkin kita memiliki beberapa penggunaan warna yang dapat dioptimalkan:
/* CSS sebelum optimasi warna */
.header {
background-color: #333333;
color: #ffffff;
}
.button {
background-color: #007bff;
color: #ffffff;
}
Setelah mengoptimalkan warna untuk menggunakan nilai yang lebih singkat atau format yang lebih efisien:
/* CSS setelah optimasi warna */
.header {
background-color: #333;
color: #fff;
}
.button {
background-color: #07f;
color: #fff;
}
Contoh Combine Multiple Rules:
Sebelum optimasi, kita mungkin memiliki beberapa aturan yang dapat digabungkan:
/* CSS sebelum penggabungan aturan */
.section {
margin-top: 20px;
}
.section {
margin-bottom: 30px;
}
Setelah menggabungkan aturan-aturan yang sebelumnya terpisah:
/* CSS setelah penggabungan aturan */
.section {
margin-top: 20px;
margin-bottom: 30px;
}
Dengan menggabungkan aturan-aturan ini, kita mengurangi jumlah aturan CSS dan meningkatkan kejelasan kode.
Contoh Sort Properties:
Sebelum pengurutan properti, properti-properti mungkin tidak berurutan:
/* CSS sebelum pengurutan properti */
.button {
color: #fff;
background-color: #007bff;
padding: 10px 20px;
display: inline-block;
}
Setelah mengurutkan properti-properti secara alfabetis:
/* CSS setelah pengurutan properti */
.button {
background-color: #007bff;
color: #fff;
display: inline-block;
padding: 10px 20px;
}
Pengurutan properti membantu dalam memelihara dan memahami kode CSS dengan lebih baik.
Contoh Optimize Font Sizes:
Optimasi ukuran font sering kali melibatkan menggunakan nilai yang lebih singkat atau pengaturan yang lebih konsisten:
/* CSS sebelum optimasi ukuran font */
body {
font-size: 16px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
Setelah mengoptimalkan ukuran font untuk konsistensi dan efisiensi:
/* CSS setelah optimasi ukuran font */
body {
font-size: 16px;
}
h1, h2 {
font-size: 2.25rem; /* Menggunakan nilai rem untuk ukuran font */
}
Optimasi ini menggunakan nilai rem yang lebih konsisten dan konservatif untuk ukuran font, mengurangi kebutuhan untuk menentukan ukuran secara berulang.
Dengan menerapkan optimasi-optimasi ini, kamu dapat meningkatkan efisiensi, kejelasan, dan konsistensi dalam kode CSS kamu..
Tujuan Kode
Kode di atas bertujuan untuk membuat sebuah CSS Tidy Generator (merapikan kode CSS) yang memungkinkan pengguna untuk memasukkan kode CSS mereka, lalu merapikan dengan beberapa opsi yang dapat dipilih sesuai kebutuhan. Beberapa opsi ini termasuk menghapus semua komentar, menggabungkan selektor duplikat, mengoptimalkan warna, dan lain-lain.
Kesimpulan
Dengan alat ini, Anda dapat merapikan kode CSS dengan mudah dan cepat. Alat ini juga menyediakan beberapa opsi Tidy yang fleksibel untuk memenuhi berbagai kebutuhan pengoptimalan kode.
Hak Cipta
© 2024, Dibuat oleh Han Haoyu. Semua hak dilindungi. web: www.hanhaoyu.com
Jika kamu membutuhkan bantuan lebih lanjut atau ada pertanyaan tambahan, jangan ragu untuk menghubungi saya!