10 parimat tööriista CSS-failide vormindamiseks ja optimeerimiseks

CSS-failide vormindamine ja optimeerimine pole nende käsitsi valitud tööriistade abil veebiarendajatele enam peavalu!


Alates selle loomisest on kaskaadlaadsete stiililehti (CSS) laialdaselt kasutatud veebilehtede visuaali visandamiseks. Need hõlmavad värvide määratlust, paigutusi, animatsiooni ja fonte. HTML-ist sõltumatult võimaldab CSS hõlpsalt kohandada veebilehe esitlust erinevat tüüpi ekraanidele, erineva ekraanisuurusega seadmetele, ilma et peaksite natuke lehe sisu muutma.

CSS-i nimetatakse kaskaadseks laadileheks sellepärast, kuidas omaduste väärtusi rakendatakse sisu hierarhias. Lapseelemendid võivad omandiväärtused oma vanematelt elementidelt pärida või neid alistada. Need võimalused pakutakse mudeli kaudu, mis põhineb efekti hierarhilisel ulatusel. Selle mudeli probleem on see, et kui seda ei kasutata õigesti, võib see tõsiselt mõjutada veebisaidi toimivust.

Ja kellelegi ei meeldi loid veebisait. Seetõttu tekkisid neil CSS-i optimeerimise vajadus koos uue sortiga tööriistadega, mis on selgesõnaliselt loodud CSS-failide võimalikult ilusaks ja kiireks muutmiseks.

CSS-i optimeerimist saab teha mitmel viisil: CSS-failide suurust saab vähendada, neid saab puhastada, nende õigsust saab testida või kinnitada, neid saab korrigeerida, vormindada, et mõista nende koodi ja üldiselt parem, kui neid saab parema kasutajakogemuse võimaldamiseks häälestatud. Kõigi nende ülesannete jaoks valisime parimate tööriistade valiku.

# CSS-i häälestamise tööriistad

CSS Minify

CSS Minify on lihtne tööriist CSS-i minimeerimiseks: ilustatud, loetava ja hästi vormitud CSS-i võtmine ning kogu selle vahekauguse, taande, ridade ja kommentaaride eemaldamine. Saadud minimeeritud CSS-i saab ilma nende elementideta edukalt kasutada. Samuti raskendab minimeerimine CSS-i lugemist, hoides ära vargaid teie raskesti töötatud stiililehtede varastamise eest.

Koodi minimeerimisel on hea nõu hoida selle ilustatud (minimeerimata) versioon, sest tulevikus peate seda oskama lugeda, kui peaksite seda muutma..

Pealislakk

Pealislakk ei ole tööriist teie CSS-i optimeerimiseks. Selle asemel on see avatud lähtekoodiga CSS-teek, mis on loodud kiirust silmas pidades. See on sulgude jaoks välja töötatud Adobe kujunduskeele Edge Reflow järeltulija.

Topcoat sisaldab PSD-d ja paljusid muid kujunduselemente koos lihtsate ja puhaste SVG-ikoonide ning stiilijuhendite kollektsiooniga. See pakub ka võrdlusuuringute tööriistu ja väljamõeldud Adobe Source Sans Pro fondiperekonda.

Koodi kaunistaja

Koodi kaunistaja põhineb populaarsel avatud lähtekoodiga CSS-i parseril ja optimeerijal CSS Tidy. See võimaldab teil kleepida CSS-koodi tekstiväljale töötlemiseks või URL-ist saada. Pärast oma töö tegemist näitab see optimeeritud koodi koos tehtud muudatuste loendiga. Muudetud koodi saate kopeerida lõikelauale või salvestada faili hilisemaks kasutamiseks.

Tööriist pakub olulist ja põhjalikku loendit võimalustest, mille abil saate tulemusi kohandada vastavalt oma eelistustele. Näiteks pakub see viit pakkimisvõimalust, alates madalast pakkimisest kuni kõrgeima pakkimiseni. Muud valikud võimaldavad teil määrata sorteerimist, muid pakkimisvorme, mittevajalike üksuste eemaldamist.

CSS Nano

Veel üks CSS-i minimeerimise tööriist on CSS Nano. See põhineb tööriistal, mis on loodud stiilide teisendamiseks JavaScripti abil ja mida nimetatakse PostCSS. Tänu selle tööriista pistikprogrammide arhitektuurile suutsid CSS Nano loojad selle välja ehitada piiratud funktsioonidega moodulitest.

Vaikimisi võtab CSS Nano teie antud CSS-faili töötlemiseks ja optimeerib seda ainult ohutult. Kuid tööriist pakub ka võimalusi, kuidas suruda tihendamine piiridesse. CSS töötab endiselt samamoodi, kuid selle tarbetu tühik eemaldatakse. Samuti tihendatakse selle identifikaatorid ja selle tarbetud määratlused tühjendatakse täielikult.

# CSS puhastustööriistad

Räpane märgistus

Räpane märgistus toimib täpselt vastupidiselt minifiigritele: võtab ükskõik millise koodi, mille te selle söödate, ja puhastab selle, muutes selle hõlpsaks lugemiseks – kuni see kehtib CSS-kood. Saadud kood on suurepäraselt kaunistatud.

