Исследование на тему замены стандартных кнопок

[@LeKot]

Жесть. Я недооценивал труд веб-работников.

[@MisterX]

А демку можно где-то глянуть?

[@khizhaster]

Да-да, покажите демку. Очень интересно, я как раз ковыряю гугло и ExtJS кнопки.

[@RayZ]

Читаем update к статье, или просто переходим по ссылке:
rayz.ru/misc/custombuttons/

[@Supercharged]

Да чтоб я на сайты ходил с такими кнопками…

[@khizhaster]

Простой пример — GMail :-) И ходят, поверьте мне, ходят!

[@Pirate]

Ходят, потому что аналогов нет. Но после введения этих кнопок, у меня сначала было какое-то отвращение к ним. Но это со временем прошло. Сейчас уже не обращаю на них внимание.

[@khizhaster]

Ой, да ладно ) Ну в конце-концов, если не утрировать, то какая разница? Кнопки то функциональны, во всех смыслах, выглядят оригинально и достаточно строго, выполняют свою работу. Чего же боле? Отчего же не ходить и не пробовать?
К тому же, лишние 20кб уже и не заметить. А ежели так тяжко, то можно включить стандартную версию (ну это касательно только гмыла :))

[@znvPredatoR]

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

[@slesar]

Вот есть хороший топик про кнопки habrahabr.ru/blogs/css/56389/

[@RayZ]

Я больше делал упор не на сам результат «посморите, какая красота», а на функциональность и применение.
В смысле — как это сделать и каковы подводные камни.

Поэтому и заголовок — Исследование…

[@pgg]

У вас код избыточный, посмотрите в камментах мой пример.

[@Arekus]

Вы меня простите конечно, но 126кб плюс 36 секунд ожидания окончания загрузки (в примере отвалился один файл) — проверял Firebug'ом — ради двух кнопок — это как-то чересчур.

[@RayZ]

Пардон, сейчас поправим ;)

В реалии интерфейс продукта требует наличие какого-нибудь js-фреймворка, и вышеописанное делалось далеко не для двух кнопок, а для сотен ;)

И не только для кнопок.

Думаю, вскоре появится ещё одно небольшое исследование по поводу другого рода «удобности»

[@gooddy]

задисейбленая кнопка не нажимается если жать где-то по середине, а если навести где-то с самого краю и попробовать нажать, то оппаньки :)

[@RayZ]

;) Это не баг, это фича
В цсс в демке забыл добавить пару строчек

[@kex]

В опере и ие6 жмется по всей ширине.

[@alekciy]

Эх… старая избитая тема. Учитывая, извините меня, ублюдочный уровень поддежки оформления стиля кнопок как со стороны браузеров, так со стороны и стандартов проще всего использовать дефолтные стили офорления. А свете юзабили это даже предпочтительно делать, т.к. на каком бы сайте я не был я сразу вижу, где есть кнопки ибо стиль оформления у них от сайта к сайту один и тот же — дефолтный.

И вообще главное ехать, а не шашечки ;)

[@RayZ]

Обоснуйте.

Кнопки рисуются как бы следуя законам гуя в котором порожден был браузер.
Любое приложение использует один стиль отображения интерфейса и по идее не должен выглядеть иначе. А тут у нас разброс и шатание. Я понимаю, какую сторону вы представляете. И вы правы, только не в моем случае.

Не с проста я статью начал со вышеперечисленных слов. Это было сделано ДЛЯ веб-приложения.
Юзабилити и дизайн имеет смысл. И попробуйте оспорить.

[@alekciy]

А я о веб и говорю. Законы гуя это все звучит хорошо я с этим согласен. Но в рамках какого то скомпилированного приложения. В рамках же веб приложения которое работает череб браузер не совсем согласен. Порой видишь на страницах такой закон гуя, что хочеться настучать дизайнеру по созвучному выступающему органу… Я привык к определенному виду кнопок в своем браузере, на какую бы страницу я не попал я всегда на ней без труда нахожу нужные кнопки. Но порой не сразу получается сориентироваться когда кнопки следуют законам гуя (особо когда их делает кривой дизайнер или кодер). И это не говоря уже о том, что у меня картинки отключены по дефолту…

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

[@MTonly]

