Skip to content

Неделя HTML5 - Специальные приемы

Приветствую вас, дорогие друзья. В заключительном уроке серии «Неделя HTML5» я вам покажу специальные приемы на CSS и JavaScript для HTML5. Мы поговорим о старых браузерах и еще немного поработаем с формами.

JavaScript трюки

Как заставить старые браузеры правильно воспринимать новые теги HTML5

Этот вопрос мы уже обсуждали, когда делали адаптивный дизайн. Поэтому еще раз обратите внимание на то, что Internet Explorer до версии 9 не поддерживают новые теги, введенные в HTML5. Но есть замечательный скрипт html5shiv, который исправляет данную ситуацию.

Подключать данный полифил следует в область <head> для IE <9. Это можно сделать с помощью условного комментария:

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Поддержка атрибута placeholder старыми браузерами

Опять-таки старые браузеры не поддерживают такую фишку, как placeholder. Но есть плагин jQuery Placeholder, который это исправит. Скачать его Вы можете с репозитория на GitHub. Подключаете его к вашей странице и в файле со скриптами добавляете такую строку:

$('input, textarea').placeholder();

CSS трюки

Вертикальный ползунок

Данный трюк работает только в Opera. Суть его в том, что если полю range через css будет задано значение высоты больше, чем значение его ширины, то будет выведен горизонтальный ползунок.

<input type="range" value="35">
input[type="range"]{
width: 25px;
height: 100px;
}

Вот что опера Вам покажет:

Горизонтальный ползунок в Opera

Стилизация окошек-предупреждений

Данная функция поддерживается только в браузерах на базе webkit (т.е. Google Chrome, Safari и к ним скоро присоединится Opera). Нам помогут специальные псевдо-классы ::-webkit-validation-bubble {}, ::-webkit-validation-bubble-arrow-clipper {}, ::-webkit-validation-bubble-arrow {}, ::-webkit-validation-bubble-message {}.

Например, если у вас будут обязательные поля в формах и вы добавите такие стили:

::-webkit-validation-bubble { opacity: 1; }
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {
background-color: #666;
border: 1px solid #333;
border-width: 1px 0 0 1px;
-webkit-box-shadow: none;
}
::-webkit-validation-bubble-message {
background: -webkit-linear-gradient(#666,#777);
border: 1px solid #333;
color: #222;
font-size: 140%;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.333);
text-shadow: 0 1px #888, 0 -1px #555;
}

То, предупреждения будут выглядеть таким образом:

Стилизованные предупреждения на webkit
Стилизованные предупреждения на webkit

Обязательные и необязательные элементы

Теперь с приходом HTML5 можно поставить звездочки для лейблов, относящихся к обязательным элементам на CSS. Все обязательные поля будут соответствовать селектору :required, а простые поля имеют — :optional.

Тогда давайте сделаем такую форму, чтобы у обязательного поля была черная рамка, у его лейбла в конце была добавлена звездочка, а у необязательного поля была светло-серая рамка. Вот html для формы:

<input id="first-name" type="text" required="">
<label for="first-name">Имя</label>
<input id="last-name" type="text">
<label for="last-name">Фамилия</label>

Стили для такой формы:

input:required + label::after {content: "*"}
input:required {border: 1px solid #000}
input:optional {border: 1px solid #ddd}

Полученный результат:

Стили для обязательных и необязательных полей
Стили для обязательных и необязательных полей

Правильные и неправильные числа

Поговорим и о полях для ввода чисел. Например, давайте сделаем так, что если введенное число не входит в указанный промежуток, то поле будет обведено красной рамкой, а если же оно «правильное» — зеленой. Кстати ввести на странице неправильное число нельзя — не позволит браузер. Но мы можем сразу задать значение поля, не входящее в промежуток (для демонстрации):

<input type="number" max="10" min="1" value="11">

А осуществить нашу задумку помогут псевдо-классы :out-of-range и :in-range (вне промежутка и в промежутке, соответственно):

input[type='number']:out-of-range {border-color: red}
input[type='number']:in-range {border-color: green}

Чтение и написание

Думаю вы знаете, что элемент textarea можно сделать закрытым для изменения с помощью атрибута readonly.

Предлагаю сделать такую демонстрацию с двумя textarea: один изменяемый, другой нет. В не изменяемом поле запретим выделять текст. Вот HTML:

<textarea>Lipsum</textarea>
<textarea readonly="">Lipsum</textarea>

А в css существуют специальные псевдо-классы для осуществления наших целей: :read-write и :read-only и свойство user-select для запрета выделения (используется с префиксами браузерами):

textarea:read-only {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
border:2px dashed #ddd;
}
textarea:read-write {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
border:2px solid #000;
}

Результат:

Редактируемый и не редактируемый textarea
Редактируемый и не редактируемый textarea

Поддержка браузерами рассмотренных псевдо-классов

Псевдо-классы / БраузерыChromeFirefoxIEOperaSafari
optional / required10.04.010.010.05.0
invalid / valid10.04.0нет10.05.0
in-range / out-of-range10.0нетнет10.05.0
read-only / read-write10.0нетнет10.05.0

Заключение

На этом моя серия уроков «Неделя HTML5» является законченной. Очень рад, если вы прошли ее от начала и до конца. Обязательно внедряйте новшества в свои сайты!

Данная запись является частью серии "Неделя HTML5".

Неделя HTML5 - Формы - Часть 2