Колекція практичних порад і заміток по верстці

CSS Refresher

Це велика колекція практичних порад і заміток з верстки. Своєрідна пам'ятка для тих, хто щодня використовує CSS. Висвітлюються найрізноманітніші теми, від деталей поведінки плаваючих елементів до використання SVG і спрайтів. Проект постійно оновлюється, активне співтовариство github також бере в ньому участь, там додаються цікаві зауваження, про які, можливо, ви і не чули.

Від перекладача

Вітаю всіх, мене звуть Максим Іванов, і сьогодні я підготувала для вас переклад нотаток розробника з Сан-Франциско Васанта Крішнамурті (Vasanth Krishnamoorthy) «CSS Refresher». Web-програмування одна з найбільш швидко розвиваються галузей в наш час. Здавалося б, візьми якийсь відеокурс на tuts+ і опануй html-верстку, однак, як говорив розробник Opera Software Вадим Макєєв, виступаючи на конференції CodeFest, вони все одно це роблять погано. Але давайте подивимося, може ми і так всі це знаємо.

Зміст

  1. Позиціонування (position)
  2. Відображення елемента в документі (display)
  3. Плаваючі елементи (float)
  4. селектори CSS
  5. Ефективні селектори
  6. Переотрисовка і перерахунок
  7. CSS3 властивості
  8. CSS3 медіа-запити
  9. Адаптивний веб-дизайн
  10. переходи CSS3
  11. CSS3 анімації
  12. Масштабована векторна графіка (SVG)
  13. CSS спрайт
  14. Вертикальне вирівнювання
  15. Відомі проблеми

1. Позиціонування

CSS надає нам до 5 різних значень властивості position. Але по суті, лише 4 з них зазвичай використовуються.
div {
position: static; /* за замовчуванням */
position: relative;
position: absolute;
position: fixed;
position: inherit; /* не використовується */
}

Статичне (static за замовчуванням):
  • Єдина причина, по якій ви будете встановлювати це властивість елементу, ставлячи його статичним, це для того, щоб спеціально очистити деякий позиціонування, яке було застосоване до цього елемента за межами вашого контролю. Така ситуація досить рідкісна, так як позиціонування не успадковується каскадом.


Відносне (relative):
  • Ми можемо зміщувати внутрішні елементи в різних напрямках, зрушувати від верхньої, правій, нижній і лівої межі щодо нашого батьківського контейнера. Це властивість є відправною точкою для внутрішніх елементів даного блоку, це дуже важлива властивість.
  • При встановленні в положення relative елементи займають один і той же обсяг простору на сторінці, точно також, якщо б ми встановили їх у становище static.
  • Тепер ми маємо можливість використовувати Z-індекси, завдяки яким елементи на веб-сторінці можуть накладатися один на одного в певному порядку, і дійсно Z-індекси насправді не вміють працювати зі статичними елементами. Навіть якщо ви не встановите значення Z-індексу, цей елемент все одно буде відображатися поверх інших статично-позиціонованих елементів.
  • Це обмежує сферу абсолютного позиціонування дочірніх елементів. Будь-який елемент, який є дочірнім щодо позиціонуємого елемента, може бути абсолютно позиціонується всередині цього блоку.


Абсолютна (absolute):
  • Коли ви застосовуєте абсолютне позиціонування, елемент прорисовується в новому потоці документа. Це означає, що він більше не займає ніякого простору серед всіх елементів, які його оточували, коли він був у статичному або відносному стані. Просто ми вказуємо елементу, де йому бути і він прилипне.
  • елемент з положенням absolute, ви можете вказати позиціонування зверху, зліва, знизу та праворуч, щоб встановити розташування, в кінці кінців. Пам'ятайте, що ці значення будуть відносно найближчого батьківського елемента з відносним (або абсолютним) позиціонуванням. Якщо немає такого батька, він буде розміщуватися щодо самої сторінки.
  • Компроміс, і найбільш важлива річ, яку потрібно пам'ятати про абсолютне позиціонування полягає в тому, що ці елементи видаляються з основного потоку елементів сторінки. Елемент з цим типом позиціонування не залежить від інших елементів і не впливають на інші елементи.


Фіксоване (fixed):
  • Подібно абсолютного позиціонування, елемент, який ми обрали, видаляється з основного потоку і створюється в новому потоці документа. Проте, в цьому випадку, елемент позиціонується щодо самого вікна браузера.
  • Основна відмінність від абсолютного позиціонування в тому, що елемент завжди бере своє положення відносно вікна браузера.
  • На відміну абсолютного позиціонування, фіксований елемент прикріплюється до точки на екрані і не змінює свого положення при перегляді веб-сторінки.


Наследованное (inherit):
  • Це властивість працює, виходячи з своєї назви. Елемент успадковує значення батьківського елемента. Як правило, елементу присвоюється статичне значення, якщо у батьків немає ніякого значення позиції.


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


Підводні камені:
  • Ви не можете поєднувати властивість position і властивість float. Якщо ви вкажіть обидва властивості вашому елементу, дійсним буде використовуватися властивість, яке було зазначено останнім.
  • Зовнішні відступ (margin) не створюють проблем абсолютно-позиціонувати елементів. Припустимо у вас є звичайний параграф (p елемент) з нижнім відступом 20px (пікселів). Нижче нього зображення з верхнім відступом 30px. Простір між параграфом і зображення не буде 50px (20px + 30px), а скоріше 30px (30px > 20 пікселів). Цей момент називається схлопывающиеся відступи. Два відступу комбінують (або згортаються) для того, щоб об'єднатися в один. Абсолютно-які позиціюють себе елементи не відстежують відступи інших елементів, тим самим перед вами не виникає неочевидний казус.


До прочитання:
Absolute, Relative, Fixed Positioning: How Do They Differ?
CSS Positioning 101
Learn CSS Positioning in Ten Steps

2. Відображення елементів у документі

Кожен елемент веб-сторінці являє собою прямокутний блок. Властивості display визначає як повинен вести себе цей прямокутний блок, яким він повинен бути.

div {
display: inline;
display: inline-block;
display: block;
display: run-in;
display: flex;
display: grid;
display: none;
}


