Элемент `` с `display:contents` не работает в Chrome 131? ⇐ CSS

[Anonymous]

Я экспериментировал с последней версией Chrome 131 и заметил некоторые интересные изменения в элементах и . Я хотел поделиться своими выводами и узнать, сталкивался ли кто-нибудь еще с подобным поведением.
Два существенных изменения в работе элементов :

• Элемент теперь может принимать свойства display:flex и display:grid.
• Теперь вы можете указать содержимое подробностей, используя этот новый псевдоселектор: ::details-content. Больше никаких элементов-оболочек.

Я столкнулся с ошибкой. Вот типичный шаблон разметки, с которым я обычно работаю:

Код: Выделить всё

Hello World

...

У меня есть вариант использования свойства отображения элемента для содержимого, чтобы я мог расположить группу элементов сведений в виде своего рода отзывчивый пользовательский интерфейс с вкладками.
Когда я это делаю, Chrome, похоже, полностью игнорирует свойство display:contents. Что касается инструментов разработки, они применяются правильно, но просто игнорируют их и разрешают поведение браузера display:block; и также сообщает об этом.

< /p>
Я понимаю, что мой вариант использования может быть немного нишевым, но у меня сложилось впечатление, что после обновления Chrome что-то пошло не так.
Я собрал CodePen, чтобы показать, что я иметь в виду. Попробуйте просмотреть это в Chrome 131 и Firefox; и переключите исправление &::details-content {....
У меня есть обходной путь/решение. Я могу условно продублировать свойство Grid-column для браузеров, которые поддерживают новый селектор псевдоэлементов:

Код: Выделить всё

details {
> .details-content {
margin-block-start: 1rem;
grid-row: 2;
grid-column: 1 / -1;
}

@supports selector(::details-content) {
&::details-content {
grid-column: 1 / -1;
}
}
}

Однако мне все равно это не нравится.
Как вы думаете, это намеренное поведение или ошибка? >/п>

Подробнее здесь: https://stackoverflow.com/questions/792 ... chrome-131