Новые возможности в 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 значительно облегчают жизнь фронтенд-разработчикам, делая код более чистым, а страницы — более адаптивными и производительными. Использование этих фич поможет не только упростить разработку, но и улучшить пользовательский опыт, что особенно важно в условиях высокой конкуренции.