2016-12-29

Animujeme tlačidlá a kontrolujeme platnosť HTML a CSS kódu

Dobrý deň, milý návštevník!

Dnes na príklade vytvorenej webovej stránky zvážime, ako môžete skontrolovať platnosť stránky, konkrétne súlad so stanovenými špecifikáciami jazykov HTML a CSS.

Okrem toho pred kontrolou urobíme nejakú revíziu CSS štýlov v časti súvisiacej s „animovaním“ tlačidiel bočného panela, kde zo statických tlačidiel urobíme interaktívne, ktoré menia svoj vzhľad v závislosti od stavu – pasívne, aktívne a stlačené .

• Vytváranie trojrozmerných tlačidiel
• Vytváranie interaktívnych tlačidiel
• Potrebujete overenie
• Ako overiť HTML kód
• Ako overiť kód CSS
• Zdrojové súbory lokality

Vytváranie trojrozmerných tlačidiel

V predchádzajúcom článku sme naštylizovali oblasť hlavného obsahu tak, aby zodpovedala rozloženiu domovskej stránky. Zároveň sa v bočnom paneli momentálne nachádzajú tlačidlá, ktoré sú statické a vyzerajú ako obyčajný plochý hnedý obdĺžnik so zaoblenými rohmi.

Nižšie je uvedený úryvok bočného panela s takýmito tlačidlami.

Aby sme tlačidlá „oživili“, dajme im najprv nejaký objem pomocou CSS štýlov. A urobíme to pomocou vlastnosti lineárneho gradientu, ktorá sa predtým používala pri návrhu blokov rotátora, vyhľadávania a odberu.

Hodnoty lineárneho gradientu sú definované takto:

1. Odtiene farieb budú nastavené zdola nahor, počnúc tmavšou farbou, než je hlavná farba tlačidla. Na určenie, ktorú farbu použiť na začiatku prechodu, používame nástroj grafického editora, v tomto prípade Photoshop.

Ak to chcete urobiť, v otvorenom dokumente rozloženia dizajnu vyberte „Paleta farieb“, presuňte kurzor na požadovanú oblasť tlačidla, definujte hlavnú farbu a potom pomocou nástrojov „Paleta farieb“ vyberte tmavšiu farbu. rovnaký hnedý odtieň. V našom prípade zoberme farbu s hodnotou „653939“. Ako to možno urobiť, je jasne znázornené na obrázku nižšie.

2. Ďalej definujte stop-pozíciu gradientu, kde bude počiatočná, tmavšia farba prechádzať do hlavnej. Pozíciu zastavenia umiestnime približne do stredu. Zároveň, aby bola farba sýtejšia, posunieme polohu dorazu trochu nahor a zadefinujeme jej hodnotu, povedzme, 70% výšky.

3. Posledná vec, ktorú musíte urobiť na priradenie vlastností prechodu, je definovať svetlejšiu farbu ako je základná farba, ktorá zafarbí tlačidlá v hornej časti. Robí sa to rovnakým spôsobom ako pri definovaní počiatočnej farby prechodu. V tomto prípade budeme brať hodnotu tejto farby ako „b88686“.

3. Na základe prijatých údajov pridajte lineárny gradient k predtým vygenerovaným vlastnostiam CSS tlačidiel.

