Ինչպես վերլուծել CSS մաքսային հատկությունները և գտնել չօգտագործվածները

Տեղադրեք ոչ դատարկ CSS տեքստ, գործարկեք վերլուծությունը և համադրեք ճանաչված հայտարարությունների անունները var() հղումների հաշվարկների հետ։ Արդյունքը նաև առանձնացնում է համապատասխան ճանաչված հղում չունեցող հայտարարությունները։

Նպատակը և կիրառման պահը

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

Մուտքագրեք CSS հատվածը որպես տեքստ և դիտարկեք արդյունքը անունների համապատասխանության տեսանկյունից։ Եթե նույն մաքսային հատկությունը մի քանի անգամ օգտագործվում է ճանաչված var() հղումներում, հաշվարկը ցույց է տալիս այդ անվան կրկնվող հղումները։

Օգտագործման հերթականությունը

1. Ընտրեք CSS-ի այն հատվածը, որը ցանկանում եք ուսումնասիրել, և նախապատրաստեք այն որպես տեքստ։ Օրինակ կարող եք ներառել --brand-color: blue; կամ --space-small: 8px; ձևի հայտարարություններ։ Յուրաքանչյուր անուն պետք է սկսվի երկու գծիկով, շարունակվի բառային նիշերով կամ գծիկներով, ապա ունենա երկու կետ, արժեք և կետ-ստորակետ։ Հայտարարության արժեքի սկզբում կամ վերջում եղած ավելորդ բացատները արդյունքի մեջ չեն պահպանվում։

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

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

4. Հայտարարությունների համար օգտագործեք ավարտված գրառումներ, օրինակ՝ --text-color: #222;։ Մի թողեք միայն անունը կամ երկու կետից հետո արժեքը, քանի որ ճանաչման համար պահանջվում է նաև կետ-ստորակետով ավարտ։ Եթե անունը չի սկսվում երկու գծիկով կամ պարունակում է նախատեսված ձևից դուրս նիշեր, այն կարող է չմտնել ճանաչված հայտարարությունների ցանկում։

5. Ճանաչված անունների կիրառումը գրեք var(--text-color) ձևով։ Հղման ներսում լրացուցիչ բովանդակություն կարող է լինել, և այդ բովանդակությունը չի խանգարում սկզբնական փոփոխականի անվան ճանաչմանը։ Յուրաքանչյուր ճանաչված հղում հաշվվում է իր անունով, այնպես որ նույն անունի կրկնվող կիրառումները կարող են բարձրացնել տվյալ անվան հաշվարկը։

6. Գործարկումից հետո նախ դիտեք հայտարարությունների ցանկը և հայտարարությունների ընդհանուր թիվը։ Այնուհետև համադրեք անունների հաշվարկները՝ հասկանալու համար, թե որ ճանաչված անունն է հղվում մեկ, երկու կամ ավելի անգամ։ Վերջում ուսումնասիրեք առանց համապատասխան ճանաչված հղման հայտարարությունների ցանկը և դրա ընդհանուր թիվը։

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

Արդյունքի ընթերցման կանոնները

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

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

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

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

Տեղադրեք --brand-color: blue; --unused-gap: 8px; .button { color: var(--brand-color); } հատվածը և գործարկեք վերլուծությունը։

Արդյունքը պետք է ունենա ճանաչված հայտարարությունների ցանկ, հայտարարությունների ընդհանուր թիվ, համապատասխան հղում չունեցող հայտարարությունների թիվ և յուրաքանչյուր ճանաչված անվան համար var() հղումների հաշվարկ։

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

• Ճանաչումը սահմանափակվում է նախատեսված հայտարարությունների և var() հղումների ձևերով, ուստի արդյունքը չի հաստատում CSS-ի բոլոր գրառումների վավերությունը, արժեքների հաշվարկը, պահուստային վարքագիծը կամ մաքսային հատկությունների յուրաքանչյուր կիրառությունը։

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

• Պատճառ՝ մուտքը դատարկ է կամ հայտարարությունը չունի ճանաչվող --անուն: արժեք; կառուցվածք, հատկապես՝ բացակայում է վերջի կետ-ստորակետը։ Ուղղում՝ փոխանցեք ոչ դատարկ CSS հատված և յուրաքանչյուր ստուգվող հայտարարություն ավարտեք կետ-ստորակետով։

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

Ինչպե՞ս են հաշվվում CSS մաքսային հատկության օգտագործումները։

Եթե CSS մուտքը ոչ դատարկ է, իսկ հայտարարությունը համապատասխանում է ճանաչվող ձևին, դրա անվան համար գործիքը հաշվում է ճանաչված var() հղումները։ Հաշվարկը խմբավորվում է ըստ փոփոխականի անվան և կարող է ներառել նույն անունի բազմակի հանդիպումները։

Ի՞նչ է ցույց տալիս համապատասխան հղում չունեցող հայտարարությունը։

Եթե հայտարարության անունը ճանաչվել է, բայց նույն անունով ճանաչված var() հղում չի գտնվել, այն հայտնվում է համապատասխան հղում չունեցող հայտարարությունների շարքում։ Այդ նշումը վերաբերում է ճանաչված ձևերին և չի ապացուցում, որ անունը CSS-ի մեկ այլ չճանաչված ձևով չի կիրառվել։

Այս արդյունքը CSS-ի ամբողջական վավերացո՞ւմ է։

Ոչ, եթե «ամբողջական ստուգում» ասելով նկատի ունեք CSS-ի բոլոր ձևերի վավերացումը։ Գործիքը համադրում է ճանաչված հայտարարություններն ու var() հղումները, բայց չի հաշվարկում արժեքների վերջնական արդյունքը և չի որոշում պահուստային վարքագիծը։