HTML та CSS, в чому справа?

17

Від автора: Причини, за якими HTML і CSS можуть змусити вас сказати «чорт візьми!» Рекомендований до прочитання список здивувань, промахів і дилем, пов’язаних з HTML і CSS, які багатьох дратують.

Оголошуйте doctype

Завжди включайте doctype. Я рекомендую простий HTML5 doctype:

Пропуск doctype може викликати проблеми, такі як погано сформовані таблиці і поля введення і багато іншого, т. к. сторінка буде відображатися в режимі сумісності.

Математика блочної моделі

Елементи, яким задана ширина, стають ширшими, якщо їм задати padding або/та межі (border-width). Щоб уникнути цих проблем, використовуйте вже поширена властивість скидання box-sizing: border-box; reset.

Одиниці rem і мобільна версія браузера Safari

У той час як мобільний Safari підтримує використання rem у значеннях всіх властивостей, він пасує як rem використовуються в розмірних медіа запитах і текст сторінки постійно змінює розміри. Поки що використовуйте em замість rem.

html {
font-size: 16px;
}
/* Викликає миготливий баг в Safari */
@media (min-width: 40rem) {
html {
font-size: 20px;
}
}
/* Відмінно працює в мобільній версії Safari */
@media (min-width: 40em) {
html {
font-size: 20px;
}
}

Плаваючі елементи першими

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

Плаваючий елемент

Плаваючі елементи і використання властивості clear

Якщо ви задаєте float, то можливо вам необхідно використовувати clear. Будь-який контент, який слідує за плаваючим елементом, буде обтікати його, якщо не встановлено властивість clear. Щоб уникнути обтікання використовуйте одну з наступних технік. Використовуйте техніку мікро clearfix з окремим класом.

.clearfix:before,
.clearfix:after {
display: table;
content: «»;
}
.clearfix:after {
clear: both;
}

Або властивість overflow, задаючи значення auto або hidden батьківським елементів.

.parent {
overflow: auto; /* clearfix */
}
.other-parent {
overflow: hidden; /* clearfix */
}

Врахуйте, що overflow може викликати ненавмисні побічні ефекти навколо позиціонованих елементів в межах батьківського.

Підказка! Позбавте себе і колег від проблем в майбутньому, включаючи коментарі виду /* clearfix */ коли запобігаєте обтікання плаваючих елементів, т. к. це властивість може бути використане і в інших цілях.

Плаваючі елементи і автоматична висота

Батьківський елемент, всередині якого знаходяться тільки плаваючі, матиме висоту дорівнює 0. Додавайте .clearfix до батьківського елементу, щоб змусити браузери підрахувати висоту.

Плаваючі елементи завжди блочні

Елементи, яким встановлено властивість float автоматично набувають display: block; . Ставити його окремо немає необхідності т. к. float все одно отримає більший пріоритет, і значення властивості display не буде грати ролі.

.element {
float: left;
display: block; /* Не обов’язково */
}

Кумедний факт: Кілька років назад, нам потрібно було ставити display: inline; більшості плаваючих елементів, для коректної роботи в IE6, щоб уникнути бага, пов’язаного з подвійними зовнішніми відступами. Але ті часи давно пройшли.

Суміжні вертикальні відступи згортаються

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

Стилізація рядків таблиці

Рядки таблиці, tr, не мають меж border, якщо ви не поставите border-collapse: collapse; батьківської таблиці table. Більш того, якщо тег tr і дочірні теги td чи th мають однакову ширину кордонів (border-width), стилі, застосовані безпосередньо до рядку не будуть видні. Пройдіть по цьому посиланню, щоб побачити приклад.

Firefox і кнопки input

З невідомих причин Firefox застосовує властивість line-height до відправки та інших кнопок input, це властивість не можна перевизначити своїм CSS. У вас є два виходи з цієї ситуації:

Використовувати елементи button

Не використовувати line-height у своїх кнопках

Якщо ви прямуєте по першому шляху (і я його все одно рекомендую, тому що елементи button -відмінне рішення), ось що вам варто знати:

Save changes
Cancel

Якщо ви прямуєте по другому шляху, просто не використовуйте line-height і використовуйте тільки padding для вертикального розташування тексту. Подивіться на цей приклад в Firefox e, щоб побачити первісну проблему та її вирішення.

Хороші новини! Здається, це поведінка буде виправлено в 30 версії Firefox. Це хороші новини для нас в майбутньому, але майте на увазі, що виправлення не вплине на більш ранні версії.

Зовнішні межі кнопок в Firefox

Firefox додає зовнішні кордони кнопок (елементів input і button) при фокусі (:focus). Очевидно, це зроблено з метою доступності, але виглядає воно досить дивно. Використовуйте наступний код CSS, щоб перевизначити його:

input::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border: 0;
}

Ви можете бачити це виправлення в дії на цьому прикладі, згаданому в попередньому розділі.

Підказка! Обов’язково включайте особливий стан при фокусі для кнопок, посилань, полів введення. Подібні заходи доступності дуже важливі як для професійних користувачів, що використовують клавішу Tab для швидкої навігації по контенту, так і для тих, хто має проблеми із зором.

Завжди ставте тип елементів button

Значення за замовчуванням submit, що означає будь-яка кнопка форми, може її відправити. Використовуйте type=»button» для всього, що не має відправляти форму і type=»submit» для тих елементів, що повинні.

Save changes
Cancel

Для дій, які вимагають тега button, але знаходяться за межами форми, використовуйте type=»button».

x

Кумедний факт: Очевидно IE7 не має належної підтримки для атрибута value у елемента button. Замість того, щоб брати з атрибута, він бере його з внутрішнього HTML контенту, розташованого між відкриваючим і закриваючим тегами button). Однак, я не бачу в цьому великої проблеми з двох причин: використання IE7 значно скоротилося, і завдання і value і внутрішнього HTML не застосовується повсюдно.

Обмеження на кількість селекторів в Internet Explorer

Internet Explorer 9 і нижче має максимальне значення кількості селекторів у файлі стилів рівне 4,096. Також є ліміт 31 як для зовнішніх файлів стилів так і для тегів style на сторінку. Все, що перевищує цей ліміт буде проігноровано браузером. Або розділіть ваш CSS код, або проведіть рефакторинг. Я б запропонував останнім. В якості корисної замітки, ось як браузери підраховують селектори:

/* Один селектор */
.element { }
/* Два селектора */
.element,
.other-element { }
/* Ще три селектора */
input[type=»text»],
.form-control,
.form-group > input { }

Як працює position

Елементи, яким встановлено властивість position: fixed; розташовуються відносно вікна браузера. Елементи з position: absolute; розташовуються відносно найближчого батьківського елемента, яким встановлено властивість position, відмінне від static (наприклад, relative, absolute або fixed).

Позиція і ширина

Не задавайте width: 100%; елементу, який має абсолютну або фіксовану позицію, ліву або праву. Використання width: 100%; — це те ж саме, що поставити одночасно left: 0; і right: 0;. Використовуйте або одне або інше, але не все відразу.

Фіксована позиція і трансформації

Браузери порушують position: fixed; коду батьківського елементу заданий набір трансформацій (transform). Використання трансформацій створює новий контейнерний блок, який примусово задасть батьківського елементу position: relative; і фіксований елемент буде вести себе так, якщо б він мав position: absolute;

Подивіться демо або прочитайте пост Еріка Майєра на цю тему.