Найсбокс

2 мая ’08

Вспоминая про вечный конфликт дизайнера и верстальщика, нельзя не упомянуть такую интересную тему, как отрисовка элементов форм в стиле сайта или, говоря по-птичьи, кастомные контролы. Мне вообще придётся много говорить не по-человечьи, поскольку адекватных эквивалентов некоторым терминам в русском языке пока не существует.

И ладно бы, если дизайнеру понравилось поле поиска со скруглёнными краями из Mac OS X. Другое дело, когда он берётся за кнопку «Обзор», выпадающие списки или чекбоксы с радиобатонами — остаётся только молча сжать кулаки. И не потому, что это долго и сложно делать… Скорее потому, что тем самым дизайнер заставляет пользователя думать боже, что это за хрень такая? — он прячет то, к чему пользователь привык в своей системе или браузере. А это может привести к тому, что он, потратив время на попытку разобраться в интерфейсе, может плюнуть на все и уйти.

Но бывает, что очень надо. Поэтому предлагаю вам одно из решений проблемы с чекбоксами и радиобатонами, прототип которого я использовал в проекте «Магазин одной футболки» для Livejournal.

Найсбокс — для того, чтобы увидеть решение в действии, нажмите «Nice!».

Суть метода заключается в том, что мы, во-первых, оборачиваем наши контролы прямо в <label>:

<legend>Оркестра</legend>
<ul>
    <li>
        <label for="first-1">
            <input type="radio" name="first" id="first-1" />
            Представляет
        </label>
    </li>
</ul>

А во-вторых, если у пользователя включён JavaScript, то мы назначаем форме class="nice", а также ряд дополнительных классов для <input> и <label> — это прячет родные контролы далеко налево и рисует наши фоном для <label>:

.form .lost {
    position:relative;
    left:-9999px;
    }
.form .radio-on {
    background:url(../i/radio/on.gif) 0 50% no-repeat;
    }

Таким образом, просто смещая контролы налево, мы сохраняем высоту строки и избегаем прыжков при срабатывании JS-функции.

Стоит заметить, что данная методика не претендует на звание «решение под ключ», а всего лишь демонстрирует подход к решению проблемы. Кроссбраузерность вполне на уровне: IE5–7, Firefox 2–3, Opera 9 (как минимум), Safari 3. Если вам важна совместимость с Safari 2, то придётся писать дополнительный костыль, который обеспечит встроенную в остальные браузеры связь ярлык/поле.

Остаётся только пожелать вам вменяемых дизайнеров и не использовать подобные методики.

Самый вменяемый дизайнер — это тот, который и верстальщик :D или занимался раньше версткой тоже, а сейчас у него столько работы, что времени хватает только на рисование сайта в фотошопе, а те, кто напрочь перерисовывают системные контролы и приводят их к виду, который по их представлению намного лучше смотриццо и никак нельзя пойти на компромис, просто не знают принципов юзабилити и создания юзер френдли интерфейсов... а вот кнопку "Обзор" мне кажется всетаки надо приводить в нормальный вид, уж сильно стремно она выглядит, в некоторых браузерах даже нельзя задать свое название для нее по русски. И еще огорчает, что в сафари для виндовс селекты нельзя привести к общему стилю инпутов :( хотя может я не знаю как :-[

Когдато раньше пытался написать что-то похожее на Ваш скрипт Nicebox, не додумался тогда что можно использовать отрицательные поля, а в ИЕ контролы всегда сверху же, вообщем ничо не вышло) Пойду перепишу скрипт под jQuery)) спасибо за идею.

Блин, искал подобное решение полгода назад — так и не нашел ничего что бы нормально заработало. Надо будет запомнить.

По моему самый вменяемый способ из тех, что я встречал. Если вдруг (да сохранят меня боги), я не смогу отпинаться от желания кастомных чеков, то воспользуюсь этим способом.

Спасибо Вадим, но я, все таки, стараюсь оставлять оформление браузеру. Так как-то привычнее даже для меня. :)
Многие делают поиск по сайту по нажатию на клавишу Enter, а баттон прячут, лично меня вводит в заблуждение это, не сразу доходит.

Alexandr, а мне вот наоборот кнопка почти никогда не нужна, особенно для поисковых форм. Хотя согласен — для большей доступности её лучше оставлять. Я, к примеру, не мог воспользоваться поиском на одном сайте из Opera Mini, посколько просто некуда было нажать, мол «Искать!»…

Вадим, я собственно это и имел ввиду, а так частенько отправляю формы нажатием на ctrl+enter, если такое возможно либо простым нажатием на enter.

Вот вам пример кастомных контролов. Плохо что ли? А то ишь, всех дизайнеров под одну гребенку... Нехорошо :)

Я бы не назвал этот контрол кастомным, ибо в HTML просто нет ничего подобного. А так — великолепная реализация, довольно удобно.

Поле загрузки файла во всех браузерах совершенно убогое и бессмысленное. Лучшее решение — в новой версии WordPress. Одна кнопка Upload и моментальная загрузка, без всяких подтверждений. Другое дело select — этот контрол часто используется в операционной системе, поэтому его менять не стоит. Хотя и не откидываю совсем вариант его особой визуализации.

Поле загрузки … убогое и бессмысленное.
Лучшее решение — в новой версии WordPress

Вот уж не знаю… Ситуация: у вас есть 10 файлов с похожими именами на раб.столе. Если загрузка начинается сразу же, то вероятность загрузить какой-то файл дважды возрастает. Это как заполнять анкету, в которой все поля с type="password"… А в нормальном поле загрузки у вас появляется имя файла и вы контролируете то, что загружаете.

Имя файла вы видите в окне выбора файла (browse). В поле file помещается длинный путь к файлу со всеми папками и дисками. Его никто не читает и не проверяет.

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

В поле file помещается длинный путь к файлу со всеми папками и дисками

В Safari под Mac OS я вижу именно имя файла… Но идею про удобное приложение я понял.

Ну Safari это вообще отдельная история, там нет поля ввода как такового. Это больше на лейбл похоже ))

1. при вкладывании инпута в лейбл связка for-id является лишней.
2. какраз-таки лучше применять какой-нибудь дисплей:нон, ибо в зависимости от системной шкурки инпуты могут распирать строку по разному.
3. дизайн стандартных контролов подходит лишь к стандартным же диалоговым окнам. так что нужно либо делать страницы в стиле системной шкурки (что в общем случае не имеет решения), либо перегружать стандартные контролы (что имеет хоть какое-то решение).
кроме того, стандартных контролов обычно не хватает, поэтому пишутся свои, а самописные априори не похожи на стандартные, что опять же вынуждает нас перегружать контролы дабы сохранить единообразность интерфейса.
а вот за что руки отрывать надо, так это за плохой дизайн. в частности, за создание своих контролов, которые:
а) не поддерживают навигацию клавишами
б) имеют фиксированный размер

вот за кнопку "сабмит" у этой формы я тебе что-нибудь и оторвал бы ^_^
почему она где-то далеко справа и выглядит как элемент дизайна, а не контрол?

Согласен, контролы не покрывают всех нужд современного вебдваноля, но использовать простейшие как они есть — ничего не мешает. Сложные кроссбраузерные контролы, в которых можно передвигаться табом и стрелками я сам очень люблю.

Насчёт этой формы и вообще контролов на этом сайте: все они сделаны в одном стиле, в стиле сайта, так что всё последовательно ;) Размещение и форма кнопки — это тоже некий ход который, как мне кажется, делает добавление комментария вполне очевидным.

красным цветом у тебя выделяются:
1. текущий пункт меню
2. название страницы
3. автор комментария

ни один из них не является "контролом" (ну разве что "автор" является ссылкой).

эту "очевидно расположенную кнопку" я искал секунд пять.
заполнив форму сверху вниз (а она вертикальная!) я перенёсся взглядом далее и обнаружил непонятные ссылки " ‹ Ранее / Позднее ›" (которые с какого-то перепугу ещё и свёрстаны в виде списка..), вместо ожидаемой кнопки "отправить".

кстати, какой великий смысл верстать комменты в виде списка определений? неужели то, что я пишу, является определением меня? %-)

Я, пожалуй, не буду утверждать, что этот сайт выполнен безупречно с точки зрения информационной архитектуры, дизайна и цветового кодирования — поэтому и готовится его новая версия. Однако предложенные решения, на мой взгляд, не препятствуют нормальной навигации и удобному использованию сайта.

В тоже время, я абсолютно уверен в уместности использования списка для оформления навигационных ссылок и элемента DL для отдельного комментария. Хотите поговорить об этом — пишите, не будем оффтопить здесь.

а чего тут обсуждать? человек, с пеной у рта евангелизирующий на тему семантики, задвинул её куда по дальше и размечает текст так, чтоб без стилей (точнее с дефолтными стилями) всё хорошо выглядело и поисковиками хорошо индексировалось.
лицемерие, чистой воды.

лицемерие, чистой воды

Оу, да вас я вижу уязвил кто-то. Повторюсь: я уверен в том коде, который пишу. Если вы чего-то не понимаете — это не моя забота. В этом посте обсуждение моего кода закрыто, продолжение здесь — pepelsbey@gmail.com.

ps: не удержусь, процитирую спецификацию — «Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words».

гы-гы, похоже авторы спеки тоже не знают смысла слова "definition"..
хтмл - был, есть, и останется языком визуальной, а не семантической разметки..
одно только деление элементов на строчные и блочные чего стоит...

"кастомные контролы" = "настраиваемые (индивидуальные) функциональные элементы"

Вот только с отключенной графикой не хорошо получается, кажется подобный вопрос уже поднимался в форумах Вебмаскона (про отключенные картинки, и недоступность элементов "модифицированных" форм)

Ну, теоритически, можно и с этим справиться при помощи экстра-разметки, если уж будет стоять цель сделать сайт безупречным.