Пам'ятка по CSS

CSS Crib Sheet

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

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

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

dt
{
margin-left:20px;
}

Щось не так? Перевірте код валідатором!
При налагодженні свого коду ви заощадите багато часу і нервів, якщо в першу чергу перевірите його валідатором. Найчастіше проблеми з компонуванням сторінки викликані неправильним 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", особливо якщо баг проявляється при наведенні курсору на посилання. Дивіться рішення у статті "Позиція – це наше все!"
Будьте обережні, задаючи стилі для "якорів"
Якщо у своєму коді ви використовуєте класичні якоря (<a name="anchor">), то скоро помітите, що вони теж реагують на псевдо-класи :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 або <link>.
Працюючи над помилками позиціонування, додайте блокам чіткі межі
Універсальне правило типу div {border: solid 1px #f00;} може послужити величезну службу при пошуку помилок позиціонування. Але додавши кордону для окремих елементів, ви зможете точно визначити місця, де блоки залазять один на одного або ж де з'являється зайве пусте простір, що не завжди легко виявити.
Не використовуйте одинарних лапок в описах шляхів для зображень
Задаючи шлях до фонового зображення, відмовтеся від нав'язливого бажання укласти його в лапки. У них немає необхідності, крім того, IE5 для Mac на цих лапках просто заклинить.
Не підключайте порожні зовнішні файли стилів в надії заповнити їх "коли-небудь в майбутньому"
IE5 для Mac заклинить на порожньому файлі і швидкість завантаження сторінки зросте. Замість цього помістіть в файл хоча б одне стильове правило (або навіть просто коментар) – і MacIE знову повернеться до життя.

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

Упорядкуйте свій CSS файл
Супроводжуйте кожну групу стильових правил своїм коментарем, групуйте схожі за змістом селектори, визначите для себе правила найменування селекторів і дотримуйтесь ним точно, візуально "відбивайте" селектори пропуском (рекомендуємо використовувати саме пробіл, а не табуляцію – це умова платформ) і дотримуйтесь порядок властивостей.
Називайте класи та ідентифікатори, виходячи з їх призначення, а не зовнішнього вигляду
Створивши клас .smallblue і вирішивши згодом поміняти в ньому текст на великий і червоний, ви тим самим перекреслить сенс його назви. Замість цього використовуйте класи типів .copyright і .pullquote. (Спираючись на функціональне призначення класу)
Покладайтеся на CSS-фільтри лише як на саме останній засіб
CSS-хакі і фільтри дозволяють вибірково застосовувати стилі (або не застосовувати – і таке буває) до різних елементів. Уникайте застосування їх за будь-якого приводу, намагайтеся знайти більш кроссбраузерну рішення. Це часом здорово зберігає нерви і час. Про всяк випадок ось величезний список CSS-фільтрів.
Суміщайте селектори
Чим легше CSS-файл, тим менше потрібно часу на його завантаження. По можливості групуйте селектори, покладайтеся на спадкування властивостей, і зменшуйте обсяг тексту, використовуючи коротку запис властивостей.
Застосовуючи методи заміни зображень, не забувайте про доступність
Класичний метод заміни зображення "FIR" створює проблеми при читанні сторінок голосовими браузерам, і у випадках, коли користувач відключив завантаження зображень. Проте цьому методу є альтернативи.

Автор: 2004.05.18 © Dave Shea
Переклад: Максим Россомахін Олександр Качанов
Джерело: webmascon

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*