За замовчуванням, всі елементи є малими (inline), крім тих, хто свідомо браузером вказаний як блочний (block). В кращому випадку, за допомогою своїх користувальницький стилів, ви можете скинути рядковий елемент, задавши йому значення «block».

Рядковий (inline):
  • Рядкові елементи, що мають «inline» за замовчуванням. Такі як span, b, em і тд.
  • CSS властивості верхнього і нижнього margin/padding відступів буде ігноруватися, але будуть застосовні лівий та правий margin/padding відступи. Тобто в цьому випадку, у нас є рухається по горизонталі, а не по вертикалі.
  • Для таких елементів ігноруються властивості ширини і висоти.
  • Якщо елемент є двозначним (має float), в цьому випадку, він за умовчанням приймає значення «block» і стає блоковим.


Блочно-рядковий (inline-block):
  • Блоковий елемент, який обтекаєтся іншими елементами подібно рядковий.
  • Такого елемента можна задавати ширину і висоту, зовнішні і внутрішні відступи (рух по вертикалі і горизонталі).
  • Спершу такий елемент отрісовиваємих подібно елемента зі значенням «block» (немов ви вбудовуєте зображення, img), проте потім відображається браузером як рядковий елемент.
  • Існує проблема, яка виникає з зовнішніми відступами.


Блоковий (block):
  • Наприклад, існує ряд елементів, які мають значення «block». Такі як div, section, ul і тд.
  • Блокові елементи не йдуть один за одним, як рядкові, вони переносяться на новий рядок. Якщо, наприклад, ширина не задана, блок буде розширено до ширини батьків і заповнить його.
  • Ігнорується vertical-align.


Контекстний (run-in):
  • Визначає елемент як блоковий або вбудований в залежності від контексту.
  • Не підтримується в Firefox + специфікація не дуже добре визначена.
  • Якщо після елемента з display в значенні run-in слід блок, то він стає в один рядок з ним і є його частиною. Інакше елемент викликає розрив рядка.


Прихований (none):
  • Повністю видаляє елемент зі сторінки.
  • У той час як елемент знаходиться в DOM структурі документа, він видаляється візуально і, в будь-який інший момент, ви можете змінити цей стан.


Табличний (table):
  • Існує цілий набір значень, які дозволяють змінити стан елементів, що не є таблицею, перетворюючи такі елементи у табличне подання.
  • Таке застосовується досить рідко, іноді все це може носити більше смислове навантаження у вашому коді, якщо ви використовуєте унікальні позиціонування таблиць.


div {
display: table;
display: inline-table; /* таблиця, але в стилі inline-block */
display: table cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}


Щоб використовувати, просто імітуйте нормальну структуру таблиці. Приклад:
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table cell;">
Гидко, але іноді корисно.
</div>
</div>
</div>


Адаптується (flex):
  • Спрямована на надання більш ефективного способу вирівнювання і розподілу місця між елементами в контейнері (батьківському блоці), навіть якщо їх розмір невідомий або динамічний.
  • Основна ідея flex-блоків, володіти здатністю змінювати свою ширина/висота (та інше), щоб найкращим чином заповнювати вільне місце (в основному, для підтримки адаптивності на всіх видах пристроїв і розмірів екрана).
  • В основному елементи будуть розподілятися або вздовж головної осі або вздовж поперечної осі контейнера.
  • Flex-блоки краще всього підходять для складових частин програми і дрібномасштабних компонентів на сторінці, в той час як grid-блоки більше використовується для компонентів на сторінці великого масштабу.
  • Також існує inline-block, inline-table, існує і inline-flex.


Сітковий (grid):
  • Значення grid дозволяє нам створювати макет сітки. Вона спрямована на вирішення проблем зі старими методами компонування блоків, що мають float і inline-block, які в свою чергу мають недоліки, і дійсно не призначалися для макета сторінки.
  • Основна ідея grid-концепції, керувати вмістом, забезпечуючи механізм розподілу наявного простір блоків в стовпці і рядки, з допомогою набору заздалегідь установлених розмірів.
  • Разом з цим фактом ми можемо усунути проблеми, які постають при розробці, спираючись на стару техніку розробки сайтів, тепер ви витрачаєте менше зусиль.
  • Не підтримується. Тільки в IE10+.
  • Також існує inline-block, inline-table, inline-flex, існує і inline-grid


До прочитання:
Flexbox Froggy
CSS Almanac: Display
The Difference Between «Block» and «Inline»
Learn CSS Layout: The «display» property

3. Плаваючі елементи

div {
float: none; /* за замовчуванням */
float: left;
float: right;
float: both;
float: inherit;
}

  • Float визначає, по якій стороні буде вирівнюватися елемент, при цьому інші елементи будуть обходити його з інших сторін. Плаваючі (оточуючі) елементи спочатку шикуються в нормальному потоці, потім утворюється новий потік, і вони зсуваються або вправо, або вліво (в залежності від вибраного значення) в батьківському контейнері. Іншими словами, вони йдуть по порядку один за одним. Враховуючи, що в батьківському контейнері є достатньо вільного місця, ці плаваючі елементи не підлаштовуються і не вирівнюються для розподілу простору між цими самими елементами.
  • Як правило, плаваючий елемент обов'язково повинен мати фіксовану ширину. Це гарантує, що float веде себе так як і очікувалося, уникаючи проблем в деяких браузерах.
  • Елемента можна поставити п'ять значень: left, right, both, inherit, і none. Присвоєння значення «left» говорить елементів, що йдуть в DOM структурі, що вони повинні обходити цей елемент по верхній межі плаваючого елементу з лівого краю.
  • Правило, яке я виявив для себе, прекрасно працює для моїх float-макетів.У своєму HTML коді, я майже завжди спочатку створюю плаваючі елементи під час розмітки, перш ніж додавати прості елементи, які можуть взаємодіяти з ними. Ви економите більшу частину часу, і це дає бажаний результат.
  • Але і тут бувають проблеми, коли ви ставите в батьківський блок плаваючі елементи, батьківський контейнер не може визначити динамічно висоту своїх дочірніх елементів, тому батьківський контейнер буде мати висоту рівну нулю. Це може поламати вашу верстку. Існує метод, який дозволяє батьківського елементу, визначити свій простір з урахуванням будь-яких плаваючих елементів всередині. Можна використовувати CSS властивість overflow (переповнення) зі значенням hidden (приховати). Зверніть увагу, що значення властивості overflow не призначений для такого роду використання, і може викликати деякі проблеми, такі як приховування вмісту в даний момент або поява небажаних смуг прокручування.


Хак: для очищення плаваючих елементів краще застосовувати 'overflow:auto' до батьківського елементу.

Зверніть увагу, що цей трюк не очищає плаваючі елементи — він просто розтягує батьківського контейнера. Ви можете примусово очистити float, якщо ви додасте очисний елемент після останнього плаваючого елементу, або ви можете додати в будь-якому потрібному вам місці, створивши тим самим новий потік. Батьківський елемент не вміє очищати дочірні плаваючі елементи.

9 правил:
1. Плаваючі елементи притискаються до кордонів своїх контейнерів, але не далі.

2. Будь плаваючий елемент знаходиться або поруч, або нижче попереднього елемента. Якщо елементи притиснуті вліво, другий елемент з'явиться праворуч від першого. Якщо вони притиснуті праворуч, другий елемент з'явиться зліва від першого (reverse).

3. Елемент з лівим обтіканням, не може бути правіше, ніж елемент з правим обтіканням.

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

5. Плаваючий елемент не може бути вище свого сусіда плаваючого елементу.

6. Плаваючий елемент не може бути вище свого сусіда рядкового елемента.

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

8. Плаваючий елемент повинен бути поміщений як можна вище.

9. Елемент з лівим обтіканням повинен бути поміщений якомога далі вліво, як це можливо, елемент з правим обтіканням повинен бути поміщений як можна далі вправо, як це можливо.

Підводні камені:
<img src="http://lorempixum.com/200/200/">
<p>Lorem ipsum...</p>


img {
float: right;
margin: 20px;
}


Зовнішні відступи, які ми додаємо до абзацу застосовується далеко праворуч від зображення. Це відбувається тому, що зображення — блок! Ось чому він не збільшує простір між зображенням і абзацом.

До прочитання:
Clearing floats
Everything You Never Knew About CSS Floats
CSS Floats 101

4. Селектори CSS

div#container > ul {
border: 1px solid black;
}


Різниця між вибіркою X Y і X > Y в тому, що в останньому будуть вибрати тільки прямі нащадки.

ul ~ p {
color: red;
}


Цей селектор схожий на Х + Y, але він менш суворий. У той час як суміжний селектор (ul + p) вибере тільки перший елемент, який безпосередньо передував після р, у нашому випадку, це більш узагальнена вибірка. В нашому випадку він відбере всі елементи p, наступні за елементом ul.

a[href*="google"] {
color: #1f6053;
}


Зірка означає, що вказане значення має з'явитися де-то значення атрибута.

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}


Якщо ми хочемо вибрати всі посилання, які мають атрибут href, що починається з http, то ми можемо використовувати цей селектор, показаний вище.

a[href$=".jpg"] {
color: red;
}


І знову, ми використовуємо регулярні вираження символ — $, який шукає з кінця рядка. У цьому випадку ми шукаємо всі посилання на зображення, що закінчуються на формат JPG.

a[data-info~="image"] {
border: 1px solid black;
}


Тильда (~), символ дозволяє шукати атрибут, в якому є значення розділені пробілами.

div:not(#container) {
color: blue;
}


Вибирає всі елементи div, за винятком одного, елемент, який має ідентифікатор контейнера.

p::first-line {
font-weight: bold;
font-size: 1.2 em;
}


Ми можемо використовувати псевдо-елементи (позначення ::) в стилі фрагментів елемента, наприклад, вибрати рядок або першу букву елемента. Це працює тільки для блокових елементів.

li:nth-child(3) {
color: red;
}


nth-child псевдо-класи орієнтований на конкретні елементи в стеку (набір однакових за типом елементів). Вона приймає ціле число в якості параметра, тим не менш, відлік починається не з нуля. Якщо ви хочете витягти другий елемент списку, використовуйте li:nth-child(2). Ми навіть можете використовувати витягувати чергуються елементи стеку, щоб вибрати змінний набір нам необхідно в якості параметра передати змінну (інкремент). Наприклад, ми можемо витягти кожен четвертий елемент списку таким чином li:nth-child(4n).

li:nth-last-child(2) {
color: red;
}


Якщо у вас величезний список елементів у UL, та нам потрібен лише передостанній елемент? Нехай у нас є список з 10 елементів, що ми могли зробити так li:nth-child(9), але якщо ми не знаємо кількість елементів, у цьому випадку, краще використовувати варіант, показаний вище.

li:first-child {
border-top: none;
}

li:last-child {
border-bottom: none;
}


Це особливо корисно при завданні рамок і відступів для списків і таблиць.

До прочитання:
The 30 CSS Selectors you Must Memorize

5. Ефективні селектори

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

