2016-12-29

Մենք անիմացիոն ենք դարձնում կոճակները և ստուգում ենք կայքը HTML և CSS կոդի վավերականության համար

Բարև հարգելի այցելու:

Այսօր, օգտագործելով ստեղծված վեբ էջի օրինակը, մենք կդիտարկենք, թե ինչպես կարող եք ստուգել կայքը վավերականության համար, մասնավորապես՝ HTML և CSS լեզուների սահմանված բնութագրերին համապատասխանելու համար:

Բացի այդ, նախքան ստուգելը, մենք կկատարենք CSS ոճի թերթիկի որոշակի ճշգրտում կողագոտու կոճակների «անիմացիայի» վերաբերյալ, որտեղ ստատիկ կոճակներից կպատրաստենք ինտերակտիվ կոճակներ, որոնք փոխում են իրենց տեսքը՝ կախված վիճակից՝ պասիվ, ակտիվ և սեղմված:

• Կոճակները մեծածավալ դարձնելը
• Կոճակները ինտերակտիվ դարձնելը
• Արդյո՞ք անհրաժեշտ է վավերացում:
• Ինչպես հաստատել HTML կոդը
• Ինչպես հաստատել CSS կոդը
• Կայքի սկզբնաղբյուր ֆայլեր

Կոճակները մեծածավալ դարձնելը

Նախորդ հոդվածում մենք նախագծեցինք հիմնական բովանդակության տարածքը, որպեսզի համապատասխանի հիմնական էջի դասավորությանը: Միևնույն ժամանակ, այս պահին կողագոտում կան կոճակներ, որոնք ստատիկ են և նման են սովորական հարթ շագանակագույն ուղղանկյունի՝ կլորացված անկյուններով:

Ստորև ներկայացված է նման կոճակներով կողագոտի մի հատված:

Կոճակները «կենդանացնելու» համար նախ նրանց տալիս ենք որոշակի ծավալ՝ օգտագործելով CSS ոճերը։ Եվ մենք դա կանենք՝ օգտագործելով գծային գրադիենտ հատկությունը, որն արդեն օգտագործվել է ռոտատորի, որոնման և բաժանորդագրման բլոկների նախագծման մեջ։

Մենք սահմանում ենք գծային գրադիենտի արժեքները հետևյալ կերպ.

1. Գույների երանգները կսահմանվեն ներքևից վեր՝ սկսած կոճակի հիմնական գույնի համեմատ ավելի մուգ գույնից: Որոշելու համար, թե ինչ գույն օգտագործել գրադիենտի սկզբում, մենք օգտագործում ենք գրաֆիկական խմբագրիչ գործիք, այս դեպքում՝ Photoshop:

Դա անելու համար, երբ դիզայնի դասավորության փաստաթուղթը բաց է, դուք պետք է ընտրեք «Color Picker»-ը, սավառնեք կոճակի պահանջվող հատվածի վրա, որոշեք հիմնական գույնը և այնուհետև օգտագործեք «Color Pickers» գործիքները՝ ավելի մուգ գույն ընտրելու համար: նույն շագանակագույն երանգով: Մեր դեպքում վերցնենք «653939» արժեքով գույնը։ Պարզ է, թե ինչպես կարելի է դա անել, ցույց է տրված ստորև ներկայացված սքրինշոթում:

2. Հաջորդը, սահմանեք գրադիենտի կանգառի դիրքը, որտեղ սկզբնական, ավելի մուգ գույնը կմտնի հիմնականը: Կանգառի դիրքը կտեղադրվի մոտավորապես մեջտեղում: Միևնույն ժամանակ, որպեսզի գույնն ավելի հագեցած լինի, եկեք կանգառի դիրքը մի փոքր բարձրացնենք և սահմանենք դրա արժեքը, ասենք, բարձրության 70%-ը։

3. Եվ վերջին բանը, որ պետք է անել գրադիենտի հատկությունները սահմանելու համար, հիմնականի համեմատ ավելի բաց գույն սահմանելն է, որը կգունավորի վերևի կոճակները: Դա արվում է այնպես, ինչպես գրադիենտի սկզբնական գույնը որոշելիս: Այս դեպքում այս գույնի արժեքը կընդունվի որպես «b88686»:

3. Ստացված տվյալների հիման վրա կոճակների նախկինում ձևավորված CSS հատկություններին կավելացնենք գծային գրադիենտ։

մուտքագրում: {

բարձրությունը :30px;

լուսանցք-ներքև :10px;

սահման-շառավիղ :5px;

ֆոն :#a76d6d;

տեքստի հավասարեցում :կենտրոն;

տառատեսակի քաշը :bold;

գույն :#fff;

լողալ :ճիշտ;

ֆոնային պատկեր

Կարելի է նշել, որ ծայրահեղ գույները որոշելիս այստեղ կանգառի դիրքերը նշված չեն, քանի որ անհրաժեշտ չէ դա անել 0% և 100% արժեքներով:

Հիմա եկեք թարմացնենք զննարկիչը և նայենք արդյունքին:

Ինչպես տեսնում եք, կոճակները ձեռք են բերել մի փոքր ուռուցիկություն։ Այժմ դուք կարող եք սկսել նրանց «վերակենդանացնել»:

Կոճակները ինտերակտիվ դարձնելը

Կոճակների հետ լիարժեք աշխատելու համար մենք դրանք կդարձնենք ինտերակտիվ, որը տեսողականորեն կարտացոլի դրանց երեք հիմնական վիճակները՝ պասիվ (կոճակը սկզբնական վիճակում է), ակտիվ (կուրսորը սավառնում է կոճակի վրա) և սեղմված (մկնիկը): կոճակը սեղմվում և պահվում է, մինչ կուրսորը սավառնում է):

