Ինչպես ձևավորել և գեղեցկացնել CSS կոդը

CSS ձևավորման նպատակը

CSS ձևավորիչը օգնում է խառնված, մեկ տողով գրված կամ մասամբ դասավորված ոճերի կոդը ներկայացնել ավելի ընթեռնելի կառուցվածքով։ Beautify ռեժիմում գործիքը CSS-ը դասավորում է հետևողական ներդրմամբ և տողերի բաժանումով, իսկ minify ռեժիմը նախատեսված է տարածությունը խնայող սեղմված ներկայացման համար։ Այս ընտրությունը պետք է կատարել ըստ նպատակի. կոդը կարդալու և ձեռքով խմբագրելու համար հարմար է beautify-ը, իսկ ավելի սեղմ տեսք ստանալու համար՝ minify-ը։

Աշխատանքը սկսելուց առաջ պատրաստեք հենց այն CSS հատվածը, որը ցանկանում եք մշակել։ Մուտքի դատարկությունը ինքնին խնդիր չէ, սակայն այն չի ստեղծի կոդ և կվերադարձնի դատարկ արդյունք։ Ոչ դատարկ օրինակների դեպքում արդյունքի ձևը կախված է ընտրված ռեժիմից, ներդրման կարգավորումից և մշակման պայմաններից, ուստի ստացված տեքստը պետք է դիտարկել որպես ձևավորված կամ սեղմված ներկայացում, ոչ թե որպես կոդի վավերության ապացույց։

CSS ձևավորման գործողությունների հերթականությունը

1. Տեղադրեք CSS-ը մուտքի դաշտում՝ որպես տեքստ։ Կարող եք օգտագործել մեկ տողով գրված կանոններ, արդեն մասամբ ձևավորված հատված կամ ավելի երկար ոճաթերթ, եթե այն համապատասխանում է մուտքի չափի սահմանին։ Եթե հիմնական դաշտը դատարկ է, իսկ նախատեսված լրացուցիչ CSS դաշտում կա արժեք, այդ արժեքը կարող է օգտագործվել հիմնականի փոխարեն։

2. Ընտրեք ձևավորման ռեժիմը հասանելի ընտրանքներից։ Ռեժիմ չնշելու դեպքում ոչ դատարկ մուտքի համար կիրառվում է beautify վարքագիծը։ Եթե ընտրում եք հենց minify տարբերակը, համակարգը հեռացնում է բլոկային մեկնաբանությունները, սեղմում է տարածությունները և նվազեցնում է փակագծերի, կետ-ստորակետերի ու երկու կետերի շուրջ եղած արտաքին բացատները։ Մյուս հաջողությամբ կարգավորված ռեժիմի արժեքները գործածում են beautify վարքագիծը, իսկ տեքստային ռեժիմի անվանումը մշակվելիս փոքրատառ է դարձվում։

3. Սահմանեք ներդրման չափը, եթե այդ կարգավորումը ցուցադրվում է։ Ոչ միայն բացատներից կազմված մուտքի դեպքում ընտրված արժեքը վերածվում է ամբողջ թվի։ Զրոյից մինչև ութ ներառյալ միջակայքից դուրս գտնվող կամ ամբողջ թվի չվերածվող արժեքը փոխարինվում է երկուսով։ Այդ պատճառով երկու բացատը կարող եք ընդունել որպես կանխատեսելի մեկնարկային ընտրություն, երբ ցանկանում եք ստանալ ընթեռնելի դասավորություն։ Միայն բացատներից կամ տողադարձերից կազմված մուտքը բացառություն է. այն վերադարձվում է ավելի վաղ, և ներդրման արժեքը չի նորմալացվում։

4. Գործարկեք ձևավորումը և դիտեք արդյունքի դաշտը։ Վավեր ոչ դատարկ տեքստի դեպքում հաջող արդյունքը կարող է ունենալ նոր տողեր ու հետևողական ներդրում, եթե ընտրված է beautify-ը։ Minify-ի ժամանակ սպասեք ավելի սեղմ ներկայացման՝ վերը նշված հեռացումների և բացատների կրճատման կանոններով։

