CSS-чит - display contents  

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

Делаю фронт 15 лет, в первый раз слышу про это

Это чё за уличная магия?Оо

Разработчики и спецификаторы: ну да мы тут читы в браузере разрабатываем для игроков во фронтенд.

Класс! Я почему то думал что это можно как-то через subgrid порешать, а тут "вот оно чё Михалыч"! Спасибо! ))

Костыли для выстрела себе в ногу, иначе и не скажешь

У меня аж глаз задергался.😮

У меня буквально сегодня была такая ситуация, прям 1 в1. Спасибо.

Офигеть) благодарю)

Да ладно!!! Не знал, хотя иногда пригождалось. Спасибо))

Наконец нормальные практические кейсы, а не как у других «сокращаем код до одной строчки как про»

Знал о contents. Но для меня новинка order: -1)) до этого выставлял всем элементам ордеры от 1 до n)

Вот за это огромное спасибо ❤❤❤❤

Отличная информация

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

А вот это полезно. Ясно, что лучше избегать таких ситуаций, но иногда это будет спасением

охренеть, сколько я верстал. а про именно это свойство не знал..

Круто, недавно как раз мечтал о чём то подобном, типо div в fragment стилями превращать)

Полезно!

как раз недавно делал тз от яндекса, и внедрил данное свойство в свою разметку)

Полезно кстати, спасибо

Это очень удобно когда работаешь с таблицами. Можно обернуть tr-ки дивкой для группировки нескольких строк

Почему мне твоё видео попалось только сейчас а не 2 недели назад когда это было нужно?!

каждое видео от вас удивляет

ладно)) думал херня опять какая-то)) но, видимо, не херня всё же. про -1 тоже не знал))

Интересно, не знал!

Круто, не знал 👍

Можно ещё сделать через медиа, чтобы при определенной ширине экрана применялось свойство display none, но вариант с content всё же проще😅

У котика бордер тоже скрулить хочется)

Типичные фронтендеры, берут по стволу в каждую руку и стреляют себе в ноги

Да, только нечего остатку делать в заголовке карточки🫡

display: contents; Браузеры удаляют любой элемент со свойством display, имеющим значение contents из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

Офигеть 😀

Мой мозг вышел из чата.

Годно

Афигеть 😮

Да это какой то chemax на минималках😂

Надо было текст "купить" заменить на "кусить"

👍

Ого, круто

А как это работает с навигацией с через кнопки/голосовым помощником для слабовидящих?

90% версий браузеров поддерживают это свойство частично. 8 процентов полностью. Частичная поддержка может привести к багам и неопределенному поведению

А теперь пиши автотесты для этого... этого... я даже не знаю как это назвать.

А если у обертки уже стоит grid или flex?

Как прога называется и тема которая использует

Спасибо, интересно

а есть программы где это все можно прокликать мышкой, пошевелить елементы, расставить как нужно, а на выходе получить код хтмл и цсс?

Топ

Я знаю почему ты такой умный, тебе в бровь хорошенько дали))

Наверно буду как душнила, но ставить див для текста 😂

я в шоке😮😮😮😮

Так вот, благодаря кому в мобильных версиях сайта пропадают нужные функции!

А это хорошо

ну ничего себе

Явное всегда лучше неявного. Ваш способ интересный, но не более того

Display: none? Чем-то функционал ведь похож?

Когда нам это пригодиться ? Правильно никогда, если вам требуется делать подобные костыли значит дизайнер плохо выполнил свою работу

для етого же есть display none

Смотрим на поддержку этого свойства и плачем

а если написать display none

Как можно об этом не знать? Я это в продакшене уже не помню сколько лет использую. Это же даже не новое свойство...

Китайское агенство Синьхуа оценит

Не люблю это свойство. Поведение делает неочевидным. Садишься впервые за чужой проект и не понимаешь что происходит. Смотришь на блоки в поисках медиа запросов, а это мы-во помешано выше и не можешь понять в чем дело.

Пиздец я дед. В 2005-м я подключался по dial-up модему, качал все доки по вашему CSS, которые только удалось найти, а потом сидел и ковырял ночами их как ненормальный, забыв о друзьях, подругах и вообще прыщавый задрот был. А теперь IT - это модно и какой-то чел с розовым причесоном рассказывает базовые вещи в красивый длинный микрофон. А я сижу и думаю - а нахуя для этого целое видео снимать и монтировать? Это ж банальщина. Кому это надо? Хотя мож я и не прав и кому-то проще так воспринимать информацию... 🦧

Странное название

Ага, только поддержка у него не очень, не больше 90% девайсов судя по caniuse

я радиоэлектронщик и я ниххуя не понимаю...

Товар в начало смысл его ставить? И почему методом вывода из базы данных не отсортируете. Бред полнейший на практике не используется

Фотошоп какой то.

дааа ну нахуй?

Если у вас нет культуры написания кода, все ваши костыли во вред.

Мда

Я бы через жс лучше убрал лишний див, так сработает у всех