Ще один спосіб відцентрувати div?!
...і не тільки.
Учора, 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 гривень. Чому? Історія про це десь у відео ;)
2 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів