Untuk memastikan bahwa halaman web Anda dirender dengan benar dan cepat, berikut adalah kompilasi dari beberapa pengoptimal / kompresor CSS gratis berbasis web, pembuat kode, dan layanan validasi . Lihat dan pilih yang paling cocok untuk Anda.
Mengoptimalkan dan Kompresi
CSS Optimizer
Pengoptimal CSS adalah pengoptimal online sederhana yang memproses CSS Anda saat ini dan menampilkan versi terkompresi. Anda memiliki opsi untuk menautkan ke URL stylesheet Anda, mengunggah file CSS, atau secara langsung memasukkan gaya Anda. Ini adalah alat sederhana yang “plug-and-chug” – tidak ada opsi, jadi prosedur optimisasi akan tetap sama untuk semua input Anda (bagus jika Anda ingin membakukan pengaturan kompresi).
Clean CSS
CSS bersih didasarkan pada minifier CSS populer, CSSTidy . Anda dapat mengatur tingkat kompresi yang Anda inginkan (trade-off ke kompresi yang lebih tinggi adalah keterbacaan yang lebih sulit) dan menyesuaikan opsi kompresi. Itu mencetak laporan baris demi baris setelah itu untuk menunjukkan dengan tepat apa yang telah diubah. Lihat juga CSS Formatter dan Pengoptimal, yang menggunakan versi CSSTidy yang lebih baru (1.3dev).
CSS Drive Gallery- CSS Compressor
Kompresor CSS Drive CSS memiliki dua mode, mode Reguler dan mode Advanced (yang memiliki beberapa opsi yang dapat Anda atur). Anda dapat menghapus komentar (menghapus komentar) atau menentukan untuk menghapus komentar yang melebihi batas karakter tertentu, sehingga mempertahankan komentar yang pendek. Mode biasa sangat cocok untuk mereka yang tidak pilih-pilih – pilih saja antara Light, Normal, dan kompresi Super Compact dan Anda siap untuk bergoyang.
Online CSS Optimizer
Pengoptimal CSS Online adalah alat pengoptimalan CSS sederhana lain yang didasarkan pada aplikasi command-line pengoptimal CSS untuk OS X dan Linux. Anda memiliki dua cara untuk memasukkan CSS Anda: baik melalui kotak teks yang disediakan pada halaman atau secara langsung menghubungkan ke stylesheet Anda. Kadang-kadang Anda akan menemukan bahwa Anda perlu membalik kompresi – Anda dapat melakukannya dengan menggunakan aplikasi CSS Uncompress di situs.
CSS Compressor
Alat kompresi CSS berbasis web populer lainnya adalah Kompresor CSS open-source Robson , (lihat kode sumber PHP Compressor CSS ). Ada banyak opsi kompresi yang dapat Anda atur yang berkaitan dengan warna, pengukuran (unit), aturan, dan properti CSS. CSS Compressor juga menyediakan utilitas Combine yang berguna untuk secara bersamaan menggabungkan dan mengompresi hingga tiga file CSS yang terpisah.
flumpCakes Style Sheet Optimizer
The flumpCakes Style Sheet Optimizer adalah optimizer lain dan formatter dengan beberapa pilihan. Ini memberi Anda pilihan untuk menggabungkan atribut latar belakang, font, daftar, dan perbatasan secara otomatis ke dalam notasi tangan pendek dan opsi Pretty Print yang membakukan format kode. Salah satu fitur keren adalah fitur Backlink yang memberikan Anda URL yang dapat Anda bookmark dan kembali kapan saja untuk melihat keadaan terkompresi stylesheet Anda.
Memformat
FormatCSS
FormatCSS memungkinkan Anda untuk menempelkan kode CSS yang valid, mengoreksi dan menstandarisasi kode sumber Anda. Ada beberapa pengaturan dan aturan yang tersedia yang dapat Anda terapkan untuk mencapai jenis format yang Anda inginkan – termasuk memesan CSS Anda secara alfabet, menghilangkan huruf besar-besar kode Anda, dan beberapa opsi untuk berurusan dengan gaya.
prettyprinter.de
prettyprinter.de tidak terbatas pada CSS – ia juga memformat PHP, Java, C ++, C, Perl, dan JavaScript – jadi ini adalah “one-stop-shop” yang hebat untuk kebutuhan format Anda jika Anda kebetulan bekerja dengan yang lain bahasa yang didukung.Ini memiliki total 13 opsi berbeda yang dapat Anda atur termasuk “Reduce Whitespace”, “Hapus baris kosong”, dan secara otomatis menambahkan baris baru setelah kurung keriting.
Tabifier
Tabifier adalah alat web multi-bahasa yang dirancang khusus untuk membakukan indentasi dalam kode sumber. Ini mendukung HTML, CSS, dan C Style. Ini adalah alat sederhana, sangat baik untuk memformat indentasi Anda dengan cepat.
Memvalidasi dan Memeriksa
The W3C CSS Validation Service
Mungkin layanan validasi berbasis web yang paling umum untuk CSS adalah Layanan Validasi W3C CSS . Ini sangat mudah digunakan, cukup masukkan URL stylesheet Anda dan itu akan menampilkan status stylesheet Anda dan menunjukkan kesalahan, peringatan, dan masalah lainnya.
Juicy Studio: Penganalisis CSS
Juicy Studio CSS Analyzer menggabungkan layanan validasi W3C dengan pemeriksaan tambahan kontras warna (membantu untuk masalah aksesibilitas gangguan penglihatan) dan unit pengukuran yang digunakan dalam kode sumber Anda. Anda dapat memasukkan CSS baik melalui URL atau menyalin kode Anda ke kotak teks yang disediakan pada halaman. Hasilnya adalah rincian kesalahan dan peringatan yang sangat terperinci tentang CSS Anda, mirip dengan Layanan Validasi W3C CSS.
CSS Redundancy Checker
CSS Redundancy Checker adalah alat sederhana untuk memeriksa untuk melihat apakah Anda memiliki gaya berlebihan yang dapat digabungkan bersama. Ini mengurangi gaya yang tidak dibutuhkan dan merupakan cara yang baik untuk memeriksa pekerjaan Anda. Ini adalah proses tiga langkah: cukup tautkan ke stylesheet Anda, letakkan beberapa halaman yang menggunakan stylesheet, dan tekan tombol “centang”. Outputnya adalah daftar saran dan tempat terperinci di mana Anda dapat mengurangi kode dengan menggabungkan gaya redundan.
Sumber: https://www.webfx.com/blog/web-design/css_code_optimization_formatting_validation/