Css visited a: Псевдокласс :visited | htmlbook.ru

Содержание

HTML и CSS с примерами кода

Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.

Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как :link, :hover и :active, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :visited до правила :link, но после других, определённых LVHA-порядком: :link:visited:hover:active.

Warn

Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill и stroke.

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

Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.

Псевдоклассы

Синтаксис

Спецификации

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>visited</title>
    <style>
      a:link {
        color: #0000d0; /* Цвет ссылок */
      }
      a:visited {
        color: #900060; /* Цвет посещённых ссылок */
      }
    </style>
  </head>
  <body>
    <p><a href="page/1.html">Посещённая ссылка</a></p>
    <p><a href="page/2.html">Непосещённая ссылка</a></p>
    <p><a href="page/3. html">Непосещённая ссылка</a></p>
  </body>
</html>

См. также

Ссылки

  • Псевдо-класс :visited MDN (рус.)

причины невозможности изменения размера шрифта

От автора: посещенные ссылки отображаются фиолетовым цветом; непосещенные — отображаются синим. Это различие восходит к началу Интернета. Но можно настроить эту визуальную разницу с помощью псевдо-селектора :visited CSS!

Скажем, вы хотите сделать посещенные ссылки серыми и маленькими, чтобы указать пользователю, что эта ссылка «обработана»:

a:visited { color: gray; font-size: 6px; }

a:visited {

  color: gray;

  font-size: 6px;

}

Обратите внимание, что посещенная ссылка выглядит серой, как и ожидалось, но размер шрифта не изменился! Это потому, что изменение размера шрифта было бы уязвимостью безопасности! Если бы CSS мог установить размер шрифта по-другому, я (Джим) мог бы сказать, посещали ли вы pornhub. com. Но как?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Веб-страницы могут проверять визуализированные на странице элементы. Самый очевидный способ с помощью window.getComputedStyle(). Вот сообщаемые свойства посещенной ссылки выше, как их указывает браузер: font-size: 18px; color: rgb(0, 0, 238).

Если бы getComputedStyle отправлял для посещенных ссылок 6px вместо 18px, я мог бы на этой странице сгенерировать ссылку pornhub.com, а затем протестировать размер шрифта, чтобы раскрыть историю просмотров. Тогда я смогу показывать вам целевую рекламу, продавать ваши данные, шантажировать вас и так далее. Эта брешь в безопасности была закрыта, так и для a:visited нельзя установить font-size.

Но обратите внимание на то, что для цвета посещенной ссылки getComputedStyle сообщает: rgb(0, 0, 238), т.е. синего цвета. Это не так — ссылка серая! Для свойства color браузеры по-разному закрывают брешь в безопасности: вместо того, чтобы запрещать настройку свойства, они лгут getComputedStyle о его значении.

Почему два подхода? Почему мы тоже не можем солгать getComputedStyle о font-size? Причина в том, что веб-страницы могут проверять визуализированные элементы не только с помощью getComputedStyle. Веб-страницы могут проверять положение элемента на странице с помощью .pageXOffset или .pageYOffset. Поскольку font-size посещенной ссылки будет влиять на смещение других элементов, страница может косвенно проверить, была ли ссылка посещена. Отключение font-size для a:visited является жестким, но более безопасным решением.

Существует короткий белый список свойств, например color, которые не влияют на макет страницы, и поэтому не должны обнаруживаться. Они все связаны с цветом цвета. Все остальные свойства CSS запрещены.

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

Автор: Jim Fisher

Источник: //jameshfisher.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

CSS псевдокласс :visited

Селектор :visited применяет стиль к посещенным ссылкам страницы.

Псевдокласс :visited применяется, когда ссылка открывается пользователем.

Браузеры разрешают следующие стили:

Версия¶

CSS1

Синтаксис¶