id (#myid)
class (.myclass)
tag (div, h1, p)
adjacent sibling (h1 + p)
child (ul > li)
descendant (li a)
universal (*)
attribute (a[rel="external"])
pseudo-class and pseudo element (a:hover, li:first)


До прочитання:
CSS Selectors: Should You Optimize Them To Perform Better?

6. Переотрисовка і перерахунок

Переотрисовка (repaint):
Також відомий, як redraw — це подія, яка відбувається всякий раз, коли щось робиться видимим на сторінці, якщо раніше воно було приховано (visibility:hidden, overflow:hidden, display:none, та ін), або навпаки (visibility:visible, overflow:auto, display:static, та ін), коли відбуваються якісь зміни в макеті. Прикладом може бути що завгодно: додавання елементу рамки, зміна кольору фону, зміна видимості стилів — все це призводить до переотрисовке сторінки. Тим самим дана подія може дорого вам обійтися в плані продуктивності, так як навантажує браузерний движок пошуком, проходами по всім елементам, щоб визначити, що є видимим, а що повинно бути приховано.

Перерахунок (reflow):
Перерахунок (або перекомпонування) носить більш значний характер. Ця подія відбуватиметься кожного разу, коли відбуваються маніпуляції з DOM-деревом HTML документа, або коли стиль, який впливає на розташування, змінюється у елемента, ця подія відбувається всякий раз, коли атрибут class у елемента змінюється, або всякий раз, коли змінюється розмір вікна браузера. Мета перерахунку в тому, щоб визначити, де різні частини сайти тепер повинні відображатися. Якщо ви зміните батьківські властивості, тоді його нащадки також будуть перераховані. Елементи, які з'являються після того, як DOM було сформовано, будуть сформовані заново. Якщо змінюється дочірній елемент, тоді буде перерахований і батьківський елемент, щоб врахувати зміни своїх нащадків. Потім, відбувається переотрисовка.

Перерахунок також дуже дорого обходиться в плані продуктивності і є однією з головних причин повільної роботи скриптів, особливо на пристроях з низькою обчислювальної потужності, таких як телефони.

Мінімальний перерахунок (minimal reflow):
Довгий перерахунок може вплинути на весь документ, всю веб-сторінку. Чим більше документ, тим довше перерахунок. Менше HTML-коду краще продуктивність. Елементи з абсолютним позиціонування або фіксованим, не впливають на структуру головного документа, так як вони знаходяться в окремому потоці, якщо в них відбулися зміни, тільки вони будуть схильні перерахунку. Звичайно, документ, в якому відбудуться зміни, все одно будуть повністю переотрисованы, але ця проблема має слабкий характер, ніж перерахунок всього DOM-дерева.

Так що анімація не повинні бути застосована до всього документа, було б кращим, якби анімації застосовувалися тільки для позиціонованих елементів. Для більшості випадків, це дуже важливо.

Що викликає перерахунок:
— Зміна розміру вікна
— Зміна шрифту
— Додавання або видалення стилів
— Динамічна зміна, користувач вводить текст в поле введення
— Активація CSS псевдо-класів, наприклад, подія :hover
— Маніпулювання з атрибутом class
— Сценарії маніпулювання з DOM-деревом
— Розрахунок значень offsetWidth і offsetHeight
— Завдання властивостей атрибут style

Повний список, складений Підлогою Айришом (Paul Irish), того, що призводить до перерахунку DOM можна ознайомитись тут.

Як звести до мінімуму вплив перерахунку на продуктивність:
— Зміна атрибутів класу у елементів, робіть як можна рідше (мінімум маніпуляцій в DOM-дереві).
— Уникайте встановлення декількох вбудованих стилів.
— Використовуйте анімацію до елементів, які мають фіксоване або абсолютне позиціонування.
— Уникайте табличній розмітки.
Навіть незначні зміни в комірці таблиці викличуть перерахунок на всіх інших вузлах таблиці.
— Не використовувати регулярні вирази в CSS (тільки в IE)

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

Надмірні невикористовувані стилі, швидше за все, вони будуть бити за продуктивність, ніж будь-які селектори, які ви додали в свій документ. Слід прибиратися в своїх css-стилі. 3000 рядків непотрібних або надмірних на сторінці стилів, в наш час, це не рідкість. Якщо різні стилі використовуються на різних сторінках вашого сайту, розбийте один і єдиний styles.css на кілька додаткових, це буде найкращим варіантом.

До прочитання:
Reflows & Repaints: CSS performance making your JavaScript slow?
Writing efficient CSS selectors
Why do browsers match CSS selectors from right to left?
CSS performance revisited: selectors, bloat and expensive styles

7. CSS3 властивості

border-radius:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;


Створює закруглені краї елементів. Можна також використовувати для створення кіл.

Пам'ятайте, оскільки не у всіх браузерах реалізовані формальні CSS3 правила, вам може знадобитися використовувати спеціальні браузерні префікси (-webkit-, -moz-, -ms-, -o-) при ініціалізації css-правил, або ви можете використовувати css-препроцессоры для полегшення написання css-коду.

box-shadow:
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;


Властивість дозволяє нам легко реалізовувати множинні тіні (зовнішній або внутрішній) у блокового елемента, визначаючи значення кольору, розміру, розмиття і зміщення.

Так як всі інші браузери давно підтримують css3 властивості, ми з вами далі будемо згадувати тільки IE.
Підтримка: IE9+

box-shadow приймає чотири параметри: x-зміщення, y-зміщення, розмиття, колір тіні.

Перше значення визначає горизонтальне зміщення тіні, з позитивним значенням зміщення тіні праворуч від елемента, та від'ємне значення зліва.

Друге значення визначає вертикальне зміщення тіні, з позитивним значенням зміщення тіні від нижньої частини елемента, та від'ємне значення зверху.

Якщо ми вказуємо третє значення, ми визначає відстань розмиття тіні. Допустимі тільки позитивні значення, і чим більше значення, тим більше будуть розмиті краї.

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

-webkit-box-shadow: 0 0 20px #333 inset;
-moz-box-shadow: 0 0 20px #333 inset;
box-shadow: 0 0 20px #333 inset;


Необов'язковий ключове слово 'insert' можна поставити, після значень розміру і кольору тіні. Якщо воно є, тоді тінь буде намальована всередині елемента.

Підтримка: IE9+

text-shadow:


color: #fff;
text-shadow: 0 0 50px #333;


Текстова схожа на тінь тіні рамок за винятком того, що вони є тінями для тексту, а не тінню всього елемента. На щастя, немає браузерного префікса, для того, щоб використовувати цю властивість.

Параметри тіні для тексту такі ж, як для box-shadow за винятком того, що відсутня вставка тексту за допомогою ключового слова.

Як з box-shadow, можна мати кілька текстових тіней просто розділяючи їх комами. Ось приклад, що створює ефект палаючого тексту:

text-shadow: 0 0 4px #ccc,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -18px 18px #f20;


Підтримка: IE10+

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

Градієнт — це, як правило, один колір, що плавно переходить в інший, але в CSS ви можете контролювати кожен аспект того, як це все буде відбуватися, від направлення до кольорового насичення.

.gradient {
/* як запасний варіант */
background-color: red;

/* буде верхній позицією, якщо браузер підтримує його */
background-image: linear-gradient(red, orange);

/* ці властивості скинуть інші властивості, як фон-позиція, браузер зрозуміє, що ви хочете від нього */
background: red;
background: linear-gradient(red, orange);
}


Підтримка: IE10+

Лінійні градієнти:
Мабуть, найпоширеніший і корисний варіант. По осі реалізація градієнта може йти зліва-направо, зверху-вниз, або під будь-яким кутом, який ви оберете. Якщо ви не ставите кут, тоді за замовчуванням буде задана вісь зверху-вниз. Щоб задати вісь зліва-направо, ви повинні вказати додатковий параметр на початку лінійного градієнта, функцію, що починається зі слова «to right», що вказує напрям, «направо». Слово «to» лише синтаксична вставка для визначення також кутів. Ви не обмежуєте себе лише двома кольорами. Насправді ви можете використовувати колірну палітру. Ви можете також оголосити, де ви хочете показати той чи інший колір. Все це називається «color-stops».

.gradient {
height: 100px;
background-image:
linear-gradient(
to right,
red,
yellow 10%
);
}


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

Існують три різних синтаксису, які браузери підтримують:
— Старий: оригінальний движок WebKit і його єдиний спосіб, використовуємо from() і color-stop()
— Рідко використовуваний: стара система кутів, наприклад, ключове слово «to left»
— Сучасний: нова система кутів, наприклад, ключове слово «to right»

До речі стара система градусів працює і зараз, хоча новий синтаксис трохи відрізняється. За старим способом ми визначаємо 0deg і зліва направо і йде обертання проти годинникової стрілки, в новій системі (зазвичай без префікса) спосіб визначає 0deg як знизу вгору й за годинниковою стрілкою.

Формула: OLD (or TWEENER) = (450 — new) % 360
Або навіть простіше: NEW = 90 — OLD, OLD = 90 — NEW
Старий синтаксис: linear-gradient(135deg, red, blue)
Новий синтаксис: linear-gradient(315deg, red, blue)

Радіальні градієнти:
Радіальний градієнт відрізняються від лінійних тим, що він починає працювати в одній точці і виходить назовні. Градієнти часто використовуються для імітації освітлення, яке, як ми знаємо, не завжди пряма, так що вони можуть бути корисними, щоб зробити градієнтом більш природні речі.

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

Можливими значеннями є: найближчий, кутовий, найближча сторона, найдальший куток, самий дальня-бічна сторона. Ви можете міркувати так: «я хочу, щоб цей радіальний градієнт запускався з центральної точки до такої точки, і нехай скрізь заповнюється кольором». Все просто, ви можете вказати певні точки з допомогою «at ______» першого параметра.

Підводні камені:
Є знову три різних синтаксису, які підтримують браузери:
— Старий: оригінальний движок WebKit і його єдиний спосіб, використовуємо from() і color-stop()
— Рідко використовуваний: ваші значення, які ви вказуєте з центру, вони можуть зламатися в браузерах, які підтримують як раз новий синтаксис (з префіксами) і нову систему кутів, тому потрібно відслідковувати цей момент.
— Сучасний: використовуйте зв'язку, «circle closest-corner at top right»

Рекомендується використовувати autoprefixer як в postcss для обробки префіксів, щоб не мучиться з різними браузерами.

Повторювані градієнти:
Розмір градієнта визначає остаточний колір і розмір. Якщо ви вказали 20 пікселів, розмір градієнта (який потім повторюється) є 20 від 20px площі.

.repeat {
background-image:
repeating-linear-gradient(
45deg,
yellow,
yellow 10px,
red 10px,
red 20px /* визначає розмір */
);
}


Вони можуть бути використані разом з лінійним і радіальним варіаціями.

До прочитання:
Box-shadow, one of CSS3's best new features
CSS Almanac: box-shadow
CSS Gradients

8. CSS3 медіа-запити

Media-запити, що дозволяють визначати, в який момент які стилі повинні застосовуватися. Ви можете написати CSS для мобільних пристроїв, або налаштувати макет для друку.

Існує три способи виклику медіа-запитів (залежні стилі):
— По-перше, таблиці стилів у HTML або XHTML:

<link rel="stylesheet" type="text/css" media="all and (color)" href="/style.css">


— По-друге, у XML:

<?xml-stylesheet media="all and (color)" rel="stylesheet" href="/style.css" ?>


— І нарешті, в css-стилі, з допомогою правила import:

@import url("/style.css") all and (color);


— Або з допомогою правила media:

@media and all (color) { /* css-код */ }


В даний час, існує 13 мультимедійних можливостей контролювати стилі, виходячи з подій браузера: ви можете відстежувати ширину, висота пристрою, орієнтацію пристрою, зміна розміру вікна браузера, колір, колірний індекс, монохромність, дозвіл екрана, розгортку і сітки. Всі, крім орієнтації, сканування, і сітки може приймати min і max — префікси.

9. Адаптивний веб-дизайн

Параметри перегляду (viewport):
<meta name="viewport" content="width=device-width, initial-scale=1.0">


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

Ширина = частина ширини пристрою — ширина контенту (width=device-width), так ми встановлює ширину сторінки, щоб використовувати всю ширину екрану пристрою (який буде змінюватися в залежності від пристрою).

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

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

Не дозволяйте контенту залежати від конкретного виду екрана, задавайте фіксовану ширину, бо розміри екрану і ширина в css пікселях може варіюватися між пристроями, контент не повинен покладатися на конкретний екран якого-небудь пристрою, фіксована ширина добре, решта-ні.

Використовуйте media-запити, щоб застосовувати різні стилі для малих і великих екранів. Установка великої ширини для елементів сторінки, змусить вікно перегляду зменшити масштаб. Замість цього, розгляньте можливість використання відносної ширини значень, наприклад, «width: 100%». Також, будьте обережні з використанням великих абсолютних значень відносних зміщень позиціонування. Ваш елемент може піти за межі вікна перегляду пристрою.

Сітка сайту:
В теорії, чуйна сітка має 12 стовпців, і загальну ширину 100%, вона буде стискатися і розширюватися при зміні розмірів вікна браузера.

Спочатку переконайтеся, що всі HTML-елементи мають box-sizing властивість встановлене в border-box. Це гарантує, що padding та border входять в загальну ширину і висоту елементів.

Додайте наступний код в ваш CSS:
* {
box-sizing: border-box;
}


Адаптивні зображення:
Зображення будуть чуйними і масштабованими, якщо властивість width дорівнює — 100%. Однак, найкращим варіантом буде набір max-властивостей ширини (width) в 100%, оскільки зображення буде масштабуватися (збільшуватися), нам необхідно робити розмір більше, а не змінювати її масштаб.

Фонові зображення можуть також реагувати на зміну розмірів і масштабування пристрою.

Якщо background-size має значення «contain», фонове зображення буде масштабуватися, і пробувати вписатися в область вмісту. Однак зображення збереже свої пропорції.

Якщо значення background-size задано зі значенням «100% 100%», фонове зображення буде розтягуватися, щоб покрити всю область вмісту.

Якщо background-size має значення «cover», фонове зображення буде масштабуватися, щоб покрити всю область вмісту. Значення «cover» зберігає співвідношення сторін, і визначає яку частину фону зображення, обрізати йому.

Велике зображення може бути ідеальним на великому екрані комп'ютера, але марним на невеликому пристрої. Для зменшення навантаження, ви можете використовувати медіа-запити для відображення різних зображень на різних пристроях.

Ви можете використовувати медіа-запит min-device-width, замість min-width, який перевіряє ширину пристрою, а не ширину вікна браузера. Тоді зображення не буде змінюватися при зміні розміру вікна браузера:

/* Для пристроїв менше, ніж 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* Для пристроїв 400px і більше: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}


В HTML5 введено новий елемент, який дозволяє визначати більш ніж одне зображення
(немає підтримки в IE, тільки Edge 13+).

Елемент працює аналогічно, як простий елемент img. Ви налаштовуєте різні джерела, перший джерело, є значенням за замовчуванням, потім у випадку, зміні екрана браузера, змінюється і джерело відображення:

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>


Атрибут srcset є обов'язковим і визначає джерело зображення. Атрибут media є необов'язковим і приймає медіа-запити, в якості умови. Ви повинні також визначити img-елемент для браузерів, які не підтримують picture (гарний запасний варіант).

Адаптивне відео:
Якщо властивість width дорівнює 100%, відеоплеєр буде реагувати і масштабуватися. Проте, він може бути розгорнутий в повноекранний режим. Кращим рішенням у багатьох випадках використання параметра max-width властивості, замість простого width.

video {
max-width: 100%;
height: auto;
}


До прочитання:
w3schools — Responsive Web Design
9 basic principles of responsive web design

10. Переходи CSS3

CSS переходи дозволяють робити плавну зміну будь-якого властивості елемента протягом встановленого часу.

— transition-property: властивість, яка буде змінюваним (в прикладі, змінюємо фонове властивість)
— transition-duration: скільки часу має триває перехід (0.3 секунди)
— transition-timing-function: як швидко веде себе перехід з плином часу (ease, один з типів)

transition-timing-function — дозволяє змінювати швидкість переходу, визначаючи її значення один із шести можливих: ease, linear, ease-in, ease-out, ease-in-out, і cubic-bezier (які дозволяють визначити свою власну криву часу).

Встановлює ефект переходу між двома станами елемента, вони можуть бути визначені за допомогою псевдоэлемента :hover або :active. Замість того, щоб додавати переходи для кожного із станів елемента, вам достатньо оголосити інструкцію переходу всього один раз, коли він знаходиться в нормальному стані.

a.foo {
padding: 10px 5px;
background: #9c3; /* нормальний стан */
-webkit-transition: background .3s ease,
color 0.2 s linear;
-moz-transition: background .3s ease,
color 0.2 s linear;
-o-transition: background .3s ease, color 0.2 s linear;

/* плавний перехід в новий стан, при спрацьовуванні якого або події, яка викликає зміни */
transition: background .3s ease, color 0.2 s linear;
}
a.foo:hover,
a.foo:focus {
color: #030;
background: #690;
}


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

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

