Validace se týká kontroly kódu CSS podle specifikace CSS2.1 nebo CSS3. Podle toho se správný kód, který neobsahuje chyby, nazývá platný a kód, který nesplňuje specifikaci, se nazývá neplatný. Nejpohodlnější způsob, jak zkontrolovat kód, je přes stránku 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. 20.1).

Rýže. 20.1. 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“ v případě úspěchu nebo „Bohužel jsme našli následující chyby» za neplatný kód. Chybové nebo varovné zprávy obsahují číslo řádku, volič a popis chyby.

Zkontrolujte nahraný soubor

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

Rýže. 20.2. 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í kódu HTML nebo CSS a bude ověřen pouze styl (obrázek 20-3).

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

Tato možnost se jeví jako nejvhodnější pro provádění různých experimentů na kódu resp rychlá kontrola malé úlomky.

Výběr verze CSS

CSS3 má mnoho nových stylingových vlastností ve srovnání s předchozí verze, takže byste měli zkontrolovat kód s ohledem na verzi. Ve výchozím nastavení je ve službě specifikován CSS3, takže pokud chcete zkontrolovat soulad kódu s CSS2.1, musíte to specifikovat výslovně. Chcete-li to provést, klikněte na text Další funkce"a v bloku, který se otevře, ze seznamu "Profil" vyberte CSS2.1 (obr. 20.4).

Rýže. 20.4. Určení verze CSS ke kontrole

Po vytvoření webu a jeho naplnění vším potřebným je potřeba web zkontrolovat, zda neobsahuje chyby. K nalezení pravopisných chyb v html a css vám pomůže validátor W3 - World Wide Web Consortium, což v překladu: World Wide Web Consortium. Najde všechny chyby a ukáže, kde se nacházejí, a také nabídne možnosti jejich odstranění.

Proč opravovat kód pomocí W3C Validator

Ve skutečnosti z toho není mnoho výhod a všechny jsou podmíněné, ale bohužel by každý web měl mít minimální počet chyb, ideálně žádné. Podle čeho byste se rozhodli, zda ji potřebujete, zde jsou její výhody:

• Rychlost načítání stránky se zvýší, ale trochu, nebude to ani patrné.
• Stránka se bude zobrazovat stejně v každém prohlížeči.
• Při přidávání webu do adresáře dbejte na gramotnost psaní html a css.

Ne moc kladů, ale opravit chyby html a css použití validátoru W3C se vyplatí!

Jak opravit chyby pomocí Validatoru

Princip opravy chyb validátorem není složitý a zvládne ho každý! Sledujeme odkazy na, pokud je obtížné porozumět angličtině, doporučuji vám použít překladač nebo použít tento, který zobrazí typ chyb v ruštině. Zvažte příklad opravy provedené validátorem:

1. Zadejte celý název svého webu.


2. V seznamu začneme hledat kde a jakou chybu a co je potřeba k její opravě.


Jak můžete vidět na obrázcích, moje chyba je v odkazu, tento problém jsem našel v pluginu share buttons. Často musíte prohrabat všechny soubory, abyste našli chybu.

3. Přidejte prvek do řádku, kde byla nalezena chyba, a znovu zkontrolujte pomocí validátoru.
Pokud je chyba opravena, je to dobře. Pokud ne, budete muset hledat dál.

Kontrola platnosti webového kódu je kontrola podle standardů a certifikací W3C.
W3C (Konsorcium Celosvětová Síť) jsou techničtí zákonodárci webu, kteří vyvíjejí standardy a pravidla pro psaní kódu. Certifikace a standardy W3C jsou povinné pro každého, kdo pracuje na webu. Aby všechny síťové aplikace komunikovaly v jediném jazykovém prostoru, ve standardních jazycích, a aby si při práci s webovými dokumenty navzájem rozuměly, jsou zapotřebí jednotné standardy pro pravopis kódu.
W3C nejen vytváří webové standardy, ale také aktivně podporuje jejich implementaci.
W3C má online služby pro ověřování kódu HTML/XHTML a CSS.
Kontrola kódu podle standardů W3C pomocí validátorů W3C je nejlepší cesta ven.

Bezplatné online služby od W3C pro kontrolu platnosti kódu.
W3C validátory mají intuitivní přehledné rozhraní. Práce s nimi je snadná a jednoduchá.
Služby umožňují kontrolu ve třech režimech, a proto mají pouze tři tlačítka:
Zkontrolujte URL
(pro ověření musíte zadat adresu jakékoli stránky webu dostupné na webu)
Zkontrolujte nahraný soubor
(pro ověření je třeba zadat cestu ke kontrolovanému souboru)
Zkontrolujte napsaný text
(pro kontrolu je třeba zkopírovat a vložit kód, který má být zkontrolován, do okna validátoru)

Poslední dva způsoby jsou užitečné zejména při kontrole webových dokumentů nebo textů umístěných na lokálních počítačích. Mohou to být webové stránky nebo již stažené z webu místní počítač nebo generované motory umístěnými na lokální servery, jako "Denver". V případě Denveru je potřeba stránku uložit přes prohlížeč jako soubor s příponou .html a následně zkontrolovat jako samostatný soubor, případně zkopírovat zdroj webové stránky přímo z prohlížeče a zkontrolujte, jak napsaný text.

Jak používat online validátory W3C.
kontaktujte validátora na:
(http://validator.w3.org/ – pro ověření HTML nebo XHTML
http://jigsaw.w3.org/css-validator/ – pro ověření CSS)
v okně validátoru, které se otevře, vyberte jednu ze tří metod ověření
(URL webové stránky, místní soubor nebo zadaný text)
přejděte na příslušnou kartu
specifikovat předmět ověřování
(zadejte url adresu kontrolované webové stránky,
nebo cestu k souboru v místním počítači,
nebo vložte kód, který chcete zkontrolovat)
klikněte na tlačítko "Zkontrolovat" a podívejte se na výsledek kontroly

Služby od W3C zkontrolují platnost kódu a okamžitě upozorní na případné chyby. Každá chyba bude okomentována. Komentáře bohužel v angličtině. Google-translate je tu proto, aby vám pomohl. Zbývá pouze v případě potřeby kód opravit a znovu zkontrolovat, zda je v souladu.
W3C validátory jsou zcela bezplatné a automatizované. Proto je můžete svou prací zatloukat do chyb dlouho a beztrestně. K tomu jsou tyto služby vytvořeny.

Normální alternativa k validátorům W3C.
Kromě online serverů W3C pro kontrolu webového kódu velmi dobrý výsledek poskytuje prohlížeči rozšíření HTML Validator Mozilla Firefox. Přítomnost takového doplňku v prohlížeči usnadňuje práci webmastera a opět dokazuje, že Mozilla Firefox je „kormidlový“ prohlížeč.
Rozšíření mazilka si můžete stáhnout zde: http://users.skynet.be/mgueury/mozilla/

Rozšíření můžete nainstalovat takto:
- Spusťte Firefox.
Dále: Menu - Nástroje - Doplňky - Rozšíření.
A jednoduše přetáhněte stažený soubor (přípona xpi) do okna, které se otevře.
Poté se rozšíření automaticky nainstaluje.

nebo (druhý způsob):
- Spusťte Firefox.
Dále: Menu - Soubor - Otevřít soubor - zadejte cestu ke staženému souboru.
Poté se rozšíření opět automaticky nainstaluje.

Po dokončení instalace budete muset restartovat prohlížeč.
Po restartu se zobrazí okno s výběrem způsobu kontroly webových stránek:
"HTML Tidy" nebo "SGML Parser" nebo "Serial"
Jako nejpohodlnější a nejpřijatelnější možnost volíme metodu „SGML Parser“. Stiskneme příslušné tlačítko Nyní se v okně prohlížeče zobrazí ikona zástupce doplňku a vedle něj - tlačítko pro nabídku nastavení doplňku.
Mám - nahoře a vpravo:

HTML Validator pro Prohlížeč Mozilla Firefox běží celý automatický režim. Nemusí mu být ukazováno, co má kontrolovat. Kontroluje všechny dokumenty, které budou otevřeny v Mozilla Firefox. Je to velmi pohodlné. Stačí se podívat na barvu zástupce programu, abyste pochopili, zda je v otevřeném dokumentu problém nebo ne.
V závislosti na výsledcích kontroly může být barva ikony zelená, žlutá nebo červená, což znamená:
zelená - "žádné chyby", vše je "OK"
žlutá - "žádné chyby, ale existují varování"
červená - "jsou chyby"

Když kliknete na zástupce, otevře se okno obsahující zdrojový kód stránky, kterou si prohlížíte, s vysvětlením a komentářem chyb a varování, pokud existují.
Přibližně takto.

Tato kolekce obsahuje úžasnou sbírku. online služby pro práci s CSS kódy. Všechny tyto služby značně usnadňují život webového vývojáře. S jejich pomocí můžete vygenerovat CSS mřížku pro web, zkontrolovat kód na chyby, přizpůsobit kód různé prohlížeče, generovat CSS styly na základě stylů vrstev Photoshopu, získat kódy vzorů pro pozadí a přechody, komprimovat CSS pro zvýšení rychlosti načítání stránek. Existuje mnoho služeb, které se specializují na práci s fonty a jejich vizuální reprezentaci.

1Kb mřížka CSS
Nastavením pouhých tří parametrů se vygeneruje také CSS mřížka. Také určuje šířku v pixelech.

Návrhář mřížky
složitější servis. Mřížka CSS se konfiguruje několika způsoby. Druhý blok generuje text, který se zobrazí ve sloupcích. Na výstupu máme hotovou CSS a HTML šablonu.

CSS Lint
Služba pro kontrolu chyb v kódu vašeho webu.

Primer CSS
Vložením HTML kódu do dialogového okna získáte seznam všech zmíněných tříd a ID, které jsou uvedeny v CSS.

PředponaMyCSS
Pokud zadáte zdroj css kód a na výstupu můžete získat kód přizpůsobený pro různé prohlížeče.

Modernizr
Tato služba nabízí stažení a instalaci JavaScript knihovna open source, který vám při tvorbě webu nějak pomůže. Nemůžu to říct s jistotou, protože jsem to sám nezkoušel.

Styly vrstev
Vysoce užitečná služba. Na základě nastavení v dialogovém okně Styly vrstev Photoshop vygeneruje kód CSS.

Ultimátni Přechod CSS Generátor od ColorZilla
Na výběr je velké množství gradientů a jejich CSS kódy přizpůsobené pro různé prohlížeče.

spritebox
Umožňuje rychle a snadno vytvářet třídy a ID z jednoho obrázku

automatický css inliner
Automaticky převede všechny místní styly na inline CSS pro použití v e-mailových konferencích.

typový tester
Umožňuje porovnat pravopis různých písem a získat CSS kód zvoleného stylu psaní.

Webový kombinátor písem
Služba umožňuje vizuálně vidět, jak budou vypadat různé kombinace písem v nadpisech, podnadpisech a v hlavním textu.

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 konformita html kód dokumentu na určitou sadu 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 pravidla), 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ý!).

Doctype obvykle ukazuje na dokument, proti kterému je plánována html validace, 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 HTML dokumentštítky musí být uzavřeny v obráceném pořadí jejich otevírání. 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 ne platný kód dělá web:

• 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 validace (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 Twitter 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 zkontroluje, zda se kód webu shoduje s určitým HTML verze 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 webhostingu videa, například z YouTube, a v kódu YouTube je spousta OB, které ani vy, ani já nemůžeme ovlivnit.
• Tlačítka sociální sítě, které jsou propojeny pomocí skriptů těchto sítí a obsahují OB.
• Pravidla CSS3 a HTML5 považovala za chyby validátorů starších verzí.
  Přitom validátoři verzí CSS3 a HTML5 považují stará pravidla za chyby :).
• Někdy, aby bylo dosaženo správného zobrazení v internetový prohlížeč Průzkumník nebo starší verze jiných prohlížečů musí používat takzvané hacky – kód, kterému rozumí pouze konkrétní prohlížeč, aby mohl napsat pravidla 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í rozvržení jakéhokoli mého tématu jej vždy zkontroluji pomocí validátoru a opravím všechny OB, které lze opravit bez ztráty 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, abyste udělali totéž.
Z mého pohledu (a také z pohledu většiny návrhářů layoutu) je postoj 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í.