DEV Community

MariannaKhanina
MariannaKhanina

Posted on

Display: contents

Из документации:

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

Пример использования
В блоке располагаются строковые элементы двух типов.
В целях тестирования понадобилось обернуть набор элементов каждого типа отдельным span (у которого проставлен data-testid для тестирования). При этом требуется, чтобы верстка эти span как бы не учитывала и вела себя так, будто их вовсе нет, что бы элементы двух типов просто шли друг за другом. Для этого у span-оберток достаточно проставить свойство display: contents;

Top comments (0)