Нові можливості в CSS і HTML5: круті оновлення та фішки

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

Курс з вивчення JavaScript

Можете пройти наш безкоштовний курс з вивчення JavaScript

1. CSS Grid Masonry Layout

Багато хто знає про популярне розташування «цеглинками» (masonry), де елементи вибудовуються у колонках з різною висотою, як на Pinterest. Раніше для його створення використовували JavaScript, але у 2024 році CSS Grid підтримує layout із використанням властивості grid-template-rows: masonry. Це дозволяє досягти того ж ефекту без єдиного рядка JavaScript, що покращує продуктивність і спрощує підтримку коду.

Як використовувати:

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-template-rows: masonry;
	gap: 16px;
}

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

2. Властивість для покращення завантаження

CSS contain-intrinsic-size дозволяє задати розмір для контейнера, поки контент завантажується, щоб уникнути раптових зсувів при відображенні елементів. Ця властивість стала особливо корисною для зображень, відео та інших медіафайлів. Воно мінімізує негативний вплив на користувацький досвід і покращує показники Core Web Vitals, які грають важливу роль у SEO.

Приклад використання:

.image-container {
	contain-intrinsic-size: 300px 200px;
}

3. Маніпуляції з DOM на основі нащадків

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

Приклад:

.card:has(.cta-button) {
	border: 2px solid #4CAF50;
}

4. Container Queries: адаптивність на новому рівні

Container Queries стали революційною зміною у 2024 році. Вони дозволяють змінювати стиль компонента залежно від розмірів його батьківського контейнера, а не від розміру всього вікна браузера. Це суттєво полегшує роботу над складними макетами, особливо в компонентно-орієнтованій архітектурі, де елементи можуть змінюватись залежно від їхнього оточення.

Як це працює:

@container (min-width: 300px) {
	.card {
		font-size: 18px;
	}
}

5. Створення модальних вікон без JavaScript

Елемент

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

Приклад використання:

<dialog id="myDialog">
	<p>Це модальне вікно</p>
	<button onclick="document.getElementById('myDialog').close()">Закрити</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Відкрити діалог</button>

6. CSS Nesting: структуроване написання стилів

Nesting (вкладені стилі) — ще одна затребувана функція, що з'явилася в CSS. Вона спрощує написання вкладених селекторів і робить код більш читабельним, особливо в складних інтерфейсах із великою кількістю вкладених елементів.

Приклад синтаксису:

.card {
	padding: 20px;
 
	& h2 {
		font-size: 24px;
	}
 
	& .button {
		background-color: #333;
		color: #fff;
	}
}

7. Проста настройка кольору для форм

CSS accent-color дозволяє змінювати колір акцентів у формах, таких як чекбокси, радіокнопки та перемикачі. Раніше доводилося використовувати складні стилі та JavaScript для зміни цих елементів, але з accent-color це можна зробити в один крок.

Приклад

input[type="checkbox"] {
	accent-color: #ff5733;
}

8. Адаптивні зображення на новому рівні

Елемент став ще більш функціональним у 2024 році. Він підтримує зміни під різні щільності пікселів і розміри екранів, що особливо корисно для мобільних пристроїв. У поєднанні з атрибутом srcset, цей елемент дозволяє створювати адаптивні зображення, які виглядатимуть чітко і якісно на будь-яких пристроях.

Приклад

<picture>
	<source srcset="image-large.jpg" media="(min-width: 800px)">
	<source srcset="image-medium.jpg" media="(min-width: 400px)">
	<img src="image-small.jpg" alt="Опис зображення">
</picture>

Курс з вивчення JavaScript

Можете пройти наш безкоштовний курс з вивчення JavaScript

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