Validatorul indică, de asemenea, unde este exact eroarea:

În acest fel, puteți găsi și remedia erorile de cod HTML. Dar site-urile constau nu numai din cod de marcare, ci și CSS, așa că verificăm și foile de stil în cascadă ale resursei web.

Se verifică valabilitatea codului CSS

De asemenea, puteți verifica validitatea codului CSS în validatorul W3c. Puteți face acest lucru folosind acest link. Principiul de funcționare este același: specificați adresa URL a site-ului sau selectați un fișier pe computer și faceți clic pe butonul „Verifică”.

Spre deosebire de același validator HTML, validatorul CSS este în rusă.

Erori și avertismente CSS

La verificarea validității codului CSS, serviciul produce un număr mare de erori și avertismente. Am primit 23 de erori și până la 281 de avertismente. La prima vedere, acest lucru poate părea mult și poate fi chiar înfricoșător, dar majoritatea acestor erori și avertismente sunt afișate doar pentru că serviciul nu cunoaște anumite proprietăți care se aplică diferitelor browsere.

În cazul meu, majoritatea celor 281 de avertismente sunt proprietăți CSS pentru afișarea normală în diferite browsere:

Serviciul poziționează astfel de etichete ca „extensie de furnizor necunoscută”. Prin urmare, dacă, atunci când vă verificați fișierele CSS, vedeți un număr mare de astfel de erori, atunci nu vă alarmați. Totul este bine.

Nu voi enumera cele mai frecvente erori și modalități de a le elimina, deoarece soluțiile fiecăruia pot fi diferite și trebuie să vă uitați la codul HTML în sine pentru a înțelege ce se întâmplă.

Dacă nu puteți rezolva o eroare, atunci împărtășiți problema în comentariile la lecție, poate vom găsi o soluție împreună.

Sper că lecțiile care au fost publicate în această săptămână v-au fost utile și au ajutat la rezolvarea anumitor probleme.

Ei bine acum, la revedere!

În ultimul timp am primit câteva întrebări de la utilizatori cu privire la validitatea temelor mele și la validare în general. În această postare vreau să le răspund.

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, la fel ș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 de browser.
Este posibil ca XHTML5 să nu aibă deloc un doctype, dar să fie totuși valid.

Validare - ce este?

Cu cuvinte simple, 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:

1. Verificarea erorilor 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.
2. Se verifică imbricarea etichetelor:
   Într-un document HTML, etichetele trebuie să fie închise în ordinea inversă deschiderii lor. Această verificare identifică etichetele neînchise sau închise incorect.
3. Validare HTML conform DTD:
   Verificarea cât de bine se potrivește codul cu DTD specificat - Definiție tip document (doctype). Aceasta include verificarea numelor de etichete, a atributelor și a alinierii etichetelor (etichete de un tip în interiorul etichetelor de alt tip).
4. Verificarea elementelor străine:
   Va detecta orice se află î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 agenților formali, conform setului de reguli specificat.
Trebuie să înțelegeți că validarea este un instrument, nu o valoare în sine.
Codificatorii cu experiență știu de obicei unde pot fi încălcate regulile de validare HTML sau CSS și unde nu și care sunt consecințele (sau nu) ale unei erori de validare.
Exemple de cazuri în care un site web produce cod nevalid:

• mai convenabil și mai rapid - atribute personalizate pentru Javascrip/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 acceptabilitatea erorilor de validare html/CSS:

Erorile de validare (VE) pot fi împărțite în grupuri:

• OB în fișiere șablon:
  Nu sunt greu de găsit și reparat.
  Dacă unele dintre erorile minore ajută site-ul să fie mai funcțional sau mai rapid, le puteți părăsi.
• OB în scripturi terță parte conectate la site:
  De exemplu, un widget VKontakte, un script Twitter sau fișiere video de pe 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, iar validatorul verifică conformitatea cu versiunea 2.1, atunci va considera toate regulile CSS3 ca fiind erori, deși nu sunt.
• OB-uri care inevitabil 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ă suporti.
  • kaki. Pentru ca site-ul să se afișeze corect în unele browsere, uneori trebuie să utilizați hack-uri - cod pe care doar un anumit browser îl înțelege.
• Erori ale validatorului însuși.
  Adesea nu vede niște etichete (de exemplu, cele de închidere) și raportează despre OB unde nu există.

