2016-12-29
Animáljuk a gombokat, és ellenőrizzük a webhelyen a HTML és CSS kód érvényességét
Szia kedves látogató!
Ma egy létrehozott weboldal példáján megvizsgáljuk, hogyan ellenőrizheti a webhely érvényességét, nevezetesen a HTML és CSS nyelvek meghatározott specifikációinak való megfelelését.
Emellett az ellenőrzés előtt az oldalsáv gombjainak "animálásával" kapcsolatos részben is elvégezzük a CSS stíluslap némi átdolgozását, ahol a statikus gombokat interaktívvá tesszük, állapotuktól függően változtatva megjelenésüket - passzív, aktív és nyomott.
- A gombok háromdimenziós kialakítása
- A gombok interaktívvá tétele
- Kell-e érvényesítés
- Hogyan kell érvényesíteni a HTML kódot
- A CSS kód érvényesítése
- A webhely forrásfájljai
A gombok háromdimenziós kialakítása
Az előző cikkben a fő tartalomterület stílusát a kezdőlap elrendezéséhez igazítottuk. Ugyanakkor jelenleg az oldalsávban vannak olyan gombok, amelyek statikusak, és úgy néznek ki, mint egy szabályos lapos barna téglalap, lekerekített sarkokkal.
Alább látható egy részlet az oldalsávból ezekkel a gombokkal.
A gombok „animálásához” először adjunk nekik némi hangerőt a CSS stílusok segítségével. És ezt a lineáris gradiens tulajdonság segítségével fogjuk megtenni, amelyet korábban a rotátor, a keresés és az előfizetési blokkok tervezésénél használtak.
A lineáris gradiens értékek a következők:
1. A színárnyalatokat alulról felfelé állítjuk be, kezdve a gomb fő színénél sötétebb színnel. Annak meghatározásához, hogy melyik színt használjuk a színátmenet elején, egy grafikus szerkesztő eszközét használjuk, jelen esetben a Photoshopot.
Ehhez egy nyitott terv-elrendezési dokumentumban válassza ki a „Színválasztót”, vigye a kurzort a gomb kívánt területére, határozza meg az alapszínt, majd a „Színválasztó” eszközökkel válasszon egy sötétebb színt. ugyanaz a barna árnyalat. Esetünkben vegyünk egy „653939” értékű színt. Az alábbi képernyőképen jól látható, hogyan lehet ezt megtenni.
2. Ezután határozza meg a gradiens leállítási pozícióját, ahol a kezdeti, sötétebb szín átvált a fő színre. Helyezze az ütközőt körülbelül középre. Ugyanakkor a telítettebb szín érdekében a stop pozíciót egy kicsit feljebb toljuk, és meghatározzuk az értékét, mondjuk a magasság 70%-át.
3. Az utolsó dolog, amit a színátmenethez tulajdonságok hozzárendeléséhez kell tenni, az az, hogy világosabb színt adjunk meg, mint az alapszín, amely a tetején lévő gombokat színezi. Ez ugyanúgy történik, mint a gradiens kezdeti színének meghatározásakor. Ebben az esetben ennek a színnek az értékét "b88686"-nak vesszük.
3. A kapott adatok alapján adjunk hozzá egy lineáris gradienst a gombok korábban generált CSS tulajdonságaihoz.
bemenet: {
magasság : 30 képpont;
margó-alsó : 10 képpont;
határ-sugár : 5px;
háttér : # a76d6d;
szöveg igazítás : középen;
font-weight : félkövér;
szín : #fff;
úszó : jobb;
háttérkép
Megjegyzendő, hogy az extrém színek meghatározásakor itt nem tüntetjük fel a stop pozíciókat, mivel 0% és 100% értékeknél ez nem szükséges.
Most frissítsük a böngészőt, és nézzük meg az eredményt.
Amint látható, a gombok enyhén kidudorodtak. Most elkezdheti "újraéleszteni" őket.
A gombok interaktívvá tétele
A gombokkal való teljes körű működés érdekében interaktívvá tesszük őket, amelyek vizuálisan tükrözik a három fő állapotukat: passzív (a gomb a kezdeti állapotában van), aktív (a kurzor a gomb felett áll) és lenyomott (amikor a gomb a kurzor lebeg, az egérgombot lenyomva tartjuk).
És ezt az árnyék és a szegély tulajdonságok kombinációjával fogjuk megtenni. Ennek a technikának az a lényege, hogy az árnyék és a szegélyek színének különböző oldalról történő megváltoztatásával a gombok állapotváltozásának utánzatát érhetjük el.
Először is tegyük ezt a passzív állapothoz, és próbáljuk meg úgy ábrázolni, hogy a gombok a felület fölé emelkedjenek.
A szegélyek és az árnyékok színét ugyanúgy fogjuk kiválasztani, mint az előző esetekben.
A megfelelő kiegészítések után a CSS-kód a formát veszi fel.
bemenet: {
magasság : 30 képpont;
margó-alsó : 10 képpont;
határ-sugár : 5px;
háttér : # a76d6d;
szöveg igazítás : középen;
font-weight : félkövér;
szín : #fff;
úszó : jobb;
háttérkép : lineáris gradiens (felfelé, # 653939, # a76d6d 50%, # b88686);
doboz-árnyék : 2px 2px 4px 0px # 422a2a;
határ-szélesség : 2px;
határos stílusban : szilárd;
határ-szín : #ddbebe # 241616 # 241616 #ddbebe;
Itt megjegyezhető, hogy a szegélyeket olyan tulajdonságok kombinációja jelenti, amelyek meghatározzák a vastagságot (szegélyszélesség az értékkel 2px), egy stílus (border-style), amelynek értéke egy tömör szegélyt és színeket (border-color) határoz meg mind a négy oldalon.
Frissítsük a böngészőt, és nézzük meg, hogyan fognak kinézni a gombok.
Amint látja, úgy tűnik, hogy a gombok ebben az állapotban felemelkedtek.
Most próbáljuk meg a gombokat úgy nézni, mint egy lenyomott állapot. Ehhez eltávolítjuk az árnyékot, és megváltoztatjuk a szegélyek színét. Ebben az esetben az aktív állapotnak megfelelő: hover pszeudoosztály speciális választóját fogjuk használni.
A gombok aktív állapotának CSS-je így fog kinézni.
bemenet: lebeg {
doboz-árnyék : egyik sem;
határ-szín : # a76d6d # a76d6d # a76d6d # a76d6d;
Ebben az esetben ismét megváltoztatjuk a szegélyek színét és hozzáadunk egy árnyékot, csak ebben az esetben az belső és eltolás nélküli lesz. A pszeudoosztály választó is a következőre változik: aktív, a lenyomott állapotnak megfelelően.
A lenyomott állapot CSS-kódja a következő lesz.
bemenet: aktív {
doboz-árnyék : 0px 0px 7px 2px # 422a2a betét;
határ-szín : # 777 #fff #fff # 777;
A "Keresés" gomb az alábbiakban látható összehasonlításképpen, ahol jól látható, hogyan változtatja meg megjelenését állapottól függően.
8. ábra Passzív állapot
Itt fejeztük be a főoldal elrendezését, és a tervezési elrendezésnek megfelelő formára hoztuk. És most, mint korábban minden szakaszban, ellenőriznünk kell a kereszt-kompatibilitást a különböző böngészőkben. De előtte nézzük meg az oldal érvényesítését, mivel a kód állapota bizonyos mértékig befolyásolhatja a keresztkonzisztenciát. Ezért most ezt a nagyon szükséges műveletet fogjuk elvégezni.
Kell-e érvényesítés
Az érvényesítés a kód ellenőrzése a megállapított szabványok szerint. Tegyen különbséget a HTML és a CSS kód helyességének ellenőrzése között. Ugyanakkor jól látható, hogy az egyik esetben a HTML kódot, a másikban a CSS kódot ellenőrzik.
Valószínűleg sokan furcsának fogják találni azt a kérdést, hogy szükség van-e az érvényesítésre. De ha ránézünk az internetre, láthatjuk, hogy sokan úgy gondolják, hogy az érvényes kód nem kötelező, ez időpocsékolás, hiszen a böngészők mindenféle hiba jelenlétében is jól működnek.
Természetesen sok esetben az oldalak jól működhetnek érvénytelen kódon, de a keresztkonzisztencia ilyen esetekben nem garantálható. Hiszen magukra a programozási nyelvekre is vannak szabványok, de arra a tényre, hogy a böngészők ugyanúgy javítják a hibákat, ilyen szabvány természetesen nem létezik és nem is lehet. Ezért a különböző böngészők különböző módon tudják kezelni a hibákat, ami az oldalak eltérő megjelenítéséhez vezethet.
És általában nem világos, hogy egyesek miért alakítanak ki ilyen figuratív attitűdöt a munkájukhoz, az „éppen így lesz”. Ezért ha valaki úgy gondolja, hogy nem kell ellenőriznie a kód érvényességét, akkor ez az ő joga, és aligha lehet meggyőzni az ellenkezőjéről, és nem is kell.
Most térjünk át a kódok érvényességének közvetlen ellenőrzésére, először a HTML-re, majd a CSS-re.
Hogyan kell érvényesíteni a HTML kódot
Lényegében maga a kódellenőrzés meglehetősen egyszerű, amint az most látható. A hibák kiküszöbölése azonban általában bizonyos ideig tart. Természetesen, ha a kód több sorból áll, akkor itt nem merülhetnek fel nehézségek. De ha több száz és több ezer van belőlük, akkor lehet, hogy keményen kell dolgoznia, minden attól függ, hogy milyen jól lett lefordítva a kód. Ezért jobb ezt gyakrabban megtenni közös keresztkonzisztencia-ellenőrzéssel.
Itt megvizsgáljuk a legegyszerűbb és leggyakoribb lehetőséget az érvényesség ellenőrzésére - ez a "W3C Consortium" webhely használata, amely a böngésző fejlesztőinek támogatásával specifikációkat fejleszt ki a weboldalak kódjaihoz.
A HTML-kód ellenőrzéséhez kövesse a https://validator.w3.org/ linket, ahol megnyílik egy oldal, amelyen be kell írni az ellenőrzött oldal címét.
képernyőkép 51
Az "Ellenőrzés" gomb megnyomása után megkapjuk az ellenőrzés eredményét.
Ebben az esetben a HTML kód érvényes, de ajánlatos a lang attribútumot használni az értékkel együtt "ru", mivel az oldal orosz nyelvet használ.
A lang attribútum arra szolgál, hogy a böngészők bizonyos karaktereket, például idézőjeleket, helyesen jelenítsenek meg, a használt nyelvtől függően. Ezért nem lesz felesleges, ha belefoglaljuk a HTML kódba. És ezt a html címkében fogjuk megtenni, hogy ez az attribútum hatással legyen a teljes dokumentumra.
A kiegészítő elkészítésének módja a következő táblázatban látható.
"ru" >
. . .
És most, ha egy második ellenőrzést végzünk, láthatjuk, hogy a kód teljesen érvényes lett, minden megjegyzés nélkül.
Ily módon ellenőriztünk egy interneten közzétett fájlt. De ha az oldal még nem került fel az internetre, más módon is ellenőrizheti az érvényességét, ez vagy töltse fel a fájlt a Tallózás gombbal, vagy használja az űrlapot a HTML kód közvetlen másolásához.
A képernyőképen az utolsó lehetőség látható, amikor a weboldal kódja közvetlenül az űrlapba másolásra kerül ellenőrzés céljából.
Az ellenőrzés elvégzése után hasonló eredményt kapunk, és itt is megjelenik az ellenőrzött kód. Abban az esetben, ha hibákat találnak, azok kiemelve lesznek a keresés egyszerűsítése érdekében, ami jelentősen leegyszerűsíti a kiküszöbölésüket.
A CSS kód érvényesítése
Kitértünk a HTML érvényesítési ellenőrzésére. A CSS-kód érvényesítése pontosan ugyanabban a sorrendben történik. Csak ebben az esetben egy másik érvényesítő oldalt kell használnia, amely ilyen esetekben a http://jigsaw.w3.org/css-validator/ címen található.
Nyissuk meg, és az előzőhöz hasonlóan írjuk be az ellenőrzött oldal címét, majd nyomjuk meg az „Ellenőrzés” gombot.
Az ellenőrzés eredménye a képernyőképen látható.
Amint látja, CSS kódunk hibátlanul teljes mértékben megfelel a specifikációnak, ami jó eredmény.
A többi ellenőrzési mód sorrendje ebben az esetben teljesen egybeesik a HTML kód hasonló ellenőrzéseivel. Ezért itt nem ismételjük magunkat, és itt fejezzük be az érvényesítési ellenőrzések mérlegelését.
Ezt követően ellenőrizzük oldalunk keresztegyezését, és ügyelünk arra, hogy minden böngészőben egyformán jelenjen meg, ekkor fejezzük be az oldal főoldalának elrendezését.
És ezzel azonnal az újévi ünnepek után foglalkozunk.
Végezetül pedig mindenkinek boldog új évet kívánhat! És kívánok egészséget, szeretetet, örömet, jólétet és természetesen sok sikert a saját weboldal létrehozásához az újévi sikeres internetes munka lehetőségéhez!
A webhely forrásfájljai
Az oldal forrásfájljai az ebben a cikkben elvégzett frissítésekkel a mellékelt oldalról letölthetők kiegészítő anyagok.
Egyik korábbi cikkemben arról beszéltem. Ezt azonban nem mindenki tudja HTML érvényesítő, van validátor CSS-hez is.
Jelentése CSS érvényesség ugyanaz, mint a HTML: szinte lényegtelen. Hasonlóan a HTML ha írsz érvénytelen CSS, akkor nem lesz probléma (kivéve persze, ha durva hibák vannak), azonban az érvényes kód mindig jó. Az ilyen kód világos és strukturált, könnyen érthető, ami szintén fontos, különösen javításkor, és főleg mások által. Is CSS érvényesség felgyorsítja a feldolgozási folyamatot, és ennek következtében az oldalak betöltésének sebességét.
És végül, tekintettel az érvényesség általánosan ritka betartására, az érvényes kód mindig tiszteletet parancsol, ami fontos, ha ezt hivatásszerűen csinálod.
Nak nek ellenőrizze a CSS érvényességét, ezt kell használnia W3-szolgáltatás: http://jigsaw.w3.org/css-validator/.
Azonnal megmondom, hogy ellentétben HTML, csináld CSS érvényes sokkal egyszerűbb, mivel többnyire csak baklövések vannak, kivéve azokat, amelyeket a legjobb elkerülni.
Hadd foglaljam össze. Egyáltalán nem szükséges érvényessé tenni a kódot, de nagyon javaslom ezt, mivel egy ilyen webhelyet a keresőmotorok könnyebben indexelhetnek ( HTML érvényesség), gyorsabb a munkavégzés, könnyebb a szerkesztés, és tisztelet a szakemberek részéről.
A közelmúltban több kérdést kaptam 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 a dokumentum html-kódjának megfelelése a doctype-ban meghatározott vagy a HTML5-ben benne foglalt szabályoknak.
Vagyis az érvényesség relatív fogalom, hiszen mások a szabályok, és ezeknek is vannak követelményei.
Az érthetőség kedvéért adok egy példát, amelyet a css-live.ru oldalon találtam:
A lakóépületek és az atomerőművek építésekor eltérő SNiP-ket (építési szabályzatokat és előírásokat) alkalmaznak, ezért egy szabályrendszer szerint érvényes okirat egyébként nem lehet érvényes (lakóépület szabványai szerint épített atomerőmű jó lenne!).
A Doctype általában arra a dokumentumra mutat, amelyen a html-ellenőrzést tervezik, de pragmatikus okokból választható az optimális böngészőmód kiválasztásához.
Lehet, hogy az XHTML5-nek egyáltalán nincs doctype, de érvényes.
Mi az érvényesítés?
Egyszerűen fogalmazva, az érvényesítés a kód ellenőrzésének és a kiválasztott doctype-hoz (DTD) való összhangba hozásának 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:
- Szintaktikai hibák ellenőrzése:
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 a jó HTML írásához. - A címkék egymásba ágyazásának ellenőrzése:
A HTML-dokumentumban a címkéket a nyitás fordított sorrendjében kell bezárni. Ez az ellenőrzés a lezáratlan vagy helytelenül lezárt címkéket azonosítja. - HTML érvényesítés DTD szerint:
Annak ellenőrzése, hogy a kód egyezik-e a megadott DTD-vel - Dokumentumtípus-meghatározás (doctype). Ez magában foglalja a címkenevek, attribútumok és a címke "beágyazásának" ellenőrzését (az egyik típusú címkék egy másik típusú címkén belül). - Ellenőrizze az idegen elemeket:
Mindent észlel, ami a kódban van, de nincs benne 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.
A kód érvényessége- ez a formális OB-k hiányának mechanikus ellenőrzésének eredménye, a meghatározott 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 fenyeget (vagy nem fenyeget) egy-egy érvényesítési hibával.
Példák arra, amikor egy webhely érvénytelen kódot készít:
- kényelmesebb és gyorsabb - egyéni attribútumok Javascrip / AJAX vagy
- SEO optimalizált - ARIA jelölés.
Nyilvánvaló, hogy az érvényességnek semmi értelme 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.
- Kiskorú eltűrhető, de csak alapos indokkal.
A html / CSS ellenőrzési hibák érvényességével kapcsolatban:
Az érvényesítési hibák (OB-k) csoportokra oszthatók:
- OB-k a sablonfájlokban:
Nem nehéz megtalálni és javítani.
Ha az apró hibák bármelyike segít az oldal működőképességének vagy gyorsabbá tételében, akkor elhagyhatja. - OB a webhelyen csatlakoztatott harmadik féltől származó szkriptekben:
Például egy Vkontakte widget, egy Twitter szkript vagy videofájlok a YouTube-ról.
Ezeket semmilyen módon nem lehet majd javítani, mivel 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 a HTML vagy CSS egy adott verziójával.
Ha a sablonban a 3-as CSS-szabályokat használta, és az érvényesítő ellenőrzi a 2.1-es verziónak való megfelelést, akkor az összes CSS3-szabályt hibának tekinti, bár nem azok. - OV-k, amelyeket elkerülhetetlenü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 viselni.
- 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.
- Maga az érvényesítő hibái.
Gyakran nem lát címkéket (például záró címkéket), és beszámol az OB-ról, ahol nem.
Kiderült, hogy egy működő helyszínen szinte mindig lesz valamilyen OB.
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 is érvényesek.
Az összetett témák a következők:
- WordPress funkciók (pl the_category ()) amelyek érvénytelen kódot adnak.
- Videókimenet a videómegosztó oldalakról, például a YouTube-ról, és sok olyan OV van a YouTube kódban, amelyeket sem te, sem én nem tudunk befolyásolni.
- Közösségi hálózatok gombjai, amelyek e hálózatok szkriptjei segítségével kapcsolódnak össze, és OB-t tartalmaznak.
- CSS3 és HTML5 szabályok, amelyeket a régebbi érvényesítők hibának tekintenek.
Ugyanakkor a CSS3 és HTML5 verzió érvényesítői hibának tekintik a régi szabályokat :). - Időnként az Internet Explorerben vagy más böngészők régebbi verzióiban történő helyes megjelenítés érdekében úgynevezett hackeket kell használnia - olyan kódot, amelyet csak egy adott böngésző ért meg, hogy szabályokat írhasson a webhely megjelenítésére kifejezetten ehhez a böngészőhöz.
Ennek eredményeként teljesen érvényes kódot csak nagyon egyszerű témák begépelésekor kaphat, pl. amelyek tartalmazzák a minimális funkcionalitást.
Miután befejeztem bármelyik témám elrendezését, mindig ellenőrzöm egy érvényesítővel, é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 témáit szedi, azt tanácsolom, hogy tegye ezt.
Az én szemszögemből (és a legtöbb layout-tervező szemszögéből is) a html/CSS validációhoz, mint végső igazsághoz való hozzáállás téves. Csak azokat az OV-kat kell kijaví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 feltörése nélkül javítható.
Remélem, az összes érvényesítési kérdésre válaszoltam.
Már említettem, hogy mi létezik a html kód érvényessége szempontjából. Ezt legalább időnként meg kell tenni, mert érvényesség html és css erősen befolyásolja a webhelyet, vagyis az erőforrás azonos megjelenítését a különböző böngészőkben (általános cikk a népszerű és legjobb webböngészőkről, amely, remélem, segít a választásban az egyik mellett).
Ráadásul már említettem, annak ellenére, hogy a keresők ebben a szakaszban nem veszik figyelembe a CSS és HTML kód hibákat az oldalak rangsorolásakor, a jövőben minden változhat, és előfordulhat, hogy egy gyönyörűen megtervezett, Az emberek projekt elveszítheti a potenciális közönség egy részét, amiatt, hogy nem ment át az érvényesítésen. Na jó, ez mind dalszöveg, itt mindenki maga dönti el, hogy mennyire fontos minden.
Azt hiszem, most már ismeri a véleményemet, mivel én írom ezt a cikket, ami azt jelenti, hogy figyelmet érdemlőnek tartom, valamint például a SEO optimalizálás olyan fontos részét, mint a linkek bezárása és a Google indexeléséből származó szövegtöredékek, ill. Yandex, vagy hozzáértő használat.
Oké, ahogy mondják, inkább a lényegre. Először egy kicsit a CSS-ről. CSS ( Lépcsőzetes stíluslapok- Cascading Style Sheets) egy stílusnyelv, amely meghatározza a HTML dokumentumok megjelenítését. Vagyis ha a HTML leírja egy oldal tartalmát, akkor a CSS formázza ezt a tartalmat, vagyis teljes megjelenést ad neki. Mellesleg, webhelye sebességének növelése érdekében hasznos lehet témafájlok tárolása.
W3C validátor: CSS kód érvényesítése
Most térjünk át egy dokumentum érvényességének ellenőrzésére (webhelyünk vagy WordPress blog oldalai). Továbbá, mint a HTML kód ellenőrzése esetén, az egyik eszközt fogjuk használni. Térjünk át a CSS-érvényesítési szolgáltatásra:
Amint látja, háromféleképpen ellenőrizheti a CSS érvényességét a W3C validátor segítségével. Egyébként vegye figyelembe, hogy az érvényesítő oldal alján van egy megjegyzés, amely azt jelzi, hogy a HTML-kód érvényességét ellenőrizni kell. Csak mindkét helyes kód garantálja a teljes dokumentum helyességét. Az ellenőrzéshez írja be az URL-t. Például nézzük meg a blogom kezdőlapját:
A W3C validátor által a CSS-kód hibáira vonatkozó ellenőrzés eredménye nem nevezhető kiábrándítónak, mivel mindössze 2 hibát találtunk. Természetesen ezek a hibák különbözőek, minden esetben más következményekkel járnak. Lássuk, mit tehetünk ezek kiküszöbölésére. Itt minden kényelmes, mivel a W3C validátor nem csak hivatkozást ad egy hibás kódot tartalmazó dokumentumhoz, hanem a sorszámot is, amelyen található. Alább egyébként a figyelmeztetések és hibák listája után megjelenik a helyes CSS-kód egy változata, amely használható:
A dokumentumra mutató hivatkozás található a CSS-ellenőrzés eredményoldalán css.ie amely a téma mappában található. Böngészőkön átívelő blog létrehozására hozták létre (konzisztens megjelenítés a népszerű böngészőkben). Sőt, az Internet Explorer különféle módosításaihoz való, amelyek különféle "jamboktól" szenvednek az oldal kinézetének torzítása miatt, különösen a régebbi verziói (ebben a tekintetben az IE9 sokkal jobb). A projekt előrehaladása szempontjából nagyon fontos a böngészők közötti kompatibilitás, de a vizsgálat során kiderült, hogy ez a dokumentum olyan tulajdonságokat tartalmaz, amelyek nem felelnek meg a W3C szabványoknak.
Így kapjuk a 3. és 12. sort, amelyek hibákat tartalmaznak. A javításhoz távolítsa el az elemzési hibát html (szűrő: kifejezés (document.execCommand ("BackgroundImageCache", false, true));)és tulajdon .zoomolás... Most nem megyek bele a programozás és a webhelyek elrendezésének bonyolultságába, csak megjegyzem, hogy a tulajdonság kifejezés segít megszabadulni az IE6-ban előforduló háttérképek bosszantó villogó hatásától.
Vagyis a böngészőben, amelynek használata hiábavaló, és a későbbi verziókban ez a "hiba" már nem figyelhető meg. Azonnal meg kell mondanom, hogy ezt a "gyógyszert" egy ideig fogom használni, amíg az IE6-ot használó potenciális látogatók száma el nem éri a minimális szintet. Az egyértelműség kedvéért azonban eltávolítom, hogy megmutassam, hogyan reagál erre a W3C validátor.
A .zoom tulajdonságot, amely egy olyan elem nagyítási tényezőjét állítja be, amely nem része a W3C nemzetközi szabványnak, az Opera, a Safari nagyon régi verziói támogatják, pl. IE8(A 9-es verzió szinte teljesen "törvénytisztelő", így hamarosan, remélem, a webmesterek megszabadulnak a hackeléstől, vagyis további kódok használatától a maximális böngészők közötti kompatibilitás elérése érdekében). Most nézzük meg az érvénytelen elemeket tartalmazó dokumentumot, és javítsuk ki:
Ez a dokumentum a Felhős téma mappámban található, törlöm a fenti elemeket, amelyek nem mentek át az érvényesítési ellenőrzésen. Továbbá az érvényesítési ellenőrzés eredményeiben a hibákon kívül sok ún. figyelmeztetés is szerepelt:
Példaként megpróbálom világosan bemutatni, hogyan lehet megszabadulni a leggyakoribbaktól, és közben elmagyarázom a jelentésüket. Amint láthatja, a W3C validátor figyelmeztet arra, hogy a szövegben és a háttérben ugyanazok a színek jelennek meg. Azt kell mondanom, hogy ez általában mindenesetre nem kívánatos, mivel a keresőmotorok ezt az állapotot információk elrejtésének tekinthetik, ami komoly szankciókkal jár.
Természetesen ez nem mindig van így, de ezt a veszélyt nem lehet alábecsülni. Tehát menjünk közvetlenül a helyzet javításához. A legjobb megoldás a fájl másolása stílus.css a témája a HTML és PHP szerkesztő jegyzettömbjében ++, amiről már beszéltem, és ami megkönnyíti a sorszám szerinti keresést:
Most már tudjuk, hol helyezkednek el ezek a vonalak a témafájlban, állítsa be a színt az árnyalat enyhe megváltoztatásával. Hexadecimális színben a #ffffff fehéret jelent. A következőképpen változtatjuk meg: az utolsó f helyett d-t írunk be, így egy kicsit más árnyalatú fehéret kapunk; most a felhasználók számára nem lesznek észrevehetők a változások, de a keresőmotorok látni fogják a különbséget:
Így javíthatja ki az erőforrásoldalak CSS-kódjának érvénytelen részeit. Ugyanígy megtaláljuk a többi, figyelmeztetésekkel megjelölt és javítandó szakaszt, ami a 483-as vonalra vonatkozó figyelmeztetéseket illeti (egyébként jó néhány volt, kb. 10). Az ellenőrzés során megállapítottam, hogy az ok a WP Page Numbers bővítmény volt, amely oldalnavigációt biztosít.
Ez késztetett arra, hogy deaktiváljam ezt a bővítményt, és ez volt az oka annak, hogy végül kódbefecskendezésre cseréltem, ami egy lépés volt a szerverterhelés csökkentése felé. Amint ezt megtettem, egy második ellenőrzés után azonnal eltűntek a figyelmeztetések, amelyek arra vonatkoztak, hogy az adott bővítmény megsértette a kód érvényességét. A fenti gesztusok után újra ellenőrizzük a CSS érvényességét a W3C validátor segítségével:
Most már tudja, hogyan ellenőrizheti egy CSS-dokumentum (egy webhely vagy blog weboldala) érvényességét a W3C érvényesítő segítségével. Végezetül szeretném megjegyezni, hogy mindenki maga dönti el a CSS kód érvényességének ellenőrzésének mértékét és gyakoriságát, minden a körülményektől függ, de ennek ellenére mély meggyőződésem szerint időről időre ezt feltétlenül meg kell tenni. . Iratkozzon fel a blogfrissítésekre, hogy friss anyagokat kapjon e-mailben. Engedjék meg, hogy szabadságot vegyek, remélem egy kis időre elválunk.
Az érvényesítés egy CSS-kód ellenőrzése a CSS2.1 vagy CSS3 specifikációval összhangban. Ennek megfelelően a helyes, hibát nem tartalmazó kódot érvényesnek, a specifikációnak nem megfelelő kódot pedig érvénytelennek nevezzük. A kód ellenőrzésének legkényelmesebb módja a webhelyen keresztül. http://jigsaw.w3.org/css-validator/, ennek a szolgáltatásnak a 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: // protokollt nem kell megírni, az automatikusan hozzáadódik (1.42. ábra).
Rizs. 1.42. A dokumentum ellenőrzése a címen
A cím megadása után kattintson az „Ellenőrzés” gombra, és megjelenik a két felirat egyike: „Gratulálunk! Nem található hiba "ha sikeres, vagy" Sajnáljuk, a következő hibákat találtuk "ha a kód érvénytelen. 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 (1.43. ábra).
Rizs. 1.43. Fájl ellenőrzése betöltés közben
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, miközben csak a stílus kerül ellenőrzésre (1.44. ábra).
Rizs. 1.44. A beírt kód ellenőrzése
Ez az opció tűnik a legkényelmesebbnek a kóddal végzett különféle kísérletek elvégzéséhez vagy a kis töredékek gyors ellenőrzéséhez.
CSS verzió kiválasztása
A CSS3 sok új stílustulajdonságot ad hozzá az előző verzióhoz képest, ezért a kódellenőrzésnek verziófüggőnek kell lennie. A szolgáltatás alapértelmezés szerint a CSS2.1-et adja meg, így ha a kódot a CSS3-mal szeretné ellenőrizni, akkor azt kifejezetten meg kell adnia. Ehhez kattintson a "További szolgáltatások" szövegre, és a megnyíló blokkban a "Profil" listából válassza ki a CSS3-at.
Rizs. 1.45. Az ellenőrizni kívánt CSS-verzió megadása
Azonosítók és osztályok
Időről időre vita folyik arról, hogy célszerű-e azonosítókat használni az elrendezésben. Ennek fő oka az, hogy az azonosítók a weboldal elemeinek eléréséhez és manipulálásához szükséges szkripteket, az osztályokat pedig kizárólag az elemstílusok megváltoztatására kell használni. Valójában nincs különbség a stílusokon keresztül, de néhány dolgot szem előtt kell tartani az azonosítókkal és osztályokkal, valamint a fejlesztőkre váró buktatókkal kapcsolatban.
Először is soroljuk fel e szelektorok jellemző tulajdonságait.
Azonosítók
A dokumentum kódjában minden azonosító egyedi, és csak egyszer kell szerepelnie.
Az azonosító neve megkülönbözteti a kis- és nagybetűket.
A getElementById metódussal hozzáférhet egy elemhez az azonosítója alapján, és módosíthatja az elem tulajdonságait.
Az azonosító stílusa elsőbbséget élvez az osztályokkal szemben.
Az osztályok többször is felhasználhatók a kódban.
Az osztálynevek megkülönböztetik a kis- és nagybetűket.
Az osztályok úgy kombinálhatók egymással, hogy több osztályt adnak egy címkéhez.
Azonosítók
Ha a weboldal futása közben néhány elem stílusát menet közben kell megváltoztatni, vagy szöveget kell megjeleníteni bennük, az azonosítókkal sokkal egyszerűbb. Az elem meghívása a getElementById metóduson keresztül történik, melynek paramétere az azonosító neve. Az 1.70-es példában egy userName nevű azonosító kerül az űrlap szövegmezőjébe, majd egy JavaScript függvény segítségével ellenőrzi, hogy a felhasználó beírt-e bármilyen szöveget ebbe a mezőbe. Ha nincs szöveg, de megnyomja a Küldés gombot, a címkén belül megjelenik egy üzenet az üzenet azonosítójával. Ha minden helyes, akkor az űrlapadatokat a rendszer az action attribútum által megadott címre küldi.
1.70. példa. Űrlapadatok érvényesítése XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