Теперь увеличиваем размер шрифта средствами браузера и смотрим, что стало с кнопками. ;-)

[@pgg]

Только один маньяк из десяти использует эту функцию.
Остальные 99.9999% пользователей сети даже не догадываются о существовании этого.

Тем более адекватные браузеры давно делают zoom.

[@pvp]

фф3 — адекватный браузер? ну, по крайней мере, зум делает. Но с кнопками, как нам и намекал предыдущий оратор, при зуме происходит жопа.

[@MTonly]

20% пользователей, в отличие от пользователей IE, выбрали Firefox осознанно. И столь же осознанно изменят размер шрифта. Не сомневайтесь. ;-)

[@RayZ]

Что-то я не понял, а в чем проблема? Графика растягивается? :)

[@MTonly]

[@RayZ]

оу :) Какой ужас!

[@MTonly]

Вид → Масштаб → Только текст.

[@Mordraug]

я думаю, что можно немного усложнить разметку и сделать их масштабируемыми по самое «не балуйся» :)

[@Auru]

Не учитывается размер шрифта, в IE задизабленная кнопка реагирует на… фингеринг )

[@non7top]

блин. фф3 же поддерживает системные оформления. зачем еще нужны эти сложные и объемные велосипеды

[@Auru]

кроссбраузерность нужна видимо кому-то все еще

[@non7top]

кроссбраузерность — ненужный миф. бровзер должен быть удобным. отсутствие кроссброузерности — лишний повод подтолкнуть пользователей пересесть на нормальные бровзеры.

[@SegaZero]

нормальные — это на оперу?=) не раздувайте холивар:)

[@non7top]

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

[@Mordraug]

<holywar:off>
ie вполне себе нормальный браузер — он умеет показывать страницы.

Докажите обратное той колде народа, что его используют (какая-то часть даже сознательно) :D
</holywar:off>

[@non7top]

да вот только страницы он не умеет показывать. и 99.9% кто его использует делают это несознательно.

[@MTonly]

Браузер, бровзер, броузер. Вы бы уже определились с написанием (подсказка: правильно — браузер). ;-)

[@non7top]

бровзер. все что с кросс — от лукавого

[@MTonly]

А теперь внимание: правильный ответ (подсказка: смотреть надо на транскрипцию). ;-)

[@non7top]

да и без транскрипции ясно как слово browser читается по-английски, достаточно вспомнить правило о произношении «o» под ударением. но ведь мы ж здесь не на чистом английском говорим. и вообще речь о бровзерах.

[@MTonly]

Жесть.

[@pgg]

Специально поинтерисовался у нашего переводчика:

англичане: "[броузер]"
американцы: "[браузер]"

Правильно и БРАУЗЕР и БРОУЗЕР, но никак не бровзер (уж вы меня простите, но это вообще не правильно). Так говорят все как хотят. Да, кстати и ВАЛИДАЦИЯ звучит как [вэлидэйшн].

GO — Гоу
MAKE — Мэйк
RUN — Ран
BROTHER — Бразер, браза.

[@non7top]

>англичане: "[броузер]"
вот это очень интересно. похоже это какие-то новые тенденции в разговорном языке англичан. тем более что они нарушают правила произношения. да и вряд ли англичане говорят р на конце слова.

>BROTHER — Бразер, браза.
да, браза, ты очень ч0ток.

для тех кто все еще в танке. бровзер это не то как читается browser. бровзер — это программа вэб страниц, т.е. то что в английском называется browser

[@Riddler]

Тогда уж бровСер

[@DMS]

вам не кажется, что тут явно что-то не так?

[@pgg]

Всё нетак!

[@RayZ]

Кажется. :) Но все началось далеко до создания кода, не так ли?

[@claymore]

позвольте спросить, а чем ExtJs то не подошел? там и стилизация есть и иконки на кнопке

[@RayZ]

:) Весом библиотек, скоростью работы, надобностью/ненадобностью функционала.

[@Prometheus]

Афигеть, конечно, стока кода и стилей и все ради какой-то кнопочки :)
Должно быть таких кнопочек в проект дофигища.

[@pgg]

Согласен, тут можно половину отрезать.

[@RayZ]

Предложите оптимальный код, будем хлопать в ладоши!

[@Octane]

Лучше взять обычный <button>…</button>, сбросить его стандартное оформелние и положить внутрь необходимые элементы. Тогда кнопка сохранит превычное поведение и будет оформлена в нужном стиле.

[@pgg]

Я так и сделал :-) pavelgorlov.ru/pgbtn/

[@RayZ]

Молодец! Мне нравится реализация.

[@Xobb]

В никс браузерах глючит. подтверждаю (:

[@s1im]

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

[@Arefiev]

при нажатии на кнопку текст смещается немного — как и должно быть — респект

[@pgg]

Спасибо! У меня нехватает вермени, чтобы пофиксить это по все остальные браузеры и кармы для того, что бы писать об этом.

[@pgg]

В вот мой вариант кнопки, без таблицы и с png32. И код меньше.

pavelgorlov.ru/pgbtn/

+ jQuery PG-плагин
+ Невалидны CSS код :-)
+ Два встроенных метода:
.pgFlash() — флешит кнопку,
.pgEnable(boolean) — выключает\включает кнопку, а при включеннии флешит.
+ Одна картинка:

[@Reey]

М, поехало чуть чуть.
www.picamatic.com/show/2009/04/10/04/24/3199431_365x202.png
Vista, ff 3.1b3 :)

[@pgg]

Будем лечить! Самое страшное это заставить эту конопку быть резиновой и поддерживать png-32 на фоне в IE6

[@mocksoul]

пациент мёртв, чего там лечить.

вы хоть понимаете что если умудрились сделать разное поведение в ff2, ff3 и ff3.1 — то с огромной доли вероятности вам для каждого багфикса фф придётся кнопки переделывать.

Да и значит накосячили вы там порядком. Слишком шатко.

[@alexkartashev]

А прозрачность png-8 методом cssing.org.ua/2008/11/07/png-8-alpha/ не пробывал заменить? Почти везде удается безболезненно перейти с png-24 на png-8. Часть проблемы уйдет так думаю.

[@pgg]

Нет, не читал, но читал в техногрете, а потом и проверял.
ИЕ неумеет, а гуглхром глуюч, отображать png8+alpha_channel

Хотя вы знаете, у меня нинастолько большое изображение, что бы его оптимизировать

[@alexkartashev]

ИЕ6 умеет вполне адекватно, в данном случае думаю разница будет малозаметно. Chrome тоже в порядке. В статье выше указанной описан способ предварительной обработки изображений.

[@Krovosos]

Я боюсь подумать о выпадающем списке в Ваших руках… ;-)

ЗЫ В Хроме 2.0.169.1 кнопка PushMe не работает

[@RayZ]

Кнопка ПушМи DISABLED. Вы статью читали?

[@badlittleduck]

Как это сделали в Google
www.usability.by/recreating-the-button/

[@shtirlic]

Про кнупки гмейла тут
stopdesign.com/archive/2009/02/04/recreating-the-button.html
и тут stopdesign.com/eg/buttons/3.0/code.html#

[@MKrivosheev]

Маленький оффтоп: а как Вы счиатаете, при наведении на кнопку курсор должен становиться таким же, как при наведении на ссылку или оставаться стрелкой?

[@nobr]

Мне кажется, что любой элемент на сайте должен вести себя также, как и в реальной ОС: при наведении кнопка подсвечивается, а курсор остаётся обычной стрелкой.

[@RayZ]

Кнопки в стиле системы. Эта система — продукт для которого делаются кнопки. :)

[@nobr]

Потрясающая работа. Спасибо за хорошую статью.

Мне стало интересно: можно ли сделать кнопку, которая растягивалась бы не только по ширине, но и по высоте? Нужна таблица на девять ячеек?

[@RayZ]

Нет.

[@RayZ]

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

[@apkawa]

Я так и не понял что изменилось.
s57.radikal.ru/i155/0904/b4/1af64d5001d3.png
Кнопка как была обчыной так и осталась, разве что в правой какая то иконка появилась, которая невписывается.

[@RayZ]

Не скопированы картинки-спрайты для кнопок.

[@TonyClifton]

chikuyonok.ru/2009/04/buttons-reloaded/

[@padonaque]

вот она — логика пользователей браузера опера.

[@RayZ]

да и Опера в расчет не бралась при изготовлении. :) Я конечно извиняюсь перед пользователями оперы, что обошел этот браузер во время изготовления статьи.

[@assTeT]

Ахахаха =) Браво!!!
Так их, этих двух!!!

[@mocksoul]

эм… 9.6 — не криво =)

[@Mordraug]

интересное исследование :)

одно время меня устраивало вот такое решение.

[@RayZ]

Ссылка не открывается :-/

[@Mordraug]

не знаю почему может не открываться.

попробуйте нагуглить Wii Buttons — по ссылке, собственно — они.

[@aps]

[span][div]...[/div][/span] — некрасиво, даже если через CSS переопределено.
Кстати, если вы используете jquery, не смотрели в сторону CSS FrameWork jquery UI? Там куча заготовок для кнопок, панелей, иконок и т.п.

[@RayZ]

Я знаю про него, конечно же, но нет. Какой бы был смысл в моем опыте и исследовании?

[@aps]

>Какой бы был смысл
В принципе подобный опыт всегда положительный, Но я придерживаюсь мнения, что на смену всякой самодеятельности в области ui должны придти типовые решения. Может конечно я и ошибаюсь. Но глядя на эволюцию ui в десктопных приложениях все к тому должно идти.

[@Triall]

По-моему слишком перегружено все, а jQuery можно юзать для наведения и нажатия.

[@aps]

>а jQuery можно юзать для наведения и нажатия.
хорошо хоть jQuery, а не extJS.

Для наведения и нажатия НУЖНО юзать соответствующие CSS-свойства hover и active. Они кстати и в ie6 ограниченно но работают.

[@Duke]

а что будете делать для?

[@Duke]

input type=file…

[@TiGR]

Видимо, отрисовывать заново, выставляя основному элементу 100% прозрачность. Где-то эта техника описывалась.

[@pgg]

Соберу плагин из моей кнопки и моего textinput'a с включенным readonly

[@almirus]

а firefox на первой кнопке появляется рамка при нажатии
вторая кнопка не нажимается хотя в explorer 6 и opera 9.5 кнопка визуально нажимается

[@milax]

Ничего себе))

[@brmn]

а так?
stopdesign.com/eg/buttons/3.0/code.html

[@Nedomolkin]

интересное исследование.

небольшая опечаточка:

// Замечательный атрибут,
// предотвращающий выделение текстовой информации внутри блока
newBtnContainer.setAttribute('uselectable', 'on');

uselectable -> unselectable

[@mocksoul]

бу

$(el).disableSelection() / $(el).enableSelection() — кроссбраузерный вариант (effects.core вроде).

[@Nedomolkin]

да, верно. такое есть в ui.core. там: .attr(«unselectable»,«on»).css(«MozUserSelect»,«none»).
и у автора newBtnContainer не jquery объект по коду.

[@mocksoul]

не только:

(ui.core.js)

disableSelection: function() {
    return this
        .attr('unselectable', 'on')
        .css('MozUserSelect', 'none')
        .css('KhtmlUserSelect', 'none')
        .bind('selectstart.ui', function() { return false; });
},

[@mocksoul]

спорно…

а почему бы в IE6/7 рисовать обычные инпуты (один фиг юзеры оных браузеров не особо за финтифлюшками следят) а во всех остальных (включая IE8) по-человечески заюзать inline-block (коим на самом деле должна быть кнопка, а вовсе не inline).

[@mocksoul]

1) это будет гораздо быстрее работать
2) в IE при этом пострадает только дизайн, что терпимо, лишь бы функционал работал
3) будет больший охват браузеров. Уж лучше инпут обычный показать, чем все развалилось бы нахрен =)

[@terloger]

«В конце концов за основу была взята концепция, используемая в ExtJS, а именно — таблица.»

Блин, да вы оттуда все стащили и html и css и спрайты. Не есть гуд. Про лицензию вспомните.

[@RayZ]

Спрайты сделаны своими руками. И код, впрочем тоже. ;) А то, что я подглядел идею не делает меня нарушителем лицензии. Все свое.

[@BleSSeD]

У меня в Опере 9.25 глюки. Края и средина кнопки разорваны…

[@mihdan]

Это просто не описуемо, к чему такие страшные извращения?