Изменить цвет посещенных ссылок в краю

Обновлено: 05.07.2024

Поскольку Microsoft Edge готовился к обновлению платформы на базе Chromium с открытым исходным кодом, мы осознали свою ответственность за дальнейшую поддержку тех, кто зависит от высокой контрастности Windows для веб-контента. Мы также увидели фантастическую возможность — пришло время, наконец, стандартизировать функции высококонтрастного стиля.

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

Microsoft Edge поставляет эти стандарты из нашего первого стабильного выпуска в версии 79. Теперь, когда несколько окончательных обсуждений в рабочей группе CSS достигли своего решения, а другие браузеры готовятся предоставить поддержку, мы хотели бы поделиться тем, как вы можете это сделать. использовать новые стандарты — и какие отличия вы можете ожидать от устаревших реализаций.

Но сначала, что такое высокая контрастность?

Высокая контрастность Windows

Высокая контрастность в Windows — это функция специальных возможностей, предназначенная для повышения разборчивости текста и улучшения его читабельности. Функция работает, позволяя пользователю выбирать цвета темы для определенного количества семантических элементов. Затем эту схему можно применить к пользовательскому интерфейсу и содержимому приложения, уменьшая визуальную сложность и гарантируя предпочтительный для пользователя уровень контрастности. Название «высокая контрастность» на самом деле является неправильным: пользователи могут устанавливать цвета своих тем по своему усмотрению, включая темы, которые приводят к более низкому уровню контрастности, чем обычные уровни контрастности.

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

Какой бы ни была причина, приложения могут интегрироваться с системными цветами пользователя и применять пользовательскую тему к пользовательскому интерфейсу. Например, браузеры могут семантически применять высококонтрастные цвета темы к элементам HTML и настраивать определенные свойства CSS для уменьшения визуального шума. Затем веб-разработчики могут при необходимости использовать стили поверх этих значений по умолчанию, используя новые стандарты для принудительных цветов.

Новые стандарты для принудительных цветов

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

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

Современные реализации также будут сопоставлять медиазапросы Preferences-Color-Scheme и Preferences-Contrast на основе цвета фона (светлый или темный) и уровня контрастности принудительной цветовой схемы пользователя.

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

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

Если мы включим функцию высокой контрастности (с пользовательским фиолетовым фоном)…

…кнопка, текст и ссылки отображаются в системных цветах пользователя — отлично! Однако образцы палитры также были скорректированы для использования фиолетовой темы пользователя. Обычно это желательно для удобочитаемости. В этом случае эти образцы имеют значение для пользователя, и их исходные цвета должны быть сохранены.

Наши требования к этому виджету таковы:

Мы сохраняем образцы цветов в режимах с принудительным изменением цвета.
Образцы цветов всегда отображаются поверх белого или черного, чтобы они не выглядели мутными. (Помните, что пользователи могут устанавливать цвета своей темы так, как им нужно!)
Ярлыки под образцами отображаются в системных цветах пользователя, чтобы текст можно было легко прочитать.

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

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

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

В режиме Forced Colors Mode предпочитаемая цветовая схема оценивается на основе яркости предпочитаемого пользователем цвета фона. В Chromium принудительный фон со светимостью предпочитает цветовую схему: темный. В противном случае, предпочтение отдается цветовой схеме: светлое верно:

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

Возвращаясь к нашему примеру, мы можем использовать CanvasText, чтобы применить цвет текста пользователя, и Canvas, чтобы применить цвет фона:

Вот теперь все наши стили вместе:

предпочитает контраст

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

Медиа-запрос Preferences-Contrast еще не реализован в Chromium, но авторы могут ожидать, что этот медиа-запрос будет доступен в будущих версиях Microsoft Edge и других браузерах на основе Chromium. Этот медиа-запрос можно использовать для обнаружения состояний «меньше», «больше» и «без предпочтений» в дополнение к принудительному контрасту. Как отмечалось ранее, предпочтение принудительной контрастности не обязательно означает предпочтение высокой контрастности, хотя в будущем рабочая группа CSS может принять решение автоматически сопоставлять предпочтения «меньше» и «больше» на основе цветовая схема пользователя.

Измененные свойства CSS

