Дейв Руперт із сучасною магією CSS який вирішує одну з тих класичних головоломок: що станеться, коли CSS для компонента не в змозі обробити вміст, який ми йому накидаємо?
Конкретна ситуація полягає в тому, що сітка макета передбачає парну кількість елементів, але натомість надається непарна кількість. У нас залишився «висаючий» елемент у кінці, який скидає макет. Звучить так, ніби те, що потрібно, це трохи Захисний CSS і Дейв досягає цього.
Він тягнеться до :has() щоб написати чудовий селектор, який винюхує останній елемент у сітці, яка містить непарну кількість елементів:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Порушення цього:
- У нас є батьківський контейнер
.items. - Якщо контейнер
:has()an.itemдитина, яка є останньою у своєму типі, - …і це
.itemвиявляється непарним номером, - …тоді виберіть перший
.itemелемент такого типу та стилізуйте його!
У цьому випадку останнє .item можна налаштувати на повну ширину, щоб запобігти отворам у макеті.
Якщо… тоді… CSS має умовну логіку! Наразі ми говоримо лише про підтримку Safari TP і Edge/Chrome Canary, але це чудово.
Як випадково, Темані Афіф нещодавно поділився трюками, яких навчився експериментування з неявними сітками. Використовуючи переваги алгоритму автоматичного розміщення CSS Grid, нам навіть не потрібно явно декларувати фіксовану кількість стовпців і рядків для сітки — CSS створить їх для нас, якщо вони потрібні!
Ні, прийоми Темані не є альтернативним вирішенням дилеми Дейва про «бовтанку». Але поєднання підходу Темані до повторюваних шаблонів компонування сітки з використанням захисного CSS Дейва :has(), ми отримуємо досить потужну та складну на вигляд сітку, яка легка та здатна обробляти будь-яку кількість елементів, зберігаючи збалансований, повторюваний шаблон.
