CSS գեղեցկացուցիչ անվճար

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

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

1. 1
   Նիշային մակարդակի նշանագրում

   walkCss ֆունկցիան սկանավորում է հում մուտքագրումը մեկ նիշ մեկ ընդմիջումով, հետևելով չակերտի վիճակին և փակագծի խորությանը, որպեսզի url()-ի, տողային արժեքների կամ մեկնաբանությունների ներսում գտնվող կիսակետերը կամ փակագծերը երբեք չշփոթվեն կառուցվածքային բաժանիչների հետ։
2. 2
   Բլոկների և հայտարարությունների բաժանում

   Երբ սկաներն գտնում է վերին-մակարդակի բացող փակագիծ, այն հանում է նախաբանը (ընտրիչը կամ at-կանոնի բանալի բառը) և կրկնաբար մշակում է բլոկի մարմինը — որը կարող է պարունակել ներդրված կանոններ (@media, @supports, բնիկ CSS ներդրում)՝ մշակված ավելի խորը կրկնության մակարդակում։
3. 3
   Հատկության տեսակավորում և նահանջ

   Յուրաքանչյուր բլոկի ներսում հայտարարությունները հավաքվում են հաջորդականության մեջ, ապա ընտրովի տեսակավորվում այբբենական կարգով ըստ հատկության անվան, մինչև գրվելը ընտրված նահանջի լայնությամբ (2 կամ 4 բացատ)։ Մինիֆիկացիայի ռեժիմն ամբողջովին բաց է թողնում բացատները և հեռացնում մեկնաբանությունները։
4. 4
   Ակնթարթային դիտարկիչային ելք

   Արդյունքները հայտնվում են մուտքագրելուն զուգընթաց useMemo կրպակի միջոցով — ոչինչ ոչ մի տեղ չի ուղարկվում։ Ձևաչափված կամ մինիֆիկացված CSS-ը կարող է պատճենվել սեղմատախտակին կամ ներբեռնվել որպես .css ֆայլ, և վահանակը ցուցադրում է չափի տարբերությունը բնօրինակի համեմատ։

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