Когда активны принудительные цветовые режимы, ограниченный список свойств CSS, связанных с цветом и подобными украшениями, корректируется, чтобы сохранить цветовую схему пользователя, уменьшить визуальные отвлекающие факторы и повысить разборчивость. Спецификация CSS Color Adjustment предоставляет полный список свойств, на которые влияют принудительные режимы цветов.

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

Например, вместо полного удаления свойства структуры и применения box-shadow…

Вы можете использовать прозрачный контур:

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

Наследование цвета в простых SVG

Принудительные цветовые режимы не корректируют SVG: это могут быть очень сложные документы, и веб-разработчик лучше, чем платформа, понимает, как следует корректировать SVG или нет. Но что, если вам нужен простой значок SVG, соответствующий цвету окружающего текста?

Ключевое слово currentColor можно применить к заливке и обводке в SVG. Вот пример с логотипом, где мы указали светлую и темную тему, но не написали никаких стилей принудительного цветового режима:

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

Логотип SVG в светлой цветовой гамме, темной цветовой гамме и высокой контрастности Windows в результате использования currentColor

Текстовые бэкплейты

Помимо сохранения системных цветов пользователя и настройки потенциально отвлекающих свойств CSS, браузеры, поддерживающие принудительные цветовые режимы, также рисуют «заднюю панель» за текстом. Текстовые бэкплейты были впервые представлены в EdgeHTML (устаревший Microsoft Edge) после тесного сотрудничества с пользователями с плохим зрением и помогают обеспечить читаемость текста, наложенного поверх изображений:

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

Отличия от устаревших реализаций

Стандартизация функций принудительного цветового режима дала возможность пересмотреть устаревшие варианты дизайна и сотрудничать с другими разработчиками в области функционального подхода. Таким образом, существуют некоторые заметные различия между новыми стандартами и предыдущей поддержкой высокой контрастности в MSHTML/EdgeHTML.

Сравнение синтаксиса

Наиболее очевидным среди этих изменений является обновление синтаксиса функций CSS:

Internet Explorer и устаревший Microsoft Edge	Новый Microsoft Edge и веб-стандарты
@media (-ms-high-contrast: активно)	@media (forced-colors: active) <>
@media (-ms-high-contrast: черный на белом) <>	@media (forced-colors: active) и (prefers-color-scheme: light) <> Примечание: это не совсем то же самое, что и устаревший медиа-запрос "черное на белом", который соответствовал только определенные высококонтрастные темы по умолчанию. Новая реализация будет наблюдать за яркостью цвета фона пользователя, чтобы определить, подходит ли соответствие «prefers-color-scheme: light/dark».В Chromium принудительный фон с яркостью WindowText	CanvasText
Гиперссылки	-ms-hotlight	LinkText
Отключенный текст< /td>	Серый текст
Выделенный текст	HighlightText (передний план), Highlight (фон)
Текст кнопки	ButtonText (передний план), ButtonFace (фон)
Фон	Окно	Холст

Различия в стилях агента пользователя (по умолчанию)

Встроенные элементы управления формы в высококонтрастной черной теме Windows. Слева: Microsoft Edge Legacy, справа: Microsoft Edge после обновления элементов управления в Chromium.

В сотрудничестве с командой Google Chrome мы обновили встроенные элементы управления формами, придав им современные стили и улучшенный доступ. Это обновление включает в себя обновленный высококонтрастный дизайн Windows.

В устаревших реализациях поддержки высокой контрастности в Интернете посещенные ссылки отображались в пользовательском цвете «Отключенный текст»; это связано с тем, что в этих пользовательских цветовых палитрах с заданной областью отсутствует «Цвет посещенной гиперссылки». Мы получили отзывы о том, что эта цветовая обработка сбивает с толку, поэтому посещенные ссылки теперь имеют обычный цвет «Гиперссылка».

Различия в поведении

Наиболее примечательным для веб-разработчиков является изменение каскадирования стилей в принудительных цветовых режимах. В устаревших реализациях поддержки высокой контрастности авторские стили, установленные в @media (-ms-high-contrast: active) <>, переопределяли бы цвета, применяемые браузером от имени пользователя:

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

Такое поведение отражает ожидание того, что авторы почти всегда должны использовать системные цвета при настройке стилей для принудительных цветовых режимов. Обновленное каскадное поведение будет доступно в Microsoft Edge начиная с версии 87.

