егенды и заголовки

Однажды в декабре я решил посмотреть, что же можно сделать с элементом legend. Я хотел подвигать его внутри родительского филдсета, но мне не хотелось целиком сбивать стили: у филдсета с легендой есть уникальное поведение — под легенду резервируется пустое пространство.

В итоге, путём пары хаков, я сделал несколько вариантов: с легендой справа, центрированной и даже с двумя легендами с разных сторон.

Проще всего оказалось с первым вариантом: чтобы спозиционировать легенду вправо достаточно применить на родителе direction: rtl, ну и потом не забыть для детей восстановить его значение в ltr.

Для центрированного и двойного вариантов пришлось использовать дополнительные элементы и растягивать легенду на всю ширину, эмулируя границу дополнительными элементами. Можно было бы использовать вместо некоторых из них псевдоэлементы, но в каких-то браузерах были с этим проблемы в данном контексте, так что я решил просто добавить пару лишних блоков. В итоге получилось что-то такое:

А вот более простой пример с заголовками и линиями по краям. Основной смысл заключается в использовании только одного элемента и то, что границы тут достаточно «честные» — если под заголовок положить фон, то он будет нормально просвечивать. Тогда как в похожих методах, которые я видел, обычно применяют перекрытие центральным блоком линии под ним.

К сожалению, для многострочных заголовков всё равно нужен лишний блок, но и в этом случае «честность» просветов остаётся. Ну и всё довольно хорошо деградирует для старых браузеров. Вот дабблет этого примера:

Опубликовано с метками:

Спасибо Fev за иллюстрацию.