Дивовижний світ веброзробки on Telegram: “#css_in_action Що робити, коли в DOM зʼявляються…”

#css_in_action
Що робити, коли в DOM зʼявляються небажані обгортки, які ми не можемо прибрати, і які ламають нам розмітку? Звичайно ж, перша думка — надавати по рукам автору такого коду, але життя бентежне, та й іноді ці обгортки мають сенс, але для якоїсь логіки, про яку ми можемо бути й не в курсі.

Однак тут на поміч спішить таке значення властивості display, як contents. Якщо спробувати пояснити на пальцях, то при побудові бравзером лейауту, такий елемент буде ігноруватися (але саме блокові стилі, декоративні ж лишаються), і його дочірні елементи будуть поводитися так, ніби вони належать до батьківського елемента їхнього батька. Ну тобто display: contents по факту відвозить своїх дітей до діда. А сам на риболовлю десь тікає.

Спробувати це можна на дуже простому прикладі:

<div class="дід">
  <p class="дядько">1</p>
  <div class="батя">
    <p class="дитина">2</p>
    <p class="дитина">3</p>
    <p class="дитина">4</p>
  </div>
</div>

.дід {
  outline: 1px solid blue;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr;
  width: 400px;
}

.батя {
  display: contents;
}

.дитина {
  outline: 1px solid green;
}

Якщо прибрати у баті display: contents, то діти зібʼються в купку, і ніхто ні на яку риболовлю не поїде. А от якщо не прибирати, то дітиська будуть поводитись так, як скаже дід.

В такий спосіб можна "ігнорувати" обгортки, а що найцікавіше — так можна відвозити до діда не тільки онуків, а й правнуків, праправнуків і так далі, доки ~~дід не помре~~ дозволяє рендер-рушій.

<div class="дід">
  <p class="дядько">1</p>
  <div class="батя">
    <p class="дитина">2</p>
    <div class="батя">
      <p class="дитина">3</p>
      <p class="дитина">4</p>
    </div>
  </div>
</div>

От зараз би пасувало поставити цьому допису вогник 🔥 і переслати його колезі.

Але є й нюанси. По-перше, такий елемент зникає з рендер-дерева повністю, лишаючись лише в DOM, але для користувача його ніби не існує взагалі. Він не працює з фокусом, і може повністю зникнути з поля зору екранних читалок.

Тож, підсумуємо: display: contents — це чудовий спосіб позбутися зайвих обгорток, не змінюючи DOM.

Але він не всесильний. Не варто застосовувати його до семантично важливих елементів — таких як nav, section, article, або будь-яких, що мають роль чи взаємодіють із фокусом. Для бравзера й допоміжних технологій такий елемент просто зникне з рендер-дерева, і це може зашкодити доступності чи структурі.

Зате якщо перед тобою безглуздий div, що тільки заважає верстці й не несе жодного смислового навантаження — сміливо став display: contents і відправляй його на риболовлю. Він свою справу зробив.

MDN

@babichdev

***
А збір на Mavic для 184 навчального центру, між іншим, вкляк. Тож якщо ви не тільки поставите вогник цьому допису, а й закинете пʼять гривень на збір, цей день стане набагато світлішим. Дякую всім і цьом вам у лобіка.
https://send.monobank.ua/jar/AeXQ6YRf2X
5375411202918178