Еще одно предстоящее изменение касается обработки фоновых изображений. Internet Explorer восстановил фоновые изображения в Windows с высокой контрастностью, но это вызвало проблемы с взаимодействием с пользователем, когда фоновое изображение CSS использовалось для изображений содержимого. Устаревший Microsoft Edge устранил эту проблему, сохранив значение фонового изображения автора. Стандарты теперь находятся на среднем уровне: фоновое изображение будет сохранено, если значение содержит функцию url(), и будет восстановлено для всех других значений фонового изображения (например, линейных градиентов). Это изменение появится в будущих версиях Microsoft Edge.

Современные реализации также немного по-другому обрабатывают background-color. Текущий подход сохраняет предпочитаемый пользователем фоновый цвет на всех каналах, кроме для альфа-канала. Это изменение позволяет веб-платформе предоставить веб-разработчикам больше гибкости в отношении стилей фона, а удобочитаемость по-прежнему сохраняется благодаря фоновым панелям текста, отображаемым за текстом. Это изменение уже появилось в Chromium и Microsoft Edge.

Тестирование высокой контрастности

Если вы хотите проверить, как ваш веб-сайт отображается в режиме высокой контрастности Windows, в Windows 10 выберите «Настройки» > «Удобство доступа» > «Высокая контрастность», а затем «Включить высокую контрастность». Переключение между парой разных тем даст вам более целостное представление о том, как ваш сайт отображается с выбранными пользователем цветами. Высокая контрастность Windows также может быть включена и выключена нажатием клавиш Alt + левый Shift + Print Screen.

Если вы обнаружите проблемы или у вас есть какие-либо отзывы, вы можете использовать кнопку обратной связи в приложении (или Alt+Shift+I) или сообщить о проблемах в рендеринге веб-контента с помощью системы отслеживания ошибок Chromium. Вы также можете связаться с нами в Twitter.

Мы знаем, что не у всех разработчиков есть доступ к ПК или виртуальной машине Windows, поэтому мы работаем над функцией, которая позволит вам эмулировать высокую контрастность в Chromium DevTools. Мы рады сделать высококонтрастное тестирование Windows более эффективным для разработчиков, независимо от платформы вашей ОС.

Спасибо, что протестировали свои веб-сайты в режиме высокой контрастности Windows и помогли сделать Интернет более доступным для ваших пользователей!

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

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

Забавная история

На днях мой двоюродный брат зашел ко мне в квартиру и что-то искал на моем ноутбуке в Google. Несколько раз я слышал, как он говорил: «Глупый я! Почему я снова захожу на эту страницу?» Поэтому я сказал ему:

Я: Привет, Дэниел, ты нажимаешь на результаты уже посещенных страниц?
Дэниел: Ага. Я не знаю почему.
Я: посещенные страницы в результатах Google отмечены красным, а те, которые вы не посещали, отмечены синим, если вы не знаете… (я просто хотел помочь)< /li>
Дэниел: Мне кажется, они все одинаковые.
Я: Правда? (Я думал, он шутит)… Эй, это разные цвета. Один светло-фиолетовый, другой голубой. Вы можете сказать?
Дэниел: Нет!

Как вы уже догадались, наш разговор стал немного серьезным. Да, мой двоюродный брат несколько дальтоник, точнее, дальтоник на красный цвет. Я использую Chrome, и после того, как я изменил цвет посещенной ссылки с красного на зеленый, он мог сразу заметить разницу.

У вас дальтонизм?

Во-первых, вам вообще не о чем беспокоиться, если он у вас есть. По данным MedlinePlus, в большинстве случаев дальтонизм является генетическим и не лечится. Кроме того, чтобы почувствовать себя лучше: «Существует общее мнение, что во всем мире 8% мужчин и 0,5% женщин имеют дефицит цветового зрения». (Источник)

Чтобы проверить, дальтоник ли вы, проще всего прочитать эту статью Huffington Post. Он включает пять изображений, полученных в результате цветового теста Исихары.

Чтобы начать, нажмите синюю кнопку "НАЧАТЬ ТЕСТ":

Большинству людей скажут, что у них «нормальное цветовое зрение»:

Цветовая схема в результатах поиска

