Ivanushka255

А все, посмотрел как это отображается на других устройствах, все работает. Думал, что visited работает только тогда, когда человек переходит именно по какой-то конкретной ссылке(нажал - перешел - вернулся обратно - сработал псевдокласс). Оказывается что visited работает независимо от какой-то конкретной ссылки, все зависит от адреса - переходил ли пользователь вообще, когда-нибудь по этому адресу.

Ну а так как я не нажимал конкретно на эту ссылку, НО уже был "в этом адресе" до этого, срабатывает псевдокласс.

Дескриптор w также как и дескриптор х можно использовать для адаптации картинок под различные ретина-устройства.

Как это работает? В соответствии с размером экрана и плотностью пикселей устройства, а также шириной, которую будет занимать картинка (атрибут sizes), браузером будет принято решение какую из перечня картинок стоит использовать. Например, у нас есть устройство с шириной - 1366рх и разрешением - 1х. Также у нас есть некий перечень картинок:

<img
  src="opera-fallback.jpg" alt="The Oslo Opera House"
  srcset="opera-200.jpg 200w,
      opera-400.jpg 400w,
      opera-800.jpg 800w,
      opera-1200.jpg 1200w">

Какое изображение будет использоваться?
1) 200/1366=0.14 - не подходит;
2) 400/1366=0.29 - не подходит;
3) 800/1366=0.58 - не подходит;
4) 1200/1366=0.87 - максимально подходящее (наиболее близкое к 1х).

Как все это работает вместе атрибутом sizes?

<img
  src="opera-fallback.jpg" alt="The Oslo Opera House"
  sizes="(min-width: 640px) 60vw, 100vw"
  srcset="opera-200.jpg 200w,
      opera-400.jpg 400w,
      opera-800.jpg 800w,
      opera-1200.jpg 1200w">

Теперь ширина отображения уже не 1366(устройство то же), а меньше - 820рх(60% от 1366рх). Считаем снова.
1) 200/820=0.24 - не подходит
2) 400/820=0.48 - не подходит
3) 800/820=0.97 - нет
4) 1200/820=1.46 - браузер выберет это*
* - браузер отдает предпочтение не тому, что немного меньше, а тому, что немного больше