11 Instrumente utile pentru verificarea, curățarea și optimizarea fișierului dvs. CSS

Minimizarea dimensiunii de fișiere a foii de stil CSS a fost considerată de mulți drept o modalitate bună de a crește viteza de încărcare a site-ului. Într-adevăr, prin reducerea fișierului CSS cu mai multe kilobyte, serverul va dura un timp mai scurt pentru a încărca și va duce la o pagină web mai rapidă.

În cazul în care articolele dvs. au lovit pagina de pornire Digg, acest lucru ar putea fi, de asemenea, unul dintre puțini factori decisivi (există mai mulți), indiferent dacă serverul dvs. se va prăbuși sau nu.

Unele dintre cele mai frecvente metode utilizate pentru a minimiza / optimiza o foaie de stiluri CSS implică eliminarea selectorilor neutilizate, a spațiilor libere neutilizate, a filelor, a comentariilor și a modificării declarației de lungă durată în notații de scurtă durată.

Știu că unii dintre voi nu sunteți suficient de pricepuți pentru a vă modifica propriul cod CSS, deci vă voi oferi câteva dintre instrumentele utile pe care le puteți utiliza pentru a vă optimiza codul CSS, chiar dacă nu aveți nicio cunoaștere a Codare CSS.

Verificați codul CSS

W3C CSS Validator

Validatorul W3C CSS este un instrument pe care îl puteți utiliza pentru validarea CSS. Puteți să descărcați validatorul Java pe computer și să îl utilizați offline sau să utilizați formularul online pentru a verifica codul CSS.

CSS Validator Firefox Add-On

Pentru a vă ușura validarea codului dvs. CSS, există această extensie Firefox - Validator CSS - pe care o puteți instala în browserul dvs. Odată instalat, puteți verifica cu ușurință și rapid codul dvs. cu un clic dreapta al mouse-ului.

CSSCheck

Chiar dacă codul dvs. CSS este validat, nu înseamnă că acesta nu are erori. Validarea înseamnă numai că respectă standardele CSS stabilite de W3C. Dacă doriți să validați și să examinați câteva probleme legate de compatibilitatea browserului cu foaia dvs. de stil, atunci CSSCheck este un instrument bun pentru dvs..

Analizor CSS

Analizorul CSS este un instrument util care vă permite să vă validați foaia de stil față de standardul W3C, să efectuați un test de contrast de culoare și un test pentru a vă asigura că dimensiunile relevante sunt specificate în unitățile relative de măsurare.

În cazul în care vă întrebați, testul contrastului de culoare are rolul de a verifica dacă combinațiile culorilor primare și de fundal oferă un contrast suficient atunci când sunt văzute de cineva care are deficiențe de culoare sau când este vizualizat pe un ecran alb-negru.

Curățați-vă codul CSS

Dust-Me Selectori

Dust-Me Selectors este o extensie Firefox care găsește selectorii CSS neutilizate pe pagina pe care o vizualizați. Pe măsură ce testați pagini ulterioare ale aceluiași domeniu, rezultatul este verificat încrucișat cu datele anterioare și selectorii întâlniți sunt eliminați din listă. Puteți să-l utilizați pentru a testa paginile individuale sau pentru a le accesa pe întregul site.

În cele din urmă, veți primi un raport despre selectorii care nu sunt utilizați nicăieri pe site. Apoi, puteți elimina acești selectori din foaia de stil (codul mai mic înseamnă dimensiune redusă a fișierelor).

Verificarea verificării redundanței CSS

Similar cu selectorii Dust-Me, această unealtă verifică site-ul dvs. pentru selectorii CSS neutilizați și redundanți. Singurul lucru care este diferit este că trebuie să introduceți manual URI pentru fiecare pagină pe care doriți să o testați.

Optimizați și comprimați codul CSS

După ce ați verificat validitatea CSS și ați curățat codul inutil, este timpul să optimizați fișierul CSS și să îl reduceți la cea mai mică dimensiune posibilă.

CSS Tidy

CSS Tidy este un software open source pe care îl puteți utiliza pentru optimizarea și comprimarea fișierului dvs. CSS. Este disponibil în format .exe (numai pentru Windows) și un format de script PHP php (toate platformele, pentru dezvoltatorii web). Ceea ce face CSS Tidy este înlăturarea în principal a comentariului, spațiul alb inutil și schimbarea unor coduri în sintagma. În timpul comprimării, puteți alege între citirea codului sau comprimarea maximă. În funcție de lungimea codului, puteți obține cu ușurință un raport de compresie de până la 30% sau mai mult.

Deoarece CSS Tidy este un proiect open source, au existat mai multe site-uri web care utilizează codul și îl transformă într-un instrument online pe care utilizatorii îl pot utiliza. Aici sunt câțiva dintre ei:

• CLEAN CSS
• Îmbunătățirea codului
• CSS Formatter și Optimizer din portalul CSS

Alte optimizatoare CSS

FlumpCakes CSS Optimizer

Un optimizator simplu care vine cu mai multe opțiuni pentru a alege de la.

Compresor Robson CSS

În timp ce ar putea arăta la fel ca alții, am constatat că rata de compresie pentru compresorul Robson CSS este cea mai mare dintre ele. Deși vine cu mai multe opțiuni pentru a modifica setarea, lăsând toate opțiunile neatinsă (toate opțiunile sunt verificate) produce întotdeauna cel mai bun rezultat.

Compresor CSS Drive CSS

Compresorul CSS oferit de CSS Drive vine în două moduri pe care le puteți utiliza: Regular și Avansat. În modul Regular, trebuie doar să selectați nivelul de compresie dorit (Lumină, Normal sau Super Compact), iar Compresorul CSS va face restul. În modul Avansat, vi se oferă mai multe opțiuni și un cuvânt mai mare despre modul în care doriți ca foaia dvs. de stil să fie optimizată.

Optimizatorul CSS

Optimizatorul CSS de la mabblog.com este o aplicație de linie de comandă pentru Mac și Linux. Este destinat celor care sunt mult mai confortabili cu terminalul decât cu o interfață online. Există, de asemenea, o versiune simplă online disponibilă pentru cei care doresc să o obțină rapid și să o facă.

Sperăm că instrumentele listate aici sunt suficiente pentru a vă optimiza și optimiza foaia de stil CSS. Dacă ați folosit alte instrumente mai utile decât cele menționate mai sus, trimiteți-le la noi în comentarii.

Explorați mai multe despre: Web Design, Dezvoltare Web, Instrumente pentru webmasteri.