CSS Գեղեցկացնող և Մինիմալացնող

CSS-ի գեղեցկացման և մինիմալացման նպատակը

CSS կոդի ձևաչափումն ու սեղմումն ունեն տարբեր նպատակներ, որոնք ուղղված են ինչպես մշակողների աշխատանքի հեշտացմանը, այնպես էլ վեբ-էջերի արդյունավետության բարձրացմանը:

Մարդու համար ընթեռնելի CSS կոդը սովորաբար պարունակում է բազմաթիվ նահանջներ, նոր տողեր և մեկնաբանություններ, որոնք օգնում են հեշտությամբ կողմնորոշվել ոճերի մեջ: Սակայն այս բոլոր տարրերը զբաղեցնում են լրացուցիչ տեղ և մեծացնում ֆայլի չափը: Մեքենայացված կամ օպտիմալացված CSS-ը, ընդհակառակը, նախատեսված է բրաուզերների կողմից արագ բեռնվելու համար: Քանի որ յուրաքանչյուր ավելորդ բացատ և մեկնաբանություն ազդում է ֆայլի ծավալի վրա, դրանց հեռացումը թույլ է տալիս կրճատել ֆայլի չափը՝ նպաստելով էջի բեռնման արագության մեծացմանը:

Այս գործիքը թույլ է տալիս ընտրել աշխատանքի համապատասխան եղանակը. դուք կարող եք կամ վերաձևավորել կոդը՝ այն ավելի ընթեռնելի դարձնելու համար, կամ սեղմել այն՝ արտադրական (production) միջավայրում կիրառելու նպատակով:

Գործիքի հնարավորություններն ու մուտքային տվյալները

«CSS Գեղեցկացնող և Մինիմալացնող» գործիքն աշխատում է Ձեր կողմից տրամադրված տվյալների հիման վրա: Որպես CSS մուտքային կոդ կարող եք տեղադրել կամ մուտքագրել Ձեր ոճերը: Գործիքն ունի հետևյալ սահմանափակումներն ու կարգավորումները.

• Մուտքային կոդի առավելագույն չափը. Գործիքը կարող է մշակել առավելագույնը 500,000 նիշ պարունակող CSS կոդ:
• Նահանջ. Կոդը գեղեցկացնելու համար կարող եք ընտրել նահանջի հետևյալ տարբերակներից մեկը՝
  • 2 spaces (2 բացատ)
  • 4 spaces (4 բացատ)
  • tab (տաբուլյացիա)
• Սեղմում. Մինիմալացման համար հասանելի է երկու տարբերակ՝
  • Անվտանգ (Safe). Այս ռեժիմը հեռացնում է միայն անհրաժեշտ բացատներն ու մեկնաբանությունները և կրճատում արժեքները՝ յուրաքանչյուր կանոն թողնելով իր սկզբնական տեղում:
  • Օպտիմալացված (Optimized). Այս ռեժիմը միավորում է կրկնվող սելեկտորներն ու կանոնները ավելի փոքր ֆայլ ստանալու համար, ինչը կարող է փոխել կանոնների հերթականությունը:

Ելքային տվյալներ և արդյունքների պահպանում

Մշակումն ավարտելուց հետո գործիքը ցուցադրում է ստացված արդյունքը և հետևյալ վիճակագրական տվյալները.

• Տողեր. Մշակված CSS-ում տողերի քանակը.
• Նիշեր. Մշակված CSS-ում նիշերի ընդհանուր քանակը.
• Չափ (Size). Մշակված CSS-ի չափը՝ արտահայտված UTF-8 բայթերով.
• Մինիմալացված է՝ {pct}%-ով ավելի փոքր (Minified — {pct}% smaller). Այս հաղորդագրությունը հայտնվում է կոդի մինիմալացման դեպքում և ցույց է տալիս, թե տոկոսային հարաբերությամբ որքանով է կրճատվել ֆայլի չափը:

Արդյունքը պահպանելու համար հասանելի են հետևյալ կոճակները.

• Ներբեռնել. Ներբեռնում է ստացված CSS կոդը որպես styles.css ֆայլ:
• Պատճենել (Copy). Պատճենում է ստացված CSS կոդը փոխանակման բուֆեր (clipboard):

Կոդի մշակման կանոններն ու հատուկ դեպքերը

Գործիքն աշխատում է հստակ կանոններով, որոնք ապահովում են կոդի ճիշտ ձևափոխումը.

• Մեկնաբանությունների պահպանում. /*! … */ ձևաչափով նշված հատուկ մեկնաբանությունները պահպանվում են ինչպես «Անվտանգ», այնպես էլ «Օպտիմալացված» սեղմման ռեժիմներում:
• Գեղեցկացման գործընթաց. Գեղեցկացնելու ժամանակ գործիքը վերադասավորում է նահանջները և բացատներ ավելացնում ոճերում:
• Մինիմալացման գործընթաց. Մինիմալացնելիս գործիքը հեռացնում է բացատներն ու սովորական մեկնաբանությունները, ինչպես նաև կրճատում է որոշակի արժեքներ (օրինակ՝ գույների արժեքները, ինչպիսին է #ffffff-ը #fff դարձնելը):
• Անվտանգ ռեժիմի առանձնահատկությունները. «Անվտանգ» ռեժիմում վենդորային նախդիրները (vendor prefixes) և ժամանակակից շարահյուսությունը մնում են անփոփոխ:
• Սխալների հաղորդագրություններ.
  • Եթե մուտքագրման դաշտը դատարկ է, գործիքը ցուցադրում է հետևյալ հաղորդագրությունը. «Մինիմալացման համար CSS չի գտնվել. ստուգեք մուտքագրված տվյալների շարահյուսական սխալները»:
  • Եթե ներկայացված CSS-ը հնարավոր չէ մշակել, հայտնվում է «Չհաջողվեց մշակել այս CSS-ը» հաղորդագրությունը:
  • Եթե մուտքագրված կոդը գերազանցում է 500,000 նիշը, գործիքը ցուցադրում է հետևյալ նախազգուշացումը. «Այս ոճաթերթը չափազանց մեծ է մշակման համար: Փորձեք ավելի փոքր ֆայլ»:
  • Եթե մուտքային դաշտում կա բովանդակություն, սակայն մինիմալացման արդյունքում ստացվում է դատարկ տող, դա մատնանշում է շարահյուսական խնդիր:

Գաղտնիություն և տվյալների մշակում

Օգտագործելով այս գործիքը՝ Դուք կարող եք չանհանգստանալ Ձեր կոդի անվտանգության համար: Ձեր CSS կոդի ձևաչափումն ու մինիմալացումն իրականացվում են անմիջապես Ձեր բրաուզերում: Ոչ մի տվյալ չի վերբեռնվում BroBroGo սերվերներ:

Ում համար է նախատեսված այս գործիքը

Այս գործիքը օգտակար է մասնագետների և օգտատերերի լայն շրջանակի համար, այդ թվում՝

• Front-end ծրագրավորողներին, ովքեր ցանկանում են պատրաստել իրենց կոդը թողարկման համար:
• Գոյություն ունեցող ոճաթերթեր սպասարկողներին, ովքեր կարիք ունեն արագ կարգավորելու կոդի կառուցվածքը:
• Այն օգտատերերին, ովքեր ցանկանում են արագ կարդալ սեղմված CSS կոդը:
• Նրանց, ովքեր ցանկանում են վերադասավորել խճճված ոճաթերթերի նահանջները՝ դրանք հասկանալի դարձնելու համար:
• Այն օգտատերերին, ովքեր ցանկանում են փոքրացնել ոճաթերթերի չափսերը թողարկման համար՝ առանց էջի տեսքը կամ ցուցադրումը փոխելու:

Հաճախ տրվող հարցեր (FAQ)

Ո՞րն է տարբերությունը գեղեցկացնելու (beautify) և մինիմալացնելու (minify) միջև:

«Գեղեցկացնել» (Beautify) ֆունկցիան վերադասավորում է նահանջները և բացատներ ավելացնում ոճերում, որպեսզի դրանք հեշտ ընթեռնելի և խմբագրելի լինեն: «Մինիմալացնել» (Minify) ֆունկցիան անում է հակառակը՝ հեռացնում է բրաուզերին ոչ անհրաժեշտ բացատներն ու մեկնաբանությունները և կրճատում է արժեքները (օրինակ՝ գույները), որպեսզի ֆայլն ավելի փոքր լինի և արագ բեռնվի: Գեղեցկացրեք աշխատելու ընթացքում, մինիմալացրեք նախքան թողարկելը:

Ի՞նչ են անում «Անվտանգ» և «Օպտիմալացված» սեղմման կարգավորումները:

«Անվտանգ» (Safe) ռեժիմը միայն հեռացնում է բացատներն ու մեկնաբանությունները և կրճատում արժեքները՝ յուրաքանչյուր կանոն թողնելով հենց այնտեղ, որտեղ գրել եք: «Օպտիմալացված» (Optimized) ռեժիմն ավելի հեռուն է գնում և միավորում է կրկնվող սելեկտորներն ու կանոնները ավելի փոքր ֆայլ ստանալու համար. այն կարող է վերադասավորել կանոնները, ուստի աղբյուրի հերթականությունից կախվածություն ունեցող ոճաթերթերի դեպքում արժե արագ ստուգել նախքան թողարկելը: /*! … */ ձևաչափով նշված մեկնաբանությունները պահպանվում են երկու դեպքում էլ:

Արդյո՞ք մինիմալացումը կփոխի իմ էջի տեսքը:

«Անվտանգ» (Safe) ռեժիմում՝ ոչ, Ձեր ոճերը կցուցադրվեն ճիշտ նույն կերպ: Այն կրճատում է բացատները, հեռացնում սովորական մեկնաբանությունները և վերագրում արժեքները ավելի կարճ համարժեք ձևերով (օրինակ՝ #ffffff-ը դառնում է #fff), և երբեք չի փոխում Ձեր վենդորային նախդիրները (vendor prefixes) կամ ժամանակակից շարահյուսությունը: «Օպտիմալացված» (Optimized) ռեժիմը նաև միավորում է կանոնները, ինչը գրեթե բոլոր ոճաթերթերում նույն տեսքն է ունենում, բայց արժե վերստուգել, եթե Ձեր էջի տեսքը կախված է կանոնների հերթականությունից: