CSS-live.ru

Псевдостоинства и непсевдостатки

Перевод статьи Pseudo and pseudon’t с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

Мне нравятся CSS-псевдоклассы. Они как нельзя кстати, чтобы добавлять в интерфейсы какие-нибудь приятные мелочи в ответ на действия пользователя.

Взять, например, псевдоклассы для форм: :valid, :invalid, :required, :in-range, и много чего еще.

Допустим, я хочу настроить внешний вид элемента в зависимости от того, правильно ли он был заполнен. Это может быть элемент input вроде такого:

<input type="email" required>

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

input:valid {
  border: 1px solid green;
}

Это работает, но раздражает то, что вид элемента меняется, пока пользователь еще печатает в нем текст (как только пользователь вводит символ @, рамка зеленеет). Это может отвлекать, а то и просто бесить.

Я хочу, чтобы зеленая рамка отображалась лишь тогда, когда поле заполнено правильно (валидно) и находится не в фокусе. К счастью, эти три последних слова («не в фокусе») прекрасно соответствуют еще паре псевдоклассов — not и focus:

input:not(:focus):valid {
  border: 1px solid green;
}

Если бы я захотел сделать совсем по-модному, я мог бы отобразить рядом с уже заполненными полями по иконке. Но для этого мне понадобится не псевдокласс, а что-то большее — псевдоэлемент, например, :after

input:not(:focus):valid::after {
  content: '✓';
}

…вот только это не заработает. Оказывается, нельзя добавлять сгенерированный контент к замещаемым элементам типа полей форм. Мне пришлось бы добавить в разметку настоящий элемент, вроде такого:

<input type="email" required>
<span></span>

Тогда его можно было бы оформить с помощью

input:not(:focus):valid + span::after {
  content: '✓';
}

Но как-то от этого противно.

P.S. Это тоже может быть интересно:

9 комментариев

  1. Разве лучшим решением в данной ситуации будет использовать js? В зависимости от задачи, без настоящего элемента и с js не обойдешься. Или я не прав?

    1. Полагаю, ключевое тут — «в зависимости от задачи». Для полноценной клиентской/гибридной валидации формы, конечно, без скрипта вряд ли обойтись, но улучшить, что называется, пользовательский опыт «малой кровью», без лишних усилий и независимо от наличия скрипта — почему бы нет?

      1. Быть может, я не точно выразился. Я хотел прокомментировать последний параграф статьи «Но как-то от этого противно.»
        Я хотел сказать о том, что пример, в котором автор недоволен введением дополнительного элемента, не совсем показательный, поскольку нет лучшей альтернативы. Что c помощью js, что без нее — дополнительный элемент будет присутствовать.
        Да, очевидно, что для серьезной задачи клиентская валидация будет осуществляться. И в этом случае такие псевдостоинства/непсевдостатки освобождают js-разработчика от лишней работы. Чаще всего :)

    1. По-моему, первый пример и «извращением» обзывать не за что. Псевдоэлементы используются ровно для того, для чего придуманы, для HTML-элементов, использующихся тоже по прямому назначению. В отличие от множества примеров «чего-либо на чистом CSS», когда разметка наводняется невидимыми чекбоксами исключительно для того, чтобы было к чему привязать состояние без скриптов…

      Вот второй пример, да, уже довольно спорный. Но об этом говорит и сам автор.

    1. label ради чисто оформительской задачи? А если он понадобится по прямому назначению (как кликабельная подпись) совсем в другом месте и в другом виде?

      1. Нет, я имел в виду что-то типа

        <label class="mail-input">E-mail:
        <input type="email" requiredl>
        </label>

        Но потом уже сообразил, что в таком случае не проверить input:focus, так что увы, а в конце чисто для стиля, согласен с Вами, бред.

Добавить комментарий для Алексей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.