Leading portal for news, information, and resources for the Connected Generations

19/02/2015

5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS

5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS - Saat website Anda mulai berkembang, anda membutuhkan kode ini. Seperti kode Anda, CSS mungkin tiba-tiba menjadi sulit untuk mempertahankan, dan Anda mungkin akan menimpa CSS yang lain. Hal ini mempersulit Anda mungkin dan berakhir dengan banyak bug. 

Jika hal ini terjadi, saatnya bagi Anda untuk mengaudit CSS situs Anda. Audit CSS Anda akan memungkinkan Anda untuk mengidentifikasi bagian-bagian dari CSS Anda yang tidak dioptimalkan. Anda juga dapat mengurangi ukuran file stylesheet dengan menghilangkan baris kode yang memperlambat kinerja situs Anda.

5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS_

Berikut 5 Tool yang bagus untuk membantu Anda mengaudit dan mengoptimalkan CSS :

1. Type-o-matic 

Jenis-o-matic adalah Firebug plugin untuk menganalisis font yang digunakan dalam website.
Plugin ini memberikan laporan visual dalam sebuah tabel, bantalan properti font seperti keluarga font, ukuran, berat, warna, dan juga berapa kali font yang digunakan dalam halaman web. Melalui tabel laporan, Anda dapat dengan mudah mengoptimalkan penggunaan font, menghapus apa yang tidak perlu, atau menggabungkan gaya yang terlalu mirip.

 

5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS 2_

2. CSS Lint 


CSS Lint adalah alat linting yang menganalisis sintaks CSS berdasarkan parameter tertentu yang membahas kinerja, aksesibilitas, dan kompatibilitas CSS Anda.
Anda akan terkejut dengan hasilnya, berharap banyak peringatan di CSS Anda. Namun, kesalahan ini pada akhirnya akan membantu Anda memperbaiki sintaks CSS, dan membuatnya lebih efisien. Selain itu, Anda juga akan menjadi penulis CSS yang lebih baik.

 

5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS 2_

3. CSS ColorGuard 


CSS colorguard adalah alat yang relatif baru.
Ini dibangun sebagai modul Node dan berjalan di semua platform: Windows, OS X, dan Linux. CSS colorguard adalah alat baris perintah yang akan memberitahu Anda jika Anda menggunakan warna yang sama dalam stylesheet Anda; misalnya #F3f3f3 cukup dekat dengan #f4f4f4, sehingga Anda mungkin ingin mempertimbangkan menggabungkan keduanya. CSS colorguard dikonfigurasi, Anda dapat mengatur batas kesamaan serta mengatur warna yang Anda inginkan alat untuk mengabaikan.


4. CSS Dig 


CSS Dig adalah script Python dan bekerja secara lokal pada komputer Anda.
CSS Dig akan menjalankan pemeriksaan menyeluruh dalam CSS Anda. Ini akan membaca dan menggabungkan sifat mis semua deklarasi warna latar belakang akan pergi di bawah bagian belakang. Dengan cara itu Anda dapat dengan mudah membuat keputusan berdasarkan laporan ketika mencoba untuk membakukan CSS Anda sintaks misalnya Anda mungkin menemukan warna di gaya dengan deklarasi warna berikut.

color: #ccc;
color: #cccccc;
color: #CCC;
color: #CCCCCC;
Deklarasi warna ini melakukan hal yang sama. Anda mungkin juga pergi dengan #ccc atau dengan # ccc modal sebagai standar. CSS Dig dapat mengekspos redundansi ini untuk properti CSS lain juga, dan Anda akan dapat membuat kode Anda lebih konsisten.


5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS 3_

5. Dust-Me


Dust-Me adalah add-on untuk Firefox dan Opera yang akan menunjukkan pemilih yang tidak digunakan dalam stylesheet Anda.
Ini akan ambil semua stylesheet dan pemilih yang ditemukan di situs web Anda dan mencari yang penyeleksi Anda benar-benar menggunakan dalam halaman web. Ini akan ditampilkan dalam sebuah laporan, maka Anda dapat menekan tombol Clean dan akan membersihkan mereka pemilih yang tidak terpakai dan simpan ke file CSS baru.



5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS 4_

Anda dapat men-download ini alat dari halaman Firefox Addons atau situs developer, dan jika Anda adalah penggemar Opera Anda bisa mendapatkannya dari halaman
Opera Extensions Gallery.

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : 5 Tool Untuk Membantu Audit & Mengoptimalkan Kode CSS

Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript![ ? ]