Пам'ятка по CSS

Dave Shea

При верстці сайту за допомогою CSS ви обов'язково наткнетеся на безліч проблем. І кожного разу ви будете битися головою об стіну в спробах обійти черговий глюк. Даний документ покликаний полегшити вам процес розробки, і служить коротким довідником, до якого ви можете звертатися щоразу, коли зіткнетеся з непереборною перешкодою.

Якщо у вас є що додати до цього документа, залиште свій коментар тут.

Даний документ перекладено на французька, німецька, іспанська, італійська, угорська, фінська, російська, японська та китайська мови.

Щось не так? Перевірте код валідаторів!

При налагодження свого коду ви заощадите багато часу і нервів, якщо в першу чергу перевірите його валідаторів. Найчастіше проблеми з компонуванням сторінки викликані невірним або XHTML CSS.

Створюйте і тестуйте свій CSS-код спочатку в сучасних "просунутих" браузерах, і лише потім - у інших, але не навпаки

Якщо ви тестуєте сайт у неякісному браузері, ваш код починає залежати від неправильного відображення цим браузером. Коли настане час перевірити сайт у браузерах, вірно підтримують стандарти, ви напевно засмутити побаченим. Таким чином, почніть з передових браузерів, а потім додайте до коду трюки для менш вдалих. Таким чином ваш код з самого початку буде відповідати стандартам, і вам не доведеться занадто багато "чаклувати" для підтримки інших браузерів. Сьогодні самими передовими браузерами є Mozilla, Safari, або Opera.

Переконайтеся, що бажаний ефект дійсно існує.

Існують розширення CSS, специфічні для конкретних браузерів, але що не входять в офіційну специфікацію каскадних таблиць. Якщо ви намагаєтеся застосувати властивість filter або відформатувати зовнішній вигляд смуги прокрутки, знайте - ви використовуєте специфічний код, який працює тільки в IE. Якщо валідатор раптом пише вам, що ваш код не відповідає специфікації, скоріше за все це через те, що в ньому присутнє таке специфічні розширення, і воно не буде працювати в інших браузерах.

Застосовуючи плаваючі блоки, переконайтеся в тому, що вони не заважають сусідам

"Плаваючі блоки "підступні, і вони не завжди ведуть себе так, як очікується. Якщо раптом вийшло так, що плаваючий блок вилазить за межі містить його елементу, або ж він веде себе не так, як ви хочете - переконайтеся в коректності того, чого ви хочете домогтися. Зверніться за подробицями до керівництву Еріка Мейєра.

Поля (margins) завжди "згортаються". Використовуйте замість них відступами (padding) або межами

Якщо у вас раптом з'являється порожній простір там, де воно вам не потрібно, або навпаки - немає вільного місця там, де воно вам потрібно, це швидше за все відбувається через полів (margins), які мають звичку "згортатися". Andy Budd у своїй статті описує цей глюк і дає поради, як його уникнути.

Намагайтеся не ставити елементу одночасно відступ/кордон І фіксовану ширину

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

Як уникнути мелькання чистого HTML в IE

Якщо ви використовуєте зовнішню таблицю стилів, підключаючи її за допомогою директиви @ import, то рано чи пізно ви помітите, що IE встигає "блиснути" на екрані неформатований HTML перш, ніж застосує до нього стилі. Цю проблему можна вирішити наступним чином.

Не використовуйте min-width в IE

Він не підтримує цю властивість. Але він розглядає як width min-width в деякій мірі, тому з допомогою невеликого фільтру для IE, ви можете отримати точно ефект min-width в IE.

Якщо щось не так, зменшіть ширину

Іноді через похибки округлення складання виду 50% + 50% дає в результаті що-небудь типу 100.1%. Це призводить до того, що дбайливо створена вами верстка "розповзається" в деяких браузерах. Лікується просто: зменшуйте ширину з 50% до 49% або навіть 49,9%.

IE показує все не так, як треба?

Можливо, ви напоролися на знаменитий "Peekaboo bug", особливо якщо баг проявляється при наведенні курсору на посилання. Дивіться рішення у статті "Позиція - це наше все!"

Будьте обережні, задаючи стилі для "якорів"

Якщо в своєму коді ви використовуєте класичні якоря (), то скоро помітите, що вони теж реагують на псевдо-класи: hover і: active. Уникнути цього можна, застосувавши до якорів id, або ж застосовуючи для них злегка перекручений синтаксис типу : link: hover,: link: active

Пам'ятайте про порядок опису посилань.

Задаючи псевдокласси для посилань, робіть це завжди ось у такому порядку: Link, Visited, Hover, Active (запам'ятайте цей порядок з допомогою слів "LoVe/HAte"). Будь-які інші комбінації не працюють так, як треба. Якщо потрібно використовувати також і псевдокласс: focus, то порядок опису буде таким: Link, Visited, Hover, Focus, Active (LVHFA для запам'ятовування чого Метт Холі придумав фразу "Lord Vader's Handle Formerly Anakin")

Пам'ятайте про правило "TRouBLEd" для кордонів.

Значення для кордонів, полів (margins) і відступів (padding) скорочено описуються в такому порядку: за годинниковою стрілкою в напрямку Top, Right, Bottom, Left (верхнє, праве, верхнє, ліве). Таким чином, запис margin: 0 1px 3px 5px; означає, що верхньої межі немає, ліва дорівнює п'яти пікселям ну і так далі.

Явно вказуйте одиниці виміру у ненульових значень

Специфікація CSS вимагає вказувати одиниці вимірювання для всіх величин, пов'язаних з розмірами, відступом або шрифтами (єдиний виняток - line-height, як це не дивно). Поведінка окремих браузерів в ситуаціях, коли одиниці виміру не вказані, може бути зовсім несподіваним. Що стосується нуля, то нуль є нуль незалежно від того, вимірювати його пунктами, пікселями або чем-то еще. Одиниці виміру для нього не потрібні. Приклад: padding: 0 2px 0 1em;

Тестуйте різні розміри шрифту

"Просунуті" браузери типу Mozilla і Opera дозволяють змінювати розмір шрифту незалежно від одиниць, в яких він заданий. У деяких користувачів неодмінно шрифти будуть налаштовані так, що їх розмір у браузері виявиться менше або більше за вас. Намагайтеся оптимізувати ваш код під максимально можливий діапазон розмірів шрифту.

Не забувайте про великі/малі літери

Деякі броузери суворо ставляться до регістру букв. Якщо ви назвали свій клас "homePage", намагайтеся і в стильових таблицях використовувати в точності таке ж ім'я, тому що в строгих броузерах (таких як Mozilla) ім'я "homepage" не еквівалентна "homePage".

Тестуйте, включивши стилі в код сторінки; публікуйте в Мережі, прибравши стилі у зовнішній файл.

Працюючи зі стилями, розміщеними в HTML-коді сторінки, ви не зіштовхнетеся з можливими помилками при тестуванні, пов'язаними з кешуванням. Це особливо важливо при роботі з деякими браузерами на Mac-платформі. Але не забудьте перед перенесенням сайту в мережу винести всі стилі в зовнішній файл і підключити його через @ import або.

Працюючи над помилками позиціонування, додайте блокам чіткі межі

Универсальное правило типу div (border: solid 1px # f00;) може послужити велику службу при пошуку помилок позиціювання. Але додавши кордону для окремих елементів, ви зможете точно визначити місця, де блоки налазять один на одного або ж де з'являється зайве порожній простір, що не завжди легко виявити.

Не використовуйте одинарних лапок в описах шляхів для зображень

Задаючи шлях до фонового зображення, відмовтеся від нав'язливого бажання укласти його в лапки. У них немає необхідності, крім того, IE5 для Mac на цих лапках просто заклинить.

Не приєднуйте порожні зовнішні файли стилів в надії заповнити їх "коли-небудь у майбутньому"

IE5 для Mac заклинить на порожньому файлі, і час завантаження сторінки зросте. Замість цього помістіть в файл хоча б одне стильове правило (або навіть просто коментар) - і MacIE знову повернеться до життя.

Крім того, є деякі аспекти теорії, які не мають прямого відношення до функціональності верстки, але, тим не менше, їх слід дотримуватися при розробці:

Упорядкуйте свій CSS файл

Супроводжуйте кожну групу стильових правил своїм коментарем, групуйте схожі за змістом селектори, визначте для себе правила найменування селектор і виконуйте їм неухильно, візуально "відбиває" селектори пробілом (рекомендуємо використовувати саме пробіл, а не табуляцію - це умова платформ) І будете пильнувати порядок властивостей.

Іменні класи та ідентифікатори, виходячи з їх призначення, а не зовнішнього вигляду

Створивши клас. smallblue і вирішивши згодом поміняти в ньому текст на великий і червоний, ви тим самим перекреслить сенс його назви. Замість цього використовуйте класи типів. Copyright і. Pullquote. (спираючись на функціональне призначення класу)

Утверджуй на CSS-фільтри лише як на саме останній засіб

CSS-хакі і фільтри дозволяють вибірково застосовувати стилі (чи не застосовувати - і таке буває) до різних елементам. Уникайте застосування їх за будь-якого приводу, намагайтеся знайти більше кроссбраузерние рішення. Це часом здорово зберігає нерви і час. Про всяк випадок ось величезний список CSS-фільтрів.

Суміщайте селектори

Чим легше CSS-файл, тим менше потрібно часу на його завантаження. По можливості групуйте селектори, покладайтеся на спадкування властивостей, і зменшуйте обсяг тексту, використовуючи коротку запис властивостей.

Застосовуючи методи заміни зображень, не забувайте про доступність

Класичний метод заміни зображення "FIR" створює проблеми при читанні сторінок голосовими браузерів, і у випадках, коли користувач відключив завантаження зображень. Проте цьому методу є альтернативи.

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/