vstup: {

výška : 30px;

okraj-dole : 10px;

hraničný polomer : 5px;

pozadie : # a76d6d;

zarovnanie textu : stred;

font-weight : tučné;

farba : #fff;

plavák : správny;

obrázok na pozadí

Je možné poznamenať, že pri určovaní extrémnych farieb tu nie sú uvedené polohy zastavenia, pretože to nie je potrebné pri hodnotách 0% a 100%.

Teraz obnovme prehliadač a uvidíme výsledok.

Ako vidíte, tlačidlá získali mierne vydutie. Teraz ich môžete začať „revitalizovať“.

Vytváranie interaktívnych tlačidiel

Aby sme s tlačidlami plnohodnotne pracovali, urobíme ich interaktívnymi, ktoré budú vizuálne odrážať ich tri hlavné stavy, pasívny (tlačidlo je v počiatočnom stave), aktívny (kurzor sa pohybuje nad tlačidlom) a stlačený (keď kurzor sa pohybuje, tlačidlo myši je stlačené a podržané).

A urobíme to pomocou kombinácie vlastností tieňa a okraja. Podstatou tejto techniky je, že zmenou farby tieňa a okrajov z rôznych strán môžete dosiahnuť imitáciu zmeny stavu tlačidiel.

Najprv to urobme pre pasívny stav a pokúsme sa ho zobraziť tak, aby tlačidlá stúpali nad povrch.

Farby okrajov a tieňov vyberieme rovnako ako v predchádzajúcich prípadoch.

Kód CSS po príslušných doplneniach nadobudne formu.

vstup: {

výška : 30px;

okraj-dole : 10px;

hraničný polomer : 5px;

pozadie : # a76d6d;

zarovnanie textu : stred;

font-weight : tučné;

farba : #fff;

plavák : správny;

obrázok na pozadí : lineárny gradient (nahor, # 653939, # a76d6d 50 %, # b88686);

box-shadow : 2px 2px 4px 0px # 422a2a;

hraničná šírka : 2px;

border-style : pevná látka;

border-color : #ddbebe # 241616 # 241616 #ddbebe;

Tu je možné poznamenať, že hranice sú reprezentované kombináciou vlastností, ktoré určujú hrúbku (šírka okraja s hodnotou 2px), štýl (border-style) s hodnotou, ktorá určuje plný okraj a farby (border-color) na každej zo štyroch strán.

Poďme aktualizovať prehliadač a uvidíme, ako budú tlačidlá teraz vyzerať.

Ako vidíte, tlačidlá sa v tomto stave zdajú byť zdvihnuté.

Teraz skúsme, aby tlačidlá vyzerali ako stlačené. Aby sme to dosiahli, odstránime tieň a zmeníme farbu okrajov. V tomto prípade použijeme špeciálny selektor pseudotriedy: hover, zodpovedajúci aktívnemu stavu.

CSS pre aktívny stav tlačidiel bude vyzerať takto.

vstup: vznášať sa {

box-shadow : žiadny;

border-color : # a76d6d # a76d6d # a76d6d # a76d6d;

V tomto prípade opäť zmeníme farbu okrajov a pridáme tieň, len v tomto prípade bude vnútorný a bez odsadenia. Volič pseudotriedy sa tiež zmení na: aktívny, zodpovedajúci stlačenému stavu.

CSS kód pre stlačený stav bude nasledovný.

vstup: aktívny {

box-shadow : 0px 0px 7px 2px # 422a2a vložka;

border-color : # 777 #fff #fff # 777;

Tlačidlo "Hľadať" je zobrazené nižšie pre porovnanie, kde môžete jasne vidieť, ako mení svoj vzhľad v závislosti od stavu.

Obr. 8 Pasívny stav

Tu sme dokončili rozloženie hlavnej stránky a priviedli ju do podoby, ktorá zodpovedá rozloženiu dizajnu. A teraz musíme, ako predtým v každej fáze, skontrolovať krížovú kompatibilitu v rôznych prehliadačoch. Predtým však skontrolujeme validáciu stránky, keďže stav kódu môže do určitej miery ovplyvniť krížovú konzistenciu. Preto teraz vykonáme túto veľmi potrebnú operáciu.

Potrebujete overenie

Validácia je overenie kódu oproti zavedeným štandardom. Rozlišujte medzi validáciou správnosti HTML a CSS kódu. Zároveň je jasné, že v jednom prípade sa kontroluje HTML kód, v druhom CSS kód.

Pravdepodobne bude mnohým pripadať zvláštna otázka, či je potrebná validácia. Ak sa však pozriete na internet, môžete vidieť, že mnohí veria, že platný kód je voliteľný, že je to strata času, pretože prehliadače fungujú dobre aj v prípade všetkých druhov chýb.

Samozrejme, v mnohých prípadoch môžu stránky s neplatným kódom fungovať dobre, ale krížovú konzistentnosť v takýchto prípadoch nemožno zaručiť. Koniec koncov, existujú štandardy pre samotné programovacie jazyky, ale pre skutočnosť, že prehliadače opravujú chyby rovnakým spôsobom, takýto štandard samozrejme neexistuje a nemôže existovať. A preto si rôzne prehliadače dokážu s chybami poradiť rôznym spôsobom, čo môže viesť k rozdielnemu zobrazeniu stránok.

A vo všeobecnosti nie je jasné, prečo niektorí ľudia majú taký obrazný postoj k svojej práci, podľa zásady „to bude robiť“. Ak sa teda niekto domnieva, že nepotrebuje kontrolovať platnosť kódu, tak je to jeho právo a len ťažko sa dá presvedčiť o opaku a ani to netreba.

Teraz prejdime k priamej kontrole platnosti kódov, najprv HTML, potom CSS.

Ako overiť HTML kód

V podstate je samotná kontrola overenia kódu celkom jednoduchá, ako je teraz vidieť. Odstránenie chýb však zvyčajne trvá určitý čas. Samozrejme, ak kód pozostáva z niekoľkých riadkov, môžu tu nastať ťažkosti. Ale ak sú ich stovky a tisíce, možno budete musieť tvrdo pracovať, všetko závisí od toho, ako dobre bol kód skompilovaný. Preto je lepšie to robiť častejšie spoločnou kontrolou krížovej konzistencie.

Tu zvážime najjednoduchšiu a najbežnejšiu možnosť kontroly platnosti - ide o použitie stránky „Konzorcium W3C“, ktorá s podporou vývojárov prehliadačov vyvíja špecifikácie pre kódy webových stránok.

Pre kontrolu HTML kódu stačí kliknúť na odkaz https://validator.w3.org/, kde sa otvorí stránka s poľom na zadanie adresy kontrolovanej stránky.

snímka obrazovky 51

Po kliknutí na tlačidlo "Skontrolovať" dostaneme výsledok kontroly.

V tomto prípade je kód HTML platný, existuje však odporúčanie použiť atribút lang s hodnotou "ru", keďže stránka používa ruštinu.

Atribút lang je určený pre prehliadače na správne zobrazenie určitých znakov, ako sú úvodzovky, v závislosti od používaného jazyka. Preto nebude zbytočné, aby sme ho zahrnuli do HTML kódu. A to urobíme v html tagu, aby tento atribút mohol ovplyvniť celý dokument.

Ako vytvoriť tento doplnok je uvedený v nasledujúcej tabuľke.

"ru" >

. . .

A teraz, keď urobíme druhú kontrolu, môžeme vidieť, že kód sa stal úplne platným bez akýchkoľvek komentárov.

Týmto spôsobom sme skontrolovali súbor zverejnený na internete. Keď však stránka ešte nebola zverejnená v sieti, môžete jej platnosť skontrolovať iným spôsobom, a to buď nahrať súbor pomocou tlačidla prehľadávania, alebo použiť formulár na priame skopírovanie HTML kódu.

Snímka obrazovky zobrazuje poslednú možnosť, keď sa kód webovej stránky skopíruje priamo do formulára na overenie.

Po vykonaní kontroly dostaneme podobný výsledok a tu sa zobrazí aj skontrolovaný kód. V prípade, že sa nájdu chyby, budú zvýraznené pre zjednodušenie vyhľadávania, čo značne zjednodušuje prácu pri ich odstraňovaní.

Ako overiť kód CSS

Zaoberali sme sa kontrolou overenia HTML. Overenie kódu CSS prebieha presne v rovnakom poradí. Iba v tomto prípade je potrebné použiť inú stránku validátora, ktorá sa pre takýto prípad nachádza na adrese http://jigsaw.w3.org/css-validator/.

Otvoríme ho a rovnako ako predtým zadáme adresu kontrolovanej stránky, po ktorej stlačíme tlačidlo „Skontrolovať“.

Výsledok tejto kontroly je zobrazený na snímke obrazovky.

Ako vidíte, náš CSS kód je plne v súlade so špecifikáciou bez akýchkoľvek chýb, čo je dobrý výsledok.

Poradie ostatných metód overenia sa v tomto prípade úplne zhoduje s podobnými kontrolami kódu HTML. Nebudeme sa tu preto opakovať a tu zvažovanie overovacích kontrol ukončíme.

Potom skontrolujeme krížovú zhodu našej stránky a uistíme sa, že sa zobrazuje rovnako vo všetkých prehliadačoch, čím dokončíme rozloženie hlavnej stránky webu.

A budeme sa tým zaoberať hneď po novoročných sviatkoch.

A na záver môžete zaželať všetkým šťastný nový rok! A želám vám zdravie, lásku, radosť, prosperitu a samozrejme veľa úspechov pri vytváraní vlastnej webovej stránky pre možnosť úspešnej práce na internete v novom roku!

Zdrojové súbory lokality

Zdrojové súbory lokality s aktualizáciami, ktoré boli vykonané v tomto článku, si môžete stiahnuť z prílohy doplnkové materiály.

V jednom z mojich predchádzajúcich článkov som hovoril o. Nie každý to však vie validátor pre HTML, existuje validátor aj pre CSS.

Význam Platnosť CSS rovnaké ako HTML: takmer irelevantné. Podobne s Html ak napíšeš neplatný CSS, potom nebudú žiadne problémy (pokiaľ, samozrejme, nebudú hrubé chyby), ale platný kód je vždy dobrý. Takýto kód je prehľadný a štruktúrovaný, je ľahko pochopiteľný, čo je tiež dôležité najmä pri opravách a najmä pre iných ľudí. Tiež Platnosť CSS urýchľuje proces spracovania a tým aj rýchlosť načítania stránok.

A napokon, vzhľadom na všeobecne zriedkavé dodržiavanie platnosti, platný kódex vždy vzbudzuje rešpekt, čo je dôležité, ak sa tomu venujete profesionálne.

Komu skontrolujte platnosť CSS, musíte použiť toto služba W3: http://jigsaw.w3.org/css-validator/.

Hneď vám poviem, že na rozdiel od toho Html, urobte CSS platné oveľa jednoduchšie, keďže väčšinou ide len o chyby, s výnimkou tých, ktorým je lepšie sa úplne vyhnúť.

Zhrniem to. Nie je vôbec potrebné, aby bol kód platný, ale vrelo to odporúčam urobiť, pretože takúto stránku budú vyhľadávače ľahšie indexovať ( HTML platnosť), rýchlejšia práca, jednoduchšia úprava a rešpekt od profesionálov.

Nedávno som od používateľov dostal niekoľko otázok týkajúcich sa platnosti mojich tém a overenia vo všeobecnosti. V tomto príspevku chcem na ne odpovedať.

čo je platnosť?

Verí sa, že platnosť kódu je jedinou univerzálnou charakteristikou akéhokoľvek kódu.
Platnosť je v skutočnosti zhoda html kódu dokumentu s určitým súborom pravidiel špecifikovaných v doctype alebo implikovaných v HTML5.
To znamená, že platnosť je relatívny pojem, pretože pravidlá sú odlišné a majú tiež požiadavky.
Aby to bolo jasnejšie, uvediem príklad, ktorý som našiel na stránke css-live.ru:

Na výstavbu obytných budov a jadrových elektrární sa uplatňujú rôzne SNiP (stavebné predpisy a predpisy), preto dokument platný podľa jedného súboru pravidiel nemusí byť platný inak (jadrová elektráreň postavená podľa noriem obytnej budovy bolo by dobré!).

Doctype zvyčajne označuje dokument, na ktorom je plánovaná html validácia, ale môže byť zvolený z pragmatických dôvodov na výber optimálneho režimu prehliadača.
XHTML5 nemusí mať vôbec typ dokumentu, ale je platný.

Čo je validácia?

Zjednodušene povedané, validácia je proces kontroly kódu a jeho zosúladenie so zvoleným typom dokumentu (DTD).

Ako sa kontroluje platnosť?

Platnosť HTML kódu kontroluje nástroj nazývaný validátor.
Najznámejší validátor w3c je https://www.w3.org.
Validátor w3c vykoná niekoľko kontrol kódu.
Tie hlavné:

1. Kontrola syntaktických chýb:
   Príklad z habrahabr.ru/post/101985:
   je správna syntax, aj keď je neplatná značka HTML
   Takže kontrola syntaxe je minimálne užitočná na písanie dobrého HTML.
2. Kontrola vnorenia značiek:
   V dokumente HTML musia byť značky zatvorené v opačnom poradí ako pri otváraní. Táto kontrola identifikuje neuzavreté alebo nesprávne zatvorené značky.
3. HTML validácia podľa DTD:
   Kontrola, ako sa kód zhoduje so zadaným DTD - Definícia typu dokumentu (doctype). Zahŕňa kontrolu názvov značiek, atribútov a „vloženie“ značiek (značky jedného typu v rámci značiek iného typu).
4. Skontrolujte prítomnosť cudzích prvkov:
   Zistí všetko, čo je v kóde, ale nie je v doctype.
   Napríklad vlastné značky a atribúty.

Na kontrolu platnosti kódu CSS existuje validátor css - http://jigsaw.w3.org/css-validator.
Platnosť kódu- je to výsledok mechanickej kontroly absencie formálnych OB podľa špecifikovaného súboru pravidiel.
Musíte pochopiť, že validácia je nástroj, nie hodnota sama o sebe.
Skúsení dizajnéri rozloženia zvyčajne vedia, kde porušiť pravidlá validácie HTML alebo CSS a kde nie, a čo hrozí (alebo nehrozí) tá či oná chyba validácie.
Príklady, keď stránka vytvorí neplatný kód:

• pohodlnejšie a rýchlejšie - vlastné atribúty pre Javascrip / AJAX resp
• SEO optimalizované - ARIA markup.

Je jasné, že platnosť nemá zmysel pre platnosť.
Skúsení dizajnéri rozloženia spravidla dodržiavajú nasledujúce pravidlá:
- V kóde by nemali byť žiadne hrubé chyby.
- Maloletí môžu byť tolerovaní, ale len z opodstatnených dôvodov.
Pokiaľ ide o platnosť chýb overenia html / CSS:

Chyby validácie (OB) možno rozdeliť do skupín:

• OB v súboroch šablón:
  Nie je ťažké ich nájsť a opraviť.
  Ak niektoré z malých chýb pomôžu urobiť web funkčnejším alebo rýchlejším, môžete ich opustiť.
• OB v skriptoch tretích strán pripojených na web:
  Napríklad miniaplikácia Vkontakte, skript Twitter alebo videosúbory z YouTube.
  Nebude ich možné nijako opraviť, keďže tieto súbory a skripty sa nachádzajú na iných stránkach a my k nim nemáme prístup.
• Pravidlá CSS, ktorým validátor nerozumie:
  Validátor kontroluje, či sa kód stránky zhoduje s konkrétnou verziou HTML alebo CSS.
  Ak ste vo svojej šablóne použili pravidlá CSS verzie 3 a validátor skontroluje súlad s verziou 2.1, potom bude považovať všetky pravidlá CSS3 za chyby, aj keď nie sú.
• OV, ktoré musia byť nevyhnutne ponechané na stránke, aby sa dosiahol požadovaný výsledok. Napríklad:
  • noindex tagy. Nie sú platné, ale sú veľmi potrebné a treba to strpieť.
  • kaki. Ak chcete získať správne zobrazenie stránky v niektorých prehliadačoch, niekedy musíte použiť hacky - kód, ktorému rozumie iba určitý prehliadač.
• Chyby samotného validátora.
  Často nevidí žiadne značky (napríklad zatváranie značiek) a hlási o OB tam, kde nie je.

Ukazuje sa, že na pracovnom mieste bude takmer vždy nejaký OB.
Navyše ich môže byť veľa.
Napríklad hlavné stránky Google, Yandex a mail.ru obsahujú niekoľko desiatok chýb.
Nenarušujú však zobrazovanie stránok v prehliadačoch a nezasahujú do ich práce.
Všetko napísané vyššie platí aj pre moje témy.

Zložité témy majú:

• Funkcie WordPress (napr the_category ()) ktoré poskytujú neplatný kód.
• Video výstup zo stránok s videohostingom, napríklad z YouTube, a v kóde YouTube je veľa OV, ktoré nemôžeme ovplyvniť ani vy, ani ja.
• Tlačidlá sociálnych sietí, ktoré sú prepojené pomocou skriptov týchto sietí a obsahujú OB.
• Pravidlá CSS3 a HTML5, ktoré starší validátori považujú za chyby.
  Zároveň validátory verzií CSS3 a HTML5 považujú staré pravidlá za chyby :).
• Niekedy, aby ste dosiahli správne zobrazenie v Internet Exploreri alebo starších verziách iných prehliadačov, musíte použiť takzvané hacky – kód, ktorému rozumie len konkrétny prehliadač, aby ste mohli napísať pravidlá pre zobrazenie stránky špeciálne pre tento prehliadač.

Výsledkom je, že úplne platný kód získate iba vtedy, keď zadáte veľmi jednoduché témy, t.j. tie, ktoré obsahujú minimálne množstvo funkcií.
Po dokončení rozloženia ktorejkoľvek z mojich tém ju vždy skontrolujem pomocou validátora a opravím všetky OB, ktoré sa dajú opraviť bez straty funkčnosti témy.
To znamená, že ak je na výber medzi pracovnou funkčnosťou a platnosťou, volím funkčnosť.
Ak sadíte svoje témy, odporúčam vám urobiť to isté.
Z môjho pohľadu (a tiež z pohľadu väčšiny dizajnérov layoutov) je postoj k validácii html/CSS ako konečnej pravdy nesprávny. Je nevyhnutné opraviť iba tie OV, ktoré:
- zabrániť prehliadaču v správnom zobrazení stránky (neuzavreté a nesprávne vnorené značky).
- spomaľujú načítanie stránky (nesprávne pripojené skripty).
- možno opraviť bez porušenia témy.
Dúfam, že som odpovedal na všetky overovacie otázky.

Čo existuje z hľadiska platnosti html kódu, som už spomenul. Toto by sa malo robiť aspoň z času na čas, pretože platnosť html aj css silne ovplyvňuje stránku, to znamená identické zobrazenie vášho zdroja v rôznych prehliadačoch (všeobecný článok o populárnych a najlepších webových prehliadačoch, ktorý vám, dúfam, pomôže pri výbere v prospech jedného z nich).

Okrem toho som už spomínal, napriek tomu, že vyhľadávače v tejto fáze nezohľadňujú chyby v CSS a HTML kóde pri hodnotení stránok, v budúcnosti sa môže všetko zmeniť a môžete naraziť na situáciu, že krásne navrhnutý, vyrobený pre Ľudia môžu stratiť časť potenciálneho publika kvôli tomu, že neprešiel validáciou. No dobre, všetko sú to texty, tu si každý určí, aké dôležité je všetko.

Myslím, že môj názor už poznáte, keďže píšem tento článok, čo znamená, že ho považujem za hodný pozornosti spolu napríklad s takou dôležitou súčasťou seo optimalizácie, akou je zatváranie odkazov a fragmentov textu z indexovania Google a Yandex alebo kompetentné použitie.

Dobre, ako sa hovorí, skôr k veci. Najprv niečo o CSS. CSS ( Kaskádové štýly- Cascading Style Sheets) je jazyk štýlov, ktorý definuje zobrazenie dokumentov HTML. To znamená, že ak HTML popisuje obsah stránky, potom CSS formátuje tento obsah, inými slovami, dáva mu úplný vzhľad. Mimochodom, na zvýšenie rýchlosti vašich stránok bude užitočné hostiť súbory tém.

W3C validátor: validácia CSS kódu

Teraz prejdime k tomu, ako skontrolovať platnosť dokumentu (stránky nášho webu alebo WordPress blog). Rovnako ako v prípade kontroly HTML kódu použijeme jeden z nástrojov. Prejdime k overovacej službe CSS:

Ako vidíte, existujú tri spôsoby, ako skontrolovať platnosť CSS pomocou validátora W3C. Mimochodom, všimnite si, že v spodnej časti stránky validátora je poznámka, ktorá naznačuje, že je potrebné skontrolovať platnosť kódu HTML. Len oba správne kódy zaručujú správnosť celého dokladu. Ak chcete skontrolovať, zadajte adresu URL. Pozrime sa napríklad na domovskú stránku môjho blogu:

Výsledok kontroly W3C validátora na chyby kódu CSS nemožno nazvať sklamaním, pretože sa našli iba 2 chyby. Samozrejme, tieto chyby sú rôzne, v každom prípade spôsobujú iné následky. Pozrime sa, čo môžeme urobiť, aby sme ich odstránili. Všetko je tu pohodlné, pretože validátor W3C poskytuje nielen odkaz na dokument obsahujúci nesprávny kód, ale aj číslo riadku, na ktorom sa nachádza. Mimochodom, nižšie sa po zozname upozornení a chýb zobrazí variant správneho CSS kódu, ktorý je možné použiť:

Na stránke s výsledkami validácie CSS je odkaz na dokument css.ie ktorý sa nachádza v priečinku témy. Bol vytvorený s cieľom dosiahnuť blog medzi prehliadačmi (konzistentné zobrazovanie v populárnych prehliadačoch). Navyše je to pre rôzne úpravy Internet Explorera, ktorý trpí rôznymi „zárubňami“ z hľadiska skresľovania vzhľadu stránky, najmä jej starších verzií (IE9 je v tomto smere oveľa lepší). Kompatibilita medzi prehliadačmi je veľmi dôležitá pre napredovanie projektu, ale pri kontrole sa ukázalo, že tento dokument obsahuje vlastnosti, ktoré nespĺňajú štandardy W3C.

Dostaneme teda riadky 3 a 12, ktoré obsahujú chyby. Ak ich chcete opraviť, mali by ste odstrániť chybu analýzy html (filter: výraz (document.execCommand ("BackgroundImageCache", false, true));) a majetok .zoom... Teraz nebudem zachádzať do zložitosti programovania a usporiadania stránok, len poznamenám, že majetok výraz pomáha zbaviť sa nepríjemného blikajúceho efektu obrázkov na pozadí, ktorý sa vyskytuje v IE6.

To znamená v prehliadači, ktorého používanie je zbytočné a v nasledujúcich verziách sa tento „závada“ už nepozoruje. Hneď musím povedať, že tento „liek“ budem ešte nejaký čas používať, kým počet potenciálnych návštevníkov využívajúcich IE6 nedosiahne minimálnu úroveň. Aby som vám však ukázal, ako na to bude validátor W3C reagovať, odstránim ho.

Vlastnosť .zoom, ktorá nastavuje faktor priblíženia prvku, ktorý nie je súčasťou medzinárodného štandardu W3C, podporujú veľmi staré verzie prehliadačov Opera, Safari, vrátane IE8(Verzia 9 je takmer úplne "dodržiavajúca zákony", takže dúfam, že webmasteri budú čoskoro oslobodení od potreby používať hacky, teda dodatočné kódy, ktoré umožňujú maximálnu kompatibilitu medzi prehliadačmi). Teraz sa pozrime na dokument obsahujúci neplatné prvky a opravíme ho:

Tento dokument sa nachádza v mojom priečinku s témou Cloudy, odstraňujem vyššie uvedené položky, ktoré neprešli overovacou kontrolou. Okrem toho sa vo výsledkoch overovacej kontroly okrem chýb vyskytlo aj množstvo takzvaných varovaní:

Ako príklad sa pokúsim jasne ukázať, ako sa zbaviť najbežnejších z nich, a popri tom vysvetliť ich význam. Ako vidíte, validátor W3C varuje pred prítomnosťou rovnakých farieb pre text a pozadie. Musím povedať, že je to vo všeobecnosti v každom prípade nežiaduce, pretože vyhľadávače môžu tento stav považovať za skrývanie informácií, ktoré je spojené so závažnými sankciami.

Samozrejme, nie vždy to tak je, no toto nebezpečenstvo nemožno podceňovať. Poďme teda priamo k náprave situácie. Najlepším riešením je skopírovať súbor style.css vaša téma v editore HTML a PHP notepad ++, o ktorej som hovoril a ktorá uľahčuje vyhľadávanie podľa čísla riadku:

Teraz vieme, kde sa tieto riadky nachádzajú vo vašom súbore témy, upravte farbu miernou zmenou odtieňa. V hexadecimálnej farbe predstavuje #ffffff bielu. Zmeníme ho nasledovne: namiesto posledného f zadáme d, dostaneme tak trochu iný odtieň bielej; teraz zmeny nebudú viditeľné pre používateľov, ale vyhľadávače uvidia rozdiel:

Takto môžete upraviť neplatné časti kódu CSS stránok zdrojov. Tak isto nájdeme aj zvyšok úsekov označených upozorneniami, ktoré je potrebné opraviť, čo sa týka upozornení na linku 483 (mimochodom, bolo ich dosť, asi 10). Pri kontrole som zistil, že príčinou bol doplnok WP Page Numbers, ktorý poskytuje navigáciu po stránkach.

To ma prinútilo deaktivovať tento doplnok a bol to dôvod, prečo som ho nakoniec nahradil vložením kódu, čo bol krok k zníženiu zaťaženia servera. Akonáhle som to urobil, upozornenia týkajúce sa porušenia platnosti kódu týmto konkrétnym pluginom po druhej kontrole okamžite zmizli. Po vyššie uvedených gestách znova skontrolujeme platnosť CSS pomocou validátora W3C:

Teraz viete, ako skontrolovať platnosť dokumentu CSS (webovej stránky alebo stránky blogu) pomocou validátora W3C. Na záver by som rád poznamenal, že miera a frekvencia kontroly platnosti CSS kódu je na každom samotnom, všetko závisí od okolností, no aj napriek tomu to z času na čas podľa môjho hlbokého presvedčenia urobiť treba. Prihláste sa na odber aktualizácií blogu a získajte čerstvé materiály e-mailom. Dovoľte mi odísť, dúfam, že sa na chvíľu rozídeme.

Validácia je overenie kódu CSS podľa špecifikácie CSS2.1 alebo CSS3. V súlade s tým sa správny kód, ktorý neobsahuje chyby, nazýva platný a ktorý nespĺňa špecifikáciu, sa nazýva neplatný. Najpohodlnejší spôsob, ako skontrolovať kód, je prostredníctvom webovej stránky. http://jigsaw.w3.org/css-validator/, pomocou tejto služby môžete zadať adresu dokumentu, nahrať súbor alebo skontrolovať napísaný text. Veľkým plusom služby je podpora ruského a ukrajinského jazyka.

Skontrolujte URI

Táto karta vám umožňuje zadať adresu stránky hosťovanej na internete. Protokol http: // nemusíte písať, pridá sa automaticky (obr. 1.42).

Ryža. 1.42. Kontrola dokladu na

Po zadaní adresy kliknite na tlačidlo „Skontrolovať“ a zobrazí sa jeden z dvoch nápisov: „Blahoželáme! Nenašli sa žiadne chyby „ak je úspešný, alebo“ Ľutujeme, našli sme nasledujúce chyby, „ak je kód neplatný. Chybové alebo varovné správy zahŕňajú číslo riadku, volič a popis chyby.

Skontrolujte nahraný súbor

Táto karta vám umožňuje načítať súbor HTML alebo CSS a skontrolovať v ňom chyby (obrázok 1.43).

Ryža. 1.43. Kontrola súboru pri jeho načítaní

Služba automaticky rozpozná typ súboru a ak je zadaný dokument HTML, extrahuje z neho štýl na overenie.

Skontrolujte napísaný text

Posledná záložka je určená na priame zadávanie HTML alebo CSS-kódu, pričom bude kontrolovaný iba štýl (obr. 1.44).

Ryža. 1.44. Kontrola zadaného kódu

Táto možnosť sa javí ako najvhodnejšia na vykonávanie rôznych experimentov s kódom alebo rýchlej kontroly malých fragmentov.

Výber verzie CSS

CSS3 pridáva mnoho nových vlastností štýlu v porovnaní s predchádzajúcou verziou, takže overenie kódu by malo byť špecifické pre danú verziu. V predvolenom nastavení služba špecifikuje CSS2.1, takže ak chcete svoj kód porovnať s CSS3, musíte ho špecifikovať explicitne. Ak to chcete urobiť, kliknite na text "Ďalšie funkcie" a v otvorenom bloku zo zoznamu "Profil" vyberte CSS3

Ryža. 1,45. Zadanie verzie CSS, ktorú chcete skontrolovať

Identifikátory a triedy

Z času na čas sa diskutuje o vhodnosti používania identifikátorov v rozložení. Hlavným argumentom je, že identifikátory sú určené na to, aby boli skriptované na prístup a manipuláciu s prvkami na webovej stránke a triedy by sa mali používať výlučne na zmenu štýlov prvkov. V skutočnosti nie je rozdiel v tom, aké štýly prechádzajú, ale je tu niekoľko vecí, ktoré treba mať na pamäti, pokiaľ ide o identifikátory a triedy, ako aj úskalia, ktoré môžu na vývojárov čakať.

Najprv si uveďme charakteristické vlastnosti týchto selektorov.

Identifikátory

V kóde dokumentu je každý identifikátor jedinečný a musí byť uvedený iba raz.

V názve identifikátora sa rozlišujú malé a veľké písmená.

Prostredníctvom metódy getElementById môžete pristupovať k prvku podľa jeho identifikátora a meniť vlastnosti prvku.

Štýl pre identifikátor má prednosť pred triedami.

Triedy je možné v kóde použiť viackrát.

V názvoch tried sa rozlišujú malé a veľké písmená.

Triedy je možné navzájom kombinovať pridaním viacerých tried do jednej značky.

Identifikátory

Ak počas prevádzky webovej stránky potrebujete za chodu zmeniť štýl niektorých prvkov alebo v nich zobraziť nejaký text, s identifikátormi je to oveľa jednoduchšie. Element sa volá cez metódu getElementById, ktorej parametrom je názov identifikátora. V príklade 1.70 sa do textového poľa formulára pridá identifikátor s názvom userName a potom sa pomocou funkcie JavaScript skontroluje, či používateľ do tohto poľa zadal akýkoľvek text. Ak tam nie je žiadny text, ale je stlačené tlačidlo Odoslať, vo vnútri štítku sa zobrazí správa s identifikátorom msg. Ak je všetko v poriadku, údaje formulára sa odošlú na adresu uvedenú v atribúte action.

Príklad 1.70. Overenie údajov formulára XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6