Примечание. По умолчанию большинство поисковых систем, таких как Google и Bing, помечают результаты, на которые вы нажимали, фиолетовым цветом, а результаты, которые вы не посещали, — синим. Вот два примера:

Вот что появилось после того, как я ввел в Google запрос «TechCrunch». Поскольку я уже посещал страницу Википедии TechCrunch, теперь она отмечена светло-фиолетовым цветом, а Facebook и YouTube по-прежнему синим.

В поисковой системе Bing я ввел в поиск "SoftwareHow" и вот что я увидел. Страницы Twitter и Google+ уже посещены, поэтому они также помечены фиолетовым цветом, а ссылка Pinterest остается синей.

А теперь вернемся к теме. Вот как можно изменить цвет посещенных ссылок в разных веб-браузерах.

Google Chrome

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

Примечание. Скриншоты ниже взяты из Chrome для macOS (версия 60.0.3112.101). Если вы работаете на ПК или используете другую версию Chrome, шаги могут немного отличаться.

Шаг 1. Откройте Chrome и установите это расширение под названием Stylist. Нажмите синюю кнопку "ДОБАВИТЬ В CHROME".

Шаг 2. Подтвердите, нажав «Добавить расширение». Вы увидите уведомление о том, что подключаемый модуль был добавлен в Chrome.

Шаг 3. Щелкните правой кнопкой мыши значок расширения Stylist и выберите «Параметры». На вкладке "Стили" нажмите Добавить новый стиль

Шаг 4. Теперь назовите новый стиль, установите флажок «Все сайты», скопируйте и вставьте этот фрагмент кода (как показано ниже) в поле и нажмите «Сохранить».

Примечание. Цвет этой линии — зеленый. Не стесняйтесь изменить его на другой цвет или код RGB (например, 255, 0, 0). Вы можете найти больше цветов и их кодов здесь.

Важно! Установка флажка «Все сайты» может повлиять на взаимодействие с другими сайтами. Например, я заметил, что после внесения изменений все мои вкладки Gmail стали красными. что выглядит совершенно необычно. Поэтому я добавил это правило, которое позволяет изменениям влиять только на определенные результаты поиска Google.

Шаг 5. Проверьте, вступил ли в силу новый стиль. В моем случае да — цвет посещенной страницы Википедии TechCrunch теперь изменен на зеленый (по умолчанию он был красным).

P.S. Я привык к тому, что цвет посещенной ссылки отображается светло-фиолетовым, поэтому я вернул его обратно. 🙂

Мозилла Фаерфокс

Внести изменения в браузере Firefox еще проще, потому что, в отличие от Chrome, вам не нужно устанавливать какие-либо сторонние расширения. Следуйте пошаговой инструкции ниже:

Примечание. В этом руководстве я использую Firefox 54.0.1 для macOS. Если вы используете другую версию или работаете на ПК с Windows, пути и снимки экрана, показанные ниже, могут быть неприменимы.

Шаг 1. Убедитесь, что флажок «Всегда использовать режим приватного просмотра» снят. Откройте Меню Firefox > Настройки > Конфиденциальность.

В разделе «История» > Firefox будет: выберите «Использовать пользовательские настройки для истории». Если вы отметили «Всегда использовать приватный режим просмотра», снимите его. Если он не выбран (по умолчанию), все в порядке. Перейдите к шагу 2.

Шаг 2. Теперь перейдите в раздел Содержимое > Шрифты и цвета > Цвета.

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

Шаг 3. Готово. Чтобы проверить эффективность изменения настроек, просто выполните быстрый поиск в Google и посмотрите, изменился ли цвет посещенных результатов. В моем случае я установил их зелеными, и это работает.

Яблочное сафари

Этот процесс очень похож на Chrome. Вам нужно будет установить расширение под названием Stylish. Следуйте приведенному ниже руководству, где я также укажу на трюк, который вам нужно соблюдать. В противном случае он не будет работать должным образом.

Примечание. Я использую Safari для macOS (версия 10.0). Скриншоты, показанные ниже, могут немного отличаться от того, что вы видите на своем компьютере.

Шаг 1. Получите расширение Stylish (перейдите по ссылке) и установите его в свой браузер Safari.

