Изменение стилей фокуса по умолчанию

1. Давайте посмотрим на некоторые примеры
2. Элементы формы
3. Гиперссылки
4. Почему браузеры делают это
5. Сброс стиля фокуса
6. Добавление стилей фокуса выборочно
7. доступность
8. Заключение
9. KIRUPA NEWSLETTER

Есть вопросы? Обсудите этот учебник HTML5 с другими на форумах.

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

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

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

Элементы формы

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

В Safari, когда я выделяю текстовое поле, обратите внимание на то, как оно выглядит:

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

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

Если я выделю свое текстовое поле в Firefox или Internet Explorer, они не сделают ничего другого. У них просто есть фокус.

Гиперссылки

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

Internet Explorer и Firefox показывают ссылку с пунктирным контуром:

Chrome дает ссылкам похожий оранжевый контур, что и элементы формы:

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

Почему браузеры делают это

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

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

Сброс стиля фокуса

Во-первых, давайте сбросим стиль фокуса на каждом элементе HTML. Это можно легко сделать, указав универсальный селектор с псевдо-ароматом focus:

*: focus {контур: нет; }

Что я делаю, так это очищаю CSS-свойство структуры - свойство, которое устанавливается вашим браузером, когда элемент получает фокус.

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

[нет больше эффектов фокуса! ]

Толстый синий контур, который является уникальным для Safari, больше не виден. Оранжевый контур больше не виден в Chrome. Пунктирный контур, который вы видите в Internet Explorer и Firefox, больше не существует.

Добавление стилей фокуса выборочно

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

*: focus {контур: нет; } input: focus {outline: # 0099CC solid 2px; } input [type = submit]: focus {outline: # 669900 solid 2px; } a: focus {outline: # 0099FF пунктирная 1px; }

Если вы хотите увидеть, как все это играет вместе, попробуйте мой нерабочий пример ,

Обратите внимание, что единственное, что я делаю, это задаю свойство outline. Свойство outline принимает три свойства:

1. план-цвет
   Цвет вашего контура. Довольно понятно!
2. план-стиль
   Как отображается ваш контур. Значения, которые вы можете использовать: пунктир, пунктир, двойной, паз, врезка, врезка, ребро,
   твердый, наследовать, и нет.
3. Контур ширина
   Определяет размер контура в пикселях. Вы также можете использовать значения, такие как тонкий, средний и толстый.

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

доступность

Определение ваших собственных стилей фокусировки - это не просто эстетика. Это помогает с доступностью, и вы можете прочитать больше об этом ракурсе на умном outlinenone.com сайт.

Заключение

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

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

KIRUPA NEWSLETTER

Получите крутые советы, хитрости, селфи и многое другое ... лично доставленные вручную на ваш почтовый ящик!

( Посмотреть прошлые выпуски за идею о том, что ты упускал все это время! )

Похожие

Комментарии