Использование CSS свойства display: contents для адаптивного дизайна

В современной веб-разработке, каждый фронтенд-разработчик несомненно знаком с CSS и его свойством display. Но не все знают о его менее известном, но весьма полезном значении contents. Этот параметр может играть ключевую роль в создании адаптивных макетов, особенно когда дело касается перестройки элементов DOM в ответ на изменение размеров экрана. Рассмотрим его использование на практическом примере, дополненном конкретными кодовыми примерами.

Пример: Адаптивная карточка товара

Допустим, у нас есть следующая HTML структура для карточки товара:

<div class="product-card">
<img src="product.jpg" alt="Product Image">
<h2>Product Name</h2>
<div class="product-info">
<span class="quantity">Only 3 left</span>
<button>Buy Now</button>
</div>
</div>

На десктопных экранах этот порядок выглядит уместно, но на мобильных устройствах хочется изменить расположение элементов так, чтобы информация о количестве товара оказалась в самом начале карточки.

Традиционный подход: Flexbox или Grid

Мы могли бы использовать CSS Grid для реорганизации элементов:

 

.product-card {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.product-info {
display: flex;
justify-content: space-between;
}

И применить order к элементу с количеством:

@media (max-width: 600px) {
.quantity {
order: -1;
}
}

Однако, так как .quantity находится в .product-info, изменение его порядка возможно только внутри этого блока.

Решение с display: contents

Применяем display: contents к .product-info для изменения восприятия DOM-структуры:

@media (max-width: 600px) {
.product-info {
display: contents;
}
}

Теперь .quantity и button воспринимаются как непосредственные дочерние элементы .product-card, и мы можем управлять их порядком на всём уровне карточки товара:

@media (max-width: 600px) {
.quantity {
order: -1; /* Это теперь работает, как ожидалось */
}
}

Практические ограничения

Важно помнить, что display: contents может влиять на доступность контента, так как некоторые скринридеры могут игнорировать структурные изменения. Кроме того, при использовании display: contents, стили родительского элемента больше не применяются к его содержимому.

Свойство display: contents открывает новые возможности для фронтенд-разработчиков, позволяя создавать более гибкие и адаптивные макеты без сложных изменений в структуре HTML, но требует аккуратного подхода при использовании для обеспечения доступности.

Оцените статью