input.ourInputBox:focus{
-webkit-transition:background-color 0.5 s linear;
background:#CCC;
}


У цьому випадку, ми вказуємо перехід під час події, тому ми не додавання додаткових непотрібних класів CSS. Ми застосовуємо переходу, коли поле введення отримує фокус.

До прочитання:
Understanding CSS3 Transitions
CSS Fundamentals: CSS3 Transitions
CSS animated properties

11. CSS3 анімації

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

— keyframes: використовується для визначення стилів елемента в моменти часу.
— animation properties: використовується для призначення набору ключових кадрів конкретного елементу і призначенням того, як буде змінюватися (анимироваться) цей елемент.

Ключові кадри (keyframes):
Ключові кадри — це основа анімації. Вони визначають те, як буде виглядати анімація на кожному етапі тимчасової шкали. Кожен набір ключових кадрів ( @keyframes) складається з:

— назву анімації: ім'я, яке описує анімацію, наприклад, bounceIn
— етапи анімації: кожен етап анімації представлений у відсотках, де 0% представляє початковий стан анімації, 100% — кінцеве. Ви можете створювати свої проміжні стани.
— css властивості: визначені для кожної стадії анімації тимчасової шкали

Давайте подивимося на просту реалізацію @keyframes, яку назвемо «bounceIn». Цей @keyframes складається з трьох етапів. На першому етапі (0%), цей елемент має непрозорість (opacity), встановлену в нуль, і плавний перехід масштабу, встановлений в 10% від початкового базового масштабу. На другому етапі (60%), наш елемент з'являється (непрозорість встановлюємо значення одиниця) і збільшується до 120% від свого розміру. На заключному етапі (100%), він повертається до свого початкового розміру.

