Validácia sa týka kontroly kódu CSS v porovnaní so špecifikáciou CSS2.1 alebo CSS3. V súlade s tým sa správny kód, ktorý neobsahuje chyby, nazýva platný a kód, ktorý nespĺňa špecifikáciu, sa nazýva neplatný. Najpohodlnejší spôsob, ako skontrolovať kód, je cez stránku 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:// je možné vynechať, pridá sa automaticky (obr. 20.1).

Ryža. 20.1. Overenie dokladu podľa adresy

Po zadaní adresy kliknite na tlačidlo „Skontrolovať“ a zobrazí sa jeden z dvoch nápisov: „Blahoželáme! Nenašli sa žiadne chyby“ v prípade úspechu alebo „Bohužiaľ sme našli nasledujúce chyby» pre neplatný kód. Chybové alebo varovné hlásenia obsahujú čí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 20-2).

Ryža. 20.2. Kontrola súboru pri nahrávaní

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á karta slúži na priame zadávanie kódu HTML alebo CSS a overí sa iba štýl (obrázok 20-3).

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

Táto možnosť sa javí ako najvhodnejšia na vykonávanie rôznych experimentov na kóde resp rýchla kontrola malé úlomky.

Výber verzie CSS

CSS3 má v porovnaní s predošlá verzia, takže by ste mali skontrolovať kód s prihliadnutím na verziu. Štandardne je v službe špecifikovaný CSS3, takže ak chcete skontrolovať súlad kódu s CSS2.1, musíte to špecifikovať explicitne. Ak to chcete urobiť, kliknite na text Pridané vlastnosti"a v bloku, ktorý sa otvorí, zo zoznamu "Profil" vyberte CSS2.1 (obr. 20.4).

Ryža. 20.4. Určenie verzie CSS na kontrolu

Po vytvorení stránky a jej naplnení všetkým potrebným je potrebné stránku skontrolovať na chyby. S hľadaním pravopisných chýb v html a css vám pomôže validátor W3 - World Wide Web Consortium, čo v preklade: World Wide Web Consortium. Nájde všetky chyby a ukáže, kde sa nachádzajú, ako aj ponúkne možnosti na ich odstránenie.

Prečo opraviť kód pomocou W3C Validator

V skutočnosti z toho nie je veľa výhod a všetky sú podmienené, ale bohužiaľ každá stránka by mala mať minimálny počet chýb, ideálne žiadne. Podľa čoho by ste sa rozhodli, či ho potrebujete, tu sú jeho výhody:

• Rýchlosť načítania stránky sa zvýši, ale trochu, nebude to ani badateľné.
• Stránka sa zobrazí rovnako v každom prehliadači.
• Pri pridávaní stránky do adresára dbajte na gramotnosť písania html a css.

Nie veľa plusov, ale opraviť chyby html a css používanie validátora W3C sa oplatí!

Ako opraviť chyby pomocou Validator

Princíp opravy chýb pomocou validátora nie je zložitý a zvládne ho každý! Sledujeme odkazy na, ak je ťažké porozumieť angličtine, odporúčam vám použiť prekladač alebo použiť toto, ktorý zobrazí typ chýb v ruštine. Zvážte príklad opravy vykonanej validátorom:

1. Zadajte celý názov svojej stránky.


2. V zozname začneme hľadať, kde a aká chyba a čo je potrebné na jej opravu.


Ako môžete vidieť na obrázkoch, moja chyba je v odkaze, tento problém som našiel v plugine share buttons. Často musíte prehrabať všetky súbory, aby ste našli chybu.

3. Pridajte prvok do riadku, kde sa našla chyba, a znova skontrolujte pomocou validátora.
Ak je chyba opravená, je to dobré. Ak nie, budete musieť hľadať ďalej.

Kontrola platnosti webového kódu je kontrola podľa štandardov a certifikácií W3C.
W3C (Konzorcium World Wide Web) sú technickí zákonodarcovia webu, ktorí vyvíjajú štandardy a pravidlá pre písanie kódu. Certifikácie a štandardy W3C sú povinné pre každého, kto pracuje na webe. Na to, aby všetky sieťové aplikácie komunikovali v jedinom jazykovom priestore, v štandardných jazykoch, a aby si pri práci s webovými dokumentmi navzájom rozumeli, sú potrebné jednotné štandardy pravopisu kódu.
W3C nielen vytvára webové štandardy, ale aj aktívne podporuje ich implementáciu.
W3C má online služby na overenie kódu HTML/XHTML a CSS.
Kontrola kódu podľa štandardov W3C pomocou validátorov W3C je najlepšou cestou von.

Bezplatné online služby od W3C na kontrolu platnosti kódu.
W3C validátory majú intuitívne prehľadné rozhranie. Práca s nimi je ľahká a jednoduchá.
Služby umožňujú kontrolu v troch režimoch, a preto majú iba tri tlačidlá:
Skontrolujte URL
(na overenie musíte zadať adresu ktorejkoľvek stránky lokality dostupnej na webe)
Skontrolujte nahraný súbor
(pre overenie musíte zadať cestu k kontrolovanému súboru)
Skontrolujte napísaný text
(pre kontrolu je potrebné skopírovať a prilepiť kód, ktorý sa má skontrolovať, do okna validátora)

Posledné dva spôsoby sú užitočné najmä pri kontrole webových dokumentov alebo textov umiestnených na lokálnych počítačoch. Môžu to byť webové stránky alebo už stiahnuté z webu lokálny počítač alebo generované motormi umiestnenými na lokálne servery, ako napríklad "Denver". V prípade Denveru je potrebné stránku uložiť cez prehliadač ako súbor s príponou .html a následne skontrolovať ako samostatný súbor, prípadne skopírovať zdroj webové stránky priamo z prehliadača a skontrolujte, ako ste napísali text.

Ako používať online validátory W3C.
kontaktujte overovateľa na:
(http://validator.w3.org/ – na overenie HTML alebo XHTML
http://jigsaw.w3.org/css-validator/ – na overenie CSS)
v okne validátora, ktoré sa otvorí, vyberte jednu z troch metód overenia
(webová adresa webovej stránky, miestny súbor alebo zadaný text)
prejdite na príslušnú kartu
špecifikovať predmet overovania
(zadajte url adresu kontrolovanej webovej stránky,
alebo cestu k súboru na lokálnom počítači,
alebo vložte kód, ktorý sa má skontrolovať)
kliknite na tlačidlo "Skontrolovať" a pozrite sa na výsledok kontroly

Služby od W3C skontrolujú platnosť kódu a okamžite upozornia na prípadné chyby. Každá chyba bude komentovaná. Komentáre, žiaľ, v angličtine. Preto je tu Google-translate, ktorý vám pomôže. Zostáva iba v prípade potreby opraviť kód a znova skontrolovať, či je v súlade.
W3C validátory sú úplne bezplatné a automatizované. Preto ich môžete svojou prácou zatĺkať do chýb dlho a beztrestne. Na tento účel sú tieto služby vytvorené.

Normálna alternatíva k validátorom W3C.
Okrem online serverov W3C na kontrolu webového kódu veľmi dobrý výsledok poskytuje prehliadaču rozšírenie HTML Validator Mozilla Firefox. Prítomnosť takéhoto doplnku v prehliadači uľahčuje prácu správcovi webu a opäť dokazuje, že Mozilla Firefox je „kormidlový“ prehliadač.
Rozšírenie mazilka si môžete stiahnuť tu: http://users.skynet.be/mgueury/mozilla/

Rozšírenie môžete nainštalovať takto:
- Spustite Firefox.
Ďalej: Menu - Nástroje - Doplnky - Rozšírenia.
A jednoducho pretiahnite stiahnutý súbor (prípona xpi) do okna, ktoré sa otvorí.
Potom sa rozšírenie automaticky nainštaluje.

alebo (druhý spôsob):
- Spustite Firefox.
Ďalej: Menu - Súbor - Otvoriť súbor - zadajte cestu k sťahovanému súboru.
Potom sa rozšírenie opäť automaticky nainštaluje.

Po dokončení inštalácie budete musieť reštartovať prehliadač.
Po reštarte sa zobrazí okno s výberom spôsobu kontroly webových stránok:
„HTML Tidy“ alebo „SGML Parser“ alebo „Serial“
Ako najpohodlnejšiu a najprijateľnejšiu možnosť volíme metódu „SGML Parser“. Stlačíme príslušné tlačidlo , Teraz sa v okne prehliadača zobrazí ikona skratky doplnku a vedľa nej - tlačidlo pre ponuku nastavení doplnku.
Mám - hore a vpravo:

HTML Validator pre Prehliadač Mozilla Firefox beží úplne in automatický režim. Netreba mu ukazovať, čo má kontrolovať. Kontroluje všetky dokumenty, ktoré sa otvoria v prehliadači Mozilla Firefox. Je to veľmi pohodlné. Stačí sa pozrieť na farbu skratky programu, aby ste pochopili, či je alebo nie je problém v otvorenom dokumente.
V závislosti od výsledkov kontroly môže byť farba ikony zelená, žltá alebo červená, čo znamená:
zelená - "žiadne chyby", všetko je "OK"
žltá - "žiadne chyby, ale existujú upozornenia"
červená - "sú chyby"

Keď kliknete na odkaz, otvorí sa okno so zdrojovým kódom stránky, ktorú si prezeráte, s vysvetleniami a komentármi k chybám a varovaniam, ak nejaké existujú.
Približne takto.

Táto kolekcia obsahuje úžasnú kolekciu. online služby pre prácu s CSS kódmi. Všetky tieto služby výrazne uľahčujú život webovým vývojárom. S ich pomocou môžete vygenerovať mriežku CSS pre stránku, skontrolovať kód na chyby a prispôsobiť kód rôzne prehliadače, generovať CSS štýly založené na štýloch vrstiev Photoshopu, získajte kódy vzorov pre pozadia a prechody, komprimujte CSS, aby ste zvýšili rýchlosť načítania stránok. Existuje mnoho služieb, ktoré sa špecializujú na prácu s písmami a ich vizuálnu reprezentáciu.

1 kB mriežka CSS
Nastavením iba troch parametrov sa vygeneruje aj mriežka CSS. Špecifikuje tiež šírku v pixeloch.

Návrhár mriežky
komplexnejšia služba. Mriežka CSS sa konfiguruje niekoľkými spôsobmi. Druhý blok vygeneruje text, ktorý sa zobrazí v stĺpcoch. Na výstupe máme hotovú šablónu CSS a HTML.

CSS Lint
Služba na kontrolu chýb v kóde vášho webu.

Primer CSS
Vložením HTML kódu do dialógového okna získate zoznam všetkých spomínaných tried a ID, ktoré sú uvedené v CSS.

PrefixMyCSS
Ak zadáte zdrojový css kód a na výstupe môžete získať kód prispôsobený pre rôzne prehliadače.

Modernizr
Táto služba ponúka stiahnutie a inštaláciu JavaScript knižnica open source, ktorý vám nejako pomôže pri tvorbe stránky. Nemôžem to povedať s istotou, pretože som to sám neskúšal.

Štýly vrstiev
vysoko užitočná služba. Na základe nastavení v dialógovom okne Štýly vrstiev Photoshop vygeneruje kód CSS.

Ultimate Prechod CSS Generátor od ColorZilla
Na výber je veľké množstvo gradientov a ich CSS kódy prispôsobené pre rôzne prehliadače.

spritebox
Umožňuje vám rýchlo a jednoducho vytvárať triedy a identifikátory z jedného obrázka

automatický css inliner
Automaticky konvertuje všetky lokálne štýly na inline CSS na použitie v zoznamoch adries.

typový tester
Umožňuje porovnať pravopis rôznych fontov a získať CSS kód zvoleného štýlu písania.

Webový kombinátor písiem
Služba vám umožňuje vizuálne vidieť, ako budú vyzerať rôzne kombinácie písiem v nadpisoch, podnadpisoch a v hlavnom texte.

V poslednej dobe som od používateľov dostával 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 každého kódu.
V skutočnosti je platnosť zhoda html kód dokumentu na určitú sadu pravidiel špecifikovaných v doctype alebo implikovaných v HTML5.
To znamená, že platnosť je relatívny pojem, pretože pravidlá a ich požiadavky sú tiež odlišné.
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 vzťahujú rôzne SNiP (stavebné predpisy a pravidlá), takže dokument, ktorý je platný podľa jedného súboru pravidiel, nemusí byť platný podľa iného (jadrová elektráreň postavená podľa noriem bytový dom by bol dobrý!).

Doctype zvyčajne ukazuje na dokument, proti ktorému sa plánuje validácia html, ale môže byť zvolený z pragmatických dôvodov na výber optimálneho režimu prehliadačov.
XHTML5 nemusí mať vôbec typ dokumentu, ale je platný.

Validácia - čo to je?

Zjednodušene povedané, validácia je proces kontroly kódu a jeho prispôsobenia zvolenému doctype (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. Skontrolujte chyby syntaxe:
   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 kódu.
2. Kontrola vnorenia značiek:
   AT HTML dokumentštítky musia byť uzavreté v opačnom poradí ako pri otváraní. Táto kontrola zisťuje neuzavreté alebo nesprávne zatvorené značky.
3. HTML validácia podľa DTD:
   Kontrola, ako kód zodpovedá zadanému DTD - Definícia typu dokumentu (doctype). Zahŕňa kontrolu názvov značiek, atribútov a „vkladanie“ značiek (značky jedného typu vo vnútri značiek iného typu).
4. Kontrola cudzích prvkov:
   Nájde všetko, čo je v kóde, ale nie 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álneho OB podľa stanoveného súboru pravidiel.
Musíte pochopiť, že validácia je nástroj, nie hodnota sama o sebe.
Skúsení dizajnéri layoutov väčšinou vedia, kde je možné porušiť pravidlá validácie HTML alebo CSS a kde nie a čo hrozí (alebo nehrozí) tá či oná chyba validácie.
Príklady, kedy nie platný kód robí stránku:

• pohodlnejšie a rýchlejšie - vlastné atribúty pre Javascript/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.
- Drobné možno tolerovať, ale len z opodstatnených dôvodov.
Čo sa týka chýb overenia html/CSS:

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

• OV v súboroch šablón:
  Nie je ťažké ich nájsť a opraviť.
  Ak ktorákoľvek z malých chýb pomôže urobiť stránku funkčnejšou alebo rýchlejšou, možno ich ponechať.
• OV v skriptoch tretích strán pripojených na web:
  Napríklad miniaplikácia Vkontakte, skript Twitter alebo videosúbory YouTube.
  Neexistuje spôsob, ako ich opraviť, pretož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 skontroluje, či sa kód lokality zhoduje s určitým HTML verzie alebo CSS.
  Ak ste v šablóne použili pravidlá CSS verzie 3 a validátor porovná s verziou 2.1, potom bude všetky pravidlá CSS3 považovať za chyby, aj keď nie sú.
• OV, ktoré musia byť nedobrovoľne ponechané na stránke, aby sa dosiahol požadovaný výsledok. Napríklad:
  • noindex tagy. Nie sú platné, ale sú veľmi potrebné a musíme 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 validátora.
  Často nevidí žiadne značky (napríklad uzatváracie) a hlási o OB tam, kde neexistuje.

Ukazuje sa, že na pracovnom mieste bude takmer vždy nejaký druh OV.
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í pre moje témy.

Komplexné témy zahŕňajú:

• Funkcie WordPress (napr. the_category()), ktoré poskytujú neplatný kód.
• Video výstup z webhostingu videa, napríklad z YouTube, a v kóde YouTube je veľa OB, ktoré nemôžeme ovplyvniť ani vy, ani ja.
• Tlačidlá sociálne siete, ktoré sú prepojené pomocou skriptov týchto sietí a obsahujú OB.
• Pravidlá CSS3 a HTML5 považovali validátory starších verzií za chyby.
  Validátori verzií CSS3 a HTML5 zároveň považujú staré pravidlá za chyby :).
• Niekedy, aby sa dosiahlo správne zobrazenie v internetový prehliadač Prieskumník alebo staršie verzie iných prehliadačov musia používať takzvané hacky – kód, ktorému rozumie len konkrétny prehliadač, aby mohol napísať pravidlá zobrazovania stránok pre tento konkrétny prehliadač.

Vďaka tomu môžete získať úplne platný kód len pri vyskladaní veľmi jednoduchých tém, t.j. tie, ktoré obsahujú minimálne množstvo funkcií.
Po dokončení rozloženia ktorejkoľvek z mojich tém to vždy skontrolujem validátorom 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 funkčnou funkcionalitou a platnosťou, vyberiem si funkčnosť.
Ak si vymýšľate vlastné témy, odporúčam vám urobiť to isté.
Z môjho pohľadu (a aj z pohľadu väčšiny dizajnérov layoutov) je postoj k html/CSS validácii ako konečnej pravde nesprávny. Je povinné opraviť iba tie OB, ktoré:
- zabrániť prehliadaču správne zobraziť stránku (neuzavreté a nesprávne vnorené značky).
- spomaľujú načítanie stránky (nesprávne pripojené skripty).
- možno opraviť bez narušenia funkčnosti témy.
Dúfam, že som odpovedal na všetky vaše otázky týkajúce sa overovania.