Եվ մենք դա կանենք՝ օգտագործելով ստվերային և սահմանային հատկությունների համադրություն: Այս տեխնիկայի էությունն այն է, որ տարբեր կողմերից ստվերի և եզրագծերի գույնը փոխելով, կարող եք հասնել կոճակների վիճակի փոփոխության իմիտացիայի:

Նախ, եկեք դա անենք պասիվ վիճակի համար և փորձենք նկարել այնպես, որ կոճակը բարձրանա մակերեսից վեր:

Մենք ընտրում ենք եզրագծերի և ստվերների գույները այնպես, ինչպես նախորդ դեպքերում:

CSS-կոդը համապատասխան լրացումներից հետո կվերցնի ձևը:

մուտքագրում: {

բարձրությունը :30px;

լուսանցք-ներքև :10px;

սահման-շառավիղ :5px;

ֆոն :#a76d6d;

տեքստի հավասարեցում :կենտրոն;

տառատեսակի քաշը :bold;

գույն :#fff;

լողալ :ճիշտ;

ֆոնային պատկեր :linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

տուփի ստվեր :2px 2px 4px 0px #422a2a;

սահման-լայնություն :2px;

սահմանային ոճը :պինդ;

եզրագծի գույնը :#ddbebe #241616 #241616 #ddbebe;

Այստեղ կարող եք նկատել, որ սահմանները ներկայացված են հատկությունների համակցությամբ, որոնք որոշում են հաստությունը (սահմանի լայնությունը արժեքի հետ 2px), ոճ ( border-style ) արժեքով, որը նշում է ամուր եզրագիծ և գույներ ( border-color ) չորս կողմերից յուրաքանչյուրում:

Եկեք թարմացնենք զննարկիչը և տեսնենք, թե հիմա ինչ տեսք կունենան կոճակները:

Ինչպես տեսնում եք, այս վիճակում կոճակները կարծես բարձրացել են:

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

Կոճակների ակտիվ վիճակի համար CSS կոդը կստանա հետևյալ ձևը.

մուտքագրում: սավառնել {

տուփի ստվեր :ոչ ոք;

եզրագծի գույնը :#a76d6d #a76d6d #a76d6d #a76d6d;

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

Սեղմված վիճակի CSS կոդը կլինի հետևյալը.

մուտքագրում: ակտիվ {

տուփի ստվեր :0px 0px 7px 2px #422a2a ներդիր;

եզրագծի գույնը :#777 #fff #fff #777;

Համեմատության համար ներքևում ցուցադրված է «Որոնում» կոճակը, որտեղ կարող եք պարզ տեսնել, թե ինչպես է այն փոխում իր տեսքը՝ կախված վիճակից։

Նկ.8 Պասիվ վիճակ

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

Արդյո՞ք անհրաժեշտ է վավերացում:

Վավերացումը կոդի ստուգումն է սահմանված ստանդարտներին համապատասխան: Կան վավերացումներ HTML և CSS կոդի ճշգրտության համար: Հասկանալի է, որ մի դեպքում ստուգվում է HTML կոդը, մյուս դեպքում՝ CSS կոդը։

Հավանաբար, շատերին տարօրինակ կհամարեն հարցնել, թե արդյոք վավերացման կարիք կա: Բայց եթե նայեք ինտերնետին, կարող եք տեսնել, որ կան շատերը, ովքեր կարծում են, որ վավեր կոդը կամընտիր է, որ դա լրացուցիչ ժամանակի կորուստ է, քանի որ բրաուզերները լավ են աշխատում նույնիսկ բոլոր տեսակի սխալների առկայության դեպքում:

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

Եվ ընդհանրապես, անհասկանալի է, թե ինչու են ոմանք նման ֆիգուրալ վերաբերվում իրենց աշխատանքին՝ «և այդպես կլինի» սկզբունքով։ Հետևաբար, եթե ինչ-որ մեկը կարծում է, որ իրեն պետք չէ ստուգել կոդը վավերականության համար, ապա դա նրա իրավունքն է, և դժվար թե նա կարողանա հակառակում համոզվել, և դրա կարիքը չկա։

Իսկ հիմա անցնենք կոդերի՝ սկզբում HTML, ապա CSS վավերականության ուղղակի ստուգմանը։

Ինչպես հաստատել HTML կոդը

Ըստ էության, կոդերի վավերացման ստուգումն ինքնին բավականին պարզ է, ինչպես մենք այժմ տեսնում ենք: Բայց այստեղ սխալների վերացումը սովորաբար որոշակի ժամանակ է պահանջում։ Իհարկե, եթե կոդը բաղկացած է մի քանի տողից, ապա այստեղ դժվարություններ չեն կարող առաջանալ։ Բայց, եթե դրանք հարյուրավոր և հազարավոր են, ապա դուք կարող եք շատ աշխատել այստեղ, ամեն ինչ կախված է նրանից, թե որքան լավ է կազմվել կոդը: Հետևաբար, ավելի լավ է դա անել ավելի հաճախ՝ խաչաձև համապատասխանության համատեղ ստուգմամբ:

Այստեղ մենք կդիտարկենք վավերականությունը ստուգելու ամենապարզ և ամենատարածված տարբերակը. սա «W3C Consortium» կայքի օգտագործումն է, որը զննարկիչ մշակողների աջակցությամբ մշակում է վեբ էջի կոդերի բնութագրեր:

HTML կոդը վավերացնելու համար պարզապես հետևեք https://validator.w3.org/ հղմանը, որը կբացի էջ, որտեղ դաշտ է մուտքագրվում վավերացման ենթակա էջի հասցեն:

սքրինշոթ 51

«Ստուգել» կոճակը սեղմելուց հետո ստանում ենք ստուգման արդյունքը։

Այս դեպքում HTML կոդը վավեր է, սակայն առաջարկություն կա արժեքի հետ օգտագործել lang հատկանիշը «ռու»քանի որ էջը օգտագործում է ռուսերեն։

Lang հատկանիշը նախատեսված է այնպես, որ բրաուզերները ճիշտ ցուցադրեն որոշակի նիշեր, օրինակ՝ չակերտները՝ կախված օգտագործվող լեզվից: Հետևաբար, մեզ համար օգտակար կլինի այն ներառել HTML կոդում։ Եվ մենք դա կանենք html թեգում, որպեսզի այս հատկանիշը կարողանա գործել ամբողջ փաստաթղթի վրա:

Ինչպես կատարել այս հավելումը, ներկայացված է հետևյալ աղյուսակում:

«ռու» >

. . .

Եվ հիմա, եթե մենք երկրորդ ստուգում կատարենք, ապա կտեսնենք, որ ծածկագիրը լիովին վավեր է դարձել առանց մեկնաբանությունների։

Այս կերպ մենք ստուգեցինք համացանցում տեղադրված ֆայլը։ Բայց երբ էջը դեռ չի տեղադրվել համացանցում, կարող եք ստուգել դրա վավերականությունը այլ եղանակներով՝ կա՛մ ֆայլ վերբեռնելով՝ օգտագործելով զննման կոճակը, կա՛մ օգտագործելով ձևը՝ ուղղակիորեն պատճենելու HTML կոդը:

Սքրինշոթը ցույց է տալիս վերջին տարբերակը, երբ վեբ էջի կոդը պատճենվում է ուղղակիորեն հաստատման ձևի մեջ:

Ստուգումը կատարելուց հետո մենք ստանում ենք նմանատիպ արդյունք, և այստեղ կցուցադրվի նաև ստուգվող կոդը։ Սխալների հայտնաբերման դեպքում դրանք կնշվեն որոնումը հեշտացնելու համար, ինչը մեծապես հեշտացնում է դրանց վերացման աշխատանքը:

Ինչպես հաստատել CSS կոդը

Մենք անդրադարձել ենք HTML կոդի վավերացմանը: CSS կոդը ստուգվում է ճիշտ նույն հերթականությամբ։ Միայն այս դեպքում դուք պետք է օգտագործեք մեկ այլ վավերացնող էջ, որն այս դեպքում գտնվում է http://jigsaw.w3.org/css-validator/ հասցեում:

Բացենք այն և ինչպես նախորդ անգամ, մուտքագրենք ստուգվող էջի հասցեն, որից հետո սեղմում ենք «Ստուգել» կոճակը։

Այս ստուգման արդյունքը ցուցադրված է սքրինշոթում:

Ինչպես տեսնում եք, մեր CSS կոդը լիովին համապատասխանում է սպեցիֆիկացիաներին՝ առանց որևէ սխալի, ինչը լավ արդյունք է:

Այս դեպքի համար վավերացման այլ մեթոդների կարգը լիովին համընկնում է HTML կոդի նմանատիպ ստուգումների հետ: Հետևաբար, մենք այստեղ չենք կրկնվի և կավարտենք վավերացման ստուգումների մեր վերանայումը:

Դրանից հետո մենք կստուգենք մեր էջը խաչաձև պատկերի համար և համոզվելով, որ այն նույնն է ցուցադրվում բոլոր բրաուզերներում, դա կավարտի կայքի գլխավոր էջի դասավորությունը:

Եվ մենք դա կանենք հենց ամանորյա տոներից հետո։

Եվ վերջում կարող ենք շնորհավորել բոլորի գալիք Ամանորը: Եվ Ամանորին մաղթում եմ առողջություն, սեր, ուրախություն, բարգավաճում և, իհարկե, մեծ հաջողություններ սեփական կայք ստեղծելու գործում՝ համացանցում հաջող աշխատանքի հնարավորության համար:

Կայքի սկզբնաղբյուր ֆայլեր

Կայքի սկզբնաղբյուր ֆայլերը թարմացումներով, որոնք արվել են այս հոդվածում, կարելի է ներբեռնել կից լրացուցիչ նյութեր.

Իմ նախորդ հոդվածներից մեկում ես խոսեցի . Այնուամենայնիվ, ոչ բոլորը գիտեն, որ բացի վավերացնող HTML-ի համար, կա վավերացնող և CSS-ի համար.

Իմաստը CSS վավերականություննույնը, ինչ HTML. գրեթե անտեղի: Նման HTMLեթե գրես անվավեր CSS, ապա խնդիրներ չեն լինի (եթե, իհարկե, չկան կոպիտ սխալներ), այնուամենայնիվ, վավեր կոդը միշտ լավ է։ Նման ծածկագիրը պարզ է և կառուցվածքային, հեշտ է հասկանալ, ինչը նույնպես կարևոր է, հատկապես, երբ ուղղվում է, և հատկապես այլ մարդկանց կողմից։ Նաև CSS վավերականությունարագացնում է մշակման գործընթացը և, հետևաբար, էջի բեռնման արագությունը:

Եվ, վերջապես, հաշվի առնելով վավերականության ընդհանուր հազվադեպ պահպանումը, վավեր ծածկագիրը միշտ հարգանք է պահանջում, ինչը կարևոր է, եթե դուք դա անում եք պրոֆեսիոնալ կերպով:

Դեպի ստուգեք CSS վավերականությունը, դուք պետք է օգտագործեք սա W3 ծառայություն http://jigsaw.w3.org/css-validator/:

Միանգամից կասեմ, որ, ի տարբերություն HTML, արա CSS վավեր էշատ ավելի հեշտ է, քանի որ հիմնականում լինում են միայն կոպիտ սխալներ, բացառությամբ, որոնցից ավելի լավ է խուսափել ընդհանրապես:

Ամփոփեմ. Կոդը վավեր դարձնելն ամենևին էլ անհրաժեշտ չէ, բայց ես խստորեն խորհուրդ եմ տալիս դա անել, քանի որ նման կայքը ավելի հեշտ կլինի ինդեքսավորել որոնման համակարգերով ( HTML վավերականություն), աշխատեք ավելի արագ, ավելի հեշտ խմբագրելու համար և հարգանք ձեռք բերեք մասնագետների կողմից:

Վերջերս ես օգտատերերից մի քանի հարց եմ ստանում՝ կապված իմ թեմաների վավերականության և ընդհանրապես վավերացման հետ: Այս գրառման մեջ ես ուզում եմ պատասխանել նրանց.

Ի՞նչ է վավերականությունը:

Ենթադրվում է, որ կոդի վավերականությունը ցանկացած կոդի միասնական, ունիվերսալ բնութագիր է:
Փաստորեն, վավերականությունը փաստաթղթի html կոդի համապատասխանությունն է doctype-ում նշված կամ HTML5-ում ենթադրվող կանոնների որոշակի փաթեթին:
Այսինքն՝ վավերականությունը հարաբերական հասկացություն է, քանի որ կանոնները տարբեր են, դրանց պահանջները՝ նույնպես։
Որպեսզի ավելի պարզ լինի, ես օրինակ բերեմ, որը գտա css-live.ru կայքում.

Բնակելի շենքերի և ատոմակայանների կառուցման համար կիրառվում են տարբեր SNiP-ներ (շինարարական կոդեր և կանոնակարգեր), այնպես որ մի փաստաթուղթ, որը վավեր է մի շարք կանոնների համաձայն, կարող է վավեր չլինել մյուսի համաձայն (ատոմակայան, որը կառուցվել է ըստ ստանդարտների. բնակելի շենք լավ կլիներ!):

Doctype-ը սովորաբար մատնանշում է այն փաստաթուղթը, որի նկատմամբ նախատեսվում է html վավերացում, բայց կարող է ընտրվել պրագմատիկ նկատառումներով՝ բրաուզերների օպտիմալ ռեժիմը ընտրելու համար:
XHTML5-ը կարող է ընդհանրապես չունենալ doctype, բայց վավեր է:

Վավերացում - ինչ է դա:

Պարզ ասած, վավերացումը ծածկագիրը ստուգելու և այն ընտրված դոկտիպին (DTD) համապատասխանեցնելու գործընթաց է:

Ինչպե՞ս է ստուգվում վավերականությունը:

HTML կոդի վավերականությունը ստուգվում է վավերացուցիչ կոչվող գործիքի միջոցով:
Ամենահայտնի w3c վավերացնողը https://www.w3.org է:
W3c վավերացնողը մի քանի կոդի ստուգում է կատարում:
Հիմնականները:

1. Ստուգեք շարահյուսական սխալների համար.
   Օրինակ habrahabr.ru/post/101985-ից:
   ճիշտ շարահյուսություն է, չնայած անվավեր HTML թեգ է
   Այսպիսով, շարահյուսության ստուգումը նվազագույն օգտակար է լավ HTML կոդ գրելու համար:
2. Պիտակի բնադրման ստուգում:
   HTML փաստաթղթում պիտակները պետք է փակվեն բացման հակառակ հերթականությամբ: Այս ստուգումը հայտնաբերում է չփակված կամ սխալ փակված պիտակներ:
3. HTML վավերացում ըստ DTD-ի:
   Ստուգելով, թե ինչպես է կոդը համապատասխանում նշված DTD-ին - Փաստաթղթի տեսակի սահմանում (doctype): Այն ներառում է թեգերի անունների, ատրիբուտների և «ներկառուցված» պիտակների ստուգում (մեկ տեսակի պիտակներ մեկ այլ տեսակի պիտակների ներսում):
4. Արտասահմանյան տարրերի ստուգում:
   Այն կգտնի այն ամենը, ինչ կա կոդում, բայց ոչ դոկտիպում:
   Օրինակ՝ հատուկ պիտակներ և ատրիբուտներ։

CSS կոդի վավերականությունը ստուգելու համար կա css վավերացնող. http://jigsaw.w3.org/css-validator.
Կոդի վավերականությունը- սա պաշտոնական OB-ի բացակայության մեխանիկական ստուգման արդյունք է, ըստ սահմանված կանոնների:
Դուք պետք է հասկանաք, որ վավերացումը գործիք է, ոչ թե ինքնին արժեք:
Դասավորության փորձառու դիզայներները սովորաբար գիտեն, թե որտեղ է հնարավոր խախտել HTML կամ CSS վավերացման կանոնները, և որտեղ՝ ոչ, և ինչն է սպառնում (կամ չի սպառնում) այս կամ այն ​​վավերացման սխալին։
Օրինակներ, երբ կայքը վավեր կոդ չի ստեղծում.

• ավելի հարմար և արագ - հատուկ ատրիբուտներ Javascript/AJAX կամ
• SEO օպտիմիզացված - ARIA նշում:

Հասկանալի է, որ վավերականության համար ոչ մի կետ չկա:
Որպես կանոն, դասավորության փորձառու դիզայներները հետևում են հետևյալ կանոններին.
- Օրենսգրքում կոպիտ սխալներ չպետք է լինեն։
- Անչափահասներին կարելի է հանդուրժել, բայց միայն հիմնավորված պատճառներով։
Ինչ վերաբերում է html/CSS վավերացման սխալներին.

Վավերացման սխալները (VF) կարելի է բաժանել խմբերի.

• OV կաղապարի ֆայլերում.
  Դրանք գտնելն ու շտկելը դժվար չէ։
  Եթե ​​փոքր սխալներից որևէ մեկը օգնում է կայքն ավելի ֆունկցիոնալ կամ արագ դարձնել, դրանք կարող են թողնել:
• OV երրորդ կողմի սկրիպտներում, որոնք միացված են կայքում.
  Օրինակ, Vkontakte-ի վիջեթ, Twitter-ի սցենար կամ YouTube վիդեո ֆայլեր:
  Դրանք շտկելու ոչ մի միջոց չկա, քանի որ այդ ֆայլերը և սկրիպտները գտնվում են այլ կայքերում, և մենք մուտք չունենք դրանց։
• CSS կանոնները, որոնք վավերացնողը չի հասկանում.
  Վավերացնողը ստուգում է, որ կայքի կոդը համապատասխանում է HTML-ի կամ CSS-ի որոշակի տարբերակին:
  Եթե ​​դուք օգտագործել եք CSS տարբերակի 3 կանոնները ձևանմուշում, և վավերացնողը ստուգում է 2.1 տարբերակի հետ, ապա այն կհամարի բոլոր CSS3 կանոնները որպես սխալներ, թեև դրանք այդպես չեն:
• ՕՎ, որոնք ակամա պետք է թողնել կայքում՝ ցանկալի արդյունք ստանալու համար։ Օրինակ:
  • noindex պիտակներ. Դրանք վավեր չեն, բայց շատ անհրաժեշտ են, և մենք պետք է համակերպվենք դրա հետ։
  • խակի. Որոշ բրաուզերներում կայքի ճիշտ ցուցադրումը ստանալու համար երբեմն ստիպված եք լինում օգտագործել հաքեր՝ կոդ, որը հասկանում է միայն որոշակի բրաուզերը:
• Վավերացնողի սխալներ.
  Հաճախ նա չի տեսնում պիտակներ (օրինակ՝ փակվողներ) և հաղորդում է OB-ի մասին, որտեղ այն գոյություն չունի:

Ստացվում է, որ աշխատանքային վայրում գրեթե միշտ կլինի ինչ-որ OV:
Ավելին, դրանք կարող են շատ լինել։
Օրինակ՝ Google-ի, Yandex-ի և mail.ru-ի գլխավոր էջերը յուրաքանչյուրը պարունակում է մի քանի տասնյակ սխալներ։
Բայց նրանք չեն խախտում կայքերի ցուցադրումը բրաուզերներում և չեն խանգարում նրանց աշխատանքին։
Վերևում գրված ամեն ինչ վերաբերում է իմ թեմաներին:

Բարդ թեմաները ներառում են.

• WordPress-ի առանձնահատկությունները (օրինակ. the_category()), որոնք տալիս են անվավեր կոդ։
• Տեսահոսթինգի վիդեո ելք, օրինակ՝ YouTube-ից, և YouTube կոդի մեջ կան բազմաթիվ OB-ներ, որոնց վրա ոչ դու, ոչ ես չենք կարող ազդել։
• Սոցիալական ցանցերի կոճակներ, որոնք միացված են այս ցանցերի սկրիպտների միջոցով և պարունակում են OB:
• CSS3 և HTML5 կանոնները համարվում են սխալներ ավելի հին տարբերակների վավերացնողների կողմից:
  Միևնույն ժամանակ, CSS3 և HTML5 տարբերակների վավերացնողները հին կանոնները համարում են սխալ :)։
• Երբեմն, Internet Explorer բրաուզերում կամ այլ բրաուզերների ավելի հին տարբերակներում ճիշտ ցուցադրման հասնելու համար դուք պետք է օգտագործեք, այսպես կոչված, հաքերները՝ կոդ, որը հասկանում է միայն կոնկրետ բրաուզերը, որպեսզի գրեք կայքի ցուցադրման կանոնները տվյալ բրաուզերի համար:

Արդյունքում, դուք կարող եք լիովին վավեր կոդ ստանալ միայն շատ պարզ թեմաներ դնելիս, այսինքն. նրանք, որոնք պարունակում են նվազագույն քանակությամբ ֆունկցիոնալություն:
Իմ ցանկացած թեմայի դասավորությունը ավարտելուց հետո ես միշտ ստուգում եմ այն ​​վավերացնողով և ֆիքսում բոլոր OB-ները, որոնք հնարավոր է շտկել՝ չկորցնելով թեմայի ֆունկցիոնալությունը։
Այսինքն, եթե կա ընտրություն աշխատանքային ֆունկցիոնալության և վավերականության միջև, ես ընտրում եմ ֆունկցիոնալությունը:
Եթե ​​դուք ինքներդ եք հորինում ձեր թեմաները, խորհուրդ եմ տալիս անել նույնը:
Իմ տեսանկյունից (և նաև դասավորության դիզայներների մեծամասնության տեսանկյունից), html/CSS վավերացմանը որպես վերջնական ճշմարտության վերաբերմունքը սխալ է: Պարտադիր է ուղղել միայն այն OB-երը, որոնք.
- թույլ չտալ, որ զննարկիչը ճիշտ ցուցադրի էջը (չփակված և սխալ տեղադրված պիտակներ):
- դանդաղեցնել էջի բեռնումը (սխալ միացված սցենարներ):
- կարելի է ուղղել առանց թեմայի ֆունկցիոնալությունը խախտելու:
Հուսով եմ՝ պատասխանել եմ վավերացման վերաբերյալ ձեր բոլոր հարցերին:

Ես արդեն նշեցի, թե ինչ կա html կոդի վավերականության առումով։ Սա պետք է արվի գոնե մեկ-մեկ, քանի որ վավերականությունինչպես html, այնպես էլ cssխիստ ազդում է կայքի վրա, այսինքն՝ տարբեր բրաուզերներում ձեր ռեսուրսի նույնական ցուցադրման վրա (ընդհանուր հոդված հանրաճանաչ և լավագույն վեբ բրաուզերների մասին, որը հուսով եմ կօգնի ձեզ ընտրություն կատարել հօգուտ դրանցից մեկի):

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

Կարծում եմ, դուք այժմ ծանոթ եք իմ կարծիքին, քանի որ ես գրում եմ այս հոդվածը, ինչը նշանակում է, որ ես այն ուշադրության արժանի եմ համարում, ինչպես, օրինակ, SEO-ի օպտիմալացման այնպիսի կարևոր մասի հետ, ինչպիսին են Google-ի և Yandex-ի ինդեքսավորման հղումները և տեքստային հատվածները փակելը կամ իրավասու օգտագործումը:

Լավ, ինչպես ասում են, ավելին: Նախ, մի փոքր CSS-ի մասին: css ( Կասկադային ոճի թերթիկներ- Cascading Style Sheets) ոճային լեզու է, որը սահմանում է HTML փաստաթղթերի ցուցադրումը: Այսինքն, եթե HTML-ը նկարագրում է էջի բովանդակությունը, ապա CSS-ը ֆորմատավորում է այս բովանդակությունը, այլ կերպ ասած՝ տալիս է ամբողջական տեսք։ Ի դեպ, կայքի արագությունը մեծացնելու համար օգտակար կլինի ձեր թեմատիկ ֆայլերը սահեցնելը։

W3C Validator. CSS կոդի վավերականության ստուգում

Այժմ եկեք անցնենք այն հարցին, թե ինչպես ստուգել փաստաթղթի վավերականությունը (մեր կայքի կամ WordPress բլոգի էջերը): Ինչպես HTML կոդը ստուգելու դեպքում, մենք կօգտագործենք . Եկեք գնանք CSS վավերացման ծառայություն.

Ինչպես տեսնում եք, W3C վավերացնողով CSS-ը վավերացնելու երեք եղանակ կա: Ի դեպ, նշենք, որ վավերացնող էջի ներքևում կա նշում, որը ցույց է տալիս HTML կոդը վավերականության համար ստուգելու անհրաժեշտությունը: Միայն երկու ճիշտ կոդերն են երաշխավորում ամբողջ փաստաթղթի ճշգրտությունը: Ստուգելու համար մուտքագրեք URL-ը: Օրինակ, եկեք ստուգենք իմ բլոգի գլխավոր էջը.

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

Փաստաթղթի հղում կա CSS վավերացման արդյունքների էջում css.ie, որը գտնվում է թեմայի թղթապանակում։ Այն ստեղծվել է խաչաձեւ բրաուզերային բլոգի հասնելու համար (նույն ցուցադրումը հանրաճանաչ բրաուզերներում): Ընդ որում, դա Internet Explorer-ի տարբեր մոդիֆիկացիաների համար է, որը տարբեր «ջամբերով» մեղանչում է կայքի տեսքը խեղաթյուրելու առումով, հատկապես նրա հին տարբերակները (IE9-ն այս առումով շատ ավելի լավն է)։ Բրաուզերների միջև համատեղելիությունը շատ կարևոր է նախագծի առաջընթացի համար, սակայն, ստուգումից հետո պարզվեց, որ այս փաստաթուղթը պարունակում է հատկություններ, որոնք չեն համապատասխանում W3C ստանդարտներին:

Այսպիսով, մենք ստանում ենք 3 և 12 տողերը, որոնք պարունակում են սխալներ: Դրանք շտկելու համար հեռացրեք վերլուծության սխալը html (զտիչ՝ արտահայտություն (document.execCommand ("BackgroundImageCache", false, true));)և ունեցվածքը .մեծացնել. Այժմ ես չեմ խորանա ծրագրավորման և կայքերի դասավորության բարդությունների մեջ, միայն նշեմ, որ գույքը. արտահայտությունօգնում է ազատվել IE6-ում առաջացող ֆոնային պատկերի անհանգստացնող թարթման էֆեկտից:

Այսինքն՝ զննարկիչում, որի օգտագործումն ի չիք է դառնում, և այս «անսարքության» հետագա տարբերակներում այլևս չի նկատվում։ Անմիջապես պետք է ասեմ, որ դեռ որոշ ժամանակ կօգտագործեմ այս «բուժումը», մինչև IE6 օգտագործող պոտենցիալ այցելուների թիվը հասնի նվազագույն մակարդակի։ Այնուամենայնիվ, պարզության համար ձեզ ցույց տալու համար, թե ինչպես կարձագանքի W3C վավերացնողը դրան, ես կհեռացնեմ այն:

.zoom հատկությունը, որը սահմանում է տարրի մասշտաբավորման գործակիցը, W3C միջազգային ստանդարտի մաս չէ և աջակցվում է Opera, Safari բրաուզերների շատ հին տարբերակներով, այդ թվում՝ IE8(9-րդ տարբերակը գրեթե ամբողջությամբ «օրինապահ է», ուստի շուտով, հուսով եմ, վեբ-վարպետները կազատվեն հաքերից, այսինքն՝ հավելյալ կոդերից՝ առավելագույն խաչաձեւ բրաուզերի համատեղելիության հասնելու համար): Հիմա եկեք նայենք անվավեր տարրեր պարունակող փաստաթղթին և ուղղենք այն.

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

Օրինակ, ես կփորձեմ հստակ ցույց տալ, թե ինչպես կարելի է ազատվել դրանցից ամենատարածվածներից և ճանապարհին բացատրել դրանց իմաստները: Ինչպես տեսնում եք, W3C վավերացնողը զգուշացնում է տեքստի և ֆոնի համար նույն գույների առկայության մասին: Պետք է ասեմ, որ դա, ընդհանուր առմամբ, ամեն դեպքում անցանկալի է, քանի որ որոնողական համակարգերը կարող են իրերի այս վիճակը համարել թաքցնող տեղեկատվություն, որը հղի է լուրջ պատժամիջոցներով։

Իհարկե, դա միշտ չէ, որ այդպես է, բայց այս վտանգը պետք չէ թերագնահատել։ Այսպիսով, անցնենք իրավիճակի շտկմանը։ Ավելի լավ է պատճենել ֆայլը style.cssձեր թեման HTML-ում և PHP-ում, notepad++ խմբագրիչը, որի մասին ես խոսեցի, որը հեշտացնում է որոնումը ըստ տողի համարի.

Այժմ մենք գիտենք, թե որտեղ են գտնվում այս տողերը ձեր թեմայի ֆայլում, մենք ուղղում ենք գույնը՝ մի փոքր փոխելով երանգը: Տասնվեցական գունային համակարգում #ffffff-ը համապատասխանում է սպիտակին: Մենք այն փոխում ենք հետևյալ կերպ. վերջին f-ի փոխարեն մուտքագրում ենք d, այդպիսով ստանում ենք սպիտակի մի փոքր այլ երանգ; այժմ փոփոխությունները նկատելի չեն լինի օգտատերերի համար, բայց որոնիչները կտեսնեն տարբերությունը.

Այսպես կարող եք ուղղել ձեր ռեսուրսների էջերի CSS կոդի անվավեր մասերը: Նույն կերպ մենք գտնում ենք նախազգուշացումներով նշված մնացած հատվածները, որոնք ուղղման կարիք ունեն, իսկ 483 տողի վերաբերյալ զգուշացումներին (ի դեպ, դրանք բավականին քիչ էին, մոտ 10-ը)։ Ստուգելով՝ ես գտա, որ դրանց պատճառը WP Page Numbers հավելվածն է, որն ապահովում է էջադրում։

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

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

Վավերացումը վերաբերում է CSS ծածկագրի ստուգմանը CSS2.1 կամ CSS3 բնութագրերի համաձայն: Համապատասխանաբար, ճիշտ կոդը, որը չի պարունակում սխալներ, կոչվում է վավեր, իսկ այն, որը չի բավարարում ճշգրտմանը, կոչվում է անվավեր: Առավել հարմար է կոդը ստուգել կայքի միջոցով http://jigsaw.w3.org/css-validator/, օգտագործելով այս ծառայությունը կարող եք նշել փաստաթղթի հասցեն, վերբեռնել ֆայլ կամ ստուգել մուտքագրված տեքստը։ Ծառայության մեծ պլյուսը ռուսերեն և ուկրաիներեն լեզուների աջակցությունն է:

Ստուգեք URI

Այս ներդիրը թույլ է տալիս նշել ինտերնետում տեղակայված էջի հասցեն: http:// արձանագրությունը կարող է բաց թողնել, այն կավելացվի ավտոմատ կերպով (նկ. 1.42):

Բրինձ. 1.42. Փաստաթղթի ստուգում հասցեով

Հասցեն մուտքագրելուց հետո սեղմեք «Ստուգեք» կոճակը և կհայտնվի երկու մակագրություններից մեկը՝ «Շնորհավորում եմ: Սխալներ չեն գտնվել» հաջողության դեպքում կամ «Ցավոք, մենք գտել ենք հետևյալ սխալները» անվավեր կոդի վրա: Սխալի կամ նախազգուշացման հաղորդագրությունները պարունակում են տողի համար, ընտրիչ և սխալի նկարագրություն:

Ստուգեք բեռնված ֆայլը

Այս ներդիրը թույլ է տալիս բեռնել HTML կամ CSS ֆայլ և ստուգել այն սխալների համար (Նկար 1.43):

Բրինձ. 1.43. Ֆայլը բեռնելիս ստուգելիս

Ծառայությունը ավտոմատ կերպով ճանաչում է ֆայլի տեսակը և, եթե նշված է HTML փաստաթուղթ, հանում է ոճը դրանից՝ վավերացման համար:

Ստուգեք մուտքագրված տեքստը

Վերջին ներդիրը HTML կամ CSS կոդի ուղղակի մուտքագրման համար է, և կստուգվի միայն ոճը (նկ. 1.44):

Բրինձ. 1.44. Մուտքագրված ծածկագրի ստուգում

Թվում է, թե այս տարբերակը ամենահարմարն է կոդի վրա տարբեր փորձեր անցկացնելու կամ փոքր հատվածներն արագ ստուգելու համար։

CSS տարբերակի ընտրություն

CSS3-ն ունի շատ նոր ոճային հատկություններ՝ համեմատած նախորդ տարբերակի հետ, ուստի կոդերի վերանայումը պետք է լինի հատուկ տարբերակին: Լռելյայնորեն, ծառայությունը սահմանում է CSS2.1, այնպես որ, եթե ցանկանում եք ստուգել ձեր կոդը CSS3-ի հետ, դուք պետք է հստակ նշեք այն: Դա անելու համար սեղմեք «Լրացուցիչ գործառույթներ» տեքստի վրա և բացվող բլոկում «Պրոֆիլ» ցանկից ընտրեք CSS3:

Բրինձ. 1.45. Նշելով CSS տարբերակը, որը պետք է ստուգվի

Նույնացուցիչներ և դասեր

Պարբերաբար վեճ է բարձրացվում դասավորության մեջ նույնացուցիչներ օգտագործելու նպատակահարմարության վերաբերյալ: Հիմնական փաստարկն այն է, որ նույնացուցիչները նախատեսված են վեբ էջի տարրերը սկրիպտների միջոցով մուտք գործելու և շահարկելու համար, և միայն դասերը պետք է օգտագործվեն տարրերի ոճերը փոխելու համար: Իրականում, կարևոր չէ, թե ինչ ոճեր են օգտագործվում, բայց դուք պետք է տեղյակ լինեք նույնացուցիչների և դասերի որոշ առանձնահատկությունների, ինչպես նաև այն որոգայթների մասին, որոնք կարող են ակնկալել մշակողները:

Սկզբից մենք թվարկում ենք այս ընտրիչների բնորոշ հատկանիշները:

Նույնացուցիչներ

Փաստաթղթի կոդում յուրաքանչյուր նույնացուցիչ եզակի է և պետք է ներառվի միայն մեկ անգամ:

Նույնացուցիչի անունը մեծատառերի զգայուն է:

GetElementById մեթոդի միջոցով դուք կարող եք մուտք գործել տարր իր ID-ով և փոխել տարրի հատկությունները:

Նույնացուցիչի ոճը գերակայում է դասերից:

Դասերը կարող են օգտագործվել մի քանի անգամ կոդով:

Դասերի անունները մեծատառերի զգայուն են:

Դասերը կարող են համակցվել միմյանց հետ՝ մեկ պիտակի վրա մի քանի դաս ավելացնելով:

Նույնացուցիչներ

Եթե ​​ցանկանում եք փոխել որոշ տարրերի ոճը թռիչքի ընթացքում կամ ցուցադրել որոշ տեքստ դրանց ներսում, մինչ վեբ էջն աշխատում է, դա շատ ավելի հեշտ է նույնացուցիչների դեպքում: Տարրը հասանելի է getElementById մեթոդով, որի պարամետրը նույնացուցիչի անունն է։ Օրինակ 1-70-ն ավելացնում է userName անունով նույնացուցիչը ձևի տեքստային դաշտում, այնուհետև օգտագործում է JavaScript ֆունկցիան՝ ստուգելու համար, որ օգտագործողը որոշակի տեքստ է մուտքագրել դաշտում: Եթե ​​տեքստ չկա, բայց «Ներկայացնել» կոճակը սեղմված է, ապա պիտակի ներսում հաղորդագրություն է ցուցադրվում ID msg-ով: Եթե ​​ամեն ինչ ճիշտ է, ձևի տվյալները ուղարկվում են գործողություն հատկանիշով նշված հասցեին:

Օրինակ 1.70. Ձևի տվյալների վավերացում XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6