Kyauta Mai Rage & Kyautata CSS

Yadda Yake Aiki

Wannan kayan aikin yana amfani da mai tsara alamomi na CSS da aka rubuta da hannu, babu dogaro, an gina shi gaba ɗaya a JavaScript — babu ɗakunan karatu na waje, babu kiran uwar garke. Mai tsara alamomin yana rarrabe kowane harafi a matsayin lamba, sharhi, harafin ambaton, ko ƙimar url() kafin a yi amfani da duk wani sauyi, wanda yake hana ka'idojin farin sarari daga gurɓata abubuwan harafi, data URIs, ko harafin calc().

1. 1
   Zagayen tsara alamomi

   Ana bincika shigarwar CSS harafi-bayan-harafi kuma an raba shi zuwa alamomi masu tsari: sassan lamba danye, sharhi /* ... */, harafin ambaton (yana kiyaye jerin escape), da block na url(...). Wannan yana tabbatar da cewa sauye-sauye a matakin gaba suna taɓa syntax na CSS na gaskiya kawai — ba a taɓa abin da ke cikin ambaton harafi ko data URI ba.
2. 2
   Minification ko kyautatawa

   A yanayin minify, ana zubar da sharhi na al'ada (ana ci gaba da sharhi /*! license */), ana rushe gudu na farin sarari a cikin alamomin lamba zuwa sarari guda, kuma ana cire farin sarari kusa da alamomin rubutu kewaye da { } : ; , > ~. Sarari kewaye da + da - da gangan ana barin su domin kada su karya harafin calc(). A yanayin kyautatawa, ana farko minify lambar zuwa tushe mai tsabta, sannan a sake tsara alamomi da sake tazarawa da bin diddigin zurfin sarari-biyu da gano declaration-colon don rarrabe property: value colons daga selector colons kamar a:hover.
3. 3
   Kimantar girman Gzip

   Bayan samar da fitarwa, ana amfani da CompressionStream API na asali na burauza don matsa sakamakon da gzip da auna adadin byte da ya haifar. Wannan yana bayar da kimantawar girman canja wuri na gaskiya wanda ya dace da abin da uwar garke na yanar-gizo mai matsa gzip zai aika a kan hanyar sadarwa.
4. 4
   Kwafi ko sauke

   Ana rubuta CSS da aka sarrafa zuwa clipboard ta Clipboard API, ko a sauke shi a matsayin styles.min.css (yanayin minify) ko styles.css (yanayin kyautatawa) ta amfani da Blob mai nau'in MIME text/css. Ana nuna kaso na raguwar girma a lokaci na gaskiya yayin da kake bugawa.

Kayan Aiki Masu Alaƙa