От автора: в этом руководстве мы создадим решение, как можно создать на чистом CSS метки, используя псевдо-класс ::placeholder-shown.
Техника плавающих меток
Когда мы имеем дело с полями ввода, существует множество методов, которые можно рассмотреть, чтобы предоставить пользователям лучший опыт. Нам необходимо убедиться, что мы даем пользователям необходимую информацию в каждый момент времени, а это значит найти баланс между слишком большим и слишком маленьким. Две довольно важные части для головоломки UX:
Элемент метки, согласно MDN, является единственным способом предоставить пояснительную информацию о поле формы, который всегда является уместным.
Атрибут placeholder для элемента ввода, в соответствии с MDN, позволяет указать текст, который отображается в области содержимого элемента input, когда она пуста. Он предназначен для отображения примера вводимых данных, а не для объяснения или подсказки.
Эти два элемента можно использовать в тандеме для создания пользовательского интерфейса с инструктивной формой, и один из возможных способов сделать это — то, что я называю «техника всплывающих меток». В этой реализации пользовательского интерфейса пользователь сталкивается со следующим потоком:
Они видят элемент ввода с заполнителем, отображающим некоторый описательный пример ввода, а метка изначально скрыта.
Когда они выделяют фокусом элемент ввода и начинают печатать, значащая метка всплывает с помощью анимации над элементом ввода.
До тех пор, пока в элементе есть значение, метка остается видимой и располагается над ним, чтобы напомнить пользователям исходное значение элемента ввода.
Эта техника пользовательского интерфейса действительно немного искажает определения метки и заполнителя, приведенные выше, в том смысле, что мы отдаем заполнителю более приоритетное значение для пояснения пользователю элемента ввода, но это компромисс для достижения аккуратности компонента пользовательского интерфейса, и мне лично он нравится. Вот предварительный просмотр того, что мы собираемся создать.
Всплывающие метки на чистом CSS
Регистрация события фокуса, определение того, содержит ли элемент ввода значение, анимация отображения скрытого элемента, принятие решения о необходимости отображения в зависимости от введенного значения… это похоже на работу для JavaScript, не так ли? Не так! Для всего этого мы будем использовать псевдо-класс CSS, :placeholder-shown. Из MDN:
Псевдо-класс CSS :placeholder-shown представляет любой элемент input или textarea, который в настоящее время отображает текст заполнителя.
Другими словами, если input содержит какое-либо значение, мы можем с уверенностью предположить, что псевдо-класс :placeholder-shown не будет достигнут в CSS. Вот ход моих мыслей относительно техники всплывающей метки:
Структурировать разметку таким образом, чтобы я мог указать метку в качестве смежного комбинатора одного уровня для элемента ввода и обернуть оба элемента в div.
Задать соответственно стили input и label, включая псевдо-элемент ::placeholder.
Переместить метку в исходное положение, которое вертикально центрируется в содержащем div и скрывается в нем.
Определить, когда отображать метку, используя комбинацию псевдо-классов :not, :focus и :placeholder-shown.
Если placeholder-shown отсутствует, тогда отображаем метку — input:not(:placeholder-shown) + label
Если элемент ввода выделен фокусом, а заполнитель не отображается, тогда выводим метку — input:focus:not(:placeholder-shown) + label.
Теперь давайте перейдем к HTML и CSS!
Построение метки
После переваривания всей этой информации сборка на самом деле довольно проста. Вот разметка:
<div class="Input"> <input type="text" id="input" class="Input-text" placeholder="Your first name, e.g. Nicholas"> <label for="input" class="Input-label">First name</label> </div>
А вот базовый CSS с некоторыми комментариями относительно того, что происходит на каждом этапе. Итоговая демо-версия ниже содержит полный CSS, который написан с использованием переменных CSS для простоты изменения и поддержки.
.Input { /** * Относительное позиционирование для оболочки важно, потому что мы будем использовать * оболочку, чтобы позиционировать метку в положении всплывания и по умолчанию. */ position: relative;
} .Input-text { /** * Здесь стили элемента ввода. Размер шрифта и высота строки важны * для определения предварительного позиционирования метки. Они будут храниться * в переменной CSS. */ display: block; margin: 0; width: 100%; /** * Эти свойства будут добавлены в демо-версии, когда будут определены переменные: * * padding * font-size * line-height */
} .Input-text:focus { /** * Стили элемента ввода при выделении фокусом. */
} .Input-label { /** * Метка получает абсолютное позиционирование, и размеры, * позиционирование и трансформации вычисляются относительно элемента контейнера * стилей текста элемента ввода. */ display: block; position: absolute; opacity: 0; /** * Эти свойства будут добавлены в демо-версии, когда будут определены переменные: * * bottom * left * font-size * line-height * transform * transform-origin * transition * * Они определяют позиционирование и стили метки по умолчанию. */
} .Input-text:placeholder-shown + .Input-label { /** * Пока заполнитель виден, мы хотим скрыть метку. */ visibility: hidden; z-index: -1;
} .Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label { /** * Когда заполнитель не отображается, т.е. элемент ввода содержит значение - мы хотим * вывести метку с помощью анимации. */ visibility: visible; z-index: 1; opacity: 1; /** * Эти свойства будут добавлены в демо-версии, когда будут определены переменные: * * transform * transition * * Они определяют позиционирование и стили метки во всплывающем состоянии. */
}Полная демо-версия в действии
Если что-то из вышеперечисленного было вам непонятно, вот полная рабочая демо-версия в действии!
Поддержка браузерами
На данный момент поддержка довольно хороша, отстают только IE и Edge:
Chrome: 47+
Firefox: 51+
IE: Не поддерживается
Edge: Не поддерживается
Opera: 34+
Safari: 9+
Вы можете обойти отсутствие поддержки, используя некоторые интересные хаки, чтобы указать для браузеров IE и Edge условные стили input и label.
Заключение
Это все! Мне нравится, когда я открываю новые вещи в CSS, но еще больше мне нравится, когда я могу найти красивые способы сделать их применимыми. Надеюсь, вы кое-чему научились и сможете придумать интересные новые способы использования псевдо-класса :placeholder-shown. Еще раз спасибо за внимание, и если у вас есть и вопросы, комментарии или отзывы, вы можете отправлять мне твитты.
Источник: https://callmenick.com/
Редакция: Команда webformyself.