:visited {
css declarations;
}

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a{
      display:block;
      padding:5px;
      }
      a:visited {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора :visited</h3>
    <a href="https://www.
w3docs.com">W3docs</a> <a href="https://stackdev.io/">Stackdev</a> </body> </html>
Попробуйте сами!

В данном примере селектор :visited применяет зеленый цвет к посещенной ссылке.

Рассмотрим другой пример, где стиль применяется к ссылкам unvisited, visited, hover и active:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p { 
      font-size: 20px; 
      }
      /* unvisited link */
      a:link {
      color: #cccccc;
      }
      /* visited link */
      a:visited {
      color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
      color: #8ebf42;
      }
      /* selected link */
      a:active {
      color: #666666;
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора :visited</h3>
    <p>Visit our 
      <a href="https://www.
w3docs.com/">website</a>. </p> </body> </html>
Попробуйте сами!

Css - Использование псевдокласса visited | GeekBrains

Не могу заставить работать псевдокласс visited. Ниже приведен код.  Link, hover, active работают. Visited не работает. После покидания ссылки после active устанавливаются свойства link. Поискал в сети, но кроме правильного(?) порядка описания свойств (link, visited, hover, focus, active) ничего полезного не нашел. Использую Win10, Firefox, Open Server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>visited</title>
<style> a:link {
color: green

; /* Цвет ссылок */
text-decoration: none;
font-size: 16px;
font-weight: bold;
} a:visited {
color: navy; /* Цвет посещенных ссылок */
font-style: italic;
} a:hover {
color:orange;/* Цвет ссылок при наведении */
} a:active { /* Цвет активной ссылки */
color:red;
font-style: italic;
} </style>
</head>
<body>
<p><a href="#1. html">ссылка</a></p>
<p><a
href="#2.html">ссылка</a></p>
<p><a href="#3.html">ссылка</a></p>
</body>
</html>

01 октября 2015 в 22:04

CSS: посещенный селектор

Дополнительные примеры "Попробуйте сами" ниже.


Определение и использование

Селектор : посещено используется для выбора посещенных ссылок.

Совет: Используйте селектор: link для стилизации ссылок на непосещенные страницы, селектор: hover для стилизации ссылок при наведении на них указателя мыши, а : активный селектор для стилизации ссылок при нажатии на них.

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

Допустимые стили:

  • цвет
  • цвет фона
  • цвет рамки (и цвет рамки для отдельных сторон)
  • цвет контура
  • столбец-линейка-цвет
  • цвет частей заливки и обводки

Все остальные стили унаследованы от ссылки:.


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.

Селектор
: посетил 4,0 7,0 2,0 3,1 9,6

Синтаксис CSS

: посетил {
css декларации ;
}



Другие примеры

Пример

Выбор и стиль непосещенных, посещенных, наведенных и активных ссылок:

/ * непосещенная ссылка * /
a: ссылка {
цвет: зеленый;
}

/ * посещенная ссылка * /
a: посетил {
цвет: зеленый;
}

/ * наведение курсора мыши на ссылку * /
a: парение {
цвет: красный;
}

/ * выбранная ссылка * /
а: активный {
цвет: желтый;

}

Попробуй сам "

Пример

Стили ссылок с разными стилями:

а. ex1: hover, a.ex1: active {
цвет: красный;
}

a.ex2: hover, a.ex2: active {
font-size: 150%;
}

Попробуй сам "

Связанные страницы

Учебник

CSS: ссылки CSS

Учебное пособие по CSS: Псевдоклассы CSS



: посещено - CSS: каскадные таблицы стилей

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

 
а: посетил {
  цвет: зеленый;
}  

Стили, определенные псевдоклассом : посещаемый , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : hover или : активный ), который имеет как минимум такую ​​же специфичность. Чтобы правильно оформить ссылки, поместите правило : visit после правила : link , но до правил : hover и : active , как определено в LVHA-order : : link - : посетил - : завис - : активен .

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

  • Допустимые свойства CSS: color , background-color , border-color , border-bottom-color , border-left-color , border-right-color , border-top -color , column-rule-color , outline-color , text-decoration-color и text-focus-color .
  • Допустимые атрибуты SVG: заливка и штрих .
  • Альфа-компонент разрешенных стилей будет проигнорирован. Вместо этого будет использоваться альфа-компонент состояния элемента не : посещено , за исключением случая, когда этот компонент имеет значение 0 , и в этом случае стиль, установленный в : посещенный , будет полностью проигнорирован.
  • Хотя эти стили могут изменить внешний вид цветов для конечного пользователя, метод window. getComputedStyle будет ложным и всегда будет возвращать значение не : посещенного цвета .
  • Элемент никогда не соответствует : посещено .

Свойства, которые в противном случае не имели бы цвета или были бы прозрачными, не могут быть изменены с помощью : посещено . Из свойств, которые могут быть установлены с помощью этого псевдокласса, ваш браузер, вероятно, имеет значение по умолчанию только для color и column-rule-color . Таким образом, если вы хотите изменить другие свойства, вам необходимо присвоить им базовое значение вне селектора : visit .

HTML

   Вы уже переходили по этой ссылке?  
Вы уже переходили по этой ссылке.

CSS

  a {
  
  цвет фона: белый;
  граница: сплошной белый 1px;
}

а: посетил {
  цвет фона: желтый;
  цвет границы: горячий розовый;
  цвет: горячий розовый;
}  

Результат

Таблицы BCD загружаются только в браузере

Конфиденциальность и селектор: посещенный - CSS: Каскадные таблицы стилей

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

Чтобы смягчить эту проблему, браузеры ограничили объем информации, которую можно получить по посещенным ссылкам.

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

  • Окно .getComputedStyle и аналогичные функции, такие как element.querySelector , всегда будут возвращать значения, указывающие, что пользователь никогда не посещал ни одну из ссылок на странице.
  • Если вы используете родственный селектор, например : посещенный + диапазон , соседний элемент ( span в этом примере) будет оформлен так, как если бы ссылка не была посещена.
  • В редких случаях, если вы используете вложенные элементы ссылки и сопоставляемый элемент отличается от ссылки, наличие которой в истории проверяется, элемент будет отображаться так, как если бы ссылка не была посещена.

Вы можете стилизовать посещенные ссылки, но есть ограничения на то, какие стили вы можете использовать. К посещенным ссылкам можно применять только следующие стили:

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

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

 : ссылка {
  контур: синий пунктир 1px;
  цвет фона: белый;
  
}

: visit {
  цвет контура: оранжевый;
  цвет фона: зеленый;
  цвет: желтый;
}
  

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

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

CSS: посещенный селектор


В этом руководстве по CSS объясняется, как использовать селектор CSS под названием : посетил с синтаксисом и примерами.

Описание

Селектор CSS: посещенные позволяет выбирать посещенные ссылки.

Синтаксис

Синтаксис CSS-селектора: active:

  a: посетил {style_properties}  

Параметры или аргументы

style_properties
Только стили CSS, относящиеся к цвету, которые можно применить к посещенной ссылке.

Примечание

  • Селектор: посещенный - это псевдокласс, который позволяет вам выбрать ссылку, которая была посещена.
  • Из-за конфиденциальности существует только несколько цветовых стилей, которые можно применить с помощью селектора: посещенный, например background-color, color, border-color, outline-color.
  • См. Также селекторы: link и: hover.

Совместимость с браузером

Селектор CSS: посещенный имеет базовую поддержку в следующих браузерах:

  • Хром
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Пример

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

С тегом

Давайте посмотрим на пример CSS: посещаемый, в котором мы применяем селектор: посещенный к тегу .

CSS будет выглядеть так:

  a: посетил {фон: желтый; }  

HTML будет выглядеть так:

    

Если тег не посещался, это будет выглядеть так:

Затем, как только вы перейдете к тегу , селектор: visit будет стилизовать тег следующим образом:

В этом: посещенном примере ссылка "CheckYourMath.com "будет отображаться на желтом фоне только после посещения ссылки.

Предотвращение атак на историю пользователя с помощью CSS: посещенные селекторы

Предотвращение атак на историю пользователя с помощью CSS: посещенные селекторы
Л. Дэвид Барон, Mozilla Corporation

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

Какое-то время было широко известно, что способность CSS стилизовать посещенные ссылки отличаются от непосещенных, в сочетании с другими веб-ссылками такие технологии, как JavaScript или просто загрузка фоновых изображений, позволяет веб-страницам определять, присутствует ли URL-адрес в истории пользователя. быстро и без какого-либо взаимодействия с пользователем. Это верно в текущие версии всех основных веб-браузеров. У меня есть решение, которое я считает, что устраняет эту проблему и, следовательно, помогает пользователям вести свою историю private, когда они используют веб-браузер, реализующий это решение.

У меня есть патчи, реализующие это решение, которые, как мне кажется, в основном завершены, и я скоро буду запрашивать отзывы, чтобы начать процесс включения их в будущую версию Gecko, макет движок, используемый Firefox.

Как можно использовать CSS для запроса истории браузера пользователя

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

: ссылка,: посетил {
    / * для всех ссылок * /
    оформление текста: подчеркивание;
}

:ссылка на сайт {
    / * для непосещенных ссылок * /
    цвет синий;
}

: visit {
    / * для посещенных ссылок * /
    цвет: фиолетовый;
} 

Затем авторы могут написать сценарий, использующий метод getComputedStyle метод определения посещенных ссылок:

var links = document.links;
for (var i = 0; i  href была посещена
    }
}
 

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

Однако этого недостаточно, поскольку в Интернете существует множество других вещей. страницы могли сделать, например:

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

Чтобы предотвратить доступ веб-страниц к истории пользователя этими способами, браузеры должны ограничивать возможность веб-страниц стилизовать страницы на основе посещаются ли ссылки. Создание getComputedStyle и связанных функций не достаточно.

Пределы предлагаемого решения

Решение, которое я предлагаю (и реализовал), предназначено для защитить от атак на историю пользователя с помощью CSS: посетил это происходят без какого-либо взаимодействия с пользователем и могут быть выполнены в разумные количество времени.

Он не предназначен для устранения атак, связанных с взаимодействием с пользователем. Для Например, веб-страница может сделать некоторые ссылки скрытыми, а некоторые - видимыми на основе какие сайты посещаются, а затем определите, на что нажимает пользователь.Пользователи, которые хотят обезопасить себя от таких эксплойтов, должны отключить раскраска посещенных ссылок, что можно сделать в Firefox 3.5 и новее используя предпочтение layout.css.visited_links_enabled в о: конфиг .

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

Помимо истории, веб-браузеры также хранят кеш содержимое большинства страниц, которые пользователь недавно посещал.Кеш отличается от истории: история запоминает только URL-адрес страница, тогда как кеш содержит содержимое страницы, так что он может загружается быстрее при следующей загрузке. Следовательно, кеш скорее всего чтобы вернуться назад значительно меньше времени. Это решение не касается способы, которыми веб-страницы могут определить, что находится в кеше пользователя (который не имеют отношения к CSS : посетили селекторов).

Эффекты на веб-страницах

Решение, которое я реализовал, оказывает три основных эффекта на то, что Web страниц можно:

  • Это делает getComputedStyle (и аналогичные такие функции, как querySelector ) лгут, действуя так, как будто все ссылки не посещаются.

  • Он заставляет определенные селекторы CSS действовать так, как будто ссылки всегда не посещаемые, даже когда их посещают. Это происходит в двух случаях. В во-первых, это селекторы-братья (технически комбинаторы), например : посещенный + диапазон , который выбирает любой охватывает элемент , который является следующим родственником посещенной ссылки. Для подобных селекторов мы всегда действуем так, как будто ссылка unvisited, поскольку элемент, соответствующий селектору (диапазон), не ссылка или один из ее потомков.Второй - редкий случай вложенные элементы ссылки. В этих случаях, когда сопоставляемый элемент является или является потомком другой ссылки, отличной от той, наличие которой в истории проверяется, мы разбиваем потомственные и дочерние селекторы просто как и в предыдущем случае, а также немного изменим наследование CSS правила, чтобы соответствовать.

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

  • Ограничивает свойства CSS, которые можно использовать для стилизации посещенных ссылок. до цвет , цвет фона , бордюр - * - цвет , контур-цвет и, столбец-правило-цвет и, когда и непосещенный, и посещенный стили являются цветами (не отрисовкой серверов или ни одного), заполняем и ходов объектов.Для свойств, которые не разрешены (и для альфа-компонентов разрешенные свойства, когда цвета rgba () или hsla () или прозрачный используются), вместо него используется стиль непосещенных ссылок.

Во втором и третьем случаях, когда стили для: visit отключены, существующие стили для: link используются вместо них, поэтому существующие веб- страницы будут продолжать работать.

Предлагаемое решение

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

Для каждого узла вместо вычисления его стиля путем сопоставления селекторов против: ссылка и: посещено в зависимости от того, есть ли ссылки у пользователя истории, мы сначала вычисляем стиль, сопоставляя селекторы, как если бы все ссылки не посещаются. (Это создает объект, представляющий вычисленное style для элемента, который в нашем коде называется nsStyleContext .) Затем, если у узла есть соответствующая ссылка, мы вычисляем стиль во второй раз на предположение, что соответствующая ссылка посещена, а все остальные ссылки не посещенный. Это дает второй nsStyleContext , который мы дать первому контексту стиля указатель на (названный его стиль при посещении ). Мы также записываем в контексте первого стиля была ли посещена соответствующая ссылка. Затем мы обрабатываем все динамические изменения в документе или стиле, которые потребуют любого из этих контексты стилей, которые необходимо обновить, обновив их по мере необходимости.

Весь код, кроме кода, специально предназначенного для использования на основе стиля в истории используется первый контекст стиля, так как весь наш существующий код делает. Это вызывает getComputedStyle и другие связанные функции, позволяющие лгать о том, есть ли ссылки в истории пользователя.

Затем мы делаем свойства, которые веб-страницы должны иметь возможность стилизовать иначе для посещенных ссылок ( цвет , цвет фона , рамка - * - цвет , цвет контура , цвет правила столбца , заполнение , и ход ) включите получение стилей для посещенных ссылки, имея код, реализующий рисунок для этих свойства получают цвет для рисования с помощью функции, которая объединяет данные из двух контекстов стилей в зависимости от того, является ли соответствующая ссылка посетил.Если соответствующая ссылка не посещена, эта функция возвращает цвет из контекста первого (нормального) стиля. Если соответствующая ссылка посещенный, он возвращает цвет, R (красный), G (зеленый) и B (синий) компоненты берутся из контекста второго стиля (стиль при посещении), но компонент A (альфа) идет из первого. Однако есть один исключение из второго правила (для обработки случая, когда первый стиль контекст имеет используемый цвет, а контекст второго стиля имеет цвет чья альфа равна 0, например прозрачный , у которого нет значимые компоненты R, G и B): если цвет в style-if-visit имеет компонент A, равный 0, тогда цвет из нормального стиль всегда используется.

Стоит отметить, что в зависимости от того, когда начинается реализация изображение загружается для изображений, на которые ссылается CSS, изображений, которые ссылаются на стили if-visit для background-image , и т. д., все еще могут быть загружены. Однако важно, чтобы реализация гарантирует, что либо они никогда не загружаются (предпочтительно), либо что они всегда загружаются в одно и то же время, независимо от того, являются ли ссылки посетил.

Риски

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

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

Ограничения на будущие изменения того, какие браузеры поддерживают

Одна из проблемных областей будущего, в которой мы могли бы внедрить новые способы для Интернета страниц, чтобы определить, есть ли ссылки в истории, используя: посещение - это указатель событий собственность, как указал мой коллега Роберт О'Каллахан.Если в в будущем мы добавляем (очень востребованные) значения к этому свойству, которые позволяют события мыши для доступа к элементам в зависимости от того, являются ли части изображение или части элемента прозрачны, нам нужно быть осторожными в два случая. Во-первых, фильтры SVG позволяют менять альфа-канал и цвет. составные части. Во-вторых, если мы разрешим фоновые изображения (см. Выше), эти изображения может иметь прозрачность в разных местах.

Этих проблем можно избежать одним из двух способов. Мы могли гарантировать эти события-указатели всегда смотрят на прозрачность на основе непосещенных стили.Или, наоборот, если мы не разрешаем фоновые изображения, мы может гарантировать, что указатели-события смотрят на прозрачность до обработка SVG-фильтров (что в любом случае может быть проще).

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

История изменений

9 марта 2010 г.
Оригинальная версия
25 марта 2010 г.
Добавлены цветные части ' заливка ' и Свойства ' stroke ' в список свойств.
30 марта 2010 г.
Пытался сделать среднюю пулю под Эффекты на Веб-страницы немного понятнее
31 марта 2010 г.
Добавлен
См. Также раздел, указывающий на блог Mozilla Security и на ошибку 147777. Прекратить отмечать как черновик. Также добавлен пост в блоге Hacks.
1 апреля 2010 г.
Уточнено, что для свойств fill и stroke резервный цвет не изменится для: посещенный (только цвета в качестве основных значений, когда оба значения являются цветами).Упоминаются потенциальные проблемы с холстом в будущем. Исправлена ​​опечатка в комментарии в примере в постановке задачи.
2 апреля 2010 г.
Добавлен цвет правила столбца по предложению Дэйва Хаятта
6 апреля 2010 г.
Два изменения в разделе предлагаемых решений: Добавлено исключение для функции смешивания цветов, когда у стиля при посещении альфа 0. Добавлено примечание о времени загрузки ресурса.

: посетили | Codrops

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

Обратите внимание, что он выберет только якоря , которые имеют атрибут href .


 Случайная ссылка 
 Внутренняя ссылка 
 Внешняя ссылка 



 Без атрибута href 
                 

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

Псевдокласс : посещенный применяется после того, как ссылка была посещена пользователем.

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

ссылка {
    / * стиль ссылок * /
}

а: посетил {
    / * стиль посещенной ссылки * /
}

a: hover {
    / * стили наведения * /
}

a: active {
    / * стили активного состояния * /
}
                 

Порядок можно легко запомнить с помощью мнемоники, например « L ast V intage H at A vailable».Вы можете создать свой собственный на spacefm.com.

Этот порядок является предпочтительным, потому что в противном случае некоторые стили состояния могут переопределить другие стили состояния, что приведет к их неправильной работе. Например, если вы должны были стилизовать состояние : посещено последним, оно переопределит состояния : hover и : active ссылки, а стили : посещено будут применяться независимо от того, является ли ссылка зависал или щелкал.

Кроме того, псевдокласс : link выберет все ссылки, даже те, которые уже стилизованы с использованием любого из трех других псевдоклассов. Таким образом, стили, примененные с использованием : visit , будут переопределены стилями, примененными с использованием : link . Способ избежать этого - использовать порядок, указанный выше.

Элемент может быть как : посещенный, , так и : активный (или : ссылка и : активный ).

Через некоторое время браузер может выбрать возврат ссылки из состояния : посещено в исходное состояние : ссылка .

Общая информация и примечания

В дополнение к четырем упомянутым состояниям вы можете (читайте: должен, для большей доступности) также стилизовать ссылки, когда они сфокусированы. Для этого используется псевдокласс : focus . И чтобы запомнить порядок, вы можете добавить «мех» между предыдущим предложением: « L ast V intage F ur H at A vailable».Вы можете узнать больше о псевдоклассе : focus в его записи.

Проблемы конфиденциальности с псевдоклассом: visit

При использовании : Visited для стилизации посещенных ссылок следует помнить о важном примечании:

Псевдокласс : посещенный может, наряду с некоторыми сценариями, использоваться веб-сайтами для атаки и «прослушивания» истории посещений пользователей. Чтобы предотвратить проблемы с конфиденциальностью, вызванные этим, современные браузеры установили ограничения на типы стилей, которые могут быть применены к ссылкам : посещено .Эти ограничения помогают защитить конфиденциальность пользователя, не позволяя сценариям идентифицировать и извлекать ссылки, которые были посещены с веб-страницы.
Решение этой проблемы конфиденциальности было предложено Дэвидом Бароном из Mozilla.

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

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

Также существует «аномалия», связанная с фоновым цветом , примененным к ссылке с использованием : посещено : цвет фона в состоянии : посещено не будет применен к ссылке, если только не реальный «реальный» цвет фона. применяется к ссылке до ее посещенного состояния, то есть в ее состоянии : link .

Например, следующий код , а не применит цвет фона к посещенной ссылке:

ссылка {
    цвет белый;
    цвет фона: прозрачный;
    /* ИЛИ ЖЕ */
    / * если цвет фона не задан вообще * /
}

а: посетил {
    цвет белый;
    цвет фона: черный;
}
                 

Пока это установит цвет фона на посещенных ссылках:

ссылка {
    цвет белый;
    цвет фона: #eee;
}

а: посетил {
    цвет белый;
    цвет фона: черный;
}
                 

Вы можете прочитать более подробную информацию о проблеме конфиденциальности в следующих статьях:

CSS: Псевдо-класс посещенных - Изучение CSS

Селектор: посещенный выбирает и стилизует посещенные ссылки на странице.

Псевдокласс: visit применяется, когда ссылка была посещена пользователем.

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

Стили, изменяемые с помощью этого селектора, очень ограничены. Браузеры допускают следующие стили:

Существует возможность для веб-браузеров игнорировать стили правил для псевдоклассов: link и: loaded, поскольку псевдоклассом: visit можно злоупотреблять, и можно будет получить информацию из история браузера посетителя.

Версия ¶

Селекторы уровня 4

Селекторы уровня 3

Синтаксис

 : посещено {
  объявления css;
}  

Пример селектора: visit: ¶

  

  
     Название документа 
    <стиль>
      a {
        дисплей: блок;
        отступ: 5 пикселей;
      }
      а: посетил {
        цвет: # 8ebf42;
      }
    
  
  
    

: посещенный пример селектора

Навигация по записям

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *