2016-12-29

Animiramo dugmad i provjeravamo ispravnost HTML i CSS koda na stranici

Pozdrav dragi posjetitelju!

Danas ćemo, na primjeru kreirane web stranice, pogledati kako možete provjeriti valjanost stranice, odnosno usklađenost sa utvrđenim specifikacijama HTML i CSS jezika.

Osim toga, prije provjere, uradićemo neke dorade CSS stilskog lista u vezi sa "animacijom" dugmadi bočne trake, gdje ćemo od statičnih dugmadi napraviti interaktivne dugmad koji mijenjaju izgled ovisno o stanju - pasivno, aktivno i pritisnuto.

• Dugmad je glomazna
• Interaktivnost dugmadi
• Da li je potrebna validacija?
• Kako provjeriti valjanost HTML koda
• Kako provjeriti valjanost CSS koda
• Izvorni fajlovi sajta

Dugmad je glomazna

U prethodnom članku dizajnirali smo područje glavnog sadržaja tako da odgovara izgledu glavne stranice. Istovremeno, trenutno se na bočnoj traci nalaze dugmad koja su statična i izgledaju kao običan ravan smeđi pravougaonik sa zaobljenim uglovima.

Ispod je fragment bočne trake s takvim gumbima.

Da bismo "animirali" dugmad, prvo im dajemo malo jačine koristeći CSS stilove. A to ćemo učiniti uz pomoć svojstva linearnog gradijenta, koje je ranije korišteno u dizajnu blokova rotatora, pretraživanja i pretplate.

Vrijednosti linearnog gradijenta definiramo na sljedeći način:

1. Nijanse boja će biti postavljene odozdo prema gore, počevši od tamnije boje u odnosu na glavnu boju dugmeta. Da bismo odredili koju boju koristiti na početku gradijenta, koristimo alat za grafički uređivač, u ovom slučaju Photoshop.

Da biste to učinili, s otvorenim dokumentom o izgledu dizajna, trebate odabrati "Birač boja", preći mišem preko potrebnog područja gumba, odrediti glavnu boju, a zatim koristiti alate "Brači boja" za odabir tamnije boje iste smeđe nijanse. U našem slučaju, uzmimo boju sa vrijednošću "653939". Jasno, kako se to može učiniti prikazano je na snimku ekrana ispod.

2. Zatim definirajte stop poziciju gradijenta gdje će početna, tamnija boja preći u glavnu. Stop pozicija će biti postavljena otprilike u sredini. Istovremeno, da bismo dobili zasićeniju boju, pomerimo stop poziciju malo gore, i definišemo njenu vrednost, recimo, 70% visine.

3. I poslednja stvar koju treba da uradite da postavite svojstva gradijenta je da definišete svetliju boju u odnosu na glavnu, koja će obojiti dugmad na vrhu. To se radi na isti način kao kod određivanja početne boje gradijenta. U ovom slučaju, vrijednost ove boje će biti uzeta kao "b88686".

3. Na osnovu primljenih podataka, dodaćemo linearni gradijent na prethodno formirana CSS svojstva dugmadi.

