Пропущена крапка з комою
CSS правила складаються з пар описів - властивість-значення, розділених між собою крапкою з комою. Відповідно до специфікації CSS останнім опис може не закінчуватися крапкою з комою, тому що фігурна дужка і так відокремлює все правило від інших як стіна. наприклад:
Проблема тільки полягає в тому, що якщо ви вирішите додати в правило інше опис, ви можете запросто забути поставити в останньому описі крапку з комою:
В результаті опис font-family ніколи не спрацює, тому що парсер буде вважати "font-family" частиною значення властивості color. Я проставляється останню крапку з комою завжди - це якось додає організованості в код. А кілька зайвих байт в розмірі css-файлу не грають великої ролі, особливо при включеному кешування браузера.
пропущено двокрапка
Зазвичай така помилка виникає якщо люди тренуються в швидкості друку на клавіатурі, а не в написанні CSS коду. Таку помилку дуже труднго побачити, тому що вона знаходиться в середині рядка. Порівняйте ці два рядки:
Як видно навіть підсвічування коду не спрацювала - парсер не розчув помилку.
Коли нічого не підозрюючи браузер дійде до розбору цієї пари правил:
він просто подавиться. Дві відкривають фігурних дужки і тільки одна закриває: все від #wrap (в даному прикладі) буде проігноровано. Як видно - парсер підсвічування коду теж не впорався із завданням.
Виправити таку помилку дуже легко - просто перевіряєте щоб перед кожним новим правилом стояла закриває фігурна дужка. Як уже зазначалося, в основом, забувають проставити саме її.
Помилки в назві css-властивості
Взагалі кажучи, я грамотна людина. Однак коли я "в процесі" я набираю текст настільки швидко, наскільки з цим завданням справляються мої пальці, і звичайно іноді помиляюся. При звичайному спілкуванні помилки не дуже важливі - люди майже завжди можуть визначити що саме я хотів сказати. На жаль комп'ютер більш примхливий.
Помилки в значеннях
Помилки трапляються не тільки в назвах властивостей. Іноді вони бувають і при написанні значень і їх буває складніше виловити:
Як видно помилка в розмірності - замість px варто pz. Через це все правило не працює.
А парсер підсвічування коду це справа з'їв - швидше за все він не перевіряє значення властивостей на коректність.
Помилки в назвах класів або ID
Неважливо як часто я створював div з ID "navigation" - я до сих пір знаходжу такі правила у себе в коді:
Неправильний порядок значень
Деякі CSS властивості є комплексними, тобто можна написати значення декількох властивостей через пробіл в один рядок. На жаль більшість таких властивостей дуже вимогливі до порядку значення:
Перше правило - коректне і текст всіх div-ів отримає специфічне накреслення і розмір. Друге правило - некоректне, тому що порядок властивості не дотриманий.
Про правильному порядку значень в таких властивостях можна прочитати в специфікації CSS. Я до речі завжди плутаю цей порядок, тому такі властивості зазвичай теж пишу копі-паст, тобто звідкись копіюю
Розмірні величини без вказівки одиниці виміру
Всі вимірювані властивості повинні мати значення, із зазначенням одиниці виміру:
Три чого? Ems? Дюймів? Пікселів?
Про одиниці вимірювання так само можна подивитися в специфікації CSS.
дублюючі правила
У великих сss-файлах зустрічаються повністю правила одних і тих же елементів. Працює завжди останнє - потім не дивуйтеся чому відступ НЕ 2em, а 10px;
конкуруючі правила
Подібна проблема може виникнути коли ви її зовсім не очікуєте. Наприклад, якщо є наступний XHTML:
Можна послатися на цей елемент на ім'я клас або по id. Проблема виникає, якщо посилаються і за класом і за id:
Працює останнім відповідне правило, як і в попередньому пункті.
Звертаємося до класу як до ID (або навпаки)
Це мабуть найчастіша моя помилка - кожен раз плутаю - поставити крапку або грати 🙂:
І нічого не відбувається, тому що елемент має id = navigation, а не клас.
Використання неіснуючих властивостей
Не всі CSS-властивості названі інтуїтивно зрозуміло. наприклад:
Використання неіснуючих значень
Помилка схожа на попередню:
Щоб уникнути таких помилок уважно вивчаємо специфікацію.
Неправильне відповідність властивості і значення
Дане CSS визначення може здатися коректним навіть для тренованого ока:
Однак бачимо що правильному властивості неправильно присвоєно правильне значення.
Від себе ще додам:
Є ще помилки, пов'язані з нерозумінням короткого написання комплексних властивостей margin, padding.
Ось приклади правильного написання:
Так ось - загальний формат значень даної властивості такий:
margin: [top] [right] [bottom] [left];
якщо вказані в повному обсязі значення, то діють наступні правила
тобто попередній приклад ідентичний
До нулю одиницю виміру вказувати необов'язково, воно й логічно - не все-одно нуль одиниць чого?
4 thoughts on "N вірних шляхів щоб зламати ваш CSS"
Є просто один хороший приклад з мого життя - я робив курсової по асемблеру - писав власну многозадачную операційну і опечатали. замість 16 надрукував 6 - забув одиницю. Я знав що там треба було написати 16 - з книжки прочитав.
Я друкарські помилки ШУКАВ 4 МІСЯЦІ ... в результаті законної п'ятірку не отримав ... хоча препод зрозумів що я писав сам. тому що я кожен рядок йому розжував і поставив 4 (принциповий мужик - але справедливий - не встиг - отримай менше, інші в цей час вже отримували тільки 3-ки)
Так, 4 місяці ... співчуваю))
І тим не менше це чиста правда. я просто не міг навіть припустити що дві строчки, які я тупа передрукував з книги можуть нести в собі помилку ... виявилася не помилка - просто помилка