2016-12-29
Animăm butoanele și verificăm site-ul pentru validitatea codului HTML și CSS
Buna draga vizitatoare!
Astăzi, folosind exemplul unei pagini web create, vom analiza modul în care puteți verifica validitatea site-ului, și anume, pentru conformitatea cu specificațiile stabilite ale limbajelor HTML și CSS.
In plus, inainte de a verifica, vom face cateva rafinari ale foii de stil CSS in ceea ce priveste „animatia” butoanelor din bara laterala, unde vom realiza butoane interactive din butoane statice care isi schimba aspectul in functie de starea lor – pasiva, activa si apasata.
- Faceți nasturii voluminoase
- Efectuarea butoanelor interactive
- Este nevoie de validare?
- Cum se validează codul HTML
- Cum se validează codul CSS
- Fișierele sursă ale site-ului
Faceți nasturii voluminoase
În articolul anterior, am proiectat zona principală de conținut pentru a se potrivi cu aspectul paginii principale. În același timp, în momentul de față există butoane în bara laterală care sunt statice și arată ca un dreptunghi maro plat obișnuit cu colțuri rotunjite.
Mai jos este un fragment dintr-o bară laterală cu astfel de butoane.
Pentru a „anima” butoanele, le dăm mai întâi volum folosind stiluri CSS. Și vom face acest lucru folosind proprietatea de gradient liniar, care a fost deja utilizată în proiectarea blocurilor de rotație, căutare și abonament.
Definim valorile gradientului liniar după cum urmează:
1. Nuanțele de culori vor fi setate de jos în sus, începând cu o culoare mai închisă în comparație cu culoarea principală a butonului. Pentru a determina ce culoare să folosim la începutul gradientului, folosim un instrument de editare grafică, în acest caz Photoshop.
Pentru a face acest lucru, cu documentul de aspect al designului deschis, trebuie să selectați „Color Picker”, plasați cursorul peste zona necesară a butonului, determinați culoarea principală și apoi utilizați instrumentele „Color Pickers” pentru a selecta o culoare mai închisă. de aceeași nuanță maro. În cazul nostru, să luăm culoarea cu valoarea „653939”. În mod clar, cum se poate face acest lucru este arătat în captura de ecran de mai jos.
2. Apoi, definiți poziția de oprire a gradientului unde culoarea inițială, mai închisă, va intra în cea principală. Poziția de oprire va fi plasată aproximativ la mijloc. În același timp, pentru a face culoarea mai saturată, să mișcăm puțin în sus poziția de oprire și să definim valoarea acesteia, să zicem, 70% din înălțime.
3. Iar ultimul lucru de făcut pentru a seta proprietățile gradientului este să definiți o culoare mai deschisă în comparație cu cea principală, care va colora butoanele de sus. Acest lucru se face în același mod ca atunci când se determină culoarea inițială a gradientului. În acest caz, valoarea acestei culori va fi luată ca „b88686”.
3. Pe baza datelor primite, vom adăuga un gradient liniar proprietăților CSS formate anterior ale butoanelor.
intrare: {
înălţime :30px;
margine-fond :10px;
hotar-raza :5px;
fundal :#a76d6d;
aliniere text :centru;
grosimea fontului :îndrăzneţ;
culoare :#fff;
pluti :dreapta;
imagine de fundal
Se poate observa că la determinarea culorilor extreme, pozițiile de oprire nu sunt specificate aici, deoarece nu este necesar să se facă acest lucru cu valori de 0% și 100%.
Acum, să reîmprospătăm browserul și să ne uităm la rezultat.
După cum puteți vedea, butoanele au căpătat o ușoară umflătură. Acum puteți începe să le „reînvie”.
Efectuarea butoanelor interactive
Pentru a lucra pe deplin cu butoanele, le vom face interactive, care vor reflecta vizual cele trei stări principale ale acestora, pasiv (butonul este în starea inițială), activ (cursorul este plasat peste buton) și apăsat (mausul). butonul este apăsat și menținut în timp ce cursorul se deplasează).
Și vom face acest lucru folosind o combinație de proprietăți de umbră și chenar. Esența acestei tehnici este că prin schimbarea culorii umbrei și a marginilor din diferite părți, puteți obține o imitație a unei schimbări a stării butoanelor.
Mai întâi, să facem asta pentru starea pasivă și să încercăm să o desenăm astfel încât butonul să se ridice deasupra suprafeței.
Selectăm culorile marginilor și umbrelor în același mod ca în cazurile anterioare.
Codul CSS după adăugările corespunzătoare va lua forma.
intrare: {
înălţime :30px;
margine-fond :10px;
hotar-raza :5px;
fundal :#a76d6d;
aliniere text :centru;
grosimea fontului :îndrăzneţ;
culoare :#fff;
pluti :dreapta;
imagine de fundal :linear-gradient(în sus, #653939, #a76d6d 50%, #b88686);
umbra cutie :2px 2px 4px 0px #422a2a;
lățimea graniței :2px;
stilul de chenar :solid;
culoarea chenarului :#ddbebe #241616 #241616 #ddbebe;
Aici puteți observa că marginile sunt reprezentate de o combinație de proprietăți care determină grosimea (border-width cu valoarea 2px), un stil ( border-style ) cu o valoare care specifică un chenar solid și culori ( border-color ) pe fiecare dintre cele patru laturi.
Să reîmprospătăm browserul și să vedem cum vor arăta butoanele acum.
După cum puteți vedea, butoanele în această stare par să fi crescut.
Acum să încercăm să dăm butoanelor aspectul unei stări apăsate. Pentru a face acest lucru, eliminați umbra și schimbați culoarea marginilor. În acest caz, vom folosi un selector special de pseudo-clasă :hover corespunzător stării active.
Codul CSS pentru starea activă a butoanelor va lua următoarea formă.
intrare: planare {
umbra cutie :nici unul;
culoarea chenarului :#a76d6d #a76d6d #a76d6d #a76d6d;
În acest caz, vom schimba din nou culoarea chenarelor și vom adăuga o umbră, doar că în acest caz va fi internă și fără deplasare. Selectorul de pseudo-clasă se va schimba și în :active , corespunzătoare stării apăsate.
Codul CSS pentru starea apăsată ar fi următorul.
intrare: activ {
umbra cutie :0px 0px 7px 2px #422a2a inserție;
culoarea chenarului :#777 #fff #fff #777;
Butonul „Căutare” este afișat mai jos pentru comparație, unde puteți vedea clar cum își schimbă aspectul în funcție de stare.
Fig.8 Stare pasivă
Aici am terminat aspectul paginii principale și am adus-o la un aspect care se potrivește cu aspectul de design. Și acum trebuie, ca și înainte, în fiecare etapă, să verificăm compatibilitatea încrucișată în diferite browsere. Dar înainte de asta, să verificăm pagina pentru validare, deoarece starea codului poate afecta și coerența încrucișată într-o oarecare măsură. Prin urmare, acum vom efectua această operație foarte necesară.
Este nevoie de validare?
Validarea este verificarea codului în raport cu standardele stabilite. Există validare pentru corectitudinea codului HTML și CSS. Este clar că într-un caz se verifică codul HTML, în celălalt, codul CSS.
Probabil, mulți vor găsi ciudat să întrebe dacă este necesară validarea. Dar dacă te uiți pe Internet, poți vedea că sunt mulți care cred că codul valid este opțional, că aceasta este o pierdere de timp în plus, deoarece browserele funcționează bine chiar și în prezența a tot felul de erori.
Desigur, în multe cazuri, site-urile pot funcționa bine pe cod invalid, dar compatibilitatea încrucișată în astfel de cazuri nu poate fi garantată. La urma urmei, există standarde pentru limbajele de programare în sine, dar pentru faptul că browserele corectează erorile în același mod, nu există, desigur, un astfel de standard și nu poate fi. Și, prin urmare, diferite browsere pot rezolva erori în moduri diferite, ceea ce poate duce la afișarea diferită a paginii.
Și, în general, nu este clar de ce unii oameni au o atitudine atât de figuroasă față de munca lor, conform principiului „și așa va face”. Prin urmare, dacă cineva crede că nu trebuie să verifice codul pentru valabilitate, atunci acesta este dreptul său și este puțin probabil să se poată convinge de altfel și nu este nevoie.
Și acum să trecem la verificarea directă a validității codurilor, mai întâi HTML, apoi CSS.
Cum se validează codul HTML
În esență, verificarea de validare a codului în sine este destul de simplă, așa cum putem vedea acum. Dar, aici eliminarea erorilor necesită de obicei un anumit timp. Desigur, dacă codul constă din mai multe linii, atunci nu pot apărea dificultăți aici. Dar, dacă există sute și mii, atunci s-ar putea să trebuiască să munciți din greu aici, totul depinde de cât de bine a fost compilat codul. Prin urmare, este mai bine să faceți acest lucru mai des cu o verificare comună a conformității încrucișate.
Aici vom lua în considerare cea mai simplă și cea mai comună opțiune pentru verificarea validității - aceasta este utilizarea site-ului „W3C Consortium”, care, cu sprijinul dezvoltatorilor de browser, dezvoltă specificații pentru codurile paginilor web.
Pentru a valida codul HTML, trebuie doar să urmați linkul https://validator.w3.org/ , care va deschide o pagină cu un câmp pentru introducerea adresei paginii de validat.
captura de ecran 51
După ce facem clic pe butonul „Verifică”, obținem rezultatul verificării.
În acest caz, codul HTML este valid, dar există o recomandare de a folosi atributul lang cu valoarea "ru" pentru că pagina folosește limba rusă.
Atributul lang are scopul de a face browserele să afișeze anumite caractere, cum ar fi ghilimele, corect, în funcție de limba utilizată. Prin urmare, ne va fi util să îl includem în codul HTML. Și vom face acest lucru în eticheta html, astfel încât acest atribut să poată acționa asupra întregului document.
Cum se face această adăugare este prezentat în tabelul următor.
"ru" >
. . .
Și acum, dacă facem o a doua verificare, putem vedea că codul a devenit complet valabil fără niciun comentariu.
În acest fel, am verificat fișierul postat pe Internet. Însă când pagina nu a fost încă postată pe web, puteți verifica valabilitatea acesteia în alte moduri, fie prin încărcarea unui fișier folosind butonul de răsfoire, fie folosind formularul pentru a copia direct codul HTML.
Captura de ecran arată ultima opțiune, când codul paginii web este copiat direct în formular pentru verificare.
După efectuarea verificării, obținem un rezultat similar, iar codul care este verificat va fi afișat și aici. In cazul in care se gasesc erori, acestea vor fi evidentiate pentru a simplifica cautarea, ceea ce simplifica foarte mult munca de eliminare a acestora.
Cum se validează codul CSS
Am acoperit validarea codului HTML. Codul CSS este verificat exact în aceeași ordine. Numai în acest caz, trebuie să utilizați o altă pagină de validare, care pentru acest caz se află la http://jigsaw.w3.org/css-validator/ .
Să-l deschidem și, la fel ca și data anterioară, introducem adresa paginii de verificat, după care apăsăm butonul „Verifică”.
Rezultatul acestei verificări este afișat în captură de ecran.
După cum puteți vedea, codul nostru CSS respectă pe deplin specificația fără erori, ceea ce este un rezultat bun.
Ordinea altor metode de validare pentru acest caz coincide complet cu verificări similare pentru codul HTML. Prin urmare, nu ne vom repeta aici și vom încheia revizuirea verificărilor de validare.
După aceea, vom verifica pagina noastră pentru imagini încrucișate și ne vom asigura că este afișată la fel pe toate browserele, aceasta va completa aspectul paginii principale a site-ului.
Și, o vom face imediat după vacanța de Anul Nou.
Și în încheiere, îi putem felicita pe toți pentru noul An care vine! Și urează în Noul An sănătate, dragoste, bucurie, prosperitate și, bineînțeles, mult succes în crearea propriului site web pentru posibilitatea de a lucra cu succes pe Internet!
Fișierele sursă ale site-ului
Fișierele sursă ale site-ului cu actualizările care s-au făcut în acest articol pot fi descărcate din atașat materiale suplimentare.
Într-unul dintre articolele mele anterioare, am vorbit despre . Cu toate acestea, nu toată lumea știe că în plus validator pentru HTML, există validator și pentru CSS.
Sens Valabilitate CSS la fel ca HTML: aproape irelevant. Similar cu HTML daca scrii CSS nevalid, atunci nu vor fi probleme (cu excepția cazului în care, desigur, există erori grosolane), totuși, un cod valid este întotdeauna bun. Un astfel de cod este clar și structurat, este ușor de înțeles, ceea ce este și important, mai ales atunci când este corectat, și mai ales de către alte persoane. De asemenea Valabilitate CSS accelerează procesul de procesare și, în consecință, viteza de încărcare a paginii.
Și, în sfârșit, având în vedere respectarea în general rară a valabilității, un cod valid impune întotdeauna respect, ceea ce este important dacă faci acest lucru profesional.
La verifica validitatea CSS, trebuie să folosești asta Serviciu W3: http://jigsaw.w3.org/css-validator/ .
Voi spune imediat că, spre deosebire de HTML, face CSS valid mult mai ușor, deoarece există în mare parte numai erori grosolane, cu excepția cărora este cel mai bine evitată cu totul.
Lasă-mă să rezum. Valabilizarea codului nu este deloc necesară, dar vă recomand cu tărie să faceți acest lucru, deoarece un astfel de site va fi mai ușor de indexat de motoarele de căutare ( Valabilitate HTML), lucrează mai rapid, mai ușor de editat și câștigă respect de la profesioniști.
În ultimul timp am primit câteva întrebări de la utilizatori cu privire la validitatea temelor mele și la validare în general. In aceasta postare vreau sa le raspund.
Ce este valabilitatea?
Se crede că validitatea codului este o caracteristică unică, universală, a oricărui cod.
De fapt, validitatea este conformitatea codului html al documentului cu un anumit set de reguli specificate în doctype sau implicite în HTML5.
Adică, validitatea este un concept relativ, deoarece regulile sunt diferite, precum și cerințele lor.
Pentru a fi mai clar, voi da un exemplu pe care l-am găsit pe site-ul css-live.ru:
Diferite SNiP (coduri și reglementări de construcții) se aplică pentru construcția clădirilor rezidențiale și a centralelor nucleare, astfel încât un document care este valabil conform unui set de reguli poate să nu fie valabil în conformitate cu altul (o centrală nucleară construită conform standardelor de o clădire de locuit ar fi bine!).
Doctype indică de obicei documentul pe baza căruia este planificată validarea html, dar poate fi ales din motive pragmatice pentru a selecta modul optim al browserelor.
Este posibil ca XHTML5 să nu aibă deloc un doctype, dar să fie valid.
Validare - ce este?
În termeni simpli, validarea este procesul de verificare a codului și de a-l conforma cu tipul de document ales (DTD).
Cum se verifică valabilitatea?
Valabilitatea codului HTML este verificată de un instrument numit validator.
Cel mai faimos validator w3c este https://www.w3.org.
Validatorul w3c efectuează mai multe verificări de cod.
Cele principale:
- Verificați erorile de sintaxă:
Exemplu de pe habrahabr.ru/post/101985 :este sintaxa corectă, chiar dacă este o etichetă HTML nevalidă
Deci verificarea sintaxei este minim utilă pentru scrierea unui cod HTML bun. - Verificare imbricare a etichetelor:
Într-un document HTML, etichetele trebuie să fie închise în ordinea inversă deschiderii lor. Această verificare detectează etichetele neînchise sau închise incorect. - Validare HTML conform DTD:
Verificarea modului în care codul corespunde DTD - Document Type Definition (doctype) specificat. Include verificarea numelor de etichete, a atributelor și a etichetelor de „încorporare” (etichete de un tip în interiorul etichetelor de alt tip). - Verificarea elementelor străine:
Va găsi tot ce este în cod, dar nu în doctype.
De exemplu, etichete și atribute personalizate.
Pentru a verifica validitatea codului CSS, există un validator CSS - http://jigsaw.w3.org/css-validator.
Valabilitatea codului- acesta este rezultatul unei verificări mecanice pentru absența OB formală, conform setului de reguli specificat.
Trebuie să înțelegeți că validarea este un instrument, nu o valoare în sine.
Designerii de layout cu experiență știu de obicei unde este posibil să se încalce regulile de validare HTML sau CSS și unde nu și ce amenință (sau nu amenință) cutare sau cutare eroare de validare.
Exemple de cazuri în care un site nu face un cod valid:
- mai convenabil și mai rapid - atribute personalizate pentru Javascript/AJAX sau
- Optimizat SEO - marcaj ARIA.
Este clar că nu are niciun rost în valabilitate de dragul validității.
De regulă, designerii de layout cu experiență respectă următoarele reguli:
- Nu ar trebui să existe erori grave în cod.
- Cele minore pot fi tolerate, dar numai din motive justificate.
În ceea ce privește erorile de validare html/CSS:
Erorile de validare (VF) pot fi împărțite în grupuri:
- OV în fișierele șablon:
Nu sunt greu de găsit și de reparat.
Dacă vreuna dintre micile erori ajută site-ul să fie mai funcțional sau mai rapid, acestea pot fi părăsite. - OV în scripturi terță parte conectate pe site:
De exemplu, un widget Vkontakte, un script Twitter sau fișiere video YouTube.
Nu există nicio modalitate de a le remedia, deoarece aceste fișiere și scripturi se află pe alte site-uri și nu avem acces la ele. - Reguli CSS pe care validatorul nu le înțelege:
Validatorul verifică dacă codul site-ului se potrivește cu o anumită versiune de HTML sau CSS.
Dacă ați folosit regulile CSS versiunea 3 în șablon și validatorul verifică versiunea 2.1, atunci va considera toate regulile CSS3 ca fiind erori, deși nu sunt. - OV, care involuntar trebuie lăsate pe site pentru a obține rezultatul dorit. De exemplu:
- etichete noindex. Nu sunt valabile, dar sunt foarte necesare și trebuie să suportăm.
- kaki. Pentru a obține afișarea corectă a site-ului în unele browsere, uneori trebuie să utilizați hack-uri - cod pe care doar un anumit browser îl înțelege.
- Erori de validare.
Adesea el nu vede nicio etichetă (de exemplu, cele de închidere) și raportează despre OB unde nu există.
Se pare că pe un site de lucru va exista aproape întotdeauna un fel de OV.
Mai mult, pot fi o mulțime.
De exemplu, paginile principale ale Google, Yandex și mail.ru conțin fiecare câteva zeci de erori.
Dar, ele nu sparg afișarea site-urilor în browsere și nu interferează cu munca lor.
Tot ce este scris mai sus se aplică subiectelor mele.
Subiectele complexe includ:
- Funcții WordPress (ex. the_category()), care dau un cod nevalid.
- Ieșire video de pe site-uri de găzduire video, de exemplu, de pe YouTube și există o mulțime de OB în codul YouTube, pe care nici tu, nici eu nu le putem influența.
- Butoanele rețelelor sociale care sunt conectate folosind scripturile acestor rețele și care conțin OB.
- Regulile CSS3 și HTML5 considerate erori de către validatorii de versiuni mai vechi.
În același timp, validatorii versiunilor CSS3 și HTML5 consideră vechile reguli drept erori :). - Uneori, pentru a obține afișarea corectă în browserul Internet Explorer sau în versiunile mai vechi ale altor browsere, trebuie să utilizați așa-numitele hack-uri - cod pe care doar un anumit browser îl înțelege pentru a scrie regulile de afișare a site-ului pentru acest browser anume.
Drept urmare, puteți obține un cod complet valid numai atunci când prezentați subiecte foarte simple, de exemplu. cele care conțin cantitatea minimă de funcționalitate.
După ce termin aspectul oricăruia dintre subiectele mele, îl verific întotdeauna cu un validator și repar toate OB care pot fi remediate fără a pierde performanța temei.
Adică, dacă există o alegere între o funcționalitate de lucru și o valabilitate, eu aleg funcționalitatea.
Dacă vă alcătuiți propriile teme, vă sfătuiesc să faceți același lucru.
Din punctul meu de vedere (și, de asemenea, din punctul de vedere al majorității designerilor de layout), atitudinea față de validarea html/CSS ca adevăr suprem este greșită. Este obligatoriu să corectați numai acele OB care:
- împiedicați browserul să afișeze corect pagina (etichete neînchise și imbricate incorect).
- încetinirea încărcării paginii (scripturi conectate incorect).
- poate fi remediat fără a întrerupe funcționalitatea temei.
Sper că ți-am răspuns la toate întrebările despre validare.
Am menționat deja ce există în ceea ce privește validitatea codului html. Acest lucru ar trebui făcut cel puțin o dată din când în când, pentru că valabilitate atât html cât și css afectează puternic site-ul, adică afișarea identică a resursei dvs. în browsere diferite (un articol general despre browserele web populare și cele mai bune, care sper să vă ajute să faceți o alegere în favoarea unuia dintre ele).
În plus, am menționat deja că, în ciuda faptului că motoarele de căutare în această etapă nu țin cont de erorile de cod CSS și HTML atunci când clasifică site-urile, pe viitor totul se poate schimba și poți ajunge la o situație în care un proiect care este frumos conceput, făcut pentru oameni, poate pierde o parte din audiența potențială din cauza faptului că nu a trecut de validare. Ei bine, toate sunt versuri, aici fiecare decide singur cât de important este totul.
Cred că acum sunteți familiarizat cu părerea mea, deoarece scriu acest articol, ceea ce înseamnă că îl consider demn de atenție, împreună cu, de exemplu, o parte atât de importantă a optimizării seo precum închiderea link-urilor și fragmentelor de text din indexarea Google și Yandex sau utilizare competentă.
Bine, după cum se spune, mai la obiect. În primul rând, puțin despre CSS. css( Foi de stil în cascadă- Cascading Style Sheets) este un limbaj de stil care definește afișarea documentelor HTML. Adică, dacă HTML descrie conținutul paginii, atunci CSS formatează acest conținut, cu alte cuvinte, îi oferă un aspect complet. Apropo, pentru a crește viteza site-ului, va fi util să glisați fișierele cu tema.
Validator W3C: verificarea validității codului CSS
Acum să trecem la cum să verificăm validitatea unui document (paginile site-ului nostru web sau blogul WordPress). La fel ca și în cazul verificării codului HTML, vom folosi unul dintre . Să mergem la serviciul de validare CSS:
După cum puteți vedea, există trei moduri de a valida CSS cu validatorul W3C. Apropo, rețineți că în partea de jos a paginii de validare există o notă care indică necesitatea verificării codului HTML pentru valabilitate. Doar ambele coduri corecte garantează corectitudinea întregului document. Introduceți adresa URL pentru a verifica. De exemplu, să verificăm pagina principală a blogului meu:
Rezultatul verificării validatorului W3C pentru erori de cod CSS nu poate fi numit dezamăgitor, deoarece au fost găsite doar 2 erori. Desigur, aceste erori sunt diferite, în fiecare caz ele provoacă consecințe diferite. Să vedem ce putem face pentru a le elimina. Totul este convenabil aici, deoarece validatorul W3C oferă nu numai un link către un document care conține cod incorect, ci și numărul liniei pe care se află. Apropo, mai jos, după lista de avertismente și erori, va fi afișată o variantă a codului CSS corect, pe care o puteți folosi:
Există un link către document pe pagina de rezultat al validării CSS css.ie, care se află în folderul cu teme. A fost creat pentru a realiza un blog între browsere (aceeași afișare în browserele populare). Mai mult, este pentru diverse modificări ale Internet Explorer, care păcătuiește cu diverse „jambs” în ceea ce privește distorsionarea aspectului site-ului, în special versiunile sale mai vechi (IE9 este mult mai bun în acest sens). Compatibilitatea între browsere este foarte importantă pentru progresul proiectului, cu toate acestea, la inspecție, s-a dovedit că acest document conține proprietăți care nu respectă standardele W3C.
Așadar, obținem liniile 3 și 12, care conțin erori. Pentru a le remedia, eliminați eroarea de analiză html (filtru: expresie(document.execCommand("BackgroundImageCache", false, adevărat));)și proprietate .zoom. Acum nu voi intra în complexitatea programării și aspectului site-urilor, voi observa doar că proprietatea expresie ajută la eliminarea efectului enervant de pâlpâire a imaginii de fundal care apare în IE6.
Adică, în browser, a cărui utilizare este în zadar, iar în versiunile ulterioare ale acestui „glitch” nu se mai observă. Trebuie să spun imediat că voi folosi în continuare acest „leac” pentru ceva timp, până când numărul de potențiali vizitatori care folosesc IE6 va atinge un nivel minim. Cu toate acestea, pentru claritate, pentru a vă arăta cum va reacționa validatorul W3C la acest lucru, îl voi elimina.
Proprietatea.zoom, care stabilește factorul de scalare al unui element, nu face parte din standardul internațional W3C și este acceptată de versiuni foarte vechi ale browserelor Opera, Safari, inclusiv IE8(Versiunea 9 este aproape complet „respectătoare a legii”, așa că în curând, sper, webmasterii vor fi eliberați de nevoia de a folosi hack-uri, adică coduri suplimentare pentru a obține compatibilitate maximă între browsere). Acum să ne uităm la documentul care conține elemente nevalide și să-l corectăm:
Acest document se află în folderul meu cu tema Cloudy, șterg elementele de mai sus care nu au trecut verificarea de validare. În plus, în rezultatele verificării validității, pe lângă erori, au existat și o mulțime de așa-numite avertismente:
De exemplu, voi încerca să arăt clar cum să scap de cele mai comune dintre ele și, pe parcurs, să le explic semnificațiile. După cum puteți vedea, validatorul W3C avertizează despre prezența acelorași culori pentru text și fundal. Trebuie să spun că acest lucru este în general indezirabil în orice caz, deoarece motoarele de căutare pot considera această stare de fapt ca ascunderea informațiilor, care este plină de sancțiuni grave.
Desigur, nu este întotdeauna cazul, dar acest pericol nu trebuie subestimat. Deci, să trecem la corectarea situației. Cel mai bine este să copiați fișierul stil.css tema dvs. în HTML și PHP, editorul notepad++ despre care am vorbit, care face ușoară căutarea după numărul de rând:
Acum știm unde se află aceste linii în fișierul dvs. temă, corectăm culoarea schimbând ușor nuanța. În sistemul de culori hexazecimal, #ffffff corespunde albului. O schimbam astfel: in locul ultimului f intram d, astfel obtinem o nuanta de alb putin diferita; acum modificările nu vor fi observate de utilizatori, dar motoarele de căutare vor vedea diferența:
Acesta este modul în care puteți corecta părți invalide ale codului CSS al paginilor dvs. de resurse. La fel regăsim și restul tronsoanelor marcate cu avertismente și care trebuie corectate.În ceea ce privește atenționările privind linia 483 (apropo, au fost destul de multe, vreo 10). La verificare, am descoperit că cauza lor este pluginul WP Page Numbers, care oferă paginare.
Acest lucru m-a determinat să dezactivez acest plugin și a fost motivul pentru care l-am înlocuit în cele din urmă cu injectarea de cod, ceea ce a fost un pas către reducerea încărcării serverului. De îndată ce am făcut acest lucru, avertismentele privind încălcarea validității codului de către acest plugin au dispărut imediat după reverificare. După gesturile de mai sus, verificăm din nou validitatea CSS folosind validatorul W3C:
Acum știi cum să verifici validitatea unui document CSS (pagina web a unui site web sau blog) folosind validatorul W3C. În concluzie, aș dori să remarc că fiecare decide singur gradul și frecvența verificării validității codului CSS, totul depinde de circumstanțe, dar totuși, din când în când acest lucru trebuie făcut, în profunda mea convingere. Abonați-vă la actualizările blogului pentru a primi materiale noi prin e-mail. Prin urmare, permiteți-mi să-mi iau concediu, sper să ne despărțim pentru o vreme.
Validarea se referă la verificarea codului CSS cu specificația CSS2.1 sau CSS3. În consecință, un cod corect care nu conține erori este numit valid, iar unul care nu satisface specificația este numit invalid. Cel mai convenabil este să verificați codul prin intermediul site-ului http://jigsaw.w3.org/css-validator/, folosind acest serviciu puteți specifica adresa documentului, încărcați un fișier sau verificați textul tastat. Un mare plus al serviciului este suportul pentru limbile rusă și ucraineană.
Verificați URI
Această filă vă permite să specificați adresa unei pagini găzduite pe Internet. Protocolul http:// poate fi omis, acesta va fi adăugat automat (Fig. 1.42).
Orez. 1.42. Verificare document prin adresa
După ce ați introdus adresa, faceți clic pe butonul „Verifică” și va apărea una dintre cele două inscripții: „Felicitări! Nu s-au găsit erori” la succes sau „Din păcate, am găsit următoarele erori” la codul nevalid. Mesajele de eroare sau de avertizare conțin un număr de linie, un selector și o descriere a erorii.
Verificați fișierul încărcat
Această filă vă permite să încărcați un fișier HTML sau CSS și să verificați dacă există erori (Figura 1.43).
Orez. 1.43. Verificarea unui fișier când îl încărcați
Serviciul recunoaște automat tipul de fișier și, dacă este specificat un document HTML, extrage stilul din acesta pentru validare.
Verificați textul tastat
Ultima filă este pentru introducerea directă a codului HTML sau CSS și doar stilul va fi verificat (Fig. 1.44).
Orez. 1.44. Verificarea codului introdus
Această opțiune pare a fi cea mai convenabilă pentru a efectua diverse experimente pe cod sau pentru a verifica rapid fragmente mici.
Selectarea versiunii CSS
CSS3 are o mulțime de proprietăți de stil noi în comparație cu versiunea anterioară, așa că revizuirea codului ar trebui să fie specifică versiunii. În mod implicit, serviciul specifică CSS2.1, așa că dacă doriți să verificați codul cu CSS3, trebuie să îl specificați în mod explicit. Pentru a face acest lucru, faceți clic pe textul „Funcții suplimentare” și în blocul care se deschide, din lista „Profil”, selectați CSS3
Orez. 1.45. Specificarea versiunii CSS de verificat
Identificatori și clase
Periodic, se ridică o dispută cu privire la oportunitatea utilizării identificatorilor în layout. Argumentul principal este că identificatorii sunt pentru accesarea și manipularea elementelor paginii web folosind scripturi și numai clasele ar trebui folosite pentru a schimba stilurile elementelor. În realitate, nu contează ce stiluri sunt folosite, dar ar trebui să fii conștient de unele caracteristici ale identificatorilor și claselor, precum și de capcanele la care se pot aștepta dezvoltatorii.
Pentru început, enumerăm trăsăturile caracteristice ale acestor selectoare.
Identificatori
În codul documentului, fiecare identificator este unic și trebuie inclus o singură dată.
Numele identificatorului face distincție între majuscule și minuscule.
Prin metoda getElementById, puteți accesa un element prin ID-ul său și puteți modifica proprietățile elementului.
Stilul pentru un identificator are prioritate față de clase.
Clasele pot fi folosite de mai multe ori în cod.
Numele claselor țin cont de majuscule și minuscule.
Clasele pot fi combinate între ele prin adăugarea mai multor clase la o etichetă.
Identificatori
Dacă doriți să schimbați stilul unor elemente din mers sau să afișați ceva text în interiorul lor în timp ce pagina web rulează, acest lucru este mult mai ușor cu identificatori. Elementul este accesat prin metoda getElementById, al cărei parametru este numele identificatorului. Exemplul 1-70 adaugă un identificator numit userName la un câmp de text al formularului, apoi folosește o funcție JavaScript pentru a verifica dacă utilizatorul a introdus ceva text în câmp. Dacă nu există text, dar se face clic pe butonul Trimitere, în interiorul etichetei este afișat un mesaj cu ID-ul msg . Dacă totul este corect, datele formularului sunt trimise la adresa specificată de atributul acțiune.
Exemplul 1.70. Validarea datelor formularului XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
