Alat Berbasis Web untuk Mengoptimalkan, Memformat, dan Memeriksa CSS

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 - tangkapan layar.

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

Bersihkan CSS - tangkapan layar.

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

Galeri Drive CSS- Kompresor CSS - tangkapan layar.

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 - tangkapan layar.

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

Kompresor CSS - tangkapan layar.

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

flumpCakes Style Sheet Optimizer - tangkapan layar.

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 - tangkapan layar.

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 - tangkapan layar.

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 - tangkapan layar.

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

Layanan Validasi W3C CSS - tangkapan layar.

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 - tangkapan layar.

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 - tangkapan layar.

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/