@keyframes додається в ваш основний CSS-файл.

@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}


Властивості анімації (animation properties):
Після того, як був визначений набір ключових кадрів, ми повинні закріпити анимируемые властивості за елементом для функціонування.

Властивості анімації роблять дві речі:
— ми призначаємо @keyframes елементу, який хочемо анімувати
— визначаємо, як повинна вести себе анімація

Ми додаємо властивості анімації нашому CSS-селектору (або елементу), який хочемо анімувати, необхідно додати наступні дві властивості для того, щоб анімація набула чинності:
— animation-name: ім'я анімації, визначена @keyframes
— animation-duration: тривалість анімації в секундах (наприклад, 0.5 s) або мілісекундах (наприклад, 200ms).

Продовжуючи нашу розмову про bounceIn, ми додаємо animation-name та animation-duration, наприклад, до наших div-елементів, які хочемо анімувати.

div {
animation-duration: 2s;
animation-name: bounceIn;
}


Скорочений запис:

div {
animation: bounceIn 2s;
}


Оперую з @keyframes (набір ключових кадрів) і animation properties (властивості анімації), ми маємо просту анімацію.

У додаток до обов'язкових властивостями animation-duration і animation-name, можна додатково налаштувати і створити складну анімацію, використовуючи наступні властивості:
— animation-timing-function: задає швидкість кривий анімації
— animation-delay: визначає затримку для запуску анімації
— animation-iteration-count: вказує, скільки разів анімація повинна запускатися заново
— animation-direction: визначає, чи анімації йти у зворотному напрямку або чергуватися циклом
— animation-fill-mode: визначає стиль елементу, якщо анімація не відтворюється. Наприклад, коли вона закінчилася або коли має затримку
— animation-play-state: визначає, чи буде анімація працювати або буде припинено

