Ще один спосіб відцентрувати div?!

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

...і не тільки.

Учора, 16 січня, я провів перший цього року етер на каналі «Сергій Бабіч та Дивовижний світ веброзробки», і в гостях у мене побувала Ольга Шемена, з якою у форматі затишного та лампового лайвкодингу ми розбиралися з кількома цікавими фічами HTML та CSS. Я обрав лише декілька з них, щоб у вас лишався хоч якийсь інтерес переглянути запис, тож давайте глянемо, що ж цікавого було на етері.

text-wrap: balance

Просте та досить цікаве значення text-wrap, яке балансує довжину рядків. За замовчуванням, текстовий рушій бравзера просто втискає якомога більше слів в рядок, а що не влазить, те й переносить. На великих масивах тексту це не складає жодної проблеми, однак на заголовках на два-три рядки це може виглядати не дуже естетично, особливо, якщо на останній рядок переноситься якесь одне коротке слово. Ось цю проблему balance і вирішує.

h2 {
  text-wrap: balance;
}

Вертикальне центрування всередині блочних елементів

Скільки способів відцентрувати div ви знаєте? Записуйте ще один. Тепер достатньо вказати align-content: center для будь якого блочного елемента, і його вміст буде центруватися по вертикалі!

div {
  align-content: center;
}

Anchor positioning

Тултипи, тултипи, тултипи... Скільки рішень різного ступеню елегантности знає людство? Безліч! Однак час костилів минув, і прийшла пора писати нові, але навколо нативного рішення. Тепер за допомогою CSS ми можемо привʼязати позицію одного елементу будь де в DOM до іншого елемента будь де в DOM. І якщо нарешті глянути до специфікації, то виявиться, що нині існує величезна кількість налаштувань того, як будуть поводитись ось так позиціоновані елементи.

.target {
  anchor-name: --my-anchor;
}
.tooltip {
  position-anchor: --my-anchor;
}

HTML dialog

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

Тож нині маємо цілком робочий нативний елемент dialog, який дозволяє робити те, що від нього вимагається: відкриватися і закриватися. І навіть має нативний backdrop. І навіть закривається по Ecs! І має події. А якщо вам потрібні анімації, чи якісь ще екзотичні сценарії на кшталт закривати діалог по кліку на бекдроп — то вам ніхто не забороняє того зробити за допомоги старого доброго JS.

Словом, пора вже, пора.

<dialog id="myDialog">
  <h2>Styled Dialog</h2>
  <button onclick="window.myDialog.close()">Close</button>
</dialog>
<button onclick="window.myDialog.showModal()">Open Styled Dialog</button>

---

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

Приємного перегляду!

P.S. А, і ще вчорашній етер обійшовся мені в 15 000 гривень. Чому? Історія про це десь у відео ;)

👍ПодобаєтьсяСподобалось8
До обраногоВ обраному2
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Я тільки це завчив:
display: grid;
place-items: center;
Що ти з нами робиш😁

Підписатись на коментарі