Se pare că un site de lucru va avea 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 le împiedică să funcționeze.
Tot ce este scris mai sus se aplică subiectelor mele.

Subiectele complexe includ:

• Funcții WordPress (de ex the_category()), care dau cod nevalid.
• Ieșirea videoclipurilor de pe site-uri de găzduire video, de exemplu, de pe YouTube și există o mulțime de OV-uri în codul YouTube pe care nici tu, nici eu nu le putem influența.
• Butoane pentru rețelele sociale, care sunt conectate folosind scripturi ale acestor rețele și care conțin OV.
• Reguli CSS3 și HTML5 care sunt considerate erori de validatorii vechi.
  În același timp, validatorii versiunilor CSS3 și HTML5 consideră că vechile reguli sunt erori :).
• Uneori, pentru a obține afișarea corectă în browserul Internet Explorer sau 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 reguli de afișare a unui site special pentru acest browser.

Drept urmare, puteți obține cod complet valid numai atunci când codați teme foarte simple, de exemplu. cele care conțin o cantitate minimă de funcționalitate.
După ce termin aspectul oricăreia dintre temele mele, o verific întotdeauna cu un validator și corectez toate erorile care pot fi corectate fără a pierde funcționalitatea temei.
Adică, dacă există o alegere între funcționalitatea de lucru și valabilitate, eu aleg funcționalitatea.
Dacă vă creaț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), să tratezi validarea html/CSS ca pe adevărul suprem este greșit. Este obligatoriu să corectați numai acei agenți 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 perturba funcționalitatea temei.
Sper că 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 măcar din când în când, pentru că valabilitate atât html cât și css afectează foarte mult 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, vă va ajuta să faceți o alegere în favoarea unuia dintre ele).

În plus, am menționat deja, în ciuda faptului că motoarele de căutare în această etapă nu țin cont de erorile din codul CSS și HTML atunci când clasifică site-urile, în viitor totul se poate schimba și poți ajunge la o situație în care un proiect frumos conceput realizat pentru că oamenii pot pierde o parte din audiența potențială din cauza nevalidării. Ei bine, acestea sunt toate versurile, aici fiecare decide singur cât de important este totul.

Cred că acum sunteți familiarizați 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 blocarea link-urilor și fragmentelor de text de la indexare de către Google și Yandex. sau utilizare competentă.

Bine, după cum se spune, mai aproape de subiect. Mai întâi 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ă efectuați fișierele tematice.

Validator W3C: verificarea validității codului CSS

Acum să trecem la cum să verificăm validitatea unui document (o pagină de pe site-ul nostru web sau un blog WordPress). La fel ca și în cazul verificării codului HTML, vom folosi unul dintre instrumente. Să trecem la serviciul de validare CSS:

După cum puteți vedea, există trei opțiuni pentru verificarea validității CSS folosind 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. Pentru a verifica, introduceți adresa URL. De exemplu, să verificăm pagina principală a blogului meu:

Rezultatul verificării validatorului W3C privind erorile 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 specific 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 documentul care conține codul incorect, ci și numărul liniei pe care se află. Apropo, mai jos, după lista de avertismente și erori, va fi afișată o versiune a codului CSS corect, pe care o puteți folosi:

Pagina cu rezultatul verificării validității CSS conține un link către document css.ie, care se află în folderul cu teme. A fost creat pentru a obține compatibilitatea între browsere a blogului (același afișaj în browserele populare). Mai mult, special pentru diverse modificări ale Internet Explorer, care suferă de 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, dar la examinare, 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, ar trebui să 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-ului web, voi observa doar că proprietatea expresie ajută la eliminarea efectului de pâlpâire enervant al imaginilor de fundal care apare în IE6.

Adică, într-un browser a cărui utilizare încetează, iar în versiunile ulterioare acest „glitch” nu mai este observat. Voi spune imediat că voi continua să folosesc această „leac” pentru ceva timp, până când numărul de potențiali vizitatori care folosesc IE6 atinge un nivel minim. Cu toate acestea, din motive de claritate, pentru a vă arăta cum va răspunde validatorul W3C la acest lucru, îl voi elimina.

Proprietatea .zoom, care stabilește factorul de zoom 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 care le permit să atingă compatibilitatea 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, elimin elementele de mai sus care nu au trecut verificarea validității. În plus, în rezultatele verificării validității, pe lângă erori, au existat și o mulțime de așa-numite avertismente:

Ca exemplu, voi încerca să arăt clar cum să scap de cele mai comune dintre ele și, în același timp, să le explic semnificațiile. După cum puteți vedea, validatorul W3C avertizează despre prezența acelorași culori pentru text și fundal. Trebuie spus că acest lucru este, în general, de nedorit î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, acest lucru nu se întâmplă întotdeauna în acest fel, dar acest pericol nu poate fi 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 v-am vorbit și care face mai ușoară căutarea după numărul de rând:

Acum știm unde se află aceste linii în fișierul dvs. temă, ajustăm culoarea schimbând ușor nuanța. În sistemul de culori hexazecimal, #ffffff reprezintă culoarea albă. O schimbam astfel: in locul ultimului f intram d, obtinand astfel o nuanta de alb putin diferita; Acum modificările nu vor fi vizibile pentru utilizatori, dar motoarele de căutare vor vedea diferența:

Aproximativ acesta este modul în care puteți corecta părți invalide ale codului CSS din paginile dvs. de resurse. La fel regăsim zonele rămase marcate cu avertismente și care trebuie corectate În ceea ce privește atenționările privind linia 483 (apropo, au fost foarte multe, vreo 10). La verificare, am descoperit că cauza a fost pluginul WP Page Numbers, care oferă navigare prin paginare.

Acest lucru m-a determinat să dezactivez pluginul ș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 pe server. Imediat 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ă pașii descriși 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 sfârșit, 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ă nu ne despărțim pentru mult timp.

Într-unul din articolele anterioare despre care am vorbit. 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. La fel cu HTML daca scrii CSS nevalid, atunci nu vor fi probleme (cu excepția cazului în care, desigur, există erori grave), cu toate acestea, codul 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 la corectarea lui, și mai ales de către alte persoane. Asemenea Valabilitate CSS accelerează procesul de procesare și, în consecință, viteza de încărcare a paginilor.

Și, în sfârșit, din cauza respectării în general rare a valabilității, codul 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 simplu, deoarece practic există doar gafe, cu excepția , care sunt cel mai bine evitate cu totul.

Lasă-mă să rezum. Nu este deloc necesar să faceți codul valid, 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 obții respect din partea profesioniștilor.

Validarea este procesul de verificare a codului CSS cu specificația CSS2.1 sau CSS3. În consecință, codul corect care nu conține erori se numește valid, iar codul care nu satisface specificația este numit invalid. Cel mai convenabil mod de a verifica codul este prin intermediul site-ului web http://jigsaw.w3.org/css-validator/ Folosind acest serviciu, puteți specifica adresa unui document, puteți încărca un fișier sau verifica textul introdus. Un mare avantaj al serviciului este suportul pentru limbile rusă și ucraineană.

Verificați URI

Această filă vă permite să specificați adresa unei pagini aflate pe Internet. Protocolul http:// nu trebuie scris; acesta va fi adăugat automat (Fig. 20.1).

Orez. 20.1. Verificarea documentului dupa 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” dacă a avut succes sau „Ne pare rău, am găsit următoarele erori” dacă codul este invalid. 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 20.2).

Orez. 20.2. Verificarea unui fișier când îl descă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 destinată introducerii directe a codului HTML sau CSS, în care se va verifica doar stilul (Fig. 20.3).

Orez. 20.3. Verificarea codului introdus

Această opțiune pare a fi cea mai convenabilă pentru efectuarea diferitelor experimente asupra codului sau verificarea rapidă a fragmentelor mici.

Selectarea versiunii CSS

CSS3 are multe proprietăți de stil noi în comparație cu versiunea anterioară, așa că ar trebui să vă revizuiți codul în funcție de versiune. În mod implicit, serviciul specifică CSS3, așa că dacă doriți să verificați codul cu CSS2.1, ar trebui să specificați acest lucru în mod explicit. Pentru a face acest lucru, faceți clic pe textul „Funcții suplimentare” și în blocul care se deschide, selectați CSS2.1 din lista „Profil” (Fig. 20.4).

Orez. 20.4. Specificarea versiunii CSS de verificat