Dirty Markup loojad väidavad, et nende tööriista abil on kaunistatud ligi miljard koodirida (arvestades mitte ainult CSS-i, vaid ka HTML-i ja JavaScripti).

Dust-Me valijad

Dust-Me valijad loodi veebisaidi skannimiseks ja kasutamata CSS-i valijate leidmiseks nende eemaldamiseks ja teie koodi suuruse vähendamiseks. See töötab Firefoxi ja Opera lisandmoodulina.

Dust-Me valijad saavad töötada ühel lehel või indekseerida kogu saidiplaani, näidates teile kõigi leitud stiililehtede ja valijate üksikasju, korraldades need kasutatud ja kasutamata kujul. Firefoxi versioon on sirvimise ajal võimeline automaatselt lehti skannima. Peaksite arvestama ainult sellega, et seda tehes võivad mutatsioonisündmused lehe muutumisel põhjustada täiendavaid skaneeringuid.

CSS Lint

CSS Lint pakub minimalistlikku liidest: lihtsalt suur tekstkast, kuhu kleepige oma CSS-kood, et see oleks linitud. See ei ütle, mida värvimisprotsess teie koodile mõjutab, kuid lehe ülaosas olev hoiatussõnum ütleb teile, et tulemused kahjustavad teie tundeid – ja see aitab ka paremini koodi kodeerida.

CSS Lint valideerib teie koodi süntaksi etteantud reeglite komplekti alusel. Seda tehes tuvastab see võimalikud ebatõhusused ja vead. Pisut kohandades annab CSS Lint teile võimaluse valida reeglite komplekt, mida soovite jõustada.

# CSS-i testimise / valideerimise tööriistad

CSS-i stressitesti

CSS-i stressitesti töötab järjehoidjana (väike JavaScripti koodi tükk), mis rakendab iga veebisaidi CSS-ile stressitesti. Tööriist indekseerib kõik CSS-koodi elemendid ja nende klassid. Seejärel alustatakse stressitestiga, eemaldades klassid ükshaaval ja määrates, kui kaua lehe kerimiseks aega kulub.

Kui lehe kerimiseks kuluv aeg väheneb valija eemaldamisel märkimisväärselt, tähistab see valija probleemset piirkonda, mis tuleks eemaldada või parandada. See tööriist töötab eriti väljamõeldud CSS3-koodiga, mis võimaldab ümardatud nurki, läbipaistmatust, tekstivarju ja kasti varje. Kõiki neid efekte saab CSS3-s teha ilma pildi viilutamist, spetsiaalseid skriptimisi või täiendavaid elemente lisamata.

Kuid CSS3 võib põhjustada probleeme: ühe atribuudi tulemuseks võivad olla nähtavad joonised ja lehekülje kerimisega seotud probleemid. Seal võib CSS-i stressitesti abiks olla.

CSS-i valideerimisteenus

CSS-i valideerimisteenus valideerib kaskaadseid stiililehti ja (X) HTML-i stiililehtedega. Tööriist kontrollib kõigi CSS-i versioonide määratletud atribuute. Lehe või CSS-faili valideerimiseks peate lihtsalt sisestama selle URI (ühtne ressursi identifikaator) ja määrama mõned põhilised valikud, näiteks profiil (kontrollitava CSSi tüüp), sihtseade, kuvatavad hoiatused ja tarnijalaienditega pistmist. -seotud probleemid (kuvada vigu või hoiatusi).

Kui olete kõik valmis, vajutad nuppu Kontrolli ja ootate tulemusi. Lõpparuandes kuvatakse teile täielik vigade ja hoiatuste loetelu, kust leiate kehtetuid omadusi, süntaksivigu ja tundmatuid tarnijalaiendeid, paljude muude probleemide vahel, mida peaksite oma CSS-is parandama, et seda häälestada. Aruandes kuvatakse ka teie lehel kehtiv CSS-kood.

BackstopJS 3

BackstopJS 3 automatiseerib reageerivate veebikasutajaliideste visuaalse regressiooni testimist. Ta teeb oma töö, võrreldes DOM-ekraanipiltide seeriat. See pakub põnevat funktsioonide loendit: seal on brauserisisene aruandlus, prindi- ja ekraanipaigutuse sätted ning mõned muud erifunktsioonid, näiteks ekraanifiltrid ja viidete / testide / visuaalsete erinevuste inspektor.

Kasutades Puppeteer ja ChromyJS skripte, saab BackstopJS 3 simuleerida kasutajate suhtlemist ja see suudab testida Chrome Headlessiga. Platvormidevahelise renderdamise probleemide kõrvaldamiseks on sellel ka integreeritud doki renderdamine. Seda tööriista saab kasutada nii globaalselt kui ka lokaalselt eraldiseisva pakendina ning see sobib CI ja allika juhtimisega hästi. BackstopJS 3 on väga lihtne kasutada: kõigest kolme käsklusega võiksite minna üsna kaugele.

Järeldus

Loodan, et ülaltoodud CSS-i tööriistad aitavad teil parema jõudluse saavutamiseks veebirakenduse CSS-faile optimeerida. Kui olete huvitatud täpsema CSS-i õppimisest, siis vaadake seda geniaalne kursus.

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