Періодично піднімається суперечка про доцільність використання ідентифікаторів в верстці. Основний аргумент полягає в тому, що ідентифікатори призначені для доступу і управління елементами веб-сторінки за допомогою скриптів, а для зміни стилів елементів повинні застосовуватися виключно класи. Насправді немає різниці, через що задавати стилі, але варто пам'ятати про деякі особливості ідентифікаторів і класів, а також підводні камені, які можуть чекати розробників.
Для початку перерахуємо характерні ознаки цих селекторів.
Ідентифікатори
- У коді документа кожен ідентифікатор унікальний і повинен бути включений лише один раз.
- Ім'я ідентифікатора чутливе до регістру.
- Через метод getElementById можна отримати доступ до елементу за його ідентифікатором і змінити з войства елемента.
- Стиль для ідентифікатора має пріоритет вище, ніж у класів.
Класи
- класи можуть використовуватися в коді неодноразово.
- Імена класів чутливі до регістру.
- класи можна комбінувати між собою, додаючи кілька класів до одного тегу.
Ідентифікатори
Якщо під час роботи веб-сторінки потрібно змінити стиль деяких елементів «на льоту» або виводити всередині них будь-якої текст, з ідентифікаторами це робиться набагато простіше. Звернення до елементу відбувається через метод getElementById, параметром якого служить ім'я ідентифікатора. У прикладі 21.1 до текстового поля форми додається ідентифікатор з ім'ям userName, потім за допомогою функції JavaScript робиться перевірка на те, що користувач ввів в це поле будь-якої текст. Якщо ніякого тексту немає, але кнопка Submit натиснута, виводиться повідомлення всередині тега з ідентифікатором msg . Якщо все правильно, дані форми відправляються за адресою, вказаною атрибутом action .
Приклад 21.1. Перевірка даних форми
HTML5 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Перевірка форми </title>
<script>
function validForm (f) {user=document.getElementById (" userName"); if (user.value=="") document.getElementById (" msg"). innerHTML='Будь ласка, введіть ім'я.'; else f.submit (); } </script>
</head>
<body>
<form action="handler.php" onsubmit="validForm (this); return false">
<p>
Введіть своє ім'я: </p>
<div id="msg">
</div>
<p>
<input type="text" id="userName" name="user">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
Оскільки ідентифікатори чутливі до регістру, має значення їх однотипне написання. Усередині тега <input> використовується ім'я userName, його ж варто вказати і в методі getElementById . При помилковому написанні, наприклад, username, скрипт перестане працювати, як потрібно.
В наведеному вище прикладі стилі взагалі ніякої участі не брали, самі ідентифікатори були потрібні для роботи скриптів. При використанні в CSS варто враховувати, що ідентифікатори мають високим пріоритетом в порівнянні з класами. Пояснимо це на прикладі 21.2.
Приклад 21.2. Поєднання стилів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
Ідентифікатори </title>
<style>
#A, .a {border: none; background: #f0f0f0; color: green; padding: 5px; } .B {border: 1px solid red; color: red; padding: 0; } </style>
</head>
<body>
<p id="A" class="b">
Стиль ідентифікатора </p>
<p class="a b">
Стиль класів a і b </p>
<p class="b">
Стиль класу b </p>
</body>
</html>
Для першого абзацу встановлюється стиль від ідентифікатора A і класу b, властивості яких суперечать один одному. При цьому стиль класу буде ігноруватися через особливості каскадирования і специфічності. Для другого абзацу стиль задається через класи a і b одночасно. Пріоритет у класів однаковий, значить, у випадку якщо будуть задіяні ті властивості, які вказані в стилі нижче. До останнього абзацу застосовується стиль тільки від класу b . На рис. 21.1 показаний результат застосування стилів.
Специфічність в каскадировании починає грати роль при розростанні стильового файлу за рахунок збільшення числа селектор, що характерно для великих і складних сайтів. Щоб стиль застосовувався коректно, необхідно грамотно управляти специфічністю селекторів шляхом використання ідентифікаторів, підвищення важливості через ! Important, порядком проходження властивостей.
Класи
Оскільки до елементу одночасно можна додавати більше одного класу, це дозволяє завести кілька універсальних класів зі стильовими властивостями на всі випадки і включати їх до тегам при необхідності. Припустимо, що більшість блоків на сторінці мають закруглені куточки, причому деякі блоки ще мають червону рамку, а деякі ні. У цьому випадку можемо написати такий стиль (приклад 21.3).
Приклад 21.3. Використання класів
. R, .b {padding: 10px; background: #FCE3EE;}. r {border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px} .b {border: 1px solid #ED1C24; } .N {border: none; } Вказуючи різні класи в атрибуті class ми можемо комбінувати набір стильових властивостей і отримати таким чином блоки з рамкою, блоки без рамки, з округленими або прямими кутами. Це дещо схоже на групування селектор, але має більшу гнучкість.