Alat Perkemas & Kecilkan CSS

Susun semula inden CSS yang berselerak untuk mudah dibaca, atau kecilkan saiznya untuk dilancarkan — dengan mod selamat yang tidak akan mengubah susunan peraturan anda.

Input CSS

Inden
Pemampatan
styles.css
Tampal atau taip CSS untuk memperkemas atau mengecilkannya.

CSS anda diformatkan dan dikecilkan di dalam pelayar anda. Tiada apa-apa yang dimuat naik ke BroBroGo.

Soalan Lazim

Apakah perbezaan antara perkemas (beautify) dan kecilkan (minify)?

Perkemas (Beautify) menyusun semula inden dan menjarakkan gaya anda supaya mudah dibaca dan diedit. Kecilkan (Minify) pula melakukan sebaliknya — ia membuang ruang kosong dan ulasan yang tidak diperlukan oleh pelayar serta memendekkan nilai seperti warna, supaya fail menjadi lebih kecil dan dimuatkan dengan lebih cepat. Perkemas semasa anda bekerja, kecilkan sebelum anda melancarkannya.

Apakah fungsi tetapan pemampatan Selamat (Safe) dan Dioptimumkan (Optimized)?

Mod Selamat (Safe) hanya membuang ruang kosong dan ulasan serta memendekkan nilai, mengekalkan setiap peraturan tepat di tempat anda menulisnya. Mod Dioptimumkan (Optimized) pergi lebih jauh dengan menggabungkan pemilih dan peraturan pendua untuk fail yang lebih kecil — ia boleh menyusun semula peraturan, jadi untuk fail gaya yang bergantung pada susunan asal, adalah disyorkan untuk menyemaknya terlebih dahulu sebelum dilancarkan. Ulasan yang ditandakan dengan /*! … */ akan dikekalkan dalam kedua-dua mod.

Adakah tindakan mengecilkan (minify) akan mengubah rupa halaman saya?

Dalam mod Selamat (Safe), tidak — gaya anda akan dipaparkan dengan cara yang sama persis. Ia merapatkan ruang kosong, membuang ulasan biasa dan menulis semula nilai dalam bentuk setara yang lebih pendek (seperti #ffffff kepada #fff), dan ia tidak sekali-kali mengubah awalan vendor atau sintaks moden anda. Mod Dioptimumkan (Optimized) juga menggabungkan peraturan, yang kelihatan serupa pada hampir setiap fail gaya tetapi perlu disahkan jika fail anda bergantung pada susunan peraturan.

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini:

Fungsi Alat Perkemas & Kecilkan CSS

Alat Perkemas & Kecilkan CSS berfungsi untuk memproses kod CSS yang anda sediakan melalui dua kaedah utama. Pertama, ia boleh menyusun semula format kod (beautify) supaya lebih mudah dibaca dan diedit. Kedua, ia boleh memampatkan kod (minify) untuk mengurangkan saiz fail bagi mempercepatkan masa pemuatan halaman web. Pengguna boleh memilih cara alat ini memproses CSS, kemudian menyalin hasil akhir atau memuat turunnya sebagai fail.

Proses ini sangat berguna untuk pembangun laman web (front-end developers), individu yang menyelenggara fail gaya (stylesheet) sedia ada, serta pengguna yang perlu membaca CSS yang telah dimampatkan atau menyusun semula inden fail gaya yang berselerak. Selain itu, ia membantu pengguna yang ingin mengecilkan saiz fail gaya untuk kegunaan produksi tanpa mengubah cara halaman web dipaparkan.

Input dan Parameter Pemprosesan

Alat ini menerima input kod CSS dengan had saiz maksimum sebanyak 500,000 aksara. Sebelum memproses kod, anda boleh menetapkan beberapa parameter berikut:

  • Inden: Pilihan jarak inden yang tersedia adalah 2 spaces, 4 spaces, atau tab.
  • Pemampatan:
    • Selamat: Mod ini hanya membuang ruang kosong (whitespace) serta ulasan, dan memendekkan nilai tertentu. Setiap peraturan (rule) akan kekal tepat pada kedudukan asal ia ditulis.
    • Dioptimumkan: Mod ini menggabungkan pemilih (selectors) dan peraturan yang bertindih atau pendua untuk menghasilkan saiz fail yang lebih kecil. Proses ini boleh mengubah susunan asal peraturan CSS anda.

Output dan Metrik Prestasi

Selepas kod diproses, alat ini akan memaparkan beberapa metrik prestasi dan menyediakan fungsi tindakan:

  • Baris: Jumlah baris yang terkandung dalam CSS yang telah diproses.
  • Aksara: Jumlah aksara dalam CSS yang telah diproses.
  • Saiz: Saiz bait UTF-8 bagi CSS yang telah diproses.
  • Dikecilkan — {pct}% lebih kecil: Petunjuk ini akan muncul apabila CSS dikecilkan, menunjukkan peratusan pengurangan saiz fail yang berjaya dicapai.
  • Muat turun: Butang untuk memuat turun hasil CSS yang telah diproses sebagai fail bernama styles.css.
  • Salin: Butang untuk menyalin kod CSS yang telah diproses terus ke papan klip (clipboard) anda.

Peraturan Pemprosesan dan Pengendalian Ralat

Alat ini beroperasi mengikut peraturan teknikal dan pengendalian ralat yang khusus:

  • Pengekalan Ulasan Khas: Ulasan penting yang ditandakan dengan format /*! … */ akan tetap dikekalkan dan tidak akan dibuang, sama ada anda menggunakan tetapan pemampatan Selamat mahupun Dioptimumkan.
  • Proses Perkemas: Alat akan membina semula inden dan menjarakkan gaya untuk meningkatkan kebolehbacaan.
  • Proses Kecilkan: Alat akan membuang semua ruang kosong dan ulasan biasa, serta memendekkan nilai seperti kod warna (contohnya, #ffffff akan ditulis sebagai #fff).
  • Sintaks Moden: Dalam mod Selamat, awalan vendor (vendor prefixes) dan sintaks moden tidak akan diubah atau diganggu.
  • Ralat Input Kosong: Jika input yang dimasukkan kosong, alat akan memaparkan mesej "Tiada CSS ditemui untuk dikecilkan — semak input untuk ralat sintaks".
  • Ralat Kegagalan Proses: Jika CSS yang dimasukkan tidak dapat diproses akibat masalah struktur, alat akan memaparkan mesej "Tidak dapat memproses CSS ini". Sekiranya input mempunyai kandungan tetapi proses pengecilan menghasilkan rentetan kosong, ini menandakan terdapat isu sintaks pada kod anda.
  • Had Saiz: Jika input CSS melebihi had 500,000 aksara, alat akan memaparkan mesej "Fail gaya ini terlalu besar untuk diproses. Sila cuba fail yang lebih kecil".

Privasi dan Keselamatan Data

CSS anda diformatkan dan dikecilkan di dalam pelayar anda. Tiada apa-apa yang dimuat naik ke BroBroGo. Kesemua operasi pemprosesan kod berlaku secara lokal pada peranti anda, memastikan data kod sumber anda tidak dihantar ke mana-mana pelayan luar.

Soalan Lazim (FAQ)

Apakah perbezaan antara perkemas (beautify) dan kecilkan (minify)? Perkemas (Beautify) menyusun semula inden dan menjarakkan gaya anda supaya mudah dibaca dan diedit. Kecilkan (Minify) pula melakukan sebaliknya — ia membuang ruang kosong dan ulasan yang tidak diperlukan oleh pelayar serta memendekkan nilai seperti warna, supaya fail menjadi lebih kecil dan dimuatkan dengan lebih cepat. Perkemas semasa anda bekerja, kecilkan sebelum anda melancarkannya.

Apakah fungsi tetapan pemampatan Selamat (Safe) dan Dioptimumkan (Optimized)? Mod Selamat (Safe) hanya membuang ruang kosong dan ulasan serta memendekkan nilai, mengekalkan setiap peraturan tepat di tempat anda menulisnya. Mod Dioptimumkan (Optimized) pergi lebih jauh dengan menggabungkan pemilih dan peraturan pendua untuk fail yang lebih kecil — ia boleh menyusun semula peraturan, jadi untuk fail gaya yang bergantung pada susunan asal, adalah disyorkan untuk menyemaknya terlebih dahulu sebelum dilancarkan. Ulasan yang ditandakan dengan /*! … */ akan dikekalkan dalam kedua-dua mod.

Adakah tindakan mengecilkan (minify) akan mengubah rupa halaman saya? Dalam mod Selamat (Safe), tidak — gaya anda akan dipaparkan dengan cara yang sama persis. Ia merapatkan ruang kosong, membuang ulasan biasa dan menulis semula nilai dalam bentuk setara yang lebih pendek (seperti #ffffff kepada #fff), dan ia tidak sekali-kali mengubah awalan vendor atau sintaks moden anda. Mod Dioptimumkan (Optimized) juga menggabungkan peraturan, yang kelihatan serupa pada hampir setiap fail gaya tetapi perlu disahkan jika fail anda bergantung pada susunan peraturan.

Alat Perkemas & Kecilkan HTMLSusun semula inden HTML yang berselirat untuk mudah dibaca, atau kecilkan saiznya untuk dilancarkan — dengan semakan pilihan untuk tag yang rosak.Pengoptimasi SVGBersihkan kod SVG dan kecilkan saiznya tanpa mengubah rupa grafik.Alat Perkemas & Kecilkan JavaScriptSusun semula inden JavaScript yang dikecilkan atau dikaburkan supaya anda boleh membacanya, atau kecilkan kod anda sendiri untuk saiz pelancaran yang lebih kecil.Kalkulator CSS clamp()Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.Penjana KecerunanBina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.Penjana Box ShadowSeret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.Penukar WarnaTukar warna antara HEX, RGB, HSL, HSV, CMYK dan LAB — edit mana-mana medan dan yang lain akan dikemas kini semasa anda menaip.Pemformat JSONFormat, sahkan dan kecilkan JSON serta-merta.