10 najboljših orodij za oblikovanje in optimizacijo datotek CSS

Oblikovanje in optimizacija datotek CSS ni več glavobol za spletne razvijalce s pomočjo teh ročno izbranih orodij!


Od začetka uporabe se kaskadni listi slog (CSS) pogosto uporabljajo za obris vizualnih vsebin spletnih strani. Vključujejo opredelitev barv, postavitev, animacije in pisave. Ker je neodvisen od HTML-ja, vam CSS omogoča preprosto prilagajanje predstavitve spletne strani različnim vrstam naprav z različnimi velikostmi zaslona, ​​ne da bi morali spremeniti delček vsebine strani.

CSS se imenuje kaskadno tabelo slogov zaradi načina, kako se vrednosti lastnosti uporabljajo v hierarhiji vsebine. Podrejeni elementi lahko podedujejo ali nadomeščajo vrednosti lastnosti iz svojih nadrejenih elementov. Te zmogljivosti so na voljo v modelu, ki temelji na hierarhičnem območju učinka. Težava tega modela je, da lahko, če se ne uporablja pravilno, resno vpliva na uspešnost spletnega mesta.

In nihče ne mara počasnega spletnega mesta. Zato so nastale potrebe po optimizaciji CSS, skupaj z novo vrsto orodij, ki so izrecno zasnovana za čim bolj čiste in hitre datoteke CSS.

Optimizacijo CSS je mogoče izvesti na več načinov: datoteke CSS je mogoče zmanjšati v velikost, jih je mogoče očistiti, preizkusiti ali potrditi glede pravilnosti, jih lahko pospraviti, oblikovati tako, da razumejo svojo kodo in na splošno lahko boljše uglašen za boljšo uporabniško izkušnjo. Za vsako od teh nalog smo pripravili izbor najboljših orodij.

# Orodja za nastavitev CSS

CSS Minify

CSS Minify je preprosto orodje za poenostavljanje CSS: postopek fotografiranja olepšenega, berljivega, dobro oblikovanega CSS-ja in odstranjevanja vseh njegovih razmikov, vdolbinic, novih vrstic in komentarjev. Tako dobljeni izpopolnjeni CSS je mogoče uspešno uporabiti brez teh elementov. Poleg tega miniranje otežuje CSS, ki ga je težko brati, saj odvrača tatove kode, da bi ukradli vaše pridne tabele.

Ko spremenite kodo, je dobro, da ohranite okrašeno (ne-minificirano) različico, ker jo boste morali v prihodnosti prebrati, če jo boste morali spremeniti.

Plašč

Plašč ni orodje za optimizacijo vašega CSS-ja. Namesto tega je odprtokodna knjižnica CSS, zasnovana s hitrostjo. Je potomec Adobejevega oblikovalskega jezika, razvitega za Brackets, Edge Reflow.

Topcoat vključuje PSD in številne druge oblikovalske artefakte, skupaj s zbirko preprostih in čistih ikon SVG ter slognih vodnikov. Ponuja tudi orodja za primerjalno analizo in domišljijsko družino pisav Adobe Source Sans Pro.

Koda za olepševanje

Koda za olepševanje temelji na CSS Tidy, priljubljenem odprtokodnem analizatorju in optimizaciji CSS. Omogoča vam, da prilepite kodo CSS za obdelavo na besedilno območje ali jo dobite iz naslova URL. Ko opravi svoje delo, prikaže optimizirano kodo skupaj s seznamom izvedenih sprememb. Spremenjeno kodo lahko kopirate v odložišče ali jo shranite v datoteko za kasnejšo uporabo.

Orodje ponuja pomemben in izčrpen seznam možnosti, ki vam omogoča, da njegove rezultate prilagodite svojim željam. Na primer, ponuja pet možnosti za stiskanje, od nizke do najvišje. Druge možnosti vam omogočajo, da med drugim določite razvrščanje, druge oblike stiskanja, odstranjevanje nepotrebnih predmetov.

CSS Nano

Drugo orodje za minifikator CSS je CSS Nano. Ta temelji na orodju, ustvarjenem za preoblikovanje slogov z JavaScript, imenovano PostCSS. Zahvaljujoč arhitekturi vtičnikov tega orodja so ga ustvarjalci CSS Nano lahko zgradili iz majhnih modulov z omejenimi funkcijami.

CSS Nano bo privzeto prevzel datoteko CSS, ki ji jo daste v obdelavo, in na njej naredil samo varne optimizacije. Toda orodje ponuja tudi možnosti, da stiskanje potisnete do meja. Delovanje CSS bo še vedno enako, vendar bo njegov nepotrebni presledki odstranjen. Prav tako se bodo njegovi identifikatorji stisnili, nepotrebne definicije pa bodo popolnoma očiščene.

# Orodja za čiščenje CSS

Umazano označevanje

Umazano označevanje naredi ravno obratno kot minifiers: vzame ne glede na to, katero kodo hranite in jo očisti, kar omogoča enostavno branje – dokler je veljavna koda CSS. Nastala koda je odlično polepšana.