Шаг 2. Нажмите на значок расширения Stylish (в верхней части панели инструментов), затем выберите «Управление».

Шаг 3. В новой панели управления Stylish выберите «Изменить». Выполните четыре задачи, как показано на этом снимке экрана. Фрагмент кода CSS показан ниже.

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

Шаг 4. Проверьте, вступило ли изменение в силу. В моем случае это работает.

Майкрософт Эдж

К сожалению, для пользователей Windows 10 мне еще предстоит найти подходящее решение для изменения цвета посещенных или непосещенных ссылок. Я думал, что расширение Stylish будет работать с Edge, но я ошибался.Однако похоже, что я не одинок, как вы можете видеть из этого обсуждения, многие люди требуют эту функцию.

Я обновлю этот пост, если Edge добавит эту функцию или появится стороннее расширение, которое выполняет эту работу.

Приветствую вас

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

P.S. На эту статью у меня ушло около пяти часов. Лучший способ выразить свою признательность – поделиться ею или оставить комментарий ниже, если она оказалась для вас полезной.

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

Нет проблем! Рада, что статья понравилась 🙂

Когда я включаю эту функцию, Firefox ошибается и показывает все изображения в виде текста с рамкой вокруг него.

Спасибо за инструкции. Однако, когда я делаю в соответствии с инструкциями, цвет посещенной ссылки действительно меняется, но также отключает отображение графики на всех веб-сайтах. Это, по-видимому, ошибка в Firefox. Я использую Firefox версии 56.0 на 64-разрядной версии Linux Mint 18.1 Serena со средой рабочего стола MATE. Мне еще предстоит найти решение или отправить отчет об ошибке.

Вы правы. Я также заметил «проблему», изменение цвета влияет на все сайты, кроме Google. Честно говоря, я сбросил настройки цвета в FireFox.

Инструкции для Google Chrome работали до недавнего времени, когда Windows запустила огромное обновление (это заняло 3 часа!). Теперь мое изменение цвета исчезло. Не только это, но я сделал это снова, перезагрузил, и это все еще не работает! Помощь! Я не могу отличить синий от фиолетового. У меня он был светло-зеленым для посещенных сайтов, и это было прекрасно!

Спасибо, спасибо, спасибо.

Я дальтоник (или не различаю оттенки, как может предпочесть полиция ПК). Я и остальные 8% полностью игнорируются большинством разработчиков программного обеспечения и веб-дизайнеров, даже в играх и т. д., где различение цветов имеет большое значение. Я встретил только одного разработчика, который признает распространенность дальтонизма, и он существует для того, чтобы добавить больше функциональности в одно приложение. Я с нетерпением жду реализации Windows 10 в последнем обновлении. У меня есть надежда, но нет уверенности.

Существует множество сайтов, подробно описывающих использование Stylist в Chrome, но все они повторяют одни и те же инструкции, которые (по крайней мере, для меня) остановились на Name Style. Я не смог найти пробел, в который можно было бы вставить имя. Ваши скриншоты со стрелками спасли положение!

Если бы это была цивилизованная страна, ты был бы королем!

Это огромный комплимент. Спасибо Кирк! Я рад, что вы нашли инструкции полезными.

Как изменить цвет посещенных ссылок в Norton Safe-search, пожалуйста?

Как вернуть обратно? Я изменил Firefox, следуя приведенным здесь инструкциям, и теперь я не могу использовать свои цвета в документах Google или нормально просматривать обычные веб-страницы. Помогите!!

В Mozilla Firefox > Шаг 2 > Цвета измените «Переопределить указанные цвета…». с «Всегда» на «Никогда», затем нажмите «ОК», чтобы сохранить изменения.

Если вы хотите изменить цвет посещений только в поисковых системах (не затрагивая другие сайты), попробуйте расширение Stylish. Он также совместим с FireFox.

Возможно ли это теперь с Microsoft Edge?

На некоторых сайтах этот браузер даже не отображает посещенные ссылки фиолетовым цветом по умолчанию.
Это относится как минимум к результатам поиска Google и текстовым сообщениям Reddit.
Однако он работает в Bing, как и ожидалось.

В Microsoft Edge предусмотрено 14 встроенных цветов темы. Новая опция стала доступна в браузере, начиная с версии Microsoft Edge 89.0.731.0. С его помощью вы можете применить один из предложенных цветов к окну браузера, его панели инструментов, вкладкам и фону страницы новой вкладки.

Функция пользовательской цветовой темы работает с темами Edge по умолчанию, которые включают в себя светлые, темные и системные параметры по умолчанию. Последний соответствует теме приложения, установленной в Персонализации. Добавив пользовательские цветовые темы, Microsoft сделала внешний вид приложения Edge более гибким и индивидуальным.

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

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

Изменить цветовую тему в Microsoft Edge

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

Microsoft Edge теперь представляет собой браузер на основе Chromium с рядом эксклюзивных функций, таких как чтение вслух и службы, привязанные к Microsoft, а не к Google. Браузер уже получил несколько обновлений с поддержкой устройств ARM64. Кроме того, Microsoft Edge по-прежнему поддерживает ряд устаревших версий Windows, включая Windows 7. Наконец, заинтересованные пользователи могут загрузить установщики MSI для развертывания и настройки.

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

Если вам понравилась эта статья, поделитесь ею с помощью кнопок ниже. Это не потребует от вас многого, но поможет нам расти. Спасибо за вашу поддержку!

Автор: Сергей Ткаченко

Сергей Ткаченко — разработчик программного обеспечения из России, который основал Winaero еще в 2011 году. В этом блоге Сергей пишет обо всем, что связано с Microsoft, Windows и популярным программным обеспечением. Следите за ним в Telegram, Twitter и YouTube. Просмотреть все сообщения Сергея Ткаченко

Автор Сергей Ткаченко Опубликовано 14 декабря 2020 г. 25 марта 2021 г. Рубрики Microsoft Edge Метки Edge Accent Color, Темы Microsoft Edge

4 мысли о «Как изменить цветовую тему в Microsoft Edge»

Сергей, не знаете ли вы, когда эта цветовая функция будет доступна для Edge Stable? Спасибо.

Ниже приведены инструкции по изменению цвета ссылок на веб-странице с помощью HTML и CSS. Хотя цвета ссылок можно задать с помощью HTML-тега BODY, мы всегда рекомендуем выполнять любые настройки стилей в CSS, как показано ниже.

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

Понимание различных типов гиперссылок

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

Посещенная ссылка — цвет посещенной ссылки. Если гиперссылка окрашена в этот цвет, пользователь может ожидать, что щелчок по ссылке приведет его на страницу, которую он уже видел. Фиолетовый цвет гиперссылки по умолчанию для посещенной ссылки.
Ссылка при наведении — цвет при наведении указателя мыши на ссылку. Если гиперссылка имеет этот цвет, пользователь может ожидать, что нажатие левой кнопки мыши (щелчок), а затем отпускание кнопки приведет к посещению ссылки. Цвет при наведении одинаков как для активных, так и для посещенных ссылок.
Активная ссылка — цвет ссылки при нажатии. Когда пользователь видит этот цвет, он может ожидать, что после отпускания кнопки мыши браузер перейдет по ссылке.

Дополнительную информацию и вопросы, связанные с гиперссылками, см. в нашем определении гиперссылок.

Пример цвета ссылки CSS

Если на вашей странице не используется CSS, ниже показано, как это сделать в HTML-теге BODY. Однако, как упоминалось ранее, мы настоятельно рекомендуем использовать приведенный выше код CSS вместо тега body. Вы можете добавить приведенный выше код в файл CSS и связать все свои веб-страницы с этим файлом CSS. Затем вы можете изменить значения background-color в одном файле CSS, чтобы мгновенно изменить цвет фона всех страниц, ссылающихся на него.

Пример HTML-тега body

В некоторых очень редких случаях использование CSS может оказаться невозможным. В таких случаях вы также можете определить цвет фона, цвет текста, цвет ссылки и другие значения в HTML-теге body, как показано ниже.

Ниже приведены описания каждого атрибута HTML в теге body.

ТЕКСТ = цвет текста.
ССЫЛКА = цвет ссылок.
VLINK = Цвет посещенной ссылки.
ALINK = цвет активной ссылки или цвет, на который меняется ссылка при нажатии.
BGCOLOR = цвет фона страницы.

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

Требования:	Базовая компьютерная грамотность, основы HTML (изучить Введение в HTML), основы CSS (изучить Введение в CSS), текст CSS и основы шрифтов.
Цель:	Узнать, как стилизовать состояния ссылок и как эффективно использовать ссылки в общих функциях пользовательского интерфейса. как меню навигации.

Давайте посмотрим на некоторые ссылки

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

Состояния ссылок

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

Ссылка. Ссылка, имеющая назначение (т. е. не просто именованный якорь), оформленная с использованием псевдокласса :link.
Посещено: уже посещенная ссылка (существует в истории браузера), оформленная с использованием псевдокласса :visited.
Hover: ссылка, на которую наводится указатель мыши пользователя, оформленная с использованием псевдокласса :hover.
Фокус: ссылка, которая находится в фокусе (например, перемещена пользователем с клавиатуры с помощью клавиши Tab или чего-то подобного, или программно сфокусирована с помощью HTMLElement.focus() ) — это стиль с использованием псевдокласса :focus.
Активная: ссылка, которая активирована (например, по которой щелкнули), оформленная с использованием псевдокласса :active.

Стили по умолчанию

В следующем примере показано, как будет вести себя ссылка по умолчанию (CSS увеличивает и центрирует текст, чтобы сделать его более заметным).

При изучении стилей по умолчанию вы заметите несколько вещей:

Ссылки подчеркнуты.
Непосещенные ссылки выделены синим цветом.
Посещенные ссылки выделены фиолетовым цветом.
При наведении указателя мыши на ссылку он превращается в маленький значок руки.
Фокусированные ссылки имеют контур вокруг них. Вы должны иметь возможность сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажимая клавишу табуляции (на Mac вам потребуется использовать option + tab или включить полнофункциональную клавиатуру). Доступ: параметр «Все элементы управления», нажав Ctrl + F7 .)
Активные ссылки выделены красным цветом. Попробуйте удерживать кнопку мыши на ссылке, когда вы нажимаете на нее.

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

Используйте подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, по крайней мере выделите их каким-либо другим способом.
Заставьте их реагировать каким-то образом при наведении курсора/фокусировке и немного по-другому при активации.

Стили по умолчанию можно отключить/изменить с помощью следующих свойств CSS:

для цвета текста. для стиля указателя мыши — вы не должны отключать это, если у вас нет очень веской причины. для наброска текста. Контур похож на границу. Единственное отличие состоит в том, что рамка занимает место в блоке, а контур — нет; он просто сидит поверх фона. Структура является полезным вспомогательным средством доступности, поэтому ее нельзя удалять без добавления другого метода указания ссылки в фокусе.

Примечание. Вы не ограничены только перечисленными выше свойствами для оформления ссылок — вы можете использовать любые свойства по своему усмотрению.

Стили некоторых ссылок

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

Для начала мы запишем наши пустые наборы правил:

Этот порядок важен, потому что стили ссылок основаны друг на друге. Например, стили в первом правиле будут применяться ко всем последующим. Когда ссылка активирована, она обычно также наводится. Если вы расположите их в неправильном порядке и будете изменять одни и те же свойства в каждом наборе правил, все будет работать не так, как вы ожидаете. Чтобы запомнить порядок, вы можете попробовать использовать мнемонику, например, LoVe Fears HAte.

Теперь добавим дополнительную информацию, чтобы правильно оформить это:

Мы также предоставим образец HTML для применения CSS:

Соединяя их вместе, мы получаем следующий результат:

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

Активное обучение: оформляйте собственные ссылки

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

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

Включение значков в ссылки

Давайте посмотрим на HTML и CSS, которые дадут нам нужный эффект. Во-первых, немного простого HTML для оформления:

Так что же здесь происходит? Мы пропустим большую часть CSS, так как это та же самая информация, которую вы рассматривали ранее. Последнее правило, однако, интересно: мы вставляем собственное фоновое изображение во внешние ссылки аналогично тому, как мы обрабатывали настраиваемые маркеры для элементов списка в прошлой статье. Однако на этот раз мы используем сокращение фона вместо отдельных свойств. Мы устанавливаем путь к изображению, которое хотим вставить, указываем отсутствие повтора, чтобы вставить только одну копию, а затем указываем положение как 100% пути справа от текстового содержимого и 0 пикселей сверху.

Мы также используем background-size, чтобы указать размер, в котором должно отображаться фоновое изображение. Полезно иметь значок большего размера, а затем изменять его размер, как это необходимо для целей адаптивного веб-дизайна. Однако это работает только с IE 9 и более поздними версиями. Поэтому, если вам нужна поддержка старых браузеров, вам просто нужно изменить размер изображения и вставить его как есть.

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

И последнее слово: как мы выбрали только внешние ссылки? Что ж, если вы правильно пишете свои HTML-ссылки, вы должны использовать только абсолютные URL-адреса для внешних ссылок — более эффективно использовать относительные ссылки для ссылок на другие части вашего собственного сайта (как в случае с первой ссылкой). Поэтому текст «http» должен появляться только во внешних ссылках (например, во второй и третьей), и мы можем выбрать это с помощью селектора атрибутов: a[href^="http"] выбирает элементы, но только если они имеют href атрибут со значением, начинающимся с "http".

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

Примечание. Значения href выглядят странно — здесь мы использовали фиктивные ссылки, которые на самом деле никуда не ведут. Причина этого в том, что если бы мы использовали настоящие ссылки, вы могли бы загрузить внешний сайт во встроенный живой пример, тем самым потеряв пример.

Примечание. Не беспокойтесь, если вы еще не знакомы с фоном и адаптивным веб-дизайном. это объясняется в других местах.

Стили ссылок как кнопок

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

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

Во-первых, немного HTML:

А теперь наш CSS:

Это дает нам следующий результат:

Давайте объясним, что здесь происходит, сосредоточившись на самом интересном:

Наше второе правило удаляет отступы по умолчанию для элемента и устанавливает его ширину, равную 100 % охвата внешнего контейнера (в данном случае ). элементы обычно являются блочными по умолчанию (см. Типы блоков CSS для освежения знаний), что означает, что они будут располагаться на своих собственных строках. В этом случае мы создаем горизонтальный список ссылок, поэтому в третьем правиле мы устанавливаем для свойства display значение inline, в результате чего элементы списка располагаются на одной строке друг с другом. Теперь они ведут себя как встроенные элементы.
Четвертое правило, определяющее стиль элемента, здесь самое сложное. Давайте рассмотрим это шаг за шагом:
- Как и в предыдущих примерах, мы начинаем с отключения текстового оформления и контура по умолчанию — мы не хотим, чтобы они портили наш внешний вид.
- Затем мы устанавливаем отображение на встроенный блок. элементы являются встроенными по умолчанию, и, хотя мы не хотим, чтобы они располагались на своих собственных строках, как это достигается при значении block, мы хотим иметь возможность изменять их размер. встроенный блок позволяет нам сделать это.
- Теперь размер! Мы хотим заполнить всю ширину и оставить небольшое поле между каждой кнопкой (но не пробел на правом краю). У нас также есть 5 кнопок, размеры которых должны быть одинаковыми. Для этого мы устанавливаем ширину на 19,5% и правое поле на 0,625%. Вы заметите, что вся эта ширина в сумме составляет 100,625%, из-за чего последняя кнопка перекрывает
  - Последние три объявления довольно просты и в основном предназначены только для косметических целей. Мы центрируем текст внутри каждой ссылки, устанавливаем для line-height значение 3, чтобы придать кнопкам некоторую высоту (что также имеет преимущество в центрировании текста по вертикали), и устанавливаем черный цвет текста.
  Примечание. Возможно, вы заметили, что элементы списка в HTML располагаются на одной строке друг с другом. Это делается потому, что пробелы/разрывы строк между встроенными элементами блока создают пробелы на странице, точно так же, как пробелы между словами; однако такие пробелы нарушили бы расположение нашего горизонтального навигационного меню. Поэтому мы их удалили. Дополнительную информацию об этой проблеме (и решениях) можно найти в разделе Борьба с пробелами между встроенными блочными элементами.
  
  Обзор
  
  Мы надеемся, что эта статья предоставила вам все, что вам нужно знать о ссылках — на данный момент! В последней статье нашего модуля «Стили текста» подробно рассказывается, как использовать пользовательские шрифты на веб-сайтах (или веб-шрифты, как они более известны).
  
  Читайте также: