Валидирането се отнася до проверка на CSS кода спрямо спецификацията CSS2.1 или CSS3. Съответно правилен код, който не съдържа грешки, се нарича валиден, а този, който не отговаря на спецификацията, се нарича невалиден. Най-удобният начин за проверка на кода е чрез сайта http://jigsaw.w3.org/css-validator/ , с помощта на тази услуга можете да посочите адреса на документа, да качите файл или да проверите въведения текст. Голям плюс на услугата е поддръжката на руски и украински език.

Проверете URI

Този раздел ви позволява да посочите адреса на страница, хоствана в Интернет. Протоколът http:// може да бъде пропуснат, той ще бъде добавен автоматично (фиг. 20.1).

Ориз. 20.1. Проверка на документи по адрес

След като въведете адреса, щракнете върху бутона „Провери“ и ще се появи един от двата надписа: „Поздравления! Няма открити грешки“, ако е успешно, или „За съжаление открихме следните грешки» за невалиден код. Съобщенията за грешка или предупреждение съдържат номер на ред, селектор и описание на грешката.

Проверете качения файл

Този раздел ви позволява да заредите HTML или CSS файл и да го проверите за грешки (Фигура 20.2).

Ориз. 20.2. Проверка на файл при качването му

Услугата автоматично разпознава типа на файла и, ако е зададен HTML документ, извлича стила от него за проверка.

Проверете въведения текст

Последният раздел е за директно въвеждане на HTML или CSS код и само стилът ще бъде валидиран (Фигура 20-3).

Ориз. 20.3. Проверка на въведения код

Тази опция изглежда най-удобна за провеждане на различни експерименти върху кода или бърза проверкамалки фрагменти.

Избор на CSS версия

CSS3 има много нови свойства за стил в сравнение с предишна версия, така че трябва да проверите кода, като вземете предвид версията. По подразбиране CSS3 е посочен в услугата, така че ако искате да проверите кода за съответствие с CSS2.1, трябва да посочите това изрично. За да направите това, щракнете върху текста Допълнителни функции"и в блока, който се отваря, от списъка "Профил" изберете CSS2.1 (фиг. 20.4).

Ориз. 20.4. Посочване на CSS версията за проверка

След създаването на сайта и попълването му с всичко необходимо, сайтът трябва да бъде проверен за грешки. За намиране на правописни грешки в html и css ще ви помогне W3 валидаторът - World Wide Web Consortium, което в превод: Консорциум на световната мрежа. Открива всички грешки и посочва къде се намират, както и предлага варианти за отстраняването им.

Защо да коригирате кода с W3C Валидатора

Всъщност няма много предимства от това и всички те са условни, но за съжаление всеки сайт трябва да има минимален брой грешки, в идеалния случай никакви. Какво бихте решили дали имате нужда от него, ето предимствата му:

• Скоростта на зареждане на страницата ще се увеличи, но малко, дори няма да се забележи.
• Сайтът ще се показва по същия начин във всеки браузър.
• Когато добавяте сайт към директорията, обърнете внимание на грамотността на писане на html и css.

Не много плюсове, но поправка html и css грешкиизползването на W3C валидатора си струва!

Как да коригирате грешки с Validator

Принципът на коригиране на грешки с валидатор не е сложен и всеки може да се справи! Следваме връзките към, ако е трудно да разберете английски, съветвам ви да използвате преводач или да използвате това, който ще покаже вида на грешките на руски език. Помислете за пример за корекция от валидатор:

1. Въведете пълното име на вашия сайт.


2. В списъка започваме да търсим къде и каква грешка и какво е необходимо, за да я поправим.


Както можете да видите на снимките, грешката ми е във връзката, намерих този проблем в приставката за бутони за споделяне. Често трябва да ровите във всички файлове, за да намерите грешка.

3. Добавете елемент към реда, където е открита грешката, и проверете отново с валидатора.
Ако грешката е коригирана, това е добре. Ако не, тогава ще трябва да търсите по-нататък.

Проверката на уеб кода за валидност е проверката му спрямо стандартите и сертификатите на W3C.
W3C (Консорциум световната мрежа) са техническите законодатели на мрежата, които разработват стандарти и правила за писане на код. Сертификатите и стандартите на W3C са задължителни за всеки, който работи в мрежата. Необходими са единни стандарти в изписването на кода, така че всички мрежови приложения да комуникират в едно езиково пространство, на стандартни езици и да се разбират взаимно, докато работят с уеб документи.
W3C не само създава уеб стандарти, но и активно насърчава тяхното прилагане.
W3C има онлайн услуги за валидиране на HTML/XHTML и CSS код.
Проверката на кода спрямо стандартите на W3C с помощта на W3C валидатори е най-добрият изход.

Безплатни онлайн услуги от W3C за проверка на кода за валидност.
W3C валидаторите имат интуитивен ясен интерфейс. Работата с тях е лесна и проста.
Услугите позволяват проверка в три режима и съответно имат само три бутона:
Проверете URL
(за проверка трябва да посочите адреса на всяка страница от сайта, налична в мрежата)
Проверете качения файл
(за проверка трябва да посочите пътя до файла, който се проверява)
Проверете въведения текст
(за да проверите, трябва да копирате и поставите кода за проверка в прозореца на валидатора)

Последните два метода са особено полезни при проверка на уеб документи или текстове, намиращи се на локални компютри. Това могат да бъдат уеб страници или вече изтеглени от мрежата към локален компютър, или генерирани от двигатели, разположени на локални сървъри, като "Денвър". В случай на Denver, трябва да запазите страницата през браузъра като файл с разширение .html и след това да я проверите като отделен файл или да копирате източникуеб страници директно от браузъра и проверете как е въведен текстът.

Как да използвате W3C онлайн валидатори.
свържете се с валидатора на:
(http://validator.w3.org/ - за валидиране на HTML или XHTML
http://jigsaw.w3.org/css-validator/ - за проверка на CSS)
в прозореца на валидатора, който се отваря, изберете един от трите метода за проверка
(URL адрес на уеб страница, локален файл или въведен текст)
отидете на съответния раздел
посочете обекта на проверка
(въведете url-адреса на проверената уеб страница,
или пътя до файла на локалния компютър,
или съответно поставете кода за проверка)
щракнете върху бутона "Проверка" и вижте резултата от проверката

Услугите на W3C проверяват кода за валидност и незабавно посочват грешки, ако има такива. Всяка грешка ще бъде коментирана. Коментарите, за съжаление, на английски. Така че Google-translate е тук, за да ви помогне.Остава само, ако е необходимо, да коригирате кода и да го проверите отново за съответствие.
W3C валидаторите са напълно безплатни и автоматизирани. Следователно можете да ги чукате с работата си върху грешките дълго и безнаказано. За това са създадени тези услуги.

Нормална алтернатива на W3C валидаторите.
В допълнение към онлайн сървърите на W3C за проверка на уеб код, много добър резултатдава разширението HTML Validator на браузъра Mozilla Firefox. Наличието на такава добавка в браузъра улеснява работата на уеб администратора и за пореден път доказва, че Mozilla Firefox е „рулеви“ браузър.
Можете да изтеглите разширението mazilka тук: http://users.skynet.be/mgueury/mozilla/

Можете да инсталирате разширението по следния начин:
- Стартирайте Firefox.
Следва: Меню - Инструменти - Добавки - Разширения.
И просто плъзнете и пуснете изтегления файл (xpi разширение) в прозореца, който се отваря.
След това разширението ще се инсталира автоматично.

или (втори начин):
- Стартирайте Firefox.
Следва: Меню - Файл - Отваряне на файл - посочете пътя до изтегления файл.
След това разширението отново ще се инсталира автоматично.

След като инсталацията приключи, ще трябва да рестартирате браузъра си.
При рестартиране ще се появи прозорец с избор на начин за проверка на уеб страници:
„HTML Tidy“ или „SGML Parser“ или „Serial“
Избираме метода "SGML Parser" като най-удобен и приемлив вариант. Натискаме съответния бутон Сега в прозореца на браузъра ще се покаже иконата за бърз достъп на добавката, а до нея - бутона за менюто с настройки на добавката.
Имам - горе и вдясно:

HTML валидатор за Браузър Mozilla Firefox работи изцяло автоматичен режим. Не е нужно да му се показва какво да проверява. Той проверява всички документи, които ще бъдат отворени в Mozilla Firefox. Много е удобно. Достатъчно е да погледнете цвета на прекия път на програмата, за да разберете дали има проблем в отворения документ или не.
В зависимост от резултатите от проверката цветът на иконата може да бъде зелен, жълт или червен, което означава следното:
зелено - "няма грешки", всичко е "ОК"
жълто - "няма грешки, но има предупреждения"
червено - "има грешки"

Когато щракнете върху прекия път, ще се отвори прозорец, съдържащ изходния код на страницата, която разглеждате, с обяснения и коментари за грешки и предупреждения, ако има такива.
Приблизително така.

Тази колекция съдържа невероятна колекция. онлайн услугиза работа с CSS кодове. Всички тези услуги правят живота на уеб разработчика много по-лесен. С тяхна помощ можете да генерирате CSS мрежа за сайта, да проверите кода за грешки, да адаптирате кода към различни браузъри, генерирайте CSS стиловевъз основа на стилове на слоеве на Photoshop, вземете шаблонни кодове за фонове и градиенти, компресирайте CSS, за да увеличите скоростта на зареждане на сайта. Има много услуги, специализирани в работата с шрифтове и тяхното визуално представяне.

1Kb CSS мрежа
Чрез задаване само на три параметъра се генерира и CSS мрежа. Той също така определя ширината в пиксели.

Конструктор на мрежи
по-сложна услуга. CSS мрежата се конфигурира по няколко начина. Вторият блок генерира текста, който ще се показва в колоните. На изхода имаме готов CSS и HTML шаблон.

CSS Lint
Услуга за проверка на кода на вашия сайт за грешки.

Грунд CSS
Като поставите HTML кода в диалоговия прозорец, можете да получите списък с всички споменати класове и идентификатори, които са споменати в CSS.

Префикс MyCSS
Ако влезете източник cssкод, а на изхода можете да получите код, адаптиран за различни браузъри.

Модернизр
Тази услуга предлага изтегляне и инсталиране JavaScript библиотекаотворен код, който по някакъв начин ще ви помогне при създаването на сайт. Не мога да кажа със сигурност, защото не съм го пробвал сам.

Стилове на слоеве
Силно полезна услуга. Въз основа на настройките в диалоговия прозорец Layer Styles, Photoshop генерира CSS код.

Ultimate CSS градиентГенератор от ColorZilla
Има голям брой градиенти за избор и техните CSS кодовеадаптиран за различни браузъри.

spritebox
Позволява ви бързо и лесно да създавате класове и идентификатори от едно изображение

автоматичен css inliner
Автоматично преобразува всички локални стилове във вграден CSS за използване в пощенските списъци.

тип тестер
Позволява ви да сравните изписването на различни шрифтове и да получите CSS кода на избрания стил на писане.

Комбинаторът на уеб шрифтове
Услугата ви позволява да видите визуално как ще изглеждат различни комбинации от шрифтове в заглавия, подзаглавия и в основния текст.

Напоследък получавам няколко въпроса от потребители относно валидността на моите теми и валидирането като цяло. В тази публикация искам да им отговоря.

Какво е валидност?

Смята се, че валидността на кода е единствена, универсална характеристика на всеки код.
Всъщност валидността е съответствие html коддокумент към определен набор от правила, посочени в doctype или подразбиращи се в HTML5.
Тоест валидността е относително понятие, тъй като правилата са различни, както и техните изисквания.
За да стане по-ясно, ще дам пример, който намерих на сайта css-live.ru:

За изграждането на жилищни сгради и атомни електроцентрали се прилагат различни SNiP (строителни норми и правила), така че документ, който е валиден според един набор от правила, може да не е валиден според друг (атомна електроцентрала, построена съгласно стандартите на жилищна сграда би била добра!).

Типът на документа обикновено сочи към документа, спрямо който е планирано html валидирането, но може да бъде избран по прагматични причини, за да изберете оптималния режим на браузърите.
XHTML5 може изобщо да няма doctype, но да е валиден.

Валидиране - какво е това?

С прости думи, валидирането е процесът на проверка на кода и привеждането му в съответствие с избрания doctype (DTD).

Как се проверява валидността?

Валидността на HTML кода се проверява от инструмент, наречен валидатор.
Най-известният w3c валидатор е https://www.w3.org.
W3c валидаторът извършва няколко проверки на кода.
Основните:

1. Проверете за синтактични грешки:
   Пример от habrahabr.ru/post/101985 :
   е правилният синтаксис, въпреки че е невалиден HTML таг
   Така че проверката на синтаксиса е минимално полезна за писане на добър HTML код.
2. Проверка на вложеността на етикета:
   AT HTML документтаговете трябва да бъдат затворени в реда, обратен на отварянето им. Тази проверка открива незатворени или неправилно затворени тагове.
3. HTML валидиране според DTD:
   Проверка на съответствието на кода с посочения DTD - Document Type Definition (doctype). Това включва проверка на имена на тагове, атрибути и тагове за "вграждане" (тагове от един тип в тагове от друг тип).
4. Проверка за чужди елементи:
   Той ще намери всичко, което е в кода, но не и в doctype.
   Например персонализирани тагове и атрибути.

За да проверите валидността на CSS кода, има css валидатор - http://jigsaw.w3.org/css-validator.
Валидност на кода- това е резултат от механична проверка за липса на формален ОВ, съгласно посочения набор от правила.
Трябва да разберете, че валидирането е инструмент, а не стойност сама по себе си.
Опитните дизайнери на оформление обикновено знаят къде е възможно да се нарушат правилата за валидиране на HTML или CSS и къде не, и какво заплашва (или не заплашва) тази или онази грешка при валидиране.
Примери кога не валиден кодправи сайта:

• по-удобно и по-бързо - персонализирани атрибути за Javascript/AJAX или
• SEO оптимизиран - ARIA маркиране.

Ясно е, че няма смисъл от валидност заради самата валидност.
По правило опитните дизайнери на оформление се придържат към следните правила:
- Не трябва да има груби грешки в кода.
- Незначителните могат да бъдат толерирани, но само по основателни причини.
Относно грешки при проверка на html/CSS:

Грешките при валидиране (VF) могат да бъдат разделени на групи:

• OV в шаблонни файлове:
  Те не са трудни за намиране и коригиране.
  Ако някоя от малките грешки помогне да направите сайта по-функционален или по-бърз, те могат да бъдат оставени.
• OV в скриптове на трети страни, свързани на сайта:
  Например джаджа Vkontakte, скрипт в Twitter или видео файлове в YouTube.
  Няма как да ги оправим, защото тези файлове и скриптове се намират на други сайтове и ние нямаме достъп до тях.
• CSS правила, които валидаторът не разбира:
  Валидаторът проверява дали кодът на сайта съответства на определен HTML версииили CSS.
  Ако сте използвали правила на CSS версия 3 в шаблона и валидаторът проверява спрямо версия 2.1, тогава той ще счита всички правила на CSS3 за грешки, въпреки че не са.
• OV, които неволно трябва да бъдат оставени на сайта, за да получите желания резултат. Например:
  • noindex тагове. Те не са валидни, но са много необходими и трябва да се примирим.
  • каки. За да получите правилното показване на сайта в някои браузъри, понякога трябва да използвате хакове - код, който само определен браузър разбира.
• Грешки във валидатора.
  Често той не вижда никакви тагове (например затварящи) и докладва за OB, където не съществува.

Оказва се, че на работещ сайт почти винаги ще има някакъв ОВ.
Освен това може да има много от тях.
Например основните страници на Google, Yandex и mail.ru съдържат по няколко десетки грешки.
Но те не нарушават показването на сайтове в браузърите и не пречат на тяхната работа.
Всичко написано по-горе важи и за моите теми.

Сложните теми включват:

• Функции на WordPress (напр. the_category()), които дават невалиден код.
• Видео изход от сайтове за видео хостинг, например от YouTube, и има много OB в кода на YouTube, на които нито вие, нито аз можем да повлияем.
• Бутони социални мрежи, които са свързани с помощта на скриптове на тези мрежи и съдържат OB.
• Правилата за CSS3 и HTML5 се считат за грешки от валидаторите на по-стари версии.
  В същото време валидаторите на CSS3 и HTML5 версиите считат старите правила за грешки :).
• Понякога, за да се постигне правилно показване в интернет браузър Explorer или по-стари версии на други браузъри трябва да използват така наречените хакове - код, който само конкретен браузър разбира, за да напише правила за показване на сайта за този конкретен браузър.

В резултат на това можете да получите напълно валиден код само когато излагате много прости теми, т.е. тези, които съдържат минимално количество функционалност.
След като завърша оформлението на която и да е от моите теми, винаги го проверявам с валидатор и поправям всички OB, които могат да бъдат коригирани, без да загубя производителността на темата.
Тоест, ако има избор между работеща функционалност и валидност, аз избирам функционалността.
Ако създавате свои собствени теми, съветвам ви да направите същото.
От моя гледна точка (а също и от гледна точка на повечето дизайнери на оформление), отношението към валидирането на html/CSS като истина от последна инстанция е погрешно. Задължително е да се коригират само тези OB, които:
- предотвратяване на правилното показване на страницата от браузъра (незатворени и неправилно вложени тагове).
- забавяне на зареждането на страницата (неправилно свързани скриптове).
- може да се коригира, без да се нарушава функционалността на темата.
Надявам се, че отговорих на всичките ви въпроси относно валидирането.