Ustvarjalci Dirty Markup pravijo, da so s pomočjo svojega orodja okrasili skoraj milijardo vrstic kode (ne samo CSS, ampak tudi HTML in JavaScript)..

Izbirniki za prah

Izbirniki za prah je bil ustvarjen za skeniranje spletnega mesta in iskanje neporabljenih izbirnikov CSS, da bi jih odstranili in zmanjšali velikost vaše kode. Deluje kot dodatek za Firefox in Opera.

Izbirniki Dust-Me lahko delujejo na posamezni strani ali pa se plazijo po celotnem zemljevidu zemljevidov in prikažejo podrobnosti vseh najdenih tabel slogov in izbirnikov ter jih organizirajo v uporabljene in neuporabljene. Različica Firefox lahko med brskanjem samodejno skenira strani. Upoštevati morate le, da lahko pri tem dogodki mutacije sprožijo dodatne preglede, če se stran spremeni.

CSS Lint

CSS Lint ponuja minimalističen vmesnik: samo veliko besedilno polje, v katero prilepite svojo CSS kodo, da jo boste “povezali”. Ne pove, kaj bo postopek povezovanja storil z vašo kodo, ampak opozorilno sporočilo na vrhu strani vam pove, da bodo rezultati škodili vašim občutkom – in tudi pomagati bolje kodirati.

CSS Lint potrdi skladnjo kode glede na nabor vnaprej določenih pravil. S tem zazna morebitne neučinkovitosti in napake. Z malo prilagoditve vam CSS Lint omogoča izbiro nabora pravil, ki jih želite uveljaviti.

# Orodja za testiranje / preverjanje CSS

Stresni test CSS

Stresni test CSS deluje kot zaznamek (majhen košček kode JavaScript), ki uporablja stresno testiranje na CSS katere koli dane spletne strani. Orodje indeksira vse elemente v kodi CSS in njihove razrede. Nato se začne s stresnim testom, tako da se odstranijo razredi drug za drugim in določi čas, ki traja za pomikanje po strani.

Če se čas, ki ga potrebuje stran za pomikanje, pri odstranjevanju izbirnika znatno zmanjša, potem ta izbirnik predstavlja problematično področje, ki ga je treba odstraniti ali popraviti. To orodje deluje še posebej z domišljijsko kodo CSS3, ki omogoča zaokrožene vogale, motnost, besedilne sence in senčne škatle. Vse te učinke je mogoče narediti v CSS3, ne da bi uporabili rezanje slike, posebno skriptno obdelavo ali dodali dodatne elemente.

Toda CSS3 lahko povzroči težave: ena lastnost lahko povzroči vidne težave s premikanjem strani in drsenjem strani. Tu lahko pride v poštev stresni test CSS.

Služba za potrjevanje CSS

Služba za potrjevanje CSS potrjuje kaskadne tabele stilov in (X) HTML s tabelami. Orodje preveri lastnosti, opredeljene v vseh različicah CSS. Če želite preveriti stran ali datoteko CSS, morate le vnesti njen URI (enoten identifikator virov) in nastaviti nekaj osnovnih možnosti, na primer profil (vrsta CSS, ki ga želite preveriti), ciljno napravo, opozorila, ki jih želite pokazati in kaj storiti z razširitvami ponudnika – povezane težave (prikaži napake ali opozorila).

Ko ste pripravljeni, pritisnete gumb Preveri in počakate na rezultate. Končno poročilo vam bo prikazal izčrpen seznam napak in opozoril, kjer boste med številnimi drugimi težavami, ki jih morate popraviti v CSS-ju, našli neveljavne lastnosti, napake sintakse, neznane razširitve ponudnika in jih prilagoditi. V poročilu bodo na vaši strani prikazane tudi vse veljavne kode CSS.

BackstopJS 3

BackstopJS 3 avtomatizira vizualno regresijsko testiranje odzivnih spletnih uporabniških vmesnikov. Svoje delo opravi s primerjavo serije posnetkov zaslona DOM. Ponuja zanimiv seznam funkcij: obstaja poročanje v brskalniku, nastavitev postavitve tiskanja in zaslona ter nekatere druge posebne funkcije, kot so filtriranje zaslona in referenčni / testni / vizualni različni inšpektor.

Z uporabo skriptov Puppeteer in ChromyJS lahko BackstopJS 3 simulira interakcije uporabnikov in lahko preskusi s Chromom brez glave. Da bi odpravil težave pri upodabljanju med platformami, ima tudi integrirano upodabljanje dockerjev. Orodje lahko deluje globalno ali lokalno kot samostojen paket, poleg tega pa se lepo igra s CI in nadziranjem vira. BackstopJS 3 je zelo enostaven za uporabo: s samo tremi ukazi bi lahko prehodili precej dolgo pot.

Zaključek

Upam, da vam zgornja orodja za CSS pomagajo optimizirati datoteke CSS v spletni aplikaciji za boljše delovanje. Če vas zanima učenje naprednega CSS-a, to preverite sijajen tečaj.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map