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