Псевдостоинства и непсевдостатки
Перевод статьи 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. Это тоже может быть интересно:
Разве лучшим решением в данной ситуации будет использовать js? В зависимости от задачи, без настоящего элемента и с js не обойдешься. Или я не прав?
Полагаю, ключевое тут — «в зависимости от задачи». Для полноценной клиентской/гибридной валидации формы, конечно, без скрипта вряд ли обойтись, но улучшить, что называется, пользовательский опыт «малой кровью», без лишних усилий и независимо от наличия скрипта — почему бы нет?
Быть может, я не точно выразился. Я хотел прокомментировать последний параграф статьи «Но как-то от этого противно.»
Я хотел сказать о том, что пример, в котором автор недоволен введением дополнительного элемента, не совсем показательный, поскольку нет лучшей альтернативы. Что c помощью js, что без нее — дополнительный элемент будет присутствовать.
Да, очевидно, что для серьезной задачи клиентская валидация будет осуществляться. И в этом случае такие псевдостоинства/непсевдостатки освобождают js-разработчика от лишней работы. Чаще всего :)
А по-моему красивенское изращение! :-)
По-моему, первый пример и «извращением» обзывать не за что. Псевдоэлементы используются ровно для того, для чего придуманы, для HTML-элементов, использующихся тоже по прямому назначению. В отличие от множества примеров «чего-либо на чистом CSS», когда разметка наводняется невидимыми чекбоксами исключительно для того, чтобы было к чему привязать состояние без скриптов…
Вот второй пример, да, уже довольно спорный. Но об этом говорит и сам автор.
Ключево слово в моем посте было красивенское ;)
label же. Не противно, в отличие от span
label ради чисто оформительской задачи? А если он понадобится по прямому назначению (как кликабельная подпись) совсем в другом месте и в другом виде?
Нет, я имел в виду что-то типа
<label class="mail-input">E-mail:
<input type="email" requiredl>
</label>
Но потом уже сообразил, что в таком случае не проверить input:focus, так что увы, а в конце чисто для стиля, согласен с Вами, бред.