егенды и заголовки
Однажды в декабре я решил посмотреть, что же можно сделать с элементом legend. Я хотел подвигать его внутри родительского филдсета, но мне не хотелось целиком сбивать стили: у филдсета с легендой есть уникальное поведение — под легенду резервируется пустое пространство.
В итоге, путём пары хаков, я сделал несколько вариантов: с легендой справа, центрированной и даже с двумя легендами с разных сторон.
Проще всего оказалось с первым вариантом: чтобы спозиционировать легенду вправо достаточно применить на родителе direction: rtl, ну и потом не забыть для детей восстановить его значение в ltr.
Для центрированного и двойного вариантов пришлось использовать дополнительные элементы и растягивать легенду на всю ширину, эмулируя границу дополнительными элементами. Можно было бы использовать вместо некоторых из них псевдоэлементы, но в каких-то браузерах были с этим проблемы в данном контексте, так что я решил просто добавить пару лишних блоков. В итоге получилось что-то такое:
А вот более простой пример с заголовками и линиями по краям. Основной смысл заключается в использовании только одного элемента и то, что границы тут достаточно «честные» — если под заголовок положить фон, то он будет нормально просвечивать. Тогда как в похожих методах, которые я видел, обычно применяют перекрытие центральным блоком линии под ним.
К сожалению, для многострочных заголовков всё равно нужен лишний блок, но и в этом случае «честность» просветов остаётся. Ну и всё довольно хорошо деградирует для старых браузеров. Вот дабблет этого примера:
ello!
Here are the centered headings with horizontal lines.
They are one-lined by default, but if it needs to be multiline, then you can add an extra span.
Multiline heading
with an extra wrapping span
ome long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown.
↑ Here you can see one-lined heading, with text-overflow: ellipsis. Since it's too long, the horizontal lines cannot be seen.
Вы можете прокомментировать эту статью в Мастодоне.
Опубликовано с метками: #Experiment #CSS