Eliminați regulile css neutilizate pe tot site-ul, site-ul css optimizare, utilizarea css, praf mine

Mai devreme sau mai târziu, fiecare front-end (coder) se confruntă cu o provocare atunci când doriți să verificați întregul site pentru orice reguli CSS neutilizate. Primul lucru pe care vine în minte este de Google și de a găsi un fel de serviciu sau a unui program care va face toate treburile murdare pentru noi.

În popotel scurt și a găsit aceste soluții:

• serviciu plătit unused-css.com
• DustMe Selectori - extensie Firebug pentru Mozilla
• CSS Utilizare - extensie Firebug pentru Mozilla

Deci, începe cu ceea ce avem nevoie de software. Primul lucru pe care avem nevoie de Mozilla Firefox. Odată ce Firefox este instalat, injecteaza FireBug plus.

pregătire inițială a făcut în continuare mai multe detalii despre adăugările de scanare CSS.

Praf Me Selectori

Adaosuri de praf Me Căutători în catalogul oficial al add-on-uri pentru browser-ul nu, îl puteți instala făcând clic pe link-ul și făcând clic pe butonul Install Now (desigur, aveți nevoie pentru a deschide un link FireFox'om). Supliment instalat, reporniți browser-ul și în colțul din dreapta jos avem o pictogramă mătură roz.

După extinderea va scana pagina se deschide o fereastră cu trei tab-uri selectori neutilizate (reguli neutilizate), selectoare folosite (regulile de care sunt utilizate) și log Spider (Spider - scanare site-ul). Cele două butoane de jos pentru a salva documentul și clar rezultatul scanării.

În principiu, dacă trebuie să verificați o pagină, atunci această extensie va va ajuta perfect, voi menționa un minus că, la orice adăugiri de deschidere tot timpul pagină scanată, un control de expansiune mai scurt nu este foarte convenabil, așa că am înscris pe el.

Pentru a verifica pagina de reguli neutilizate trebuie să apese un buton de scanare (scanare durează 30 de secunde sau chiar mai puțin). La prima vedere, se pare că această extensie va scana doar o singură pagină, ce faci cu restul paginii, puteți cere. Și amintiți-vă menținem o hartă a site pentru a ajuta extinde praf Me Căutători, deși, dacă pe de revizuire site-uri au html sitemap, cel mai bine este să-l folosească, dar în cazul în care nu există apoi creați o nouă pagină a site-ului și introduceți sitemap pentru a extinde praf Me Căutători (dacă nu poți apoi a crea o nouă pagină de pe mai jos).

Voi descrie acum succesiunea acțiunilor care urmează să fie scanate:

1. sitemap html deschise
2. apăsați F12 - FireBug deschis
3. du-te la tab-ul CSS Utilizare
4. apăsați butonul Autoscan
5. necesară încărcarea paginii (apăsați pe F5)

Rezultatul a fost prima pagină scanată. Puteți salva rezultatul, și poate continua în continuare scanarea. Vă sugerez să continuați. Continuă scanarea ușoară, nu va trebui să aleagă nimic (deoarece am ales pagini de scanare automată), doar du-te la primul link în harta site-ului (link pentru a deschide într-o fereastră nouă nu este necesară, este necesar ca toată acțiunea are loc într-o singură fereastră).

următoarea notație este indicată la începutul paginii scanate:

• Linie - reguli de linie
• Selector CSS - CSS regulă
• regula CSS folosit (verde deschis) - Văzut
• Văzut înainte de a - reguli CSS care au fost utilizate anterior (verde inchis)
• regulile CSS neutilizate (roșu) - nevazute
• : Hover - reguli CSS pentru elementele care au primit de focalizare (gri)
• (2 scanări) - prezintă numărul de scanări (dacă ați scanat curent de o pagină în mod corespunzător la figura 1)
• export css curățat - salvați imaginea scanată

Poate continua să continue scanarea adevărul va trebui să se întoarcă la harta site-ului (prima ia). Proklikivat grabă nu este necesar, este important ca pagina sa incarcat complet, lucrare de scanare automată, veți vedea (adică, rezultatele scanării vor fi afișate în fereastra FireBug'a).

Extinderea verifica toate fișierele de stil dop. Dacă regulile CSS pe site-ul o mulțime, trebuie să o rotiță de derulare pentru a vedea rezultatele de scanare:

Un astfel de rezultat este afișat după fiecare stiluri de fișiere, în cazul în care mai mult de unul.

Când toate paginile au fost scanate, faceți clic pe link-ul de export curățat css. Acest lucru se va deschide într-o nouă filă, selectați toate și salvați-l într-un fișier cu extensia .css. înainte de fiecare regulă tag-ul neutilizat va fi listat NEUTILIZAT:

Al doilea dezavantaj al acestei metode de scanare este că această extensie nu scanare site-ul pop-up (modal) fereastră, atât de rău, așa că trebuie să copieze regulile CSS pentru ferestre modale.

În ciuda celor două minusuri, în opinia mea, aceasta este cea mai bună metodă de fișier CSS pentru a verifica regulile CSS neutilizate. care există astăzi.

Am aplica pentru a optimiza cele două fișiere de stil de cântărire 360K - 18,000 linii, am fost șocat când am văzut-o. După ce toate manipulările cu ajutorul acestei metode pentru a obține o foaie de stil - 90KB si 1100 linii am fost cu toții mulțumiți de rezultat, și eu sunt prea. Adevărata soluție a fost solicitată pentru o lungă perioadă de timp, data viitoare va fi mult mai rapid, ceea ce este foarte plăcut.

Apropo, dacă ați ales sistemul de WordPress de management al conținutului, în acest articol, puteți afla cum să-l o hartă a site-ului face.

Cu toate acestea, am act de faptul că serviciul de plătit trimite rezultatul scanării în decurs de 24 de ore și în cazul în care site-ul dvs. (resurse) 10 sau 20 de pagini de template-uri, cecul va dura mult mai puțin timp decât cheltuiți pentru a aștepta rezultatele de la ei. Dar, în cazul în care paginile site-ului și un număr foarte mare de a le folosi modele diferite, desigur, este recomandabil să plătească kakieto $ 25 pentru acest serviciu.

Sper că va fi util această metodă pentru a verifica fișierul CSS.

Optimizarea conexiunii Google Maps, dezactivând fișierele inutile de stiluri și fonturi, făcând cartela actuală, în cazul prezenței containerului pe pagina

Astăzi voi împărtăși cu tine scenariul pe care am folosi pentru a verifica un simplu câmpurile de formular pentru a umple înainte de a le trimite la server folosind jQuery (script poate valida mai multe formulare de pe o pagină)

Mult timp, n-am scris nimic despre jQuery, cumva mâinile nu au ajuns. Noi rezolva problema de lucru cu linia de produse / servicii / articole, ascunde ultimul element rând atunci când modificați lățimea liniei cu elementele

Vreau să împărtășesc cu tine capul secțiuni HTML markup, pe care am folosi pentru aspectul site-uri

În această lecție ne vom uita la 5 cross-browser, soluții avansate CSS3 aspect foarte usor de proiecte complexe, creative. În special, vom înțelege cum să facă elemente de transparență, umbre, rotație, gradient și inversiune

În cele din urmă a căzut moment liber, și în funcție de solicitarea dvs., am scris un altul, un mic script pentru slider non-circulară, cu derulare pe orizontală, fără utilizarea de plug-in-uri

= = designul dinamic de design receptiv axiomă. Istoria minimă de dezvoltare de web design: calea lui de la fix la lichide și receptiv la (receptiv, adaptive, receptiv) de proiectare