Skip to content

Latest commit

 

History

History
219 lines (157 loc) · 13.5 KB

index.md

File metadata and controls

219 lines (157 loc) · 13.5 KB
layout
default

Contents

Декларуйте doctype

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

<!DOCTYPE html>

Упускання doctype може спричиняти помилки з неправильними таблицями, формами тощо, оскільки сторінка буде виведена в примхливому режимі.

Математика box моделі

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

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;
  }
}

Допоможіть! Якщо у вас є посилання на повідомлення про помилку Apple або WebKit, я хотів би його включити. Я не впевнений, куди повідомити про це, оскільки баг стосується лише мобільного, а не десктопного Safari.

Спочатку float-и

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

<div class="parent">
  <div class="float">Плаваємо</div>
  <div class="content">
    <!-- ... -->
  </div>
</div>

Float-и та очищення

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

Використовуйте micro clearfix, аби очистити ваші float-и за допомогою окремого класу.

.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 */ під час очищення float-ів, оскільки властивість може бути використана з інших причин.

Float-и і обчислювана висота

Батьківський елемент, який складається лише з float-ів, матиме висоту height: 0;. Додайте clearfix для батьківського елементу, аби змусити браузерів обчислювати висоту.

Плаваючі елементи зразу є блоками

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

.element {
  float: left;
  display: block; /* Не має необхідності */
}

Цікавий факт: Роки тому, ми мали встановлювати display: inline; для більшості float-ів для правильної роботи в IE6 аби уникнути баг подвоєного відступу. Проте, ці часи давно минули.

Колапс вертикально суміжних margin-ів

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

Горизонтально суміжні margin-и ніколи не руйнуються.

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

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

Внутрішній контур Firefox для кнопок

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

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

Перегляньте це JS Bin посилання, як приклад вирішення проблеми згаданої в попередній секції.

Професійна порада! Не забувайте додавати особливий стиль фокусу для кнопок, посилань та полів введення (inputs). Забезпечення доступності є першочерговим завданням, як для професійних користувачів так і для людей, що мають порушення зору.

Завжди задавайте атрибут type для тегу <button>

Типове значення submit, означає, що будь-яка кнопка в формі може відправити форму. Задавайте type="button" для всіх тегів <button>, що НЕ відправляють форму і type="submit" для тих, що відправляють.

<button type="submit">Зберегти зміни</button>
<button type="button">Скасувати</button>

Для дій, які вимагають використання тегу <button> і є не всередині форми використовуйте type="button".

<button class="dismiss" type="button">x</button>

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

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

Браузери Internet Explorer версії 9 та нижче мають максимальний ліміт в 4096 селекторів на кожну таблицю стилів. Існує також ліміт в 31 комбіновану таблицю стилів і використань <style></style> на сторінку. Все, що використовується після цього ліміту - ігнорується браузером. Потрібно або розділити ваш CSS або покращити код(провести рефакторинг). Я пропоную останній варіант.

Як корисна примітка, ось як браузери підраховують селектори:

/* Один селектор */
.element { }

/* Ще два селектори */
.element,
.other-element { }

/* Ще три селектори */
input[type="text"],
.form-control,
.form-group > input { }

Пояснення позиціонуванню

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

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

Не встановлюйте width: 100%; на елементі, що має position: [absolute|fixed];, left, та right. Використання width: 100%; це те саме, що й комбіноване використання left: 0; та right: 0;. Використовуйте щось одне.

Фіксована позиція та перетворення

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

Дивіться демо і читайте публікацію Еріка Мейера з цього приводу.