Можностей, предоставляемых веб-разработчикам


О ФОРМЛЕНИЕ НОВЫХ ПОЛЕЙ ФОРМЫ



Pdf көрінісі
бет134/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   130   131   132   133   134   135   136   137   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

О
ФОРМЛЕНИЕ НОВЫХ ПОЛЕЙ ФОРМЫ  
И СООБЩЕНИЙ ОБ ОШИБКАХ
Каждый раз, когда мы рассказываем о наших новых логичных полях форм на конферен-
циях, кто-то спрашивает, как создавать стили для таких полей, а также для сообщений об 
ошибках.
Практически ко всем новым элементам управления можно добавлять базовое оформление: 
шрифты, цвета и т. п. Однако с некоторыми элементами управления современный код CSS 
совместим плохо. Например, как понять, к чему относится 
color
 в случае 
type=range
 и ка-
кой стиль меняет 
background-color
? На что воздействует 
border-radius
? Как поменять 
цвет «трека», по которому перемещается ползунок?
Естественный выбор разработчика, желающего добавить новые функции CSS для стили-
зации полей формы, — это модуль с манящим названием CSS Basic User Interface Module 
(
http://www w3 org/TR/css3-ui/
). Он существует примерно с 2004 года, и теперь, когда браузеры 
окончательно освоились с этими возможностями, обновлением спецификации занимается 
Тантек Челик.


Формы  •  119
Уже сейчас можно воплотить отдельные полезные идеи — в частности, псевдокласс 
:invalid
 
применяется для стилизации поля формы для случая ввода недопустимого содержимого. 
Таким образом, пользователь моментально получает ответ от формы, еще даже не нажав на 
кнопку отправки информации. Следующий код CSS окрашивает границу поля формы с не-
допустимыми данными в красный цвет, а в случае, когда данные допустимые, — в зеленый.
input:invalid {border:2px solid red;}
input:valid { border: 2px solid green; }
К сожалению, возникают сразу несколько проблем удобства использования. Например, 
данные в поле считаются недопустимыми в момент загрузки страницы — просто потому, 
что там требуются данные, а поле пустое. Следовательно, применяется стиль «invalid», что 
пугает пользователя. Значение в поле 
input
 
type=email
 считается недопустимым все то 
время, пока пользователь вводит какие-то символы, не содержащие «@», потому что лишь 
после появления «@» можно сказать, что он действительно ввел адрес электронной почты.
Великий Патрик Лауке (один из технических редакторов нашей книги) предлагает для 
смягчения этой проблемы добавлять :focus, то есть применять стиль «invalid» только тогда, 
когда пользователь взаимодействует с данным конкретным полем:
input:focus:invalid {border:2px solid red;}
input:focus:valid {border: 2px solid green;}
Такой вариант работает, но только для поля, на котором установлен фокус ввода. Нам 
требуется нечто большее: мы хотим, чтобы недопустимые поля оформлялись особенным 
образом только после того, как пользователь введет туда какие-то данные.
Из-за всех этих проблем в Firefox решили использовать альтернативный псевдокласс под 
названием 
-moz-ui-invalid
, обеспечивающий пользователям намного более удобный 
интерфейс. Как рассказывают разработчики Mozilla Developer Center, «если данные вну-
три элемента управления считаются допустимыми в момент, когда пользователь начинает 
работать с ним, то стилизация поменяется лишь после перевода фокуса на другой элемент 
управления. Однако если пользователь попытается исправить значение, ранее помеченное 
как недопустимое, то стилизация поменяется сразу же, как только значение станет допу-
стимым. К элементам, заполнение которых обязательно, псевдокласс применяется только 
в случае редактирования пользователем, или если пользователь попытается отправить 
форму с неотредактированным допустимым значением».
Среди других имеющихся псевдоклассов можно также перечислить 
:in-range

:out-of-
range
 и 
:indeterminate
 (последний применяется к числовым полям ввода, для которых 
заданы значения 
min
 и 
max
, но которые в данный момент пусты).
Пока мы дожидаемся полностью описанного в спецификации и одобренного способа еди-
нообразной стилизации всех объектов во всех браузерах, можно применять различные 
трюки и фокусы, которые разработчики изобретают независимо друг от друга для своих 
продуктов. Например, мы уже познакомились с 
ui-invalid
 от Mozilla. WebKit предлагает 
способы стилизации облачков с сообщениями об ошибках стилизации (см. рис. 3.2):
„
„
::-webkit-validation-bubble{}
„
„
::-webkit-validation-bubble-top-outer-arrow{}
„
„
::-webkit-validation-bubble-top-inner-arrow{}
„
„
::-webkit-validation-bubble-message{}




Достарыңызбен бөлісу:
1   ...   130   131   132   133   134   135   136   137   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет