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

Хотя ссылки HTML и ограничены четырьмя свойствами, для элементов SVG есть интересное исключение: заполнение и подчеркивание могут изменять цвет после посещения. Это дало нам идею поэкспериментировать с ссылками в списке для чтения о веб-разработке, чтобы добавить удобства пользователям, визуально отметив, что уже было прочитано ранее.

Ссылки с элементами SVG

Основа разметки списков для чтения — это группа элементов нумерованного списка. В конце каждой ссылки добавлен небольшой элемент SVG:

<ol class="goals">
    <li><a href="/865/HTML"><img src="star-cave.jpg" alt>
        HTML Reading List
<svg viewBox="0 0 50 50"><polygon points="4,30 14,40 45,12 41,9 14,34 8,27"/></svg>
    </a>
    <li><a href="/919/CSS"><img src="milky-way-arch.jpg" alt>
        CSS Reading List
<svg viewBox="0 0 50 50"><polygon points="4,30 14,40 45,12 41,9 14,34 8,27"/></svg>
    </a>
</ol>

С помощью кода CSS ссылки располагаются одна над другой и объединяются линией:

ol.goals {
    list-style-type: none;
    margin-bottom: 2rem;
}
ol.goals li {
    position: relative;
    margin-top: 1.6rem;
}
ol.goals a img {
    vertical-align: middle;
    width: 75px;
    height: 75px;
    margin-right: 1rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #333;
}
ol.goals a {
    text-decoration: none;
    z-index: 3;
    position: relative;
}
ol.goals li:after {
    content: " ";
    position: absolute;
    height: 1.6rem;
    width: 3px;
    background: #888;
    left: 36px;
    top: 75px;
    z-index: 1
}

Дополнительный код CSS задает расположение элементов SVG и заполняет их белым цветом, таким же, как цвет фона веб-страницы:

ol.goals a svg {
    position: absolute;
    right: 0;
    width: 3rem;
    height: 3rem;
}
ol.goals a svg polygon {
    fill: white;
}

Обратите внимание, нельзя использовать заполнение или прозрачный цвет или подобную запись, например, rgba(0,0,0,0), если вам нужно, чтобы цвет элемента изменялся при посещении ссылки, по соображениям безопасности, подробнее о которых можно прочитать здесь.

При посещении ссылки текст в ней становится серым, а элемент SVG заполняется зеленым цветом:

ol.goals a:visited { color: #ccc; }
ol.goals a:visited svg polygon { fill: green; }

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

Без использования SVG

Хотя, на наш взгляд, элементы SVG дают самые широкие возможности для творчества при оформлении посещенных ссылок, можно использовать вариант этого приема и визуально отметить посещенную ссылку с помощью символов Unicode. Разметка будет следующей:

<ol class="goals">
    <li><a href="/865/HTML"><img src="/assets/images/icons/milky-way-cave.jpg" alt>
        HTML Reading List
        <span>✓</span>
    </a>
    <li><a href="/919/CSS"><img src="/assets/images/icons/mobius-arch.jpg" alt>
        CSS Reading List
        <span>✓</span>
    </a>
</ol>

Элемент span содержит символ Unicode, который показывает посещенность ссылки. Нужный код CSS, вероятно, полностью понятен:

ol.goals a span {
    position: absolute;
    right: 0;
    font-size: 3rem;
    color: #fff;
}
ol.goals a:visited span {
    color: green;
}

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

Два других интересных подхода к заданию стилей посещенным ссылкам включают способ Stelian Firez с использованием режимов смешивания и использование хранилища localstorage для отслеживания нажатых ссылок, предложенный Joel Califa.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание таблицы стилей для сброса для кода CSS и HTML5
• Использование единиц измерения rem
• Тетрадка в линейку с расположением на ней текста на SVG и CSS