Виправлення html та css за допомогою валідатора W3C. Перевірка CSS на валідність за допомогою CSS Validation Service Що таке валідатори коду

У цій добірці зібрана чудова колекція онлайн-сервісів по роботі з CSS кодами. Всі ці послуги значно полегшують життя веб-розробнику. З їхньою допомогою можна згенерувати CSS сітку для сайту, перевірити код на предмет помилок, адаптувати код під різні браузери, згенерувати CSS стилі на основі стилів шару фотошопу, отримати коди патернів для бекграунду та градієнтів, стиснути CSS для збільшення швидкості завантаження сайту. Багато сервісів, що спеціалізуються на роботі зі шрифтами та їх візуальним представленням.

The 1Kb CSS Grid
Задаючи лише три параметри, також генерується CSS сітка. Також вказується ширина в пікселях.

Grid Designer
Більш складний сервіс. Налаштовується CSS грати за кількома параметрами. У другому блоці генерується текст, який відображатиметься в колонках. На виході маємо готовий CSS та HTML шаблон.

CSS Lint
Сервіс для перевірки коду вашого сайту щодо помилок.

Primer CSS
Вставивши в діалогове вікно HTML код, можна отримати список всіх згаданих класів та ID, які згадані у CSS.

PrefixMyCSS
Якщо ввести вихідний CSS код, то на виході можна отримати код адаптований під різні браузери.

Modernizr
На даному сервісі пропонують скачати та встановити JavaScript бібліотеку з відкритим кодом, яка якимось чином допоможе вам при створенні сайту. Точніше сказати не можу, бо сама не пробувала, що це таке.

Layer Styles
Дуже корисний сервіс. На основі налаштувань діалогового вікна стилів шару програми фотошоп генерує код CSS.

Ultimate CSS Gradient Generator by ColorZilla
Представлено на вибір велику кількість градієнтів та їх CSS-коди, адаптовані під різні браузери.

Spritebox
Дозволяє швидко та легко створювати класи та ідентифікатори з однієї картинки

Automatic CSS inliner
Автоматично перетворює всі локальні стилі у вбудований CSS для використання у поштових розсилках.

Typetester
Дозволяє порівнювати написання різних шрифтів та отримати CSS код вибраного стилю написання.

The Web Font Combinator
Сервіс дозволяє наочно подивитися як виглядатимуть різні поєднання шрифтів у заголовках, підзаголовках та в основному тексті.

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

Перевірити URI

Ця вкладка дозволяє вказувати адресу сторінки, розміщеної в Інтернеті. Протокол http:// можна не писати, його буде додано автоматично (рис. 1.42).

Рис. 1.42. Перевірка документа на адресу

Після введення адреси натисніть кнопку «Перевірити» і з'явиться один із двох написів: «Вітаємо! Помилок не виявлено у разі успіху або На жаль, ми виявили наступні помилки при невалідному коді. Повідомлення про помилки або попередження містять номер рядка, селектор та опис помилки.

Перевірити завантажений файл

Ця вкладка дозволяє завантажити HTML або CSS-файл та перевірити його на наявність помилок (рис. 1.43).

Рис. 1.43. Перевірка файлу під час його завантаження

Сервіс автоматично розпізнає тип файлу і якщо вказано HTML-документ, відокремлює стиль для валідації.

Перевірити набраний текст

Остання вкладка призначена для безпосереднього введення HTML або CSS-коду, при цьому перевірці буде підданий лише стиль (рис. 1.44).

Рис. 1.44. Перевірка введеного коду

Цей варіант є найбільш зручним для проведення різних експериментів над кодом або швидкої перевірки невеликих фрагментів.

Вибір версії CSS

У CSS3 додано багато нових стильових властивостей у порівнянні з попередньою версією, тому проводити перевірку коду слід з урахуванням версії. За промовчанням у сервісі вказано CSS2.1, тому якщо ви хочете перевірити код на відповідність CSS3, це слід вказати явно. Для цього клацніть по тексту «Додаткові можливості» і у блоці зі списку «Профіль» виберіть CSS3

Рис. 1.45. Вказівка ​​версії CSS для перевірки

Ідентифікатори та класи

Періодично піднімається суперечка про доцільність використання ідентифікаторів у верстці. Основний аргумент полягає в тому, що ідентифікатори призначені для доступу та керування елементами веб-сторінки за допомогою скриптів, а для зміни стилів елементів повинні застосовуватись виключно класи. Насправді немає різниці, через що задавати стилі, але слід пам'ятати про деякі особливості ідентифікаторів і класів, а також підводні камені, які можуть чекати розробників.

Спочатку перерахуємо характерні ознаки цих селекторів.

Ідентифікатори

У коді документа кожен ідентифікатор є унікальним і повинен бути включений лише один раз.

Ім'я ідентифікатора чутливе до регістру.

Через метод getElementById можна отримати доступ до елемента за його ідентифікатором та змінити властивості елемента.

Стиль для ідентифікатора має пріоритет вищий, ніж у класів.

Класи можуть використовуватись у коді неодноразово.

Імена класів чутливі до регістру.

Класи можна комбінувати між собою, додаючи кілька класів одного тегу.

Ідентифікатори

Якщо під час роботи веб-сторінки потрібно змінити стиль деяких елементів «на льоту» або виводити всередині якого-небудь тексту, з ідентифікаторами це робиться набагато простіше. Звернення до елемента відбувається через метод getElementById , параметром якого є ім'я ідентифікатора. У прикладі 1.70 до текстового поля форми додається ідентифікатор з ім'ям userName , потім за допомогою функції JavaScript робиться перевірка на те, що користувач ввів у поле будь-який текст. Якщо тексту немає, але кнопка Submit натиснута, виводиться повідомлення всередині тега з ідентифікатором msg . Якщо все правильно, дані форми надсилаються на адресу, вказану атрибутом action .

Приклад 1.70. Перевірка даних форми XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6