unos: {

visina :30px;

margin-bottom :10px;

granica-radijus :5px;

pozadini :#a76d6d;

text-align :centar;

font-weight :bold;

boja :#fff;

float :right;

pozadinska slika

Može se primijetiti da pri određivanju ekstremnih boja ovdje nisu navedene zaustavne pozicije, jer to nije potrebno raditi sa vrijednostima od 0% i 100%.

Sada, osvježimo pretraživač i pogledamo rezultat.

Kao što vidite, dugmad su malo izbočena. Sada možete početi da ih "oživljavate".

Učiniti dugmad interaktivnim

Kako bismo u potpunosti radili s dugmadima, učinit ćemo ih interaktivnim, što će vizualno odražavati njihova tri glavna stanja, pasivno (dugme je u početnom stanju), aktivno (kursor se lebdi iznad gumba) i pritisnuto (miš dugme se pritisne i drži dok kursor lebdi).

I to ćemo učiniti koristeći kombinaciju svojstava sjene i obruba. Suština ove tehnike je da promjenom boje sjene i granica s različitih strana možete postići imitaciju promjene stanja dugmadi.

Prvo, uradimo ovo za pasivno stanje i pokušajmo ga nacrtati tako da se dugme izdiže iznad površine.

Boje obruba i sjenki biramo na isti način kao u prethodnim slučajevima.

CSS-kod će nakon odgovarajućih dodataka poprimiti oblik.

unos: {

visina :30px;

margin-bottom :10px;

granica-radijus :5px;

pozadini :#a76d6d;

text-align :centar;

font-weight :bold;

boja :#fff;

float :right;

pozadinska slika :linear-gradient(na vrh, #653939, #a76d6d 50%, #b88686);

box shadow :2px 2px 4px 0px #422a2a;

granica širine :2px;

obrubni stil :solid;

boja ivice :#ddbebe #241616 #241616 #ddbebe;

Ovdje možete primijetiti da su ivice predstavljene kombinacijom svojstava koja određuju debljinu (širina ivice sa vrijednošću 2px), stil ( border-style ) sa vrijednošću koja specificira čvrst rub i boje ( border-color ) na svakoj od četiri strane.

Osvježimo pretraživač i vidimo kako će dugmad sada izgledati.

Kao što vidite, dugmad u ovom stanju kao da su se podigla.

Pokušajmo sada dugmadima dati izgled pritisnutog stanja. Da biste to učinili, uklonite sjenu i promijenite boju ivica. U ovom slučaju koristićemo poseban selektor pseudo-klase :hover koji odgovara aktivnom stanju.

CSS kod za aktivno stanje dugmadi će poprimiti sljedeći oblik.

unos: lebdjeti {

box shadow :none;

boja ivice :#a76d6d #a76d6d #a76d6d #a76d6d;

U ovom slučaju ćemo ponovo promijeniti boju ivica i dodati sjenu, samo što će u ovom slučaju biti unutrašnja i bez pomaka. Selektor pseudo-klase će se također promijeniti u :active , što odgovara pritisnutom stanju.

CSS kod za pritisnuto stanje bi bio kako slijedi.

unos: aktivan {

box shadow :0px 0px 7px 2px #422a2a umetnuti;

boja ivice :#777 #fff #fff #777;

Dugme "Traži" je prikazano ispod za poređenje, gdje možete jasno vidjeti kako mijenja svoj izgled u zavisnosti od stanja.

Slika 8 Pasivno stanje

Ovdje smo završili izgled glavne stranice i doveli je do izgleda koji odgovara izgledu dizajna. I sada moramo, kao i prije u svakoj fazi, provjeriti je li unakrsna usklađenost u različitim pretraživačima. Ali prije toga, hajde da provjerimo valjanost stranice, jer stanje koda također može utjecati na unakrsnu konzistentnost u određenoj mjeri. Stoga ćemo sada izvršiti ovu vrlo neophodnu operaciju.

Da li je potrebna validacija?

Validacija je verifikacija koda u odnosu na utvrđene standarde. Postoje provjere ispravnosti HTML i CSS koda. Jasno je da se u jednom slučaju provjerava HTML kod, au drugom CSS kod.

Vjerovatno će mnogima biti čudno pitati se da li je potrebna validacija. Ali ako pogledate na Internetu, možete vidjeti da ima mnogo onih koji vjeruju da je važeći kod opcioni, da je to dodatno gubljenje vremena, jer pretraživači dobro rade čak i uz sve vrste grešaka.

Naravno, u mnogim slučajevima, stranice mogu dobro raditi na nevažećem kodu, ali unakrsna usklađenost u takvim slučajevima ne može se garantirati. Na kraju krajeva, postoje standardi za same programske jezike, ali zbog činjenice da pretraživači ispravljaju greške na isti način, takav standard, naravno, ne postoji i ne može biti. Stoga različiti pretraživači mogu riješiti greške na različite načine, što može dovesti do različitog prikaza stranica.

I generalno, nije jasno zašto neki ljudi imaju tako figistički odnos prema svom poslu, po principu "i tako će". Dakle, ako neko smatra da ne treba provjeravati ispravnost koda, onda je to njegovo pravo i teško da se može uvjeriti u suprotno, a nema potrebe.

A sada pređimo na direktnu provjeru valjanosti kodova, prvo HTML, a zatim CSS.

Kako provjeriti valjanost HTML koda

U suštini, sama provjera valjanosti koda je prilično jednostavna, kao što sada možemo vidjeti. Ali, ovdje je za otklanjanje grešaka obično potrebno određeno vrijeme. Naravno, ako se kod sastoji od nekoliko redova, onda ovdje ne mogu nastati poteškoće. Ali, ako ih ima na stotine i hiljade, onda ćete se možda morati potruditi ovdje, sve ovisi o tome koliko je kod kompajliran. Stoga je bolje to raditi češće sa zajedničkom provjerom unakrsne usklađenosti.

Ovdje ćemo razmotriti najjednostavniju i najčešću opciju za provjeru valjanosti - ovo je korištenje stranice "W3C Consortium", koja uz podršku programera pretraživača razvija specifikacije za kodove web stranica.

Za provjeru valjanosti HTML koda, samo slijedite link https://validator.w3.org/, koji će otvoriti stranicu sa poljem za unos adrese stranice koju treba provjeriti.

snimak ekrana 51

Nakon klika na dugme "Provjeri", dobivamo rezultat provjere.

U ovom slučaju, HTML kod je važeći, ali postoji preporuka da se koristi atribut lang sa vrijednošću "ru" jer stranica koristi ruski.

Atribut lang je namijenjen da pretraživači ispravno prikazuju određene znakove, kao što su navodnici, ovisno o jeziku koji se koristi. Stoga će nam biti korisno da ga uključimo u HTML kod. I to ćemo učiniti u html tag-u tako da ovaj atribut može djelovati na cijeli dokument.

Kako napraviti ovaj dodatak prikazano je u sljedećoj tabeli.

"ru" >

. . .

A sada, ako uradimo drugu provjeru, možemo vidjeti da je kod postao potpuno važeći bez ikakvih komentara.

Na ovaj način smo provjerili fajl objavljen na internetu. Ali kada stranica još nije objavljena na webu, možete provjeriti njenu valjanost na druge načine, bilo postavljanjem datoteke pomoću dugmeta za pretraživanje ili korištenjem obrasca za direktno kopiranje HTML koda.

Snimak ekrana prikazuje posljednju opciju, kada se kod web stranice kopira direktno u obrazac za verifikaciju.

Nakon izvršene provjere, dobijamo sličan rezultat, a kod koji se provjerava također će biti prikazan ovdje. U slučaju da se pronađu greške, one će biti istaknute kako bi se pojednostavila pretraga, što uvelike pojednostavljuje rad na njihovom otklanjanju.

Kako provjeriti valjanost CSS koda

Pokrili smo provjeru valjanosti HTML koda. CSS kod se provjerava potpuno istim redoslijedom. Samo u ovom slučaju morate koristiti drugu stranicu validatora, koja se za ovaj slučaj nalazi na http://jigsaw.w3.org/css-validator/ .

Otvorimo ga i kao i prethodni put unesemo adresu stranice koju treba provjeriti, nakon čega pritisnemo dugme "Provjeri".

Rezultat ove provjere prikazan je na snimku ekrana.

Kao što vidite, naš CSS kod je u potpunosti usklađen sa specifikacijom bez ikakvih grešaka, što je dobar rezultat.

Redoslijed ostalih metoda validacije za ovaj slučaj se potpuno poklapa sa sličnim provjerama za HTML kod. Stoga se ovdje nećemo ponavljati i završit ćemo pregled provjera valjanosti.

Nakon toga ćemo provjeriti našu stranicu za unakrsnu sliku i uvjeriti se da je ista prikazana na svim pretraživačima, čime ćemo završiti izgled glavne stranice stranice.

I to ćemo uraditi odmah nakon novogodišnjih praznika.

I na kraju, svima možemo čestitati nadolazeću Novu godinu! I poželite u Novoj godini zdravlje, ljubav, radost, blagostanje i, naravno, veliki uspjeh u kreiranju vlastite web stranice za mogućnost uspješnog rada na internetu!

Izvorni fajlovi sajta

Izvorne datoteke stranice sa ažuriranjima koja su napravljena u ovom članku možete preuzeti iz priloženog dodatni materijali.

U jednom od mojih prethodnih članaka govorio sam o . Međutim, ne znaju svi da pored toga validator za HTML, tu je validator i za CSS.

Značenje CSS validnost isto što i HTML: gotovo irelevantno. Slicno HTML ako pišeš nevažeći CSS, onda neće biti problema (osim ako, naravno, nema velikih grešaka), međutim, valjan kod je uvijek dobar. Takav kod je jasan i strukturiran, lako je razumljiv, što je takođe važno, posebno kada se ispravlja, a posebno od strane drugih ljudi. Također CSS validnost ubrzava proces obrade, a samim tim i brzinu učitavanja stranice.

I, konačno, s obzirom na generalno retko poštovanje valjanosti, važeći kod uvek izaziva poštovanje, što je važno ako se ovim bavite profesionalno.

To provjerite CSS validnost, morate koristiti ovo W3 usluga: http://jigsaw.w3.org/css-validator/ .

Odmah ću to reći, za razliku od HTML, do CSS validan mnogo lakše, jer uglavnom postoje samo grube greške, s izuzetkom kojih je najbolje izbjeći.

Dozvolite mi da sumiram. Učiniti kôd valjanim uopće nije potrebno, ali toplo preporučujem da to učinite, jer će pretraživači lakše indeksirati takvu stranicu ( HTML validnost), rade brže, lakše se uređuju i stječu poštovanje profesionalaca.

U posljednje vrijeme dobijam nekoliko pitanja od korisnika u vezi valjanosti mojih tema i validacije općenito. U ovom postu želim da im odgovorim.

Šta je valjanost?

Vjeruje se da je valjanost koda jedinstvena, univerzalna karakteristika svakog koda.
U stvari, valjanost je usklađenost html koda dokumenta sa određenim skupom pravila specificiranih u tipu dokumenta ili impliciranih u HTML5.
Odnosno, valjanost je relativan koncept, pošto su pravila različita, a i njihovi zahtjevi.
Da bi bilo jasnije, navest ću primjer koji sam pronašao na stranici css-live.ru:

Za izgradnju stambenih zgrada i nuklearnih elektrana primjenjuju se različiti SNiP (građevinski zakoni i propisi), tako da dokument koji vrijedi prema jednom skupu pravila ne može biti važeći prema drugom (nuklearna elektrana izgrađena prema standardima stambena zgrada bi bila dobra!).

doctype obično ukazuje na dokument prema kojem je planirana html validacija, ali se može odabrati iz pragmatičnih razloga za odabir optimalnog načina pregledača.
XHTML5 možda uopće nema tip dokumenta, ali je valjan.

Validacija - šta je to?

Jednostavno rečeno, validacija je proces provjere koda i usklađivanja sa odabranim tipom dokumenta (DTD).

Kako se provjerava valjanost?

Valjanost HTML koda se provjerava pomoću alata koji se zove validator.
Najpoznatiji w3c validator je https://www.w3.org.
W3c validator obavlja nekoliko provjera koda.
Glavni:

1. Provjerite ima li sintaksičkih grešaka:
   Primjer sa habrahabr.ru/post/101985 :
   je ispravna sintaksa, iako je nevažeća HTML oznaka
   Dakle, provjera sintakse je minimalno korisna za pisanje dobrog HTML koda.
2. Provjera ugniježđenja oznaka:
   U HTML dokumentu oznake moraju biti zatvorene obrnutim redoslijedom od otvaranja. Ova provjera otkriva nezatvorene ili neispravno zatvorene oznake.
3. HTML validacija prema DTD:
   Provjera kako kod odgovara specificiranom DTD - definiciji tipa dokumenta (doctype). Uključuje provjeru naziva oznaka, atributa i "ugrađivanja" oznaka (oznake jednog tipa unutar oznaka drugog tipa).
4. Provjera stranih elemenata:
   Naći će sve što je u kodu, ali ne i u tipu dokumenta.
   Na primjer, prilagođene oznake i atributi.

Za provjeru valjanosti CSS koda postoji css validator - http://jigsaw.w3.org/css-validator.
Validnost koda- ovo je rezultat mehaničke provjere za odsustvo formalnog OB-a, prema specificiranom skupu pravila.
Morate shvatiti da je validacija alat, a ne vrijednost sama po sebi.
Iskusni layout dizajneri obično znaju gdje je moguće narušiti HTML ili CSS pravila validacije, a gdje ne, i šta prijeti (ili ne prijeti) ovom ili onom greškom validacije.
Primjeri kada web lokacija ne pravi važeći kod:

• zgodnije i brže - prilagođeni atributi za Javascript/AJAX ili
• SEO optimiziran - ARIA markup.

Jasno je da valjanost radi valjanosti nema smisla.
U pravilu, iskusni dizajneri izgleda pridržavaju se sljedećih pravila:
- U kodu ne bi trebalo biti grubih grešaka.
- Manje se mogu tolerisati, ali samo iz opravdanih razloga.
Što se tiče html/CSS grešaka validacije:

Greške validacije (VF) mogu se podijeliti u grupe:

• OV u fajlovima šablona:
  Nije ih teško pronaći i popraviti.
  Ako bilo koja od malih grešaka pomogne da stranica postane funkcionalnija ili brža, možete je ostaviti.
• OV u skriptama trećih strana povezanih na web mjestu:
  Na primjer, Vkontakte widget, Twitter skripta ili YouTube video fajlovi.
  Ne postoji način da ih popravimo, jer se ovi fajlovi i skripte nalaze na drugim sajtovima i mi im nemamo pristup.
• CSS pravila koja validator ne razumije:
  Validator provjerava da li kod web mjesta odgovara određenoj verziji HTML-a ili CSS-a.
  Ako ste koristili pravila CSS verzije 3 u šablonu, a validator proverava u odnosu na verziju 2.1, tada će sva CSS3 pravila smatrati greškama, iako nisu.
• OV, koje se nehotice moraju ostaviti na stranici da bi se postigao željeni rezultat. Na primjer:
  • noindex oznake. One ne važe, ali su veoma neophodne i moramo da se pomirimo sa tim.
  • kaki. Da biste dobili ispravan prikaz stranice u nekim pretraživačima, ponekad morate koristiti hakove - kod koji samo određeni pretraživač razumije.
• Greške validatora.
  Često ne vidi nikakve oznake (na primjer, one za zatvaranje) i prijavljuje OB gdje ne postoji.

Ispostavilo se da će na radnom mjestu gotovo uvijek postojati neka vrsta OV.
Štaviše, može ih biti mnogo.
Na primjer, glavne stranice Google-a, Yandex-a i mail.ru-a sadrže po nekoliko desetina grešaka.
Ali, ne ometaju prikaz stranica u pretraživačima i ne ometaju njihov rad.
Sve gore napisano se odnosi na moje teme.

Kompleksne teme uključuju:

• WordPress funkcije (npr. the_category()), koji daju nevažeći kod.
• Video izlaz sa video hosting sajtova, na primer, sa YouTube-a, a u YouTube kodu ima mnogo OB-a na koje ni vi ni ja ne možemo uticati.
• Dugmad društvenih mreža koja su povezana pomoću skripti ovih mreža i sadrže OB.
• CSS3 i HTML5 pravila smatraju greškama kod starijih validatora verzija.
  Istovremeno, validatori CSS3 i HTML5 verzija smatraju stara pravila greškama :).
• Ponekad, da biste postigli ispravan prikaz u pretraživaču Internet Explorer ili starijim verzijama drugih pretraživača, morate koristiti takozvane hakove - kod koji razumije samo određeni pretraživač kako biste napisali pravila prikaza stranice za ovaj određeni pretraživač.

Kao rezultat, možete dobiti potpuno ispravan kod samo kada postavljate vrlo jednostavne teme, tj. one koje sadrže minimalnu količinu funkcionalnosti.
Nakon što završim izgled bilo koje moje teme, uvijek je provjerim validatorom i popravim sve OB-ove koji se mogu popraviti bez gubitka funkcionalnosti teme.
To jest, ako postoji izbor između radne funkcionalnosti i valjanosti, ja biram funkcionalnost.
Ako sami smišljate svoje teme, savjetujem vam da učinite isto.
Sa moje tačke gledišta (a takođe i sa stanovišta većine layout dizajnera), stav prema html/CSS validaciji kao krajnjoj istini je pogrešan. Obavezno je ispraviti samo one OB-ove koji:
- spriječiti pretraživač da ispravno prikaže stranicu (nezatvorene i pogrešno ugniježđene oznake).
- usporiti učitavanje stranice (neispravno povezane skripte).
- može se popraviti bez narušavanja funkcionalnosti teme.
Nadam se da sam odgovorio na sva vaša pitanja o validaciji.

Već sam spomenuo šta postoji u smislu valjanosti html koda. To bi trebalo učiniti barem s vremena na vrijeme, jer valjanost i html i css snažno utiče na sajt, odnosno na identičan prikaz vašeg resursa u različitim pretraživačima (opći članak o popularnim i najboljim web pretraživačima, za koji se nadam da će vam pomoći da napravite izbor u korist jednog od njih).

Osim toga, već sam spomenuo da uprkos činjenici da pretraživači u ovoj fazi ne uzimaju u obzir greške CSS i HTML koda prilikom rangiranja sajtova, u budućnosti se sve može promeniti i možete doći u situaciju da projekat koji je lepo dizajniran, napravljeno za ljude, može izgubiti dio potencijalne publike zbog činjenice da nije prošao validaciju. Pa sve su to tekstovi, ovde svako za sebe odlučuje koliko je sve važno.

Mislim da ste sada upoznati s mojim mišljenjem, pošto pišem ovaj članak, što znači da ga smatram vrijednim pažnje uz, na primjer, tako važan dio seo optimizacije kao što je zatvaranje linkova i fragmenata teksta iz Google i Yandex indeksiranja ili kompetentna upotreba.

Dobro, kako kažu, više na stvar. Prvo, malo o CSS-u. css( Kaskadni listovi stilova- Cascading Style Sheets) je stilski jezik koji definira prikaz HTML dokumenata. Odnosno, ako HTML opisuje sadržaj stranice, onda CSS formatira ovaj sadržaj, drugim riječima, daje mu potpuni izgled. Usput, da biste povećali brzinu web stranice, bit će korisno prevući svoje datoteke teme.

W3C Validator: Provjera valjanosti CSS koda

Sada idemo na to kako provjeriti valjanost dokumenta (stranice naše web stranice ili WordPress bloga). Kao iu slučaju provjere HTML koda, koristit ćemo jedan od . Idemo na uslugu CSS validacije:

Kao što vidite, postoje tri načina za validaciju CSS-a pomoću W3C validatora. Usput, imajte na umu da se na dnu stranice validatora nalazi napomena koja ukazuje na potrebu da se provjeri valjanost HTML koda. Samo oba ispravna koda garantuju ispravnost cijelog dokumenta. Unesite URL za provjeru. Na primjer, pogledajmo glavnu stranicu mog bloga:

Rezultat provjere W3C validatora za greške u CSS kodu ne može se nazvati razočaravajućim, jer su pronađene samo 2 greške. Naravno, ove greške su različite, u svakom slučaju izazivaju različite posljedice. Hajde da vidimo šta možemo učiniti da ih eliminišemo. Ovdje je sve zgodno, jer W3C validator daje ne samo vezu na dokument koji sadrži neispravan kod, već i broj reda na kojem se nalazi. Inače, ispod, nakon liste upozorenja i grešaka, biće prikazana varijanta ispravnog CSS koda, koju možete koristiti:

Na stranici rezultata CSS validacije postoji veza do dokumenta css.ie, koji se nalazi u folderu teme. Napravljen je da bi se postigao blog sa više pretraživača (isti prikaz u popularnim pretraživačima). Štaviše, radi se o raznim modifikacijama Internet Explorer-a, koji griješi s raznim „dovratnicima“ u smislu narušavanja izgleda stranice, posebno njegovih starijih verzija (IE9 je u tom pogledu mnogo bolji). Cross-browser kompatibilnost je veoma važna za napredak projekta, međutim, uvidom se pokazalo da ovaj dokument sadrži svojstva koja nisu usklađena sa W3C standardima.

Dakle, dobijamo redove 3 i 12, koji sadrže greške. Da ih popravite, uklonite grešku raščlanjivanja html (filter: expression(document.execCommand("BackgroundImageCache", false, true));) i imovine .zoom. Sada neću ulaziti u zamršenosti programiranja i izgleda stranica, samo ću napomenuti da je svojstvo izraz pomaže da se riješite dosadnog efekta treperenja pozadinske slike koji se javlja u IE6.

Odnosno, u pretraživaču, čija upotreba nestaje, au narednim verzijama ovaj "propust" se više ne opaža. Moram odmah reći da ću još neko vrijeme koristiti ovaj „lijek“, dok broj potencijalnih posjetitelja koji koriste IE6 ne dostigne minimalni nivo. Međutim, radi jasnoće, da vam pokažem kako će W3C validator reagovati na ovo, uklonit ću ga.

Svojstvo.zoom, koje postavlja faktor skaliranja elementa, nije dio međunarodnog standarda W3C, a podržavaju ga vrlo stare verzije pretraživača Opera, Safari, uključujući IE8(Verzija 9 je gotovo u potpunosti “poštovanje zakona”, tako da će uskoro, nadam se, webmasteri biti oslobođeni potrebe za korištenjem hakova, odnosno dodatnih kodova za postizanje maksimalne kompatibilnosti među pretraživačima). Sada pogledajmo dokument koji sadrži nevažeće elemente i ispravimo ga:

Ovaj dokument je u mom folderu Cloudy theme, brišem gore navedene stavke koje nisu prošle provjeru valjanosti. Nadalje, u rezultatima provjere valjanosti, osim grešaka, bilo je i dosta tzv. upozorenja:

Na primjer, pokušat ću jasno pokazati kako se riješiti najčešćih od njih i usput objasniti njihova značenja. Kao što vidite, W3C validator upozorava na prisustvo istih boja za tekst i pozadinu. Moram reći da je to općenito nepoželjno u svakom slučaju, jer pretraživači ovakvo stanje mogu smatrati skrivanjem informacija, što je bremenito ozbiljnim sankcijama.

Naravno, to nije uvijek slučaj, ali tu opasnost ne treba potcjenjivati. Dakle, idemo na ispravljanje situacije. Najbolje je kopirati fajl style.css vaša tema u HTML-u i PHP-u, uređivač notepad++ o kojem sam govorio i koji olakšava pretraživanje prema broju reda:

Sada znamo gdje se ove linije nalaze u vašoj datoteci teme, ispravljamo boju laganom promjenom nijanse. U heksadecimalnom sistemu boja, #ffffff odgovara bijeloj boji. Mijenjamo ga na sljedeći način: umjesto posljednjeg f upisujemo d, tako dobijamo nešto drugačiju nijansu bijele boje; sada promjene neće biti primjetne korisnicima, ali će pretraživači vidjeti razliku:

Ovako možete ispraviti nevažeće dijelove CSS koda vaših stranica resursa. Na isti način nalazimo i ostale rubrike označene upozorenjima i koje treba ispraviti, a što se tiče upozorenja u vezi sa redom 483 (inače, bilo ih je dosta, oko 10). Nakon provjere, otkrio sam da je njihov uzrok dodatak WP Page Numbers, koji omogućava paginaciju.

To me je navelo da deaktiviram ovaj dodatak i bio je razlog zašto sam ga konačno zamijenio ubacivanjem koda, što je bio korak ka smanjenju opterećenja servera. Čim sam to učinio, upozorenja o kršenju valjanosti koda od strane ovog dodatka su nestala odmah nakon ponovne provjere. Nakon gore navedenih pokreta, ponovo provjeravamo CSS valjanost pomoću W3C validatora:

Sada znate kako provjeriti valjanost CSS dokumenta (web stranice web stranice ili bloga) pomoću W3C validatora. U zaključku želim da napomenem da svako sam odlučuje o stepenu i učestalosti provere ispravnosti CSS koda, sve zavisi od okolnosti, ali ipak, s vremena na vreme to se mora učiniti, po mom dubokom uverenju. Pretplatite se na ažuriranja bloga kako biste primali svježe materijale putem e-pošte. Zato, dozvolite mi da se odmorim, nadam se da ćemo se na kratko rastati.

Validacija se odnosi na provjeru CSS koda u odnosu na CSS2.1 ili CSS3 specifikaciju. Shodno tome, ispravan kod koji ne sadrži greške naziva se važećim, a onaj koji ne zadovoljava specifikaciju naziva se nevažećim. Najpogodnije je provjeriti kod preko stranice http://jigsaw.w3.org/css-validator/, pomoću ove usluge možete odrediti adresu dokumenta, učitati datoteku ili provjeriti ukucani tekst. Veliki plus usluge je podrška ruskog i ukrajinskog jezika.

Provjerite URI

Ova kartica vam omogućava da odredite adresu stranice koja se nalazi na Internetu. Protokol http:// može biti izostavljen, biće dodat automatski (slika 1.42).

Rice. 1.42. Ovjera dokumenta po adresi

Nakon što unesete adresu, kliknite na dugme „Proveri“ i pojaviće se jedan od dva natpisa: „Čestitamo! Nisu pronađene greške" u slučaju uspjeha ili "Nažalost, pronašli smo sljedeće greške" na nevažećem kodu. Poruke o grešci ili upozorenju sadrže broj reda, selektor i opis greške.

Provjerite otpremljeni fajl

Ova kartica vam omogućava da učitate HTML ili CSS datoteku i provjerite ima li grešaka (slika 1.43).

Rice. 1.43. Provjera datoteke prilikom učitavanja

Usluga automatski prepoznaje tip datoteke i, ako je naveden HTML dokument, izdvaja stil iz njega radi provjere.

Provjerite otkucani tekst

Poslednja kartica je za direktan unos HTML ili CSS koda, a proveravaće se samo stil (slika 1.44).

Rice. 1.44. Provjera unesenog koda

Čini se da je ova opcija najpogodnija za provođenje raznih eksperimenata na kodu ili brzu provjeru malih fragmenata.

Izbor CSS verzije

CSS3 ima mnogo novih stilskih svojstava u odnosu na prethodnu verziju, tako da bi pregled koda trebao biti specifičan za verziju. Servis podrazumevano navodi CSS2.1, tako da ako želite da proverite svoj kod u odnosu na CSS3, morate ga eksplicitno navesti. Da biste to učinili, kliknite na tekst "Dodatne karakteristike" i u bloku koji se otvori sa liste "Profil" odaberite CSS3

Rice. 1.45. Određivanje CSS verzije koju treba provjeriti

Identifikatori i klase

Povremeno se pokreće spor oko preporučljivosti korištenja identifikatora u izgledu. Glavni argument je da identifikatori služe za pristup i manipulaciju elementima web stranice pomoću skripti, a samo klase treba koristiti za promjenu stilova elemenata. U stvarnosti, nije bitno koji su stilovi postavljeni, ali trebali biste biti svjesni nekih karakteristika identifikatora i klasa, kao i zamki koje programeri mogu očekivati.

Za početak navodimo karakteristične karakteristike ovih selektora.

Identifikatori

U kodu dokumenta svaki identifikator je jedinstven i treba ga uključiti samo jednom.

Ime identifikatora je osjetljivo na velika i mala slova.

Putem getElementById metode možete pristupiti elementu po njegovom ID-u i promijeniti svojstva elementa.

Stil za identifikator ima prednost nad klasama.

Klase se mogu koristiti više puta u kodu.

Imena klasa razlikuju velika i mala slova.

Klase se mogu kombinovati jedna s drugom dodavanjem nekoliko klasa u jednu oznaku.

Identifikatori

Ako želite promijeniti stil nekih elemenata u hodu ili prikazati neki tekst unutar njih dok web stranica radi, to je mnogo lakše s identifikatorima. Elementu se pristupa putem getElementById metode, čiji je parametar ime identifikatora. Primjer 1-70 dodaje identifikator pod imenom userName u tekstualno polje obrasca, a zatim koristi JavaScript funkciju da provjeri da li je korisnik unio neki tekst u polje. Ako nema teksta, ali se klikne na dugme Pošalji, unutar oznake se prikazuje poruka sa ID msg . Ako je sve ispravno, podaci obrasca se šalju na adresu navedenu atributom akcije.

Primjer 1.70. Validacija podataka obrasca XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6