CSS проблеми с елементи на формуляри, блог за уеб разработчици
Владимир Събота, 03/09/2013 - 17:23 CSS3
През годините липсата на детайли в спецификацията по отношение на елементите на формуляра принуди разработчиците да създадат голям брой тестове и примери, чиято основна задача беше да приведат визуалните компоненти на всички елементи на формуляра в един кръстосан браузър. В тази статия ще разгледаме някои модели на CSS, които ще донесат елементите на формата до един общ знаменател.
Тестове на Роджър Йохансон за стилизиране на елементи от формуляри
Още през 2004 г. и след това през 2007 г. Роджър Йохансон създава персонализирани тестови пакети за елементи на формуляри и CSS. От тези тестове се получи едно заключение, което разстрои Роджър:
И така, какво показа експериментът? Както споменах по-рано, тестовете показаха, че CSS не може да контролира стилове на формуляри, за да направи елементите на формулярите еднакви във всички браузъри и платформи. Тестовете също така показаха, че повечето браузъри пренебрегват много CSS свойства, когато се прилагат към елементите на стилови форми.
Въпреки неоспоримата истина на тези констатации, уеб разработчиците продължават да експериментират с CSS елементи на формуляра в търсене на Свещения Граал или поне разумен компромис между изобразяване на браузъра по подразбиране и персонализиран стил.
Модел на дисплея по подразбиране за елементи на формуляра
По подразбиране спецификацията CSS 2.1 за HTML4 задава режима на показване на вграден блок за елементи на формуляри като textarea, input и select:
Обратно, елементите на формуляри и полета имат режим на показване на блок:
Моделът на CSS спецификация за стилизиране на елементи във формуляри завършва в тази стъпка. Всички останали аспекти на визуалното показване на елементи на формуляра зависят от таблицата със стилове по подразбиране на браузъра. Горните правила обаче означават следното:
- Вградените блокови елементи могат да бъдат стилизирани с помощта на контекста за вградено форматиране. Това включва използването на CSS свойства като височина на линията и вертикално подравняване за контрол на височината на елемента и вертикалното подравняване. Свойствата на подплънките и полетата също могат да се използват за управление на подплънки и подплънки за елементи на формуляра. Трябва да се отбележи, че вградените блокови елементи могат да се контролират с помощта на ширина и височина, като поведението им в това отношение не се различава от обикновените блокови елементи.
- Блоковите елементи могат да бъдат оформени по стандартен начин, като се използва нормалният контекст за форматиране на блокове. Има обаче проблеми с елементите на полето и формата на легендата, тъй като те разчитат изцяло на стиловете на самия браузър.
Възниква въпросът как да се решат тези проблеми за разработчиците?
Решаване на проблеми с размера на елементите на формата
Уеб разработчиците скоро видяха, че браузърите се справят с вградени блокови елементи по доста странен начин, когато става въпрос за оразмеряването им. Определянето на височината доста често води до неочаквани резултати: