Css відвідані посилання

Відомо досить багато методів для того, але який з них найбільш підходящий? Кольорове визначення посилань? Підкреслення? Картинка? Не варто забувати про дальтоніків, про кишенькові комп'ютери, і, звичайно ж, не варто забувати про браузерах, вірніше браузері - всіма улюбленому ослику - Internet Explorer. З'явилася, сьому версію цього браузера можна називати вже солідніше - осел. Але ця тема для окремої статті.

Отже, почнемо з Якоба Нільсена - визнаного експерта по зручності і простоті. Короткий виклад його статті по візуалізації посилань (Guidelines for Visualizing Links):

"Текстові посилання повинні бути кольоровими і підкресленими для того, щоб досягти необхідної воспринимаемости цих посилань, хоча існують кілька винятків."

За його словами, можна уникати підкреслень в навігаційному меню сайту і в списках посилань. При цьому відвідувачеві повинно бути гранично ясно, яку роль виконують ці об'єкти сторінки. Наприклад, якщо для визначення посилань використовуються червоний і зелений кольори, то необхідно підкреслювати посилання через найбільш поширених форм дальтонізму.

Підкреслення також обов'язково, якщо одним із пріоритетів є доступність сайту, тому що у багатьох людей поганий зір.

Приблизно 74% всіх сайтів використовують колірне визначення відвіданих і не відвіданих посилань. Це хороша дизайнерська традиція, до якої всі звикли.

У написаному вище коді роль галочки грає картинка (ticks_grety.gif), яка піднімається вгору (на 20 або 40 пікселів) в залежності від дії відвідувача (в звичайному стані не відвіданих посилання картинка невидно).

При цьому HTML-код сторінки виглядає дуже просто:

Відвідані посилання і CSS-елементи before і after

Internet Explorer гальмує широке використання вже давно з'явилися псевдо-елементів: before та: after. які ідеально виконують необхідну функцію визначення відвіданих посилань. Майже всі сучасні браузери підтримують ці елементи.

\ 00A0 означає непреривающееся порожній відступ (замість пробілу).

Я думаю, що різні галочки іноді можуть вводити користувача в оману, так як цей знак може нести в собі інший сенс. Тому необхідно дати знати відвідувачу сайту про те, яку роль виконує певний символ після посилань.

Якщо більш детально вивчити тему відвіданих посилань, то можливо ці ресурси (англійською мовою) допоможуть:

Кожен має право створювати свій власний стиль для посилань, будь то колір фону, колір посилання, підкреслення, колір і стиль підкреслення, галочка, певний текст чи щось інше. Головне думати і не забувати про найголовніше - відвідувачів вашого сайту.

До речі, замість знака кореня в Юникоде є і офіційні "галочки": (# x2713;) і (# x2714;)

Можна навести повний текст коду для оформлення посилань з використанням цієї фішки?

Необхідний текст коду описаний в цій статті

Робити зміщення бекграунду більше ніж 20px теж не вихід, тому що кількість рядків може бути будь-яким.

У браузері Firefox бекграунд не обмежується межами блоку, а малюється між блоком і текстом. тому все бекграунд будуть вилазити назовні.

Але, власне, навіщо вигадувати із зсувом, якщо можна просто задати різний url для background-image? Різниця в сотню байт, а зручностей - ціла купа.

2 rpoccMeucmep
>> Але, власне, навіщо вигадувати із зсувом, якщо можна просто задати різний url для background-image? Різниця в сотню байт, а зручностей - ціла купа.

різниця в тому що не треба чекати кілька секунд, поки картинка завантажитися з сервера (при наведенні на посилання мишкою)

хм. набираю другий запит в гуглі по темі CSS і обидва рази Ваші сторінки на першому місці. молодці хлопці;)

Я як кодер за те щоб посилання в тексті були обов'язково підкреслені.
Посилання в меню також дуже бажано щоб були зображенням а саме текстом, але не завжди можна переконати в цьому замовника і дизайнера, тому іноді доводиться робити меню як картинки так і на флеш (що я вважаю зовсім неправильним).

Пошук по сайту

Схожі статті