5. Եթե գործողությունը չի ավարտվում, նախ ստուգեք մուտքի բնույթը, չափը և ընտրված կարգավորումները։ Ոչ տեքստային ոչ կեղծ մուտքը կարող է չանցնել տիպի ստուգումը։ Մեկ միլիոն UTF-8 բայթից մեծ ոչ դատարկ մուտքը մերժվում է ձևավորումից առաջ, իսկ ոչ դատարկ մշակման համար պահանջվում է նաև ձևաչափման անհրաժեշտ բաղադրիչի հասանելիություն։

Ստացված արդյունքի ընթերցումը

Արդյունքը համեմատեք այն նպատակի հետ, որի համար ընտրել եք ռեժիմը։ Beautify-ի դեպքում ստացված կոդը պետք է ունենա ավելի հստակ տողային կառուցվածք և հետևողական ներդրում, մինչդեռ minify-ը կարող է հեռացնել բլոկային մեկնաբանությունները և միավորել տարածությունները։ Այս տարբերությունը նշանակում է, որ երկու ռեժիմների ելքերը նախատեսված են տարբեր ընթերցման ձևերի համար։

Դատարկ կամ միայն բացատներից ու տողադարձերից կազմված մուտքի դեպքում հաջող արձագանքը դատարկ արդյունք է, իսկ մուտքի և ելքի չափերը զրո են։ Այդ հատուկ ճյուղում չեն կատարվում չափի, ներդրման, ռեժիմի և ձևաչափման բաղադրիչի ստուգումները, այնպես որ դատարկ դաշտը ինքնաբերաբար չի նշանակում ձախողում։

Ոչ դատարկ CSS-ի հաջող ձևավորումը նույնպես չի հաստատում, որ կոդը վավեր է, կազմարկելի կամ համապատասխանում է որևէ ստանդարտի։ Գործիքը մի օգտագործեք որպես շարահյուսական ստուգիչ, և արդյունքը վերանայեք ձեր նախագծի պահանջների համատեքստում, հատկապես երբ կիրառել եք սեղմման ռեժիմը կամ մշակել եք բարդ կանոններ։

Գործնական օրինակ

Մեկ տողով գրված փոքր CSS կանոնը ցանկանում եք ստանալ ավելի ընթեռնելի տեսքով՝ առանց դրա դասավորությունը ձեռքով փոխելու։

Մուտքագրեք .card{color:red;margin:0}, ընտրեք beautify ռեժիմը, նշեք 2 ներդրում և գործարկեք ձևավորումը։

Հաջողության դեպքում արդյունքի դաշտում երևում է CSS՝ տողերի բաժանումով և երկուսով չափվող ներդրմամբ, իսկ փաստացի տեքստը կախված է մշակված մուտքից։

Սահմանափակումներ

• Գործիքը CSS-ի ներկայացումն է ձևավորում կամ սեղմում, բայց տրամադրված վարքագիծը չի հաստատում կոդի վավերությունը, կազմարկելիությունը կամ ստանդարտներին համապատասխանությունը։

Հաճախակի սխալներ

• Եթե փոխանցված արժեքը տեքստ չէ կամ ոչ դատարկ CSS-ը գերազանցում է մեկ միլիոն UTF-8 բայթը, գործողությունը կարող է չհաջողվել։ Տեղադրեք CSS-ը տեքստային ձևով և մեծ հատվածը բաժանեք ավելի փոքր մասերի՝ նորից փորձելուց առաջ։

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

Դատարկ CSS մուտքագրելու դեպքում սխա՞լ կստանամ։

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

Ի՞նչ ներդրման չափ ընտրել, և ի՞նչ է լինում անվավեր արժեքի դեպքում։

Ոչ դատարկ մուտքի համար ընտրեք զրոյից ութ ներառյալ միջակայքում գտնվող ամբողջ թիվ։ Չփոխարկվող կամ այդ միջակայքից դուրս արժեքը փոխարինվում է երկուսով, մինչդեռ միայն բացատներից կազմված մուտքը վերադառնում է մինչև այդ փոխարկումը։

Ի՞նչ տարբերություն կա beautify և minify ռեժիմների միջև։

Beautify-ը CSS-ը ներկայացնում է հետևողական ներդրմամբ և ավելի հստակ տողային դասավորությամբ։ Minify-ը հեռացնում է բլոկային մեկնաբանությունները, սեղմում է տարածությունները և կրճատում է որոշ բաժանարարների շուրջ եղած արտաքին բացատները, սակայն այդ արդյունքը CSS-ի վավերության ստուգում չէ։