Не выделяются ссылки в браузере
Если Вы веб-разработчик, то у вас наверняка возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею ввиду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п. где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop, или выделении текста при двойном клике). Это в первую очередь касается веб-приложений и ни в коем случае не касается информационных сайтов.
Что же мы можем сделать? До сих пор думал немногое. Но прежде чем перейти к рассмотрению нового (лично для меня) методу, рассмотрим какие возможности борьбы с выделением текста предлагают нам браузеры.
Internet Explorer
- Для элементов устанавливаем атрибут unselectable со значением on. Но тут есть один нюанс: текст блока с таким атрибутом нельзя выделить (то есть нельзя начать выделение с данного элемента, и клик по такому элементу не будет снимать выделение с текста, если такой выделен), но если он содержит другие элементы (к примеру «безобидные» SPAN, B и т.д.) то текст в них выделить можно. К тому же если выделение текста начато с блока без такого атрибута, то текст внутри блока с атрибутом unselectable так же будет выделен. В такой ситуации решение одно — ставить всем (!) элементам данный атрибут, что неудобно и не практично.
- Перехват события selectstart. Другими словами добавив элементу onselectstart=«return false» (к примеру к BODY) запрещает выделение текста внутри него. Опять же нюанс: если начать выделять текст за пределами такого блока, то текст внутри него выделяется без проблем.
FireFox (браузеры на движке gecko), Safari (браузеры на движке KHTML)
Данные браузеры имеют более совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS свойство user-select со значение none, которое включили в CSS3. Но до того как это свойство утверждено, браузеры демократично сделали это собственной фишкой движка назвав свойство -moz-user-select и -khtml-user-select соответственно. Получается, чтобы запретить выделять текст внутри блока, достаточно написать:
Другие браузеры
А вот что касается других браузеров, то у них таких механизмов замечено не было. Вообще никаких. Конечно же Opera впереди планеты всей, для нее запрет выделения текста равносильно самому злостному преступлению. Но есть, есть один могильничек :)
Изучая вчера файл Оперы с хаками для сайтов, наткнулся на интересные строки:
Вспомним про атрибут unselectable у Internet Explorer'а, и становится ясным что в даном случае мы боремся с выделением текста. Развив идею, получилось некоторое кроссбраузерное решение:
Когда дело доходит до ссылок, их легче принять такими, как они есть. В конце концов, вы просто ссылаетесь на какой-нибудь текст и все. Но что можно реально сделать, чтобы заставить людей кликнуть по ним? Может подчеркивание текста CSS?
Есть куча маркетинговых методов, которыми можно воспользоваться, чтобы заполучить эти клики. Но что, если нужно просто привлечь больше внимания к ссылке?
Выделите свои ссылки! В этой статье я расскажу о 8 эффективных способах изменения стиля ссылок.
Добавьте цвет
Один из лучших способов выделить ссылку состоит в том, чтобы добавить цвет! Когда большая часть текста черного цвета, добавьте другие цвета, чтобы сделать ссылки заметнее.
Но вы должны быть уверены, что выбранный цвет взаимодействует с остальной частью вашего бренда. Иначе ссылки будут выделяться, но неправильно.
Также помните о контрасте. Темный, почти черный цвет не обеспечит отличия ссылки от остального абзаца. А слишком светлый не даст достаточного контраста между белым фоном и текстом.
Мэрайя c Femtrepreneur использует интересный красный цвет, чтобы выделить свои ссылки:
Чтобы изменить цвет ссылок на сайте, взгляните на таблицу стилей темы и найдите следующее:
Измените значение рядом с color . Это оно!
Нужна помощь в выборе цвета? Воспользуйтесь одним из популярных инструментов:
Сделайте жирнее
Еще один способ добавить контраста ссылкам состоит в том, чтобы сделать их полужирными. Выделение ссылки полужирным работает таким же образом.
Чтобы сделать CSS подчеркивание ссылки полужирным, добавьте следующий код:
Или используйте шрифт, который поддерживает различные значения насыщенности ( толщины ):
Например, шрифт Open Sans имеет толщину 300 , 400 , 600 , 700 и 800 . Если толщина текста 400 , то хорошим выбором для ссылок будет использование толщины 600 , 700 или 800 .
Добавьте подчеркивание
По умолчанию все ссылки оформлены подчеркиванием, а это означает, что если бы вы удалили CSS с сайта, каждая ссылка содержала бы подчеркивание. Это довольно распространенное предположение, что любой подчеркнутый текст является ссылкой. Так какой способ лучше использовать для выделения ссылок?
Чтобы осуществить подчеркивание ссылки CSS , используйте этот код:
В блоге KORY автор использует нижнюю границу для ссылок. Обратили внимание на большой разрыв между текстом и подчеркиванием? Это можно реализовать с помощью изменения внутреннего отступа ссылки:
Код для добавления границы ссылкам:
Небольшой совет : Не обязательно придерживаться сплошной границы. Можно попробовать один из приведенных ниже вариантов:
- CSS подчеркивание пунктиром ( dotted );
- Точечный ( dashed );
- Двойной ( double ).
Стиль курсивом
Выделить ссылки курсивом довольно просто, но об этом способе стилизации часто забывают. На приведенном ниже скриншоте страницы они выделяются, но при этом органично вписываются в дизайн сайта:
Вот как можно добиться этого:
Сделайте все буквы заглавными
Если вы посмотрите на посты в этом блоге , то заметите, что ссылки оформлены таким образом. Вот как можно оформить ссылки заглавными буквами:
Используйте другой шрифт
Выберите шрифт, который легко читается. Шрифт, используемый в теге body , скорее всего, меньше. Необычные шрифты при таком небольшом размере не будут легко читаться. Поэтому используйте шрифты семейства serif или sans-serif для достижения лучшей читабельности.
Для обеспечения максимальной слаженности выберите шрифт из того же семейства. В сжатом или черном варианте шрифт будет выделяться, но не слишком отличаться.
Для своих ссылок я выбрала шрифт, который достаточно похож, чтобы не бросаться в глаза, но отличается от остального текста. Так я получила контраст, который хотела.
Добавьте фоновый цвет
Вы ни в коем случае это не пропустите.
Все, что нужно сделать, это добавить цвет фона и, возможно, небольшой внутренний отступ. Также можно изменить цвет шрифта для лучшей читаемости:
Комбинируйте!
Для достижения максимальных результатов скомбинируйте любые два ( или больше ) из перечисленных выше методов выделения. Вы, наверное, заметили, что в большинстве приведенных примеров ссылки были цветными. Это связано с тем, что цвет играет действительно большую роль в выделении ссылок по сравнению с окружающим текстом.
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, дизлайки, лайки, отклики, подписки огромное вам спасибо!
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!
При ручном написании проверьте правильность расположения компонентов (двоеточие, точка, слэши, тире и нижнее подчеркивание) и поставьте после ссылки пробел. Обычно при корректном указании пробел «придает» набору символов привычный вид.
При копировании адреса и последующей вставки в документ не используйте функцию «Сохранить только текст». Для корректного отображения выберите «Сохранить исходное форматирование» или «Объединить форматирование».
Причина 2: Системная ошибка
Способ 1: Назначение другого приложения браузером по умолчанию
Чаще всего указанные ошибки появляются, когда браузером по умолчанию является не Internet Explorer. Сбой в переопределении обязанностей вызван инсталляцией либо Google Chrome, либо Opera и назначением их браузером по умолчанию. Если удалить указанные веб-обозреватели, проблема может сохраниться. Для этого переопределяют обязанности на Mozilla Firefox.
На примере последнего и рассмотрим, как назначить браузером по умолчанию другую программу:
-
Откройте веб-обозреватель, при первом запуске обычно появляется окно о необходимости назначить конкретный браузер программой по умолчанию.
Способ 2: Файл .CMD
Указанные выше ошибки иногда появляются после удаления Гугл Хрома.
-
В таком случае закройте все программы из пакета MS Office и запустите Internet Explorer. Когда веб-обозреватель откроется, нажмите на шестерёнку и перейдите в «Свойства обозревателя».
REG ADD HKEY_CURRENT_USER\Software\Classes\.htm /ve /d htmlfile /F
REG ADD HKEY_CURRENT_USER\Software\Classes\.html /ve /d htmlfile /F
REG ADD HKEY_CURRENT_USER\Software\Classes\.shtml /ve /d htmlfile /F
REG ADD HKEY_CURRENT_USER\Software\Classes\.xht /ve /d htmlfile /F
REG ADD HKEY_CURRENT_USER\Software\Classes\.xhtml /ve /d htmlfile /F
Способ 3: Редактор реестра
Указанный алгоритм сработает в отношении Гугл Хрома.
Способ 4: Очистка компьютера специальными программами
Этот метод как последняя инстанция в решении появившихся проблем. Установите CCleaner и проведите чистку компьютера: накопителя, реестра, оперативной памяти и т.д.
Также помощником в борьбе с временными файлами является Auslogics BoostSpeed. Его расширенная функциональность позволяет проводить генеральную «уборку» компьютера и ускорять его работоспособность.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Читайте также: