Az érvényesítés a CSS-kód CSS2.1 vagy CSS3 specifikációval való összehasonlítását jelenti. Ennek megfelelően a hibát nem tartalmazó helyes kódot érvényesnek, a specifikációnak nem megfelelőt pedig érvénytelennek nevezzük. A kód ellenőrzésének legkényelmesebb módja a http://jigsaw.w3.org/css-validator/ oldal, ahol a szolgáltatás segítségével megadhatja a dokumentum címét, feltölthet fájlt vagy ellenőrizheti a begépelt szöveget. A szolgáltatás nagy előnye az orosz és az ukrán nyelv támogatása.
Ellenőrizze az URI-t
Ezen a lapon adhatja meg az interneten tárolt oldal címét. A http:// protokoll elhagyható, automatikusan hozzáadódik (20.1. ábra).
Rizs. 20.1. Iratellenőrzés cím szerint
A cím megadása után kattintson a „Check” gombra, és megjelenik a két felirat egyike: „Gratulálunk! Nem található hiba", ha sikeres volt, vagy "Sajnos megtaláltuk a következő hibákat» érvénytelen kódért. A hiba- vagy figyelmeztető üzenetek sorszámot, választót és a hiba leírását tartalmazzák.
Ellenőrizze a feltöltött fájlt
Ezen a lapon HTML- vagy CSS-fájlt tölthet be, és ellenőrizheti a hibákat (20-2. ábra).
Rizs. 20.2. Fájl ellenőrzése feltöltéskor
A szolgáltatás automatikusan felismeri a fájltípust, és ha HTML-dokumentum van megadva, kivonja belőle a stílust érvényesítés céljából.
Ellenőrizze a beírt szöveget
Az utolsó fül a HTML vagy CSS kód közvetlen bevitelére szolgál, és csak a stílus kerül ellenőrzésre (20-3. ábra).
Rizs. 20.3. A beírt kód ellenőrzése
Ez az opció tűnik a legkényelmesebbnek különféle kísérletek végrehajtásához a kódon ill gyors ellenőrzés apró töredékek.
CSS verzió kiválasztása
A CSS3 számos új stílus tulajdonsággal rendelkezik a előző verzió, ezért érdemes ellenőrizni a kódot a verzió figyelembevételével. Alapértelmezés szerint a CSS3 van megadva a szolgáltatásban, így ha ellenőrizni szeretné a kód CSS2.1-nek való megfelelését, akkor ezt kifejezetten meg kell adnia. Ehhez kattintson a szövegre További jellemzők"és a megnyíló blokkban a "Profil" listából válassza ki a CSS2.1-et (20.4. ábra).
Rizs. 20.4. Az ellenőrizni kívánt CSS-verzió megadása
Az oldal létrehozása és minden szükséges elemmel való feltöltése után ellenőrizni kell az oldalt, hogy vannak-e hibák. A html és css helyesírási hibáinak megtalálásához a W3 validátor segít - World Wide Web Consortium, amely fordításban: World Wide Web Consortium. Megtalálja az összes hibát, és jelzi, hol vannak, valamint lehetőségeket kínál ezek kiküszöbölésére.
Miért javítsa ki a kódot a W3C Validator segítségével?
Valójában ennek nem sok előnye van, és mindegyik feltételes, de sajnos minden oldalon minimális számú hiba kell, hogy legyen, ideális esetben egy sem. Mi alapján döntene, hogy szüksége van-e rá, íme az előnyei:
- Az oldal betöltési sebessége nőni fog, de egy kicsit, nem is lesz észrevehető.
- Az oldal minden böngészőben ugyanazt fogja megjeleníteni.
- Amikor egy webhelyet ad hozzá a könyvtárhoz, ügyeljen a html és a css írástudására.
Nem sok előny, de javítani html és css hibák A W3C validátor használata megéri!
A Validator hibajavítása
A validátorral történő hibák kijavításának elve nem bonyolult és ezt mindenki meg tudja oldani! Követjük a linkeket, ha nehezen érthető angolul, azt javaslom, hogy fordítsa, vagy használja ez, amely megmutatja a hibák típusát oroszul. Vegyünk egy példát egy érvényesítő által végzett javításra:
1. Írja be webhelye teljes nevét. 
2. A listában elkezdjük nézni, hogy hol és milyen hiba és mi szükséges a javításhoz. 
Ahogy a képeken is látszik, az én hibám a linkben van, ezt a problémát a share buttons pluginben találtam. Gyakran át kell ásnia az összes fájlt, hogy hibát találjon.
3. Adjon hozzá egy elemet ahhoz a sorhoz, ahol a hibát találta, és ellenőrizze újra az érvényesítővel.
Ha a hiba javítva van, akkor jó. Ha nem, akkor tovább kell nézni.
A webkód érvényességének ellenőrzése a W3C szabványoknak és tanúsítványoknak való megfelelést jelenti.
W3C (konzorcium világháló) a web technikai törvényhozói, akik szabványokat és szabályokat dolgoznak ki a kódíráshoz. A W3C tanúsítványok és szabványok kötelezőek mindenki számára, aki a weben dolgozik. Egységes kódírási szabványokra van szükség ahhoz, hogy az összes hálózati alkalmazás egyetlen nyelven, szabványos nyelveken kommunikáljon, és megértse egymást, miközben webes dokumentumokkal dolgozik.
A W3C nemcsak webes szabványokat hoz létre, hanem aktívan támogatja azok megvalósítását is.
A W3C online szolgáltatásokkal rendelkezik a HTML/XHTML és a CSS kód érvényesítésére.
A kód W3C-szabványokkal való összehasonlítása a W3C érvényesítőkkel a legjobb megoldás.
Ingyenes online szolgáltatások a W3C-től a kód érvényességének ellenőrzéséhez.
A W3C validátorok intuitív tiszta felület. A velük való munka könnyű és egyszerű.
A szolgáltatások három módban teszik lehetővé az ellenőrzést, és ennek megfelelően csak három gombjuk van:
Ellenőrizze az URL-t
(az ellenőrzéshez meg kell adnia a webhely bármely, a weben elérhető oldalának címét)
Ellenőrizze a feltöltött fájlt
(az ellenőrzéshez meg kell adnia az ellenőrzött fájl elérési útját)
Ellenőrizze a beírt szöveget
(az ellenőrzéshez másolja ki és illessze be az ellenőrizendő kódot az érvényesítő ablakba)
Az utolsó két módszer különösen hasznos webes dokumentumok vagy helyi számítógépeken található szövegek ellenőrzésekor. Ezek lehetnek weboldalak, vagy már letöltöttek az internetről ide helyi számítógép, vagy a következő helyen található motorok generálják helyi szerverek, mint a "Denver". Denver esetében az oldalt a böngészőn keresztül .html kiterjesztésű fájlként kell elmenteni, majd külön fájlként ellenőrizni, vagy másolni. forrás weboldalakat közvetlenül a böngészőből, és ellenőrizze a beírt szöveget.
A W3C online érvényesítők használata.
lépjen kapcsolatba az érvényesítővel a következő címen:
(http://validator.w3.org/ – a HTML vagy XHTML érvényesítéséhez
http://jigsaw.w3.org/css-validator/ - CSS-ellenőrzés)
a megnyíló érvényesítő ablakban válassza ki a három ellenőrzési mód egyikét
(weboldal URL-je, helyi fájl vagy gépelt szöveg)
lépjen a megfelelő lapra
adja meg az ellenőrzés tárgyát
(írja be az ellenőrzött weboldal url-címét,
vagy a fájl elérési útja a helyi számítógépen,
vagy illessze be az ellenőrizni kívánt kódot)
kattintson az "Ellenőrzés" gombra, és nézze meg az ellenőrzés eredményét
A W3C szolgáltatásai ellenőrzik a kód érvényességét, és azonnal jelzik a hibákat, ha vannak. Minden hiba megjegyzésre kerül. A megjegyzések sajnos angolul. Tehát a Google-fordító itt van, hogy segítsen. Csak szükség esetén kell kijavítania a kódot, és újra ellenőrizni a megfelelőséget.
A W3C validátorok teljesen ingyenesek és automatizáltak. Ezért hosszú ideig és büntetlenül kalapálhatja őket a hibákon végzett munkájukkal. Ehhez jönnek létre ezek a szolgáltatások.
A W3C validátorok normál alternatívája.
A webkód ellenőrzésére szolgáló W3C online szerverek mellett nagyon jó eredmény a HTML Validator kiterjesztést adja a böngészőnek Mozilla Firefox. Egy ilyen kiegészítő jelenléte a böngészőben megkönnyíti a webmester munkáját, és ismét bizonyítja, hogy a Mozilla Firefox egy "kormányos" böngésző.
A mazilka kiterjesztést innen töltheti le: http://users.skynet.be/mgueury/mozilla/
A bővítményt a következőképpen telepítheti:
- Indítsa el a Firefoxot.
Következő: Menü - Eszközök - Bővítmények - Bővítmények.
És egyszerűen húzza át a letöltött fájlt (xpi kiterjesztésű) a megnyíló ablakba.
Ezt követően a bővítmény automatikusan telepítésre kerül.
vagy (második út):
- Indítsa el a Firefoxot.
Következő: Menü - Fájl - Fájl megnyitása - adja meg a letöltött fájl elérési útját.
Ezt követően a bővítmény ismét automatikusan telepítésre kerül.
A telepítés befejezése után újra kell indítania a böngészőt.
Újraindításkor egy ablak jelenik meg, amelyben kiválasztható a weboldalak ellenőrzésének módja:
"HTML Tidy" vagy "SGML Parser" vagy "Serial"
A legkényelmesebb és legelfogadhatóbb lehetőségnek az "SGML Parser" módszert választjuk. Megnyomjuk a megfelelő gombot.Most a böngészőablakban megjelenik a bővítmény parancsikonja, mellette pedig a kiegészítő beállítások menü gombja.
Nálam fent és jobbra:
HTML Validator for Mozilla böngésző A Firefox teljesen befut automatikus üzemmód. Nem kell neki megmutatni, mit kell ellenőriznie. Ellenőrzi az összes dokumentumot, amelyet a Mozilla Firefoxban nyit meg. Nagyon kényelmes. Elég megnézni a program parancsikonjának színét, hogy megértsük, van-e probléma a megnyitott dokumentumban vagy sem.
Az ellenőrzés eredményétől függően az ikon színe lehet zöld, sárga vagy piros, ami a következőket jelenti:
zöld - "nincs hiba", minden "OK"
sárga - "nincs hiba, de vannak figyelmeztetések"
piros - "vannak hibák"
Ha rákattint a parancsikonra, megnyílik egy ablak, amely tartalmazza a megtekintett oldal forráskódját, magyarázatokkal és megjegyzésekkel a hibákhoz és figyelmeztetésekhez, ha vannak ilyenek.
Körülbelül így.
Ez a gyűjtemény csodálatos gyűjteményt tartalmaz. online szolgáltatások CSS kódokkal való munkavégzéshez. Mindezek a szolgáltatások jelentősen megkönnyítik a webfejlesztők életét. Segítségükkel létrehozhat egy CSS-rácsot az oldalhoz, ellenőrizheti a kódot a hibákért, a kódot adaptálhatja különféle böngészők, generál CSS stílusok a Photoshop rétegstílusok alapján mintakódokat kaphat a hátterekhez és színátmenetekhez, és tömörítse a CSS-t a webhely betöltési sebességének növelése érdekében. Számos szolgáltatás szakosodott a betűtípusokkal és azok vizuális megjelenítésével.
Az 1 Kb-os CSS-rács
Mindössze három paraméter beállításával egy CSS-rács is létrejön. A szélességet is megadja pixelben. 
Rácstervező
összetettebb szolgáltatás. A CSS-rács többféleképpen konfigurálható. A második blokk generálja az oszlopokban megjelenő szöveget. A kimeneten van egy kész CSS és HTML sablon. 
CSS Lint
A webhely kódjának hibáinak ellenőrzésére szolgáló szolgáltatás. 
Primer CSS
Ha beilleszti a HTML kódot a párbeszédpanelbe, akkor listát kaphat a CSS-ben említett összes osztályról és azonosítóról. 
PrefixMyCSS
Ha belépsz forrás css kódot, a kimeneten pedig különböző böngészőkre adaptált kódot kaphat. 
Modernizr
Ez a szolgáltatás letöltést és telepítést kínál JavaScript könyvtár nyílt forráskódú, amely valamilyen módon segít a webhely létrehozásában. Biztosat nem tudok mondani, mert magam nem próbáltam. 
Rétegstílusok
Magasan hasznos szolgáltatás. A Rétegstílusok párbeszédpanel beállításai alapján a Photoshop CSS-kódot állít elő. 
Végső CSS Gradiens ColorZilla generátor
Számos színátmenet közül lehet választani és ezek közül lehet választani CSS kódok különböző böngészőkhöz igazítva. 
spritebox
Lehetővé teszi osztályok és azonosítók gyors és egyszerű létrehozását egyetlen képből 
automatikus css inliner
Automatikusan konvertálja az összes helyi stílust soron belüli CSS-vé a levelezési listákon való használatra. 
típusvizsgáló
Lehetővé teszi a különböző betűtípusok helyesírásának összehasonlítását és a kiválasztott írási stílus CSS-kódjának lekérését. 
A webes betűtípus-kombinátor
A szolgáltatás lehetővé teszi, hogy vizuálisan megtekinthesse, hogyan fognak kinézni a betűtípusok különböző kombinációi a címsorokban, alcímekben és a fő szövegben.
Az utóbbi időben kaptam néhány kérdést a felhasználóktól a témáim érvényességével és általában az érvényesítéssel kapcsolatban. Ebben a bejegyzésben ezekre szeretnék választ adni.
Mi az érvényesség?
Úgy gondolják, hogy a kód érvényessége bármely kód egyetlen, univerzális jellemzője.
Valójában az érvényesség konformitás html kódot dokumentumot a doctype-ban meghatározott vagy a HTML5-ben feltételezett szabálykészlethez.
Vagyis az érvényesség relatív fogalom, hiszen mások a szabályok és a követelmények is.
Az érthetőség kedvéért adok egy példát, amelyet a css-live.ru oldalon találtam:
Lakóépületek és atomerőművek építésére eltérő SNiP-k (építési szabályzatok és szabályok) vonatkoznak, így az egyik szabályrendszer szerint érvényes okirat nem biztos, hogy egy másik szabály szerint érvényes (az atomerőmű az 1. sz. jó lenne egy lakóépület!).
A doctype általában arra a dokumentumra mutat, amelyre a html-ellenőrzést tervezik, de pragmatikus okokból is választható a böngészők optimális módjának kiválasztásához.
Lehet, hogy az XHTML5-nek egyáltalán nincs doctype, de érvényes.
Érvényesítés - mi ez?
Egyszerűen fogalmazva, az érvényesítés a kód ellenőrzésének és a kiválasztott doctype-nak (DTD) való megfeleltetésének folyamata.
Hogyan történik az érvényesség ellenőrzése?
A HTML kód érvényességét egy validátor nevű eszköz ellenőrzi.
A leghíresebb w3c validátor a https://www.w3.org.
A w3c érvényesítő számos kódellenőrzést végez.
A főbbek:
- Ellenőrizze a szintaktikai hibákat:
Példa a habrahabr.ru/post/101985 oldalról:ennek ellenére a helyes szintaxis érvénytelen HTML címke
Tehát a szintaktikai ellenőrzés minimálisan hasznos jó HTML kód írásához. - Címkebeágyazás ellenőrzése:
NÁL NÉL HTML dokumentum a címkéket a nyitásuk fordított sorrendjében kell lezárni. Ez az ellenőrzés fel nem zárt vagy helytelenül zárt címkéket észlel. - HTML érvényesítés DTD szerint:
Annak ellenőrzése, hogy a kód hogyan felel meg a megadott DTD-nek - Dokumentumtípus-meghatározás (doctype). Ez magában foglalja a címkenevek, attribútumok és a címkék „beágyazását” (az egyik típusú címkék egy másik típusú címkékbe). - Idegen elemek ellenőrzése:
Mindent megtalál, ami a kódban van, de nem a doctype-ban.
Például egyéni címkék és attribútumok.
A CSS kód érvényességének ellenőrzésére van egy css érvényesítő - http://jigsaw.w3.org/css-validator.
Kód érvényessége- ez a formális OB hiányának mechanikus ellenőrzésének eredménye, a megadott szabályrendszer szerint.
Meg kell értenie, hogy az érvényesítés eszköz, nem önmagában érték.
A tapasztalt elrendezéstervezők általában tudják, hol lehet megsérteni a HTML vagy CSS érvényesítési szabályait, és hol nem, és mi fenyegeti (vagy nem fenyegeti) ezt vagy azt az érvényesítési hibát.
Példák arra, hogy mikor nem érvényes kód készíti az oldalt:
- kényelmesebb és gyorsabb - egyéni attribútumok Javascript/AJAX ill
- SEO optimalizált - ARIA jelölés.
Nyilvánvaló, hogy nincs értelme az érvényességnek az érvényesség kedvéért.
A tapasztalt tervezők általában betartják a következő szabályokat:
- A kódban ne legyenek durva hibák.
- Kisebbek is elviselhetők, de csak indokolt okból.
A html/CSS érvényesítési hibáival kapcsolatban:
Az érvényesítési hibák (VF-ek) csoportokra oszthatók:
- OV a sablonfájlokban:
Nem nehéz megtalálni és javítani.
Ha az apró hibák bármelyike segít a webhely működőképességében vagy gyorsabbá tételében, akkor elhagyható. - OV a webhelyen csatlakoztatott harmadik féltől származó szkriptekben:
Például egy Vkontakte widget, egy Twitter-szkript vagy YouTube-videófájlok.
Nincs mód a javításukra, mert ezek a fájlok és szkriptek más oldalakon találhatók, és nem férünk hozzájuk. - CSS-szabályok, amelyeket az érvényesítő nem ért:
Az érvényesítő ellenőrzi, hogy a webhely kódja megegyezik-e egy bizonyos értékkel HTML verziók vagy CSS.
Ha a sablonban a 3-as CSS-szabályokat használta, és az érvényesítő a 2.1-es verzióval ellenőrzi, akkor az összes CSS3-szabályt hibának tekinti, bár nem azok. - OV, amelyeket önkéntelenül az oldalon kell hagyni a kívánt eredmény elérése érdekében. Például:
- noindex címkék. Nem érvényesek, de nagyon szükségesek, és el kell viselnünk.
- khaki. A webhely helyes megjelenítéséhez bizonyos böngészőkben néha hackeket kell használnia - olyan kódot, amelyet csak egy bizonyos böngésző ért.
- Ellenőrző hibák.
Gyakran nem lát semmilyen címkét (például zárót), és beszámol az OB-ról, ahol az nem létezik.
Kiderült, hogy egy működő oldalon szinte mindig lesz valami OV.
Ráadásul rengeteg lehet belőlük.
Például a Google, a Yandex és a mail.ru fő oldala több tucat hibát tartalmaz.
De nem törik meg a webhelyek megjelenítését a böngészőkben, és nem zavarják a munkájukat.
A fent leírtak az én témáimra vonatkoznak.
Az összetett témák a következők:
- A WordPress funkciói (pl. the_category()), amelyek érvénytelen kódot adnak.
- Videókimenet a videomegosztó oldalakról, például a YouTube-ról, és sok OB van a YouTube kódban, amit sem te, sem én nem tudunk befolyásolni.
- Gombok közösségi hálózatok, amelyek e hálózatok parancsfájljaival csatlakoznak, és OB-t tartalmaznak.
- A CSS3 és HTML5 szabályokat a régebbi verzióellenőrzők hibának tekintik.
Ugyanakkor a CSS3 és HTML5 verziók érvényesítői hibának tekintik a régi szabályokat :). - Néha a megfelelő megjelenítés érdekében internet böngésző Az Explorernek vagy más böngészők régebbi verzióinak úgynevezett hackeket kell használniuk – olyan kódot, amelyet csak egy adott böngésző ért meg ahhoz, hogy webhelymegjelenítési szabályokat írjanak az adott böngészőhöz.
Ennek eredményeként csak nagyon egyszerű témák kirakásakor kaphat teljesen érvényes kódot, pl. amelyek tartalmazzák a minimális funkcionalitást.
Bármely témám elrendezésének befejezése után mindig ellenőrzöm egy validátorral, és kijavítom az összes javítható OB-t anélkül, hogy elveszítené a téma funkcionalitását.
Vagyis ha van választás a működő funkcionalitás és az érvényesség között, akkor a funkcionalitást választom.
Ha saját témáit találja ki, azt tanácsolom, hogy tegye meg ugyanezt.
Az én szemszögemből (és az elrendezéstervezők többsége szempontjából is) a html/CSS validációhoz, mint végső igazsághoz való hozzáállás téves. Csak azokat az OB-kat kötelező javítani, amelyek:
- megakadályozza, hogy a böngésző megfelelően jelenítse meg az oldalt (lezáratlan és helytelenül beágyazott címkék).
- lassítja az oldalbetöltést (helytelenül csatlakoztatott szkriptek).
- a téma funkcionalitásának megsértése nélkül javítható.
Remélem, minden érvényesítéssel kapcsolatos kérdésére válaszoltam.