Скорочений синтаксис:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Щоб додати декілька анімації елемента, ви можете просто поділити значення комами. Ось приклад:

.div {
animation: slideIn 2s, rotate 1.75 s;
}


До прочитання:
An Introduction to CSS Transitions & Animations
CSS Animation for Beginners
Simple CSS3 Transitions, Transforms, & Animations Compilation
Learn to Code Advanced HTML & CSS

12. Масштабована векторна графіка (SVG)

SVG — масштабована векторна графіка. Цей формат заснований на XML, який підтримує анімацію та інтерактивність. Іншими словами, SVG — це технологія, яка дозволяє нам створювати графіку з допомогою написання коду. Крім того, вона є масштабованої. А не векторною графікою таких форматів, як PNG і JPEG, які мають фіксовані розміри і не можуть бути масштабовані без втрати якості, SVG може бути, теоретично, масштабирована до будь-якого розміру.

Ми можемо використовувати ".svg" файл в нашому коді, встановивши його в якості джерела зображення, як це робиться з звичайними html-зображеннями, в цьому випадку, ми пишемо "<img src='say_hello.svg'>". Але це не так цікаво. Одна з найбільших особливостей формату SVG є те, що це насправді текстовий файл у форматі XML. Так що ми можемо відкрити, прочитати і взаємодіяти з ним — змінювати властивості елементів, такі як позиція, колір фону або шрифти, і все це робити за допомогою JavaScript і CSS. Крім того, кожен елемент SVG може бути анімована. І це дійсно класно.

Так що, в принципі, ми завжди повинні використовувати SVG замість PNG або JPEG, коли ми говоримо про базові геометричні фігури, логотипах і векторної графіки, в цілому.

Ось простий червоний круг у форматі SVG:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>


Основні параметри:
Звичайні координати точок (х, у = 0). В SVG початкова точка знаходиться у верхньому лівому кутку.
Кожне SVG-елемент має декілька основних параметрів:
— Х: координата x верхнього лівого кута елемента
— Y: координата y верхнього лівого кута елемента
— fill: колір фону елемента
— fill-opacity: прозорість фону елемента
— stroke: колір рамки
— stroke-width: ширина рамки

Плюси:
— Залежить від дозволу: масштабується без зміни якості зображення. Він широко використовується для пристроїв з екранами Retina і тими, хто їм близький.
— Маленький розмір. Елементи у форматі SVG, SVG-зображення займають набагато менше місця, ніж їхні близнюки, створені в растровому форматі.
— Гнучкість. За допомогою CSS, ви можете швидко змінити і налаштувати графіком на сайті, колір фону, положення логотипу на сторінці. Щоб зробити це, достатньо відредагувати файл в будь-якому текстовому редакторі.
— Можна переглянути вміст SVG-файл в будь-якому браузері (IE, Chrome, Opera, FireFox, Safari).
— Ніяких зайвих http-запитів, крім використання тега img
— SEO-орієнтований: спеціальні текстові мітки, опису зображення, можуть бути аналізувати пошуковими системами.
— Ми маємо повне управління через JavaScript для налаштування інтерактивності і анімації.

Мінуси:
— Розмір файлу росте дуже швидко, якщо об'єкт складається з великої кількості дрібних елементів.
— Неможливо прочитати частину графічного об'єкта (svg-елемента), це уповільнює читання коду, а значить і час вашої роботи.

Підтримка: IE9+

До прочитання:
Introduction to SVG
An introduction to SVG
The Simple Intro to SVG Animation
Icon fonts vs SVG — which is the best option?

Відео:
Using SVG — Intro
SVG Tutorials — Playlist
Working with SVG, A Primer — Sara Soueidan
You don't Know SVG — Dmitry Baranovskiy
SVG is for Everybody — Chris Coyier
Building Better Interfaces With SVG — Sara Soueidan
SVG Lessons I Learned The Hard Way — Sara Soueidan

13. CSS спрайт

CSS спрайт — це техніка оптимізації продуктивності, яка поєднує в собі кілька зображень в одному зображенні, званому спрайт-лист (sprite sheet) або набір плиток (tile set). Спрайт зменшують навантаження на мережу за рахунок скорочення кількості завантажень з сервера, необхідних для відображення веб-сторінки.

Комбінуючи кілька зображень в одному, всі зображення завантажуються одним http-запиту. Браузери обмежують кількість одночасних запитів на сайті може, так як http-запит повинен переконатися в підтвердженні зв'язку. Таким чином, спрайт важливі з тих же причин, за якими ми робимо також конкатенацию, мінімізацію, минификацию CSS і JavaScript файлів.

Використання спрайтів в CSS:
Ви задайте одне і теж фонове зображення кількох елементів, у вигляді css класу, але при цьому кожному з класів ви індивідуально вказуєте свою позицію і розміри від однієї частини спрайту.

.flags-canada, .flags-mexico, .flags-usa {
background-image: url('../images/flags.png');
background-repeat: no-repeat;
}

.flags-canada {
height: 128px;
background-position: -5px -5px;
}

.flags-usa {
height: 135px;
background-position: -5px -143px;
}

.flags-mexico {
height: 147px;
background-position: -5px -288px;
}


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

