Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 35
Полностью согласен с основной мыслью. ;)
Поведение и вид ссылки должно зависеть от контекста тоже. Но вид ссылки и её поседение должны быть как можно более консистентными на одном ресурсе.
Что же мы видем на любимой Хабре? ;)
8 разных видов ссылок по цвету, размеру, фону и поведению... и это не считая ещё подвала публикации и комментариев, где можно насчитать ещё 3-4 вида ссылок.
Повод помыслить... ;)
Поведение и вид ссылки должно зависеть от контекста тоже. Но вид ссылки и её поседение должны быть как можно более консистентными на одном ресурсе.
Что же мы видем на любимой Хабре? ;)
8 разных видов ссылок по цвету, размеру, фону и поведению... и это не считая ещё подвала публикации и комментариев, где можно насчитать ещё 3-4 вида ссылок.
Повод помыслить... ;)
Но вид ссылки и её поседение...Хе-хе, очепяточка: поседение > поведение!.. :)
Ссылки седеть пока не умеют...
хм. ещё большим поводом помыслить будет, если сделать такой же скриншот, только с одинаковым внешним видом ссылок.
и посмотреть что из этого будет более юзабилительно :)
Когда начинаются такого рода размышления и предположения, лучше всего просто взять и сделать предполагаемые варианты. Потыкать пощелкать, понаводить... комунить дать поэкспериментировать :)
За несколько таких практических подходов выработается чутье :) (наверно)
(также не нужно забывать, что невозможно угодить всем пользователям сразу)
и посмотреть что из этого будет более юзабилительно :)
Когда начинаются такого рода размышления и предположения, лучше всего просто взять и сделать предполагаемые варианты. Потыкать пощелкать, понаводить... комунить дать поэкспериментировать :)
За несколько таких практических подходов выработается чутье :) (наверно)
(также не нужно забывать, что невозможно угодить всем пользователям сразу)
Множество ссылок и различное их представление - следствие большого количества функций. Совершенно правильно они выглядят по-разному.
Можно подойти к проблеме с другого краю: возможно что-то стоит спрятать?
Можно подойти к проблеме с другого краю: возможно что-то стоит спрятать?
Когда ссылкой является сразу несколько слов, либо две ссылки в тексте примыкают друг к другу, подчеркивание просто необходимо для выделения ссылок еще до подвода мышки.
Моё имхо. Подчёркивание должно быть 50% прозрачности от цвета ссылки. CSS вам в помощь.
Также согласен с мыслью автора и позволю немного дополнить. Зачастую, перед тем как перейти по ссылке, в голову лезет вопрос, откроется ли страница в новом окне, либо в текущем? Хуже того, когда находишься на проекте насыщенным ajax, то ситуация куда более плачевная, поэтому можно было бы выделить еще тип перехода по ссылке, к примеру подчеркиванием
Респект автору, за, а вариант.
Не то чтобы совсем не в тему, но и не совсем в тему.
Сам постить не могу, посему расположу здесь.
В некоторых браузерах (не будем показывать пальцем) псевдокласс :hover применим только к тегам <a>. Для остальных же тегов он тупо игнорируется. Так вот, родилось кроссбраузерное решение сей проблемки. Только теперь указывать нужно не псевдокласс, а нормальный класс элемента. Пример
#content h1.hover {
color: #888;
text-decoration: none;
}
Собственно скрипт.
function addprops(root) {
if(root=='') root = document.getElementsByTagName("BODY")['0'];
for(var i=0; i<root.childNodes.length; i++) {
node = root.childNodes[i];
if (!node.tagName) continue;
node.onmouseover=function() {this.className+=" hover";}
node.onmouseout=function() {
this.className=this.className.replace(" hover", "");
this.className=this.className.replace("hover", "");
}
if(node.hasChildNodes()) addprops(node);
}
return 0;
}
Вставляю в документ я это вот так
window.onLoad = init();
function init() {
addprops('');
//сюда можно воткнуть ещё какие-нибудь функции
//чтоб исполнялись при загрузке
}
Сам постить не могу, посему расположу здесь.
В некоторых браузерах (не будем показывать пальцем) псевдокласс :hover применим только к тегам <a>. Для остальных же тегов он тупо игнорируется. Так вот, родилось кроссбраузерное решение сей проблемки. Только теперь указывать нужно не псевдокласс, а нормальный класс элемента. Пример
#content h1.hover {
color: #888;
text-decoration: none;
}
Собственно скрипт.
function addprops(root) {
if(root=='') root = document.getElementsByTagName("BODY")['0'];
for(var i=0; i<root.childNodes.length; i++) {
node = root.childNodes[i];
if (!node.tagName) continue;
node.onmouseover=function() {this.className+=" hover";}
node.onmouseout=function() {
this.className=this.className.replace(" hover", "");
this.className=this.className.replace("hover", "");
}
if(node.hasChildNodes()) addprops(node);
}
return 0;
}
Вставляю в документ я это вот так
window.onLoad = init();
function init() {
addprops('');
//сюда можно воткнуть ещё какие-нибудь функции
//чтоб исполнялись при загрузке
}
Это конечно же решение кроссбраузерности, однако очень громоздкое решение (= На крупных проектах типа Хабра не допустимо в принципе. Т.к. при большом числе ссылок на странице браузер будет откровенно "подвисать" при загрузке (на onload) - бегая по всем ссылкам и расставляя ховеры (=
Ой черт! у вас же скрипт вообще парсит весь дом! кошмар (=
кошмар-то кошмар. Но можно дописать ещё одну строчку и указав root, пройтись только по одной ветке дома.
if(root=='') root = document.getElementsByTagName("BODY")['0'];
else root = document.getElementsById(root);
if(root=='') root = document.getElementsByTagName("BODY")['0'];
else root = document.getElementsById(root);
а если я АЖКСом подгружаю контент?
не, не покатит — слишком узкое решение проблемы.
не, не покатит — слишком узкое решение проблемы.
да и вообще. Если верстать дивами, то максимальная "глубина залегания" нодов будет не больше 5-6. Соответственно, выделение памяти при рекурсии гораздо меньше.
Для сравнения в табличной верстке table->tbody->tr->td->p. А я часто видел и до трёх таблиц друг в друге.
Для сравнения в табличной верстке table->tbody->tr->td->p. А я часто видел и до трёх таблиц друг в друге.
ага. если я правильно понимаю, вы предлагаете по onmouseover тега (допустим) body вызывать обработчик, который будет спускаться по (опять же) всему дому и искать последний элемент в иерархии и что-то с ним делать.
Но ведь это же такой же проход по всему документу с той лишь разницей, что он будет выполняться гораздо чаще. Фактически, почти при каждом движении мышки.
Вот это, я считаю, уже совсем нерациональное решение.
Но ведь это же такой же проход по всему документу с той лишь разницей, что он будет выполняться гораздо чаще. Фактически, почти при каждом движении мышки.
Вот это, я считаю, уже совсем нерациональное решение.
Этому решению уже в обед сто лет... Ну, а если в комплексе лечить IE 6, то лучше уж воспользоваться библиотечкой IE7 от Дена Едвардса, и, тогда можно использовать и псевдо классы и даже почти все CSS 3 селекторы.
Я думаю, что можно потихоньку забивать на IE 6 в этом случае, а IE 7 уже умеет подсвечивать любые элементы.
Но, опять же, как сказали выше, лучше такое решение не использовать для страниц с большим количеством ссылок — будут тормоза.
Я думаю, что можно потихоньку забивать на IE 6 в этом случае, а IE 7 уже умеет подсвечивать любые элементы.
Но, опять же, как сказали выше, лучше такое решение не использовать для страниц с большим количеством ссылок — будут тормоза.
не плохо было бы для описания выложить пример,например как http://habrahabr.ru/blog/ui_design_and_usability/30759.html
и еще - текста очень много и трудно усваиваемый
и еще - текста очень много и трудно усваиваемый
Свежая статейка по поводу ссылок: Don't Click Here: The Art of Hyperlinking.
Посмотрите как здесь реализовано http://beta.bobrdobr.ru
У залогиненного пользователя очень сильные тормоза в ИЕ6 и Опере наблюдаются.
Есть идеи как ускорить?
У залогиненного пользователя очень сильные тормоза в ИЕ6 и Опере наблюдаются.
Есть идеи как ускорить?
спасибо
никогда не думал о подобной категоризации, воспринимал ссылки вообщем-то как единое целое; теперь вижу между ними разницу :-)
никогда не думал о подобной категоризации, воспринимал ссылки вообщем-то как единое целое; теперь вижу между ними разницу :-)
Все интересно, но сильно затяный рассказ.
Но спасибо за материал, возмем на заметку.
Но спасибо за материал, возмем на заметку.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Состояние hover: как должна вести себя ссылка при наведении