2016-12-29

Animujeme tlačítka a kontrolujeme platnost kódu HTML a CSS na webu

Dobrý den, milý návštěvníku!

Dnes se na příkladu vytvořené webové stránky podíváme na to, jak můžete zkontrolovat platnost webu, konkrétně soulad se stanovenými specifikacemi jazyků HTML a CSS.

Navíc ještě před kontrolou uděláme nějaké doladění CSS stylů ohledně „animace“ tlačítek postranního panelu, kde ze statických tlačítek, které mění svůj vzhled v závislosti na stavu – pasivní, aktivní a stisknuté, uděláme interaktivní tlačítka.

• Dělat knoflíky objemné
• Interaktivní tlačítka
• Je nutná validace?
• Jak ověřit HTML kód
• Jak ověřit CSS kód
• Zdrojové soubory webu

Dělat knoflíky objemné

V předchozím článku jsme navrhli oblast hlavního obsahu tak, aby odpovídala rozložení hlavní stránky. V postranním panelu jsou v tuto chvíli tlačítka, která jsou statická a vypadají jako pravidelný plochý hnědý obdélník se zaoblenými rohy.

Níže je fragment postranního panelu s takovými tlačítky.

Abychom tlačítka „animovali“, nejprve jim dáme určitý objem pomocí stylů CSS. A uděláme to pomocí vlastnosti lineárního gradientu, která byla dříve použita při návrhu rotátorových, vyhledávacích a předplatitelských bloků.

Hodnoty lineárního gradientu definujeme takto:

1. Odstíny barev budou nastaveny zdola nahoru, počínaje tmavší barvou v porovnání s hlavní barvou tlačítka. Abychom určili, jakou barvu použít na začátku přechodu, použijeme nástroj grafického editoru, v tomto případě Photoshop.

Chcete-li to provést, s otevřeným dokumentem rozvržení návrhu musíte vybrat „Výběr barvy“, najet na požadovanou oblast tlačítka, určit hlavní barvu a poté pomocí nástrojů „Výběr barev“ vybrat tmavší barvu. stejného hnědého odstínu. V našem případě vezměme barvu s hodnotou „653939“. Jasně, jak to lze udělat, je znázorněno na snímku obrazovky níže.

2. Dále definujte koncovou polohu přechodu, kde počáteční, tmavší barva přejde do hlavní. Poloha zastavení bude umístěna přibližně uprostřed. Zároveň, abychom udělali sytější barvu, posuňme polohu zastavení trochu nahoru a definujme její hodnotu, řekněme, 70 % výšky.

3. A poslední věcí pro nastavení vlastností přechodu je definovat světlejší barvu oproti té hlavní, která obarví tlačítka nahoře. To se provádí stejným způsobem jako při určování počáteční barvy přechodu. V tomto případě bude hodnota této barvy brána jako "b88686".

3. Na základě přijatých dat přidáme k dříve vytvořeným CSS vlastnostem tlačítek lineární gradient.

vstup: {

výška :30px;

okraj-dole :10px;

hraniční poloměr :5px;

Pozadí :#a76d6d;

zarovnání textu :centrum;

váha písma :tučně;

barva :#fff;

plovák :že jo;

obrázek na pozadí

Lze poznamenat, že při určování extrémních barev zde nejsou zadány pozice zastavení, protože to není nutné dělat s hodnotami 0% a 100%.

Nyní obnovíme prohlížeč a podívejme se na výsledek.

Jak můžete vidět, tlačítka získala mírné vyboulení. Nyní je můžete začít „oživovat“.

Interaktivní tlačítka

Aby bylo možné s tlačítky plně pracovat, uděláme je interaktivními, které budou vizuálně odrážet jejich tři hlavní stavy, pasivní (tlačítko je ve výchozím stavu), aktivní (kurzor je najetý na tlačítko) a stisknutý (myš stisknete a podržíte tlačítko, zatímco se kurzor pohybuje).

A uděláme to pomocí kombinace vlastností stínu a ohraničení. Podstatou této techniky je, že změnou barvy stínu a okrajů z různých stran můžete dosáhnout imitace změny stavu tlačítek.

Nejprve to uděláme pro pasivní stav a pokusíme se jej nakreslit tak, aby se tlačítko zvedalo nad povrch.

Barvy okrajů a stínů vybíráme stejně jako v předchozích případech.

CSS-kód po příslušných přídavcích bude mít formu.

vstup: {

výška :30px;

okraj-dole :10px;

hraniční poloměr :5px;

Pozadí :#a76d6d;

zarovnání textu :centrum;

váha písma :tučně;

barva :#fff;

plovák :že jo;

obrázek na pozadí :linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

krabicový stín :2px 2px 4px 0px #422a2a;

hranice-šířka :2px;

styl ohraničení :pevný;

barva ohraničení :#ddbebe #241616 #241616 #ddbebe;

Zde si můžete všimnout, že hranice jsou reprezentovány kombinací vlastností, které určují tloušťku (border-width s hodnotou 2px), styl ( border-style ) s hodnotou určující plný okraj a barvy ( border-color ) na každé ze čtyř stran.

Obnovme prohlížeč a uvidíme, jak budou tlačítka nyní vypadat.

Jak vidíte, tlačítka v tomto stavu jako by se zvedla.

Nyní se pokusme dát tlačítkům vzhled stisknutého stavu. Chcete-li to provést, odstraňte stín a změňte barvu okrajů. V tomto případě použijeme speciální selektor pseudotřídy :hover odpovídající aktivnímu stavu.

CSS kód pro aktivní stav tlačítek bude mít následující podobu.

vstup: vznášet se {

krabicový stín :žádný;

barva ohraničení :#a76d6d #a76d6d #a76d6d #a76d6d;

V tomto případě opět změníme barvu okrajů a přidáme stín, pouze v tomto případě bude vnitřní a bez posunutí. Volič pseudotřídy se také změní na :active , což odpovídá stisknutému stavu.

CSS kód pro stlačený stav by byl následující.

vstup: aktivní {

krabicový stín :0px 0px 7px 2px #422a2a vložka;

barva ohraničení :#777 #fff #fff #777;

Tlačítko "Hledat" je pro srovnání zobrazeno níže, kde jasně vidíte, jak mění svůj vzhled v závislosti na stavu.

Obr.8 Pasivní stav

Tímto jsme dokončili rozvržení hlavní stránky a uvedli ji do vzhledu, který odpovídá rozvržení návrhu. A nyní musíme, jako dříve v každé fázi, zkontrolovat křížovou shodu v různých prohlížečích. Předtím však zkontrolujeme validaci stránky, protože stav kódu může do určité míry ovlivnit i křížovou konzistenci. Proto nyní provedeme tuto velmi potřebnou operaci.

Je nutná validace?

Validace je ověření kódu podle zavedených standardů. Existuje ověření správnosti kódu HTML a CSS. Je jasné, že v jednom případě se kontroluje HTML kód, ve druhém CSS kód.

Pravděpodobně bude pro mnohé divné ptát se, zda je potřeba ověření. Ale když se podíváte na internet, uvidíte, že je mnoho lidí, kteří věří, že platný kód je nepovinný, že je to další ztráta času, protože prohlížeče fungují dobře i v přítomnosti všech druhů chyb.

Samozřejmě, v mnoha případech mohou stránky dobře fungovat na neplatný kód, ale křížovou shodu v takových případech nelze zaručit. Koneckonců, existují standardy pro samotné programovací jazyky, ale pro to, že prohlížeče opravují chyby stejným způsobem, samozřejmě žádný takový standard neexistuje a nemůže být. A proto mohou různé prohlížeče vypracovávat chyby různými způsoby, což může vést k různému zobrazení stránky.

A obecně není jasné, proč mají někteří lidé ke své práci tak figistický postoj podle zásady „a tak to bude“. Pokud se tedy někdo domnívá, že nepotřebuje kontrolovat platnost kódu, pak je to jeho právo a je nepravděpodobné, že by se dal přesvědčit o opaku, a ani to není potřeba.

A nyní přejděme k přímému ověřování platnosti kódů, nejprve HTML, poté CSS.

Jak ověřit HTML kód

V podstatě je samotná kontrola ověření kódu docela jednoduchá, jak nyní vidíme. Zde však odstranění chyb obvykle vyžaduje určitý čas. Samozřejmě, pokud se kód skládá z několika řádků, nemohou zde nastat potíže. Ale pokud jich jsou stovky a tisíce, pak možná budete muset tvrdě pracovat, vše závisí na tom, jak dobře byl kód zkompilován. Proto je lepší to dělat častěji společnou kontrolou křížové shody.

Zde zvážíme nejjednodušší a nejběžnější možnost kontroly platnosti - to je použití webu "W3C Consortium", který s podporou vývojářů prohlížečů vyvíjí specifikace pro kódy webových stránek.

Pro ověření HTML kódu stačí kliknout na odkaz https://validator.w3.org/ , čímž se otevře stránka s polem pro zadání adresy stránky, která má být ověřena.

snímek obrazovky 51

Po kliknutí na tlačítko "Zkontrolovat" získáme výsledek kontroly.

V tomto případě je kód HTML platný, ale existuje doporučení použít s hodnotou atribut lang "ru" protože stránka používá ruštinu.

Atribut lang je určen k tomu, aby prohlížeče správně vykreslovaly určité znaky, jako jsou uvozovky, v závislosti na používaném jazyce. Proto se nám bude hodit zahrnout jej do HTML kódu. A to uděláme v html tagu, aby tento atribut mohl působit na celý dokument.

Jak provést toto přidání je uvedeno v následující tabulce.

"ru" >

. . .

A nyní, když provedeme druhou kontrolu, můžeme vidět, že kód se stal zcela platným bez jakýchkoli komentářů.

Tímto způsobem jsme zkontrolovali soubor zveřejněný na internetu. Když ale stránka ještě nebyla zveřejněna na webu, můžete její platnost zkontrolovat jinými způsoby, buď nahráním souboru pomocí tlačítka procházení, nebo pomocí formuláře přímo zkopírujte HTML kód.

Snímek obrazovky ukazuje poslední možnost, kdy se kód webové stránky zkopíruje přímo do formuláře pro ověření.

Po provedení kontroly dostaneme podobný výsledek a zde se také zobrazí kontrolovaný kód. V případě, že budou nalezeny chyby, budou zvýrazněny pro zjednodušení vyhledávání, což značně zjednodušuje práci s jejich odstraňováním.

Jak ověřit CSS kód

Zabývali jsme se ověřováním HTML kódu. Kód CSS se kontroluje přesně ve stejném pořadí. Pouze v tomto případě je potřeba použít jinou stránku validátoru, která se pro tento případ nachází na adrese http://jigsaw.w3.org/css-validator/ .

Otevřeme ji a stejně jako minule zadáme adresu stránky ke kontrole, načež stiskneme tlačítko "Zkontrolovat".

Výsledek této kontroly je zobrazen na snímku obrazovky.

Jak vidíte, náš CSS kód plně vyhovuje specifikaci bez jakýchkoli chyb, což je dobrý výsledek.

Pořadí ostatních ověřovacích metod se pro tento případ zcela shoduje s podobnými kontrolami HTML kódu. Proto se zde nebudeme opakovat a ukončíme naši kontrolu ověřovacích kontrol.

Poté zkontrolujeme, zda na naší stránce není křížový obrázek a ujistíme se, že se zobrazuje stejně ve všech prohlížečích, čímž se dokončí rozložení hlavní stránky webu.

A uděláme to hned po novoročních svátcích.

A na závěr můžeme všem poblahopřát k nadcházejícímu Novému roku! A do nového roku popřát zdraví, lásku, radost, prosperitu a samozřejmě hodně úspěchů při vytváření vlastních webových stránek pro možnost úspěšné práce na internetu!

Zdrojové soubory webu

Zdrojové soubory webu s aktualizacemi, které byly provedeny v tomto článku, si můžete stáhnout z přílohy doplňkové materiály.

V jednom ze svých předchozích článků jsem mluvil o . Ne každý však ví, že navíc validátor pro HTML, jíst validátor a pro CSS.

Význam Platnost CSS stejně jako HTML: téměř irelevantní. Podobný HTML pokud napíšeš neplatný CSS, pak nebudou žádné problémy (pokud samozřejmě nejsou hrubé chyby), ale platný kód je vždy dobrý. Takový kód je jasný a strukturovaný, je snadno srozumitelný, což je také důležité, zejména při opravách a zejména jinými lidmi. Taky Platnost CSS urychluje proces zpracování a následně i rychlost načítání stránky.

A konečně, s ohledem na obecně vzácné dodržování platnosti, platný kód vždy vzbuzuje respekt, což je důležité, pokud se tomu věnujete profesionálně.

Na zkontrolovat platnost CSS, musíte použít toto služba W3: http://jigsaw.w3.org/css-validator/ .

Hned řeknu, že na rozdíl HTML, dělat CSS platné mnohem jednodušší, protože se většinou vyskytují pouze hrubé chyby, s výjimkou těch, kterým je lepší se úplně vyhnout.

Dovolte mi to shrnout. Udělat kód platným není vůbec nutné, ale důrazně to doporučuji udělat, protože takový web bude snadněji indexovat vyhledávače ( HTML platnost), pracujte rychleji, snáze se upravují a získejte respekt od profesionálů.

V poslední době dostávám od uživatelů několik otázek týkajících se platnosti mých témat a ověřování obecně. V tomto příspěvku na ně chci odpovědět.

co je platnost?

Předpokládá se, že platnost kódu je jedinou univerzální charakteristikou jakéhokoli kódu.
Platnost je ve skutečnosti soulad html kódu dokumentu s určitou sadou pravidel specifikovaných v doctype nebo implikovaných v HTML5.
To znamená, že platnost je relativní pojem, protože pravidla jsou různá a jejich požadavky také.
Aby to bylo jasnější, uvedu příklad, který jsem našel na webu css-live.ru:

Pro výstavbu obytných budov a jaderných elektráren platí různé SNiP (stavební předpisy a předpisy), takže dokument, který je platný podle jednoho souboru pravidel, nemusí být platný podle jiného (jaderná elektrárna postavená podle norem obytný dům by byl dobrý!).

Typ doc obvykle ukazuje na dokument, proti kterému je plánována validace html, ale může být zvolen z pragmatických důvodů pro výběr optimálního režimu prohlížečů.
XHTML5 nemusí mít vůbec doctype, ale je platné.

Validace – co to je?

Jednoduše řečeno, validace je proces kontroly kódu a jeho přizpůsobení zvolenému doctype (DTD).

Jak se kontroluje platnost?

Platnost HTML kódu kontroluje nástroj zvaný validátor.
Nejznámější validátor w3c je https://www.w3.org.
Validátor w3c provádí několik kontrol kódu.
Ty hlavní:

1. Zkontrolujte syntaktické chyby:
   Příklad z habrahabr.ru/post/101985:
   je správná syntaxe, i když je neplatný HTML tag
   Takže pro psaní dobrého HTML kódu je kontrola syntaxe minimálně užitečná.
2. Kontrola vnoření značek:
   V dokumentu HTML musí být značky uzavřeny v opačném pořadí, než je jejich otevření. Tato kontrola detekuje neuzavřené nebo nesprávně uzavřené značky.
3. HTML validace podle DTD:
   Kontrola, jak kód odpovídá zadané DTD - Definice typu dokumentu (doctype). Zahrnuje kontrolu názvů tagů, atributů a „embedding“ tagů (tagů jednoho typu uvnitř tagů jiného typu).
4. Kontrola cizích prvků:
   Najde vše, co je v kódu, ale ne v doctype.
   Například vlastní značky a atributy.

Pro kontrolu platnosti kódu CSS existuje validátor css - http://jigsaw.w3.org/css-validator.
Platnost kódu- jedná se o výsledek mechanické kontroly absence formálního OB podle stanoveného souboru pravidel.
Musíte pochopit, že validace je nástroj, nikoli hodnota sama o sobě.
Zkušení designéři layoutů většinou vědí, kde je možné porušit pravidla validace HTML nebo CSS a kde ne a co hrozí (nebo nehrozí) ta či ona chyba validace.
Příklady, kdy web nevytváří platný kód:

• pohodlnější a rychlejší - vlastní atributy pro Javascript/AJAX popř
• SEO optimalizováno - ARIA markup.

Je jasné, že platnost nemá smysl pro platnost.
Zkušení návrháři rozložení zpravidla dodržují následující pravidla:
- V kódu by neměly být žádné hrubé chyby.
- Drobné lze tolerovat, ale pouze z oprávněných důvodů.
Ohledně chyb ověření html/CSS:

Chyby ověření (VF) lze rozdělit do skupin:

• OV v souborech šablon:
  Není těžké je najít a opravit.
  Pokud některá z malých chyb pomůže k větší funkčnosti nebo zrychlení webu, lze je ponechat.
• OV ve skriptech třetích stran připojených k webu:
  Například widget Vkontakte, skript Twitteru nebo video soubory YouTube.
  Nelze je nijak opravit, protože tyto soubory a skripty jsou umístěny na jiných stránkách a my k nim nemáme přístup.
• Pravidla CSS, kterým validátor nerozumí:
  Validátor kontroluje, zda kód webu odpovídá konkrétní verzi HTML nebo CSS.
  Pokud jste v šabloně použili pravidla CSS verze 3 a validátor porovnává s verzí 2.1, bude všechna pravidla CSS3 považovat za chyby, i když nejsou.
• OV, které musí být nedobrovolně ponechány na webu, aby bylo dosaženo požadovaného výsledku. Například:
  • noindex tagy. Nejsou platné, ale jsou velmi potřebné a musíme se s tím smířit.
  • khaki. Chcete-li získat správné zobrazení webu v některých prohlížečích, musíte někdy použít hacky - kód, kterému rozumí pouze určitý prohlížeč.
• Chyby validátoru.
  Často nevidí žádné značky (například uzavírací) a hlásí o OB tam, kde neexistuje.

Ukazuje se, že na pracovním místě bude téměř vždy nějaký druh OV.
Navíc jich může být hodně.
Například hlavní stránky Google, Yandex a mail.ru obsahují několik desítek chyb.
Nenarušují však zobrazování stránek v prohlížečích a nezasahují do jejich práce.
Vše napsané výše platí pro moje témata.

Mezi komplexní témata patří:

• Funkce WordPressu (např. the_category()), které poskytují neplatný kód.
• Video výstup z videohostingových webů např. z YouTube a v kódu YouTube je spousta OB, které vy ani já nemůžeme ovlivnit.
• Tlačítka sociálních sítí, která jsou propojena pomocí skriptů těchto sítí a obsahují OB.
• Pravidla CSS3 a HTML5 považovala za chyby validátorů starších verzí.
  Validátoři verzí CSS3 a HTML5 přitom považují stará pravidla za chyby :).
• Někdy, abyste dosáhli správného zobrazení v prohlížeči Internet Explorer nebo starších verzích jiných prohlížečů, musíte použít takzvané hacky - kód, kterému rozumí pouze konkrétní prohlížeč, aby bylo možné napsat pravidla pro zobrazování stránek pro tento konkrétní prohlížeč.

Díky tomu můžete získat zcela platný kód pouze při rozvržení velmi jednoduchých témat, tzn. ty, které obsahují minimální množství funkcí.
Po dokončení rozložení jakéhokoli mého tématu vždy zkontroluji validátorem a opravím všechny OB, které lze opravit, aniž by došlo ke ztrátě funkčnosti tématu.
To znamená, že pokud existuje volba mezi funkční funkčností a platností, volím funkcionalitu.
Pokud si vymýšlíte vlastní témata, doporučuji vám udělat totéž.
Z mého pohledu (a také z pohledu většiny designérů layoutů) je přístup k validaci html/CSS jako konečné pravdě špatný. Je povinné opravit pouze ty OB, které:
- zabránit prohlížeči ve správném zobrazení stránky (neuzavřené a nesprávně vnořené značky).
- zpomalit načítání stránky (nesprávně připojené skripty).
- lze opravit bez porušení funkčnosti tématu.
Doufám, že jsem odpověděl na všechny vaše otázky týkající se ověření.

Co existuje z hlediska platnosti html kódu, jsem již zmínil. To by mělo být provedeno alespoň jednou za čas, protože platnost jak html, tak css silně ovlivňuje web, to znamená identické zobrazení vašeho zdroje v různých prohlížečích (obecný článek o oblíbených a nejlepších webových prohlížečích, který vám, jak doufám, pomůže při výběru ve prospěch jednoho z nich).

Navíc jsem již zmínil, že i přesto, že vyhledávače v této fázi neberou v úvahu chyby v CSS a HTML kódu při hodnocení stránek, v budoucnu se může vše změnit a můžete se dostat do situace, kdy projekt, který je krásně navržen, vytvořený pro lidi, může ztratit část potenciálního publika kvůli tomu, že neprošel validací. No, všechno jsou to texty, tady si každý rozhoduje sám, jak je všechno důležité.

Myslím, že můj názor je vám nyní znám, jelikož tento článek píšu, což znamená, že jej považuji za hodný pozornosti spolu například s tak důležitou součástí seo optimalizace, jako je zavírání odkazů a textových fragmentů z indexování Google a Yandex popř. kompetentní použití.

Dobře, jak se říká, spíš k věci. Nejprve něco málo o CSS. css( Kaskádové styly- Cascading Style Sheets) je jazyk stylů, který definuje zobrazení dokumentů HTML. To znamená, že pokud HTML popisuje obsah stránky, pak CSS formátuje tento obsah, jinými slovy, dává mu úplný vzhled. Mimochodem, pro zvýšení rychlosti webu bude užitečné posouvat vaše soubory motivů.

W3C Validator: Kontrola platnosti kódu CSS

Nyní přejdeme k tomu, jak zkontrolovat platnost dokumentu (stránky našeho webu nebo WordPress blog). Stejně jako v případě kontroly HTML kódu použijeme jeden z . Pojďme ke službě ověřování CSS:

Jak vidíte, existují tři způsoby, jak ověřit CSS pomocí validátoru W3C. Mimochodem, všimněte si, že ve spodní části stránky validátoru je poznámka, která označuje nutnost zkontrolovat platnost HTML kódu. Pouze oba správné kódy zaručují správnost celého dokumentu. Zadejte adresu URL, kterou chcete zkontrolovat. Podívejme se například na hlavní stránku mého blogu:

Výsledek validátoru W3C, který kontroluje chyby kódu CSS, nelze nazvat zklamáním, protože byly nalezeny pouze 2 chyby. Tyto chyby jsou samozřejmě různé, v každém případě způsobují jiné následky. Pojďme se podívat, co můžeme udělat pro jejich odstranění. Zde je vše pohodlné, protože validátor W3C poskytuje nejen odkaz na dokument obsahující nesprávný kód, ale také číslo řádku, na kterém se nachází. Mimochodem, níže se po seznamu varování a chyb zobrazí varianta správného CSS kódu, kterou můžete použít:

Na stránce výsledků ověření CSS je odkaz na dokument css.ie, který se nachází ve složce motivu. Byl vytvořen za účelem dosažení blogu napříč prohlížeči (stejné zobrazení v oblíbených prohlížečích). Navíc je pro různé úpravy Internet Exploreru, který hřeší různými „zárubněmi“ z hlediska zkreslování vzhledu webu, zejména jeho starších verzí (IE9 je v tomto ohledu mnohem lepší). Kompatibilita mezi prohlížeči je pro postup projektu velmi důležitá, nicméně při kontrole se ukázalo, že tento dokument obsahuje vlastnosti, které neodpovídají standardům W3C.

Dostaneme tedy řádky 3 a 12, které obsahují chyby. Chcete-li je opravit, odstraňte chybu analýzy html (filtr: expression(document.execCommand("BackgroundImageCache", false, true));) a majetek .Zvětšení. Nyní nebudu zabíhat do spletitosti programování a rozložení stránek, pouze poznamenám, že majetek výraz pomáhá zbavit se nepříjemného efektu blikání obrázku na pozadí, který se vyskytuje v IE6.

To znamená, že v prohlížeči, jehož použití přichází vniveč, a v následujících verzích již tato „závada“ není pozorována. Hned musím říct, že tento „lék“ budu ještě nějakou dobu používat, dokud počet potenciálních návštěvníků pomocí IE6 nedosáhne minimální úrovně. Pro názornost, abych vám ukázal, jak na to bude validátor W3C reagovat, jej odstraním.

Vlastnost.zoom, která nastavuje faktor měřítka prvku, není součástí mezinárodního standardu W3C a je podporována velmi starými verzemi Opery, prohlížeče Safari, včetně IE8(Verze 9 je téměř zcela „dodržující zákony“, takže doufám, že webmasteři budou brzy zbaveni potřeby používat hacky, tedy další kódy pro dosažení maximální kompatibility mezi prohlížeči). Nyní se podíváme na dokument obsahující neplatné prvky a opravíme jej:

Tento dokument je v mé složce motivu Cloudy, mažu výše uvedené položky, které neprošly kontrolou ověření. Dále se ve výsledcích kontroly platnosti kromě chyb objevilo také mnoho takzvaných varování:

Pokusím se například názorně ukázat, jak se zbavit nejběžnějších z nich, a po cestě vysvětlit jejich význam. Jak vidíte, validátor W3C varuje před přítomností stejných barev pro text a pozadí. Musím říci, že je to v každém případě obecně nežádoucí, protože vyhledávače mohou tento stav považovat za skrývání informací, které je spojeno s vážnými sankcemi.

Samozřejmě to neplatí vždy, ale toto nebezpečí není radno podceňovat. Pojďme tedy k nápravě situace. Nejlepší je zkopírovat soubor styl.css vaše téma v HTML a PHP, editor notepad++, o kterém jsem mluvil, který usnadňuje vyhledávání podle čísla řádku:

Nyní víme, kde se tyto řádky nacházejí ve vašem souboru motivu, opravíme barvu mírnou změnou odstínu. V hexadecimálním barevném systému #ffffff odpovídá bílé. Změníme ho následovně: místo posledního f zadáme d, tím dostaneme trochu jiný odstín bílé; nyní změny nebudou pro uživatele patrné, ale vyhledávače uvidí rozdíl:

Takto můžete opravit neplatné části kódu CSS na stránkách zdrojů. Stejně tak najdeme i zbytek úseků označených upozorněním a které je třeba opravit.Co se týče upozornění ohledně linky 483 (mimochodem, bylo jich docela dost, asi 10). Při kontrole jsem zjistil, že jejich příčinou je plugin WP Page Numbers, který poskytuje stránkování.

To mě přimělo k deaktivaci tohoto pluginu a byl to důvod, proč jsem jej nakonec nahradil vkládáním kódu, což byl krok ke snížení zatížení serveru. Jakmile jsem to udělal, varování ohledně porušení platnosti kódu tímto konkrétním pluginem okamžitě po opětovné kontrole zmizelo. Po výše uvedených gestech znovu zkontrolujeme platnost CSS pomocí validátoru W3C:

Nyní víte, jak zkontrolovat platnost dokumentu CSS (webové stránky webu nebo blogu) pomocí validátoru W3C. Závěrem bych rád poznamenal, že o míře a četnosti kontroly platnosti CSS kódu si každý rozhoduje sám, vše záleží na okolnostech, ale přesto se to čas od času podle mého hlubokého přesvědčení udělat musí. Přihlaste se k odběru aktualizací blogu a získejte čerstvé materiály e-mailem. Proto mi dovolte, abych se rozloučil, doufám, že se na chvíli rozejdeme.

Validace se týká kontroly kódu CSS podle specifikace CSS2.1 nebo CSS3. V souladu s tím se správný kód, který neobsahuje chyby, nazývá platný a kód, který nesplňuje specifikaci, se nazývá neplatný. Nejpohodlnější je zkontrolovat kód prostřednictvím webu http://jigsaw.w3.org/css-validator/, pomocí této služby můžete zadat adresu dokumentu, nahrát soubor nebo zkontrolovat napsaný text. Velkým plusem služby je podpora ruského a ukrajinského jazyka.

Zkontrolujte URI

Tato karta umožňuje zadat adresu stránky hostované na internetu. Protokol http:// lze vynechat, bude přidán automaticky (obr. 1.42).

Rýže. 1.42. Ověření dokladu podle adresy

Po zadání adresy klikněte na tlačítko „Zkontrolovat“ a objeví se jeden ze dvou nápisů: „Gratulujeme! Nebyly nalezeny žádné chyby" při úspěchu nebo "Bohužel jsme našli následující chyby" u neplatného kódu. Chybové nebo varovné zprávy obsahují číslo řádku, volič a popis chyby.

Zkontrolujte nahraný soubor

Tato karta vám umožňuje načíst soubor HTML nebo CSS a zkontrolovat v něm chyby (obrázek 1.43).

Rýže. 1.43. Kontrola souboru při jeho nahrávání

Služba automaticky rozpozná typ souboru a pokud je zadán dokument HTML, extrahuje z něj styl pro ověření.

Zkontrolujte napsaný text

Poslední záložka je pro přímé zadání HTML nebo CSS kódu a bude se kontrolovat pouze styl (obr. 1.44).

Rýže. 1.44. Kontrola zadaného kódu

Tato možnost se zdá být nejvhodnější pro provádění různých experimentů s kódem nebo rychlou kontrolu malých fragmentů.

Výběr verze CSS

CSS3 má ve srovnání s předchozí verzí mnoho nových vlastností stylu, takže kontrola kódu by měla být specifická pro verzi. Ve výchozím nastavení služba specifikuje CSS2.1, takže pokud chcete svůj kód porovnat s CSS3, musíte to specifikovat explicitně. Chcete-li to provést, klikněte na text "Další funkce" a v bloku, který se otevře, ze seznamu "Profil" vyberte CSS3

Rýže. 1,45. Určení verze CSS ke kontrole

Identifikátory a třídy

Pravidelně se objevuje spor o vhodnosti použití identifikátorů v rozložení. Hlavním argumentem je, že identifikátory slouží k přístupu a manipulaci s prvky webové stránky pomocí skriptů a ke změně stylů prvků by se měly používat pouze třídy. Ve skutečnosti nezáleží na tom, jaké styly jsou nastaveny, ale měli byste si být vědomi některých funkcí identifikátorů a tříd a také úskalí, která mohou vývojáři očekávat.

Pro začátek uvádíme charakteristické vlastnosti těchto selektorů.

Identifikátory

V kódu dokumentu je každý identifikátor jedinečný a měl by být uveden pouze jednou.

V názvu identifikátoru se rozlišují velká a malá písmena.

Prostřednictvím metody getElementById můžete přistupovat k prvku podle jeho ID a měnit vlastnosti prvku.

Styl pro identifikátor má přednost před třídami.

Třídy lze v kódu použít vícekrát.

V názvech tříd se rozlišují velká a malá písmena.

Třídy lze vzájemně kombinovat přidáním několika tříd do jedné značky.

Identifikátory

Pokud chcete změnit styl některých prvků za běhu nebo v nich zobrazit nějaký text, když je webová stránka spuštěna, je to s identifikátory mnohem jednodušší. K prvku se přistupuje pomocí metody getElementById, jejímž parametrem je název identifikátoru. Příklad 1-70 přidá identifikátor s názvem userName do textového pole formuláře a poté pomocí funkce JavaScript zkontroluje, zda uživatel do pole zadal nějaký text. Pokud zde není žádný text, ale kliknete na tlačítko Odeslat, zobrazí se uvnitř štítku zpráva s ID msg . Pokud je vše v pořádku, jsou data formuláře odeslána na adresu uvedenou v atributu action.

Příklad 1.70. Validace dat formuláře XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6