— Користувачі отримують швидке завантаження сторінок, так як зображення з'являються одночасно, як тільки спрайт був завантажений.
— Ми маємо велику пропускну здатність і знижує споживання ресурсів на сервері, зменшуючи кількості перевантажень мережі.

До прочитання:
CSS Sprites: What They Are, Why they're Cool, and How To Use Them
What are CSS Sprites
w3schools — Image Sprites

14. Вертикальне вирівнювання

Вертикальне вирівнювання — це одна з головних причин, по якій деякі люди думають, що css це нісенітниця. Ви дивуєтеся, напевно, чому так складно вирівняти вміст по вертикалі за допомогою CSS? Чому не можна створити властивість, яка робить це автоматично? Чому вертикальне вирівнювання не працює у мене?!

Відповідаючи на питання про вертикальному вирівнювання (vertical-align): це властивість застосовується тільки для рядкових елементів (inline) і табличних комірок (table cell), сподіваюся це вб'є ваші сумніви.

Це звичайно, дуже жорстоко, але навіть прийнявши цю істину, залишаються деякі труднощі, і зараз ви повинні відповісти самі собі перед тим як щось вирівнювати по вертикалі:
— ваш елемент є блочним або рядковим?
— ваш текст однорядковий або багаторядковий?
— чи завжди ви знаєте висоту вмісту?
— чи можете використовувати CSS3?

Метод міжрядкового інтервалу (line-height):
Цей метод можна використовувати, коли ви намагаєтеся вертикально вирівняти однорядковий текст, рядковий елемент або зображення.

Припустимо, у вас є наступний HTML:

<div class="parent">
<span class="child">Hello!</span>
</div>


Вам необхідно вирівняти елемент .child по вертикалі:
.parent {
height: 150px;
}

.child {
line-height: 150px;
}


Але якщо вміст елемента .child знаходиться безпосередньо всередині батьківського елемента .parent:

<div class="parent">
Hello!
</div>


У цьому випадку, ви можете встановити міжрядковий інтервал таким чином:
.parent {
height: 150px;
line-height: 150px;
}


Якщо замість span елемента у вас img елемент:
<div class="parent">
<img src="image.jpg" class="child-image"/>
</div>


Тоді вам потрібно змінити таким чином:
.parent {
height: 150px;
line-height: 150px;
}

.child-image {
vertical-align: middle; /* О диво, ми використовуємо це властивість :) */
}


Метод таблиць css (css table):
Цей метод полягає в имитировании таблиці за допомогою CSS. Припустимо, у вас є відповідний код HTML:

<div class="parent">
<div class="child">
Hello, CSS table method!
</div>
</div>


Ми вирівнюємо .child таким чином:

.parent {
display: table;
}

.child {
display: table cell;
vertical-align: middle; /* Так, воно й тут працює! */
}


В цьому випадку, нам неважливо яка висота у батьків, дочірній елемент завжди буде вирівняно по вертикалі. На жаль, цей метод не працює в старих версіях IE.

Метод абсолютного позиціонування (absolute position):
Цей метод має два способи реалізації:

1 — Якщо ви знаєте висоту елемента, який потрібно вирівняти по вертикалі
2 — Якщо ви не знаєте цієї висоти (працює тільки, якщо ви можете використовувати технології CSS3)

Припустимо, у вас є наступний HTML:

<div class="parent">
<div class="child">
Hello, absolute position method!
</div>
</div>


У першому випадку, ми можемо вирівняти .child таким чином:

.parent {
position: relative;
height: 300px; /* Важливо, щоб батько мав висоту відмінну від "авто" */
}

.child {
position: absolute;
top: 50%;
height: 50px;
margin-top: -25px; /* половина висоти дочірнього елемента */
}


У другому випадку:

.parent {
position: relative;
height: 300px; /* Важливо, щоб батько мав висоту відмінну від "авто" */
}

.child {
position: absolute;
top: 50%;
transform: translateY(-50%); /* нам не важливо знати висоту нашого елемента */
}


Насправді, це тільки основні способи, за допомогою який ви можете виконати вертикальне вирівнювання, проте це також можна зробити за допомогою flexbox, padding, stretching та ін

До прочитання:
Centering in CSS: A Complete Guide
6 Methods For Vertical Centering With CSS
Vertical align anything with just 3 lines of CSS
How to center in CSS

15. Відомі проблеми

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

Код може бути такою, щось на зразок цього:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>


li {
display: inline-block;
background: red;
}


Потім, ви дивіться в браузері. Так, вам здається, що все працює правильно, за винятком додаткових відступів між елементами. Ви, не питаючи нікого, обнуляєте відступ (margin: 0) в коді, однак, проблема залишається.

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

Отже, давайте спробуємо вирішити цю проблему.

Без пробілів в HTML:


Так що, якщо прогалини і є наша проблема, давайте видалимо їх.

<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>


Коментарі в HTML:


<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>


Це працює точно також як і попередній метод, просто прогалини ви замінюєте коментарями.

Нульовий розмір шрифту в батьківському контейнері:
Ви просто додаєте обнуляєте розмір шрифту (font-size: 0), в батьківському селекторі, тим самим, розмір пробілів зводиться до нуля, але тоді вам доведеться вказувати потрібний розмір шрифту у дочірніх елементах.

ul {
font-size: 0;
}

li {
display: inline-block;
background: red;
font-size: 14px;
}


Негативний зовнішній відступ у терміново-блокового елемента:
Досить очевидно, виявляється зовнішній відступ (margin) терміново-блочних (inline-block) елементів має 4px, тому, давайте негативний відступ 4px і все це буде нормально працювати.

li {
display: inline-block;
margin: 0 -4px;
}


До прочитання:
Fighting the Space Between Inline Block Elements
Remove Whitespace Between Inline-Block Elements
CSS display inline-block Extra Margin/Space

Додатковий матеріал:
5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours
CSS3 Mastery
Getting to Work with CSS3 Power Tools
CSS pro tips

Корисні вам переклади такого роду?

/>
/>


<input type=«radio» id=«vv70775»
class=«radio js-field-data»
name=«variant[]»
value=«70775» />
так
<input type=«radio» id=«vv70777»
class=«radio js-field-data»
name=«variant[]»
value=«70777» />
немає

Проголосував 21 людина. Утрималося-3 людини.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр
  • avatar
  • 0

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.