Проблеми CSS з елементами форм, Блог web-розробника
vladimir сб, 03/09/2013 - 17:23 CSS3
Протягом багатьох років обставина відсутності деталей у специфікації щодо елементів форм змушувала розробників створювати велику кількість тестів та прикладів, основним завданням яких було приведення візуальних складових всіх елементів форм до одного крос-браузерного вигляду. У цій статті ми розглянемо деякі шаблони CSS, які дозволять привести елементи форм до одного спільного знаменника.
Тести Роджера Йоханссона для стилізації елементів форм
Ще в 2004, а потім в 2007 Роджером Йоханссоном були створені спеціальні набори тестів для елементів форм і CSS. З цих тестів випливає один висновок, який засмутив Роджера:
То що показав експеримент? Як я вже зазначав, тести показали, що за допомогою CSS неможливо керувати стилями форм для однакового відображення елементів форм у всіх браузерах та платформах. Тести також показали, що більшість браузерів ігнорують багато властивостей CSS, коли вони використовуються для стилізації елементів форм.
Незважаючи на безперечну істину цих висновків, веб-розробники продовжують експериментувати з CSS елементами форм у пошуках Святого Грааля, або принаймні розумний компроміс між рендерингом у браузері за промовчанням та власним стилем.
Модель відображення елементів форм за замовчуванням
За умовчанням специфікація CSS 2.1 стосовно HTML4 встановлює до елементів форм, таких як textarea, input і select режим відображення inline-block:
І навпаки, елементи form і fieldset мають режим відображення block:
Модель специфікації CSS стосовно стильового відображення елементів у формах на цьому кроці закінчується. Всі інші аспекти візуальноговідображення елементів форми залежить від таблиці стилів за промовчанням у браузері. Проте наведені вище правила означають таке:
- Inline-block елементи можна стилізувати, використовуючи контекст inline форматування. Це передбачає використання CSS властивостей, таких як line-height та vertical-align для контролю висоти елемента та вертикального вирівнювання. Властивості padding та margin також можуть бути застосовані для контролю внутрішнього та зовнішнього відступу для елементів форми. Варто зазначити, що inline-block елементи можна контролювати і за допомогою width і height, їхня поведінка в цьому плані не відрізняється від звичайних блокових елементів.
- Block-елементи можна стилізувати у стандартний спосіб, використовуючи звичайний блоковий контекст форматування. Тим не менш, виникають проблеми з елементами форм fieldset і legend, оскільки вони повністю покладаються на стилі самого браузера.
Виникає питання, як вирішувати ці проблеми розробникам?
Вирішення проблем з розмірами елементів форм
Web-розробники незабаром побачили, що браузери, що обробляють inline-block елементи, досить дивно, коли справа доходить до визначення їх розмірів. Визначення висоти досить часто призводить до несподіваних результатів:
Розробники намагалися вирішити цю проблему за допомогою inline-block:
Результати все ще залишають бажати кращого, за винятком елемента текстової області. Щоб вирішити цю проблему, потрібно в першу чергу нормалізувати шрифт і розмір шрифту для елементів форм:
Після встановлення шрифту ви можете додати відступи:
Елементам input і textarea також можна задати border, що вплине на їх рамзмери у відповідності з box-model:
Елементи input типу button і submit можуть мати додатковий paddingдодається браузером. Поширеною практикою є їх нормалізація:
Проблеми з цим підходом у тому, що браузери часто застосовують вендорні префікси до властивостей елементів, тому нормалізувати padding не завжди вдається. Наприклад, для web-kit можна нормальзувати так:
Padding також діє і на елементи fieldset і legend, але з різними результатами:
- Установка padding для fieldset в 0 скидає стандартний відступ тільки в деяких браузерах (не в IE)
- Установка padding для legend 0 призводить до скорочення цього елемента
Елементи select, checkbox, radio можуть бути нормалізовані з хорошими результатами лише стосовно кількох властивостей:
Застосування інших властивостей цих елементів форм призводить до суперечливим результатам.
Вирівнювання елементів у формах
Елементи форм можуть бути вирівняні вертикально та горизонтально. Вони можуть розташовуватися на одній лінії або групі. Щоб вирівняти їх по одній лінії, можна використовувати float або стандартний контекст inline-block.
При використанні плаваючих елементи автоматично перетворюються на блокові. Це означає, що тепер контроль цих елементів забезпечується дев'ятьма правилами box-model.
З плаваючими елементами, головним завданням є досягти гарного вертикально вирівнювання на поточному рядку. У цьому випадку звичайною практикою є використання вертикальних margin або padding:
Цей підхід працює, коли вам не потрібно вирівнювати блоки з текстом, наприклад, елемент label. У цьому випадку можна використовувати відносне позиціонування, padding або margin до елемента, який містить лише текст:
Інша проблема виникає із кнопками. У цьому випадку, коли у вас є кнопка, розмір якої більший,ніж у інших елементів, ви можете встановити вертикальне вирівнювання за допомогою відносного позиціонування:
Цей підхід з відносним позиціонування також працює для чекбоксів та радіо-кнопок. Відносне позиціонування може навіть застосовувати для нормальзації лівого відступу елемента legend в fieldset.
Якщо ви використовуєте елементи в контексті інлайнового форматування, можна використовувати властивість vertical-align для вертикального вирівнювання:
Хороші результати можуть бути досягнуті шляхом поєднання цієї властивості з властивістю line-height. Однак ця властивість має бути встановлена на батьківський елемент. Якщо його встановити безпосередньо на сам елемент форми, буде задіяна висота елемента:
У контексті форматування інлайн можна використовувати властивість text-align для батьківського елемента для вирівнювання вмісту елемента форми по лівому краю, центру або правому краю.
Дивна поведінка File Inputs
Елемент input типу file є особливим випадком. Такий елемент завжди повинен бути видно і впізнаваний в інтерфейсі браузера з міркувань безпеки. Це означає, що браузери свідомо ігнорують деякі правила стилів (наприклад пов'язані з видимістю) і зазвичай застосовують свої алгоритми, визначені своєю таблицею стилів за замовчуванням.
Крім того, деякі браузери відображають лише одну кнопку, інші ще додають підлозі для шляху до файлу.
Проте веб-розробники знайшли шляхи обходу цього обмеження. По-перше, вони обернули елемент контейнером:
Потім, використовуючи opacity, вони сховали сам елемент і застосували стилі до зовнішнього контейнера:
Це найкращий спосіб для перевизначення правил у браузері!