Баг чи фіча fieldset?

Чи знаєте Ви, шановні читачі, про такий чудовий і, я б сказав, прикольний тег fieldset? Думаю, звичайно знаєте! А чи часто Ви їм користуєтеся? Думаю дуже рідко. Ну гаразд, гаразд, умовили — саме ви, шановний, досить часто його використовуєте, а ось верстальник Вася з сусідньої фірми — точно рідко, а може і всього один раз його «пробував на смак», коли дізнався про нього. Ну да ладно, не про це мова. Якщо Ви часто його використовували, то можливо натикалися на незвичайна поведінка fieldset, а саме ігнорування width, якщо вкладений елемент ширше і ні які overflow справі не допомагають. Відразу наведу приклад. Цей і наступні приклади дивитися в актуальних версій FF (32) і Хром (35); IE11, як не дивно, показав себе з кращого боку і відпрацював правильно; інші браузери не перевіряв.

Увага! У статті всі приклади спрощено до максимуму — до одного вкладеного елемента!

Ну а тепер давайте повернемося трохи назад. Часто буває в житті, що нам треба приховати зайві елементи, які не влізли у відведений їм блок, наприклад зробити карусель. Тут все ясно:
  1. Призначаємо блоку задану ширину/висоту та overflow hidden або scroll
  2. Всередині, якщо це випадок з каруселькой, задаємо ширину/висоту з запасом.
  3. Profit
Начебто нічого складного. Приклад.

Але ось траплялася ситуація, що нам потрібна форма і хворий мозок вирішив використовувати для групування елементів fieldset. Ну ладно не хворий мозок, а навпаки — здоровий, адже це семантично і круто, все як у дорослих. Пробуємо вчинити так само, як і зазвичай.

Спочатку приклад з обмеженням по висоті. Все працює як треба по висоті. Можна поставити scroll або просто hidden, якщо ми хочемо відпрацювати прокручування на JS, результат нас радує.

Але при цьому відразу впадає в очі, що fieldset зайняв 100% в ширину і викликає невелике здивування. Думаю кожен одразу ж скаже: «Так постав йому ширину!» Ну давайте поставимо цю ширину! Що ж ми бачимо?.. Про всюдисущий html тебе забирай, що за індуський жук? Fieldset стиснувся, але до розмірів вкладеного в нього елементів. Це незрозуміла особливість fieldset, то баг, а то фіча.

Зрозуміло просте рішення — це обернути нутрощі ще в один блок і вже йому ставити overflow і фіксовану ширину (width.

Намагався шукати вирішення проблеми, але Google нічого життєрадісного не говорить, тільки довгий діалог на bugzilla.mozilla.org, але там я не знайшов обговорення саме цієї проблеми. Специфікація з цього приводу теж нічого виразного не розповідає. Або я не знайшов, у вигляді слабких знань англійської мови.

У специфікації бачимо, що fieldset відноситься до:
  • flow content, тобто нам це ні про які особливості не говорить і не відрізняє його від, наприклад улюбленого всіма div.
  • sectioning root, що означає якісь відмінні стилі, які не успадковуються нащадками, наприклад border у TD і нашого героя fieldset, і у деяких інших свої. Це нам теж ні чого не дає і можна перевірити на «сусідньому» елементі blockquote
  • Listed elements і form-associated elements — це елементи, які можуть/повинні мати батька form. Тут теж можна перевірити на «сусідньому елементі, наприклад button. Про результаті я думаю ви здогадалися.
  • Palpable content — це говорить нам про те, що цей елемент повинен бути заповнений. Це не обов'язкова умова, так як цей елемент може бути підготовлений порожнім для подальшого заповнення дочірніми елементами, але рекомендується не залишати його порожнім. Таких елементів багато, так що це теж не те.


Далі йде стандартне опис атрибутів і пару прикладів.

Раз вони мені не допомогли — будемо пробувати розбиратися самі.

Для Хрому виявилося все просто. У нього вшитий вендорний min-width: -webkit-min-content, що як би натякає і про що говорить, навіть не знає, досить просто перевести слова. Це легко було з'ясувати через вбудовані Інструменти розробників». Тому вирішується ця проблема просто, для цього достатньо виставити min-width дорівнює width.

А ось для FF цей метод не допоміг. І тут на допомогу був покликаний широко відомий у вузьких колах метод тику. Першим же справою на розум приходить виставити display: block. Ця думка напевно вас відвідала не раз з самого початку статті? Однак ні blockні inline, ні навіть table не підходить. Однак хід думок правильний. З допомогою перебору можливих режимів були знайдені кілька, не зрозумілим чином, що працюють. Це режими table cell або table-column. Так само можливі варіанти table-column-group, table-footer-group або table-header-group, але це вже перебір. При чому тут взагалі режим клітинки таблиці — навіть не питайте. Однак, я вважаю це хаком для FF і хотілося б знайти більш розумне і правильне рішення.

Рішення проблеми з fieldset

Може знайдуться фахівці, які вирішували дану задачу іншими методами або більш докладно знайомі зі специфікацією і розкажуть що до чого? Чи варто написати в багтреккеры обох браузерів?

Посилання на jsfiddle з прикладами для погратися.

На цьому думаю все, тепер можна починати кидатися тапками. Дякую за увагу.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.