CSS մինիֆայեր և գեղեցկացուցիչ անվճար

Ինչպես է այն աշխատում

Այս գործիքն օգտագործում է ձեռագիր, զրո-կախվածությամբ CSS նշանագրիչ, կառուցված ամբողջովին JavaScript-ով — ոչ մի արտաքին գրադարան, ոչ մի սերվերային կանչ։ Նշանագրիչը յուրաքանչյուր նիշ դասակարգում է որպես կոդ, մեկնաբանություն, չակերտավորված տող կամ url() արժեք՝ մինչև ցանկացած փոխակերպում կիրառելը, ինչը կանխում է, որ բացատային կանոնները խաթարեն տողային բովանդակությունը, տվյալների URI-ները կամ calc() արտահայտությունները։

1. 1
   Նշանագրման փուլ

   Մուտքային CSS-ը սկանավորվում է նիշ առ նիշ և բաժանվում է տիպավորված նշանների. հում կոդի հատվածներ, /* ... */ մեկնաբանություններ, չակերտավորված տողեր (պահպանելով փախուստի հաջորդականությունները) և url(...) բլոկներ։ Սա ապահովում է, որ հաջորդ քայլի փոխակերպումները շոշափեն միայն իրական CSS շարահյուսությունը — երբեք տողային բառացիության կամ տվյալների URI-ի բովանդակությունը։
2. 2
   Մինիֆիկացիա կամ գեղեցկացում

   Մինիֆիկացման ռեժիմում սովորական մեկնաբանությունները հեռացվում են (/*! license */ մեկնաբանությունները պահվում են), կոդի նշանների բացատների հաջորդականությունները սեղմվում են մեկ բացատի, և { } : ; , > ~ կետադրության հարակից բացատները հեռացվում են։ + և - շուրջ բացատները միտումնավոր անձեռնմխելի են մնում՝ calc() արտահայտությունները չխափանելու համար։ Գեղեցկացման ռեժիմում կոդն սկզբում մինիֆիկացվում է մաքուր հիմքի, ապա կրկին նշանագրվում և կրկին նահանջվում է երկու-բացատանոց խորության հետևումով և հայտարարության-երկկետի հայտնաբերումով՝ property: value կրկնակետերը a:hover-ի պես ընտրիչի կրկնակետերից տարբերելու համար։
3. 3
   Gzip չափի գնահատում

   Ելքն արտադրելուց հետո դիտարկիչի բնիկ CompressionStream API-ն օգտագործվում է արդյունքը gzip-ով սեղմելու և ստացված բայթային քանակը չափելու համար։ Սա տալիս է իրատեսական փոխանցման-չափի գնահատական, որը համապատասխանում է, թե ինչ կուղարկեր gzip սեղմումով վեբ սերվերը ցանցով։
4. 4
   Պատճենել կամ ներբեռնել

   Մշակված CSS-ը գրվում է սեղմատախտակին Clipboard API-ով, կամ ներբեռնվում է որպես styles.min.css (մինիֆիկացման ռեժիմ) կամ styles.css (գեղեցկացման ռեժիմ)՝ օգտագործելով Blob՝ text/css MIME տեսակով։ Չափի կրճատման տոկոսն ցուցադրվում է կենդանի, երբ մուտքագրում եք։

Առնչվող գործիքներ