Данная публикация посвящена удалению некоторых свойств ссылок у изображений с границами в Wordpress 4, когда ещё он был движком этого блока в далёком 2012-м.
В CSS, как известно, есть множество способов оформить изображение.
Можно добавить рамку к изображению:
img {
border: thin solid black;
}Можно отрегулировать внешние отступы (margins) и внутренние отступы (padding):
img {
border: thin solid black;
padding: 3px;
margins: 3px;
}Можно даже назначить данному изображению изображение заднего плана, которое замостит фон (бывает полезным при работе с графикой в формате PNG с альфа-каналом):
img {
background: url(img/grunge.png) repeat 0 0;
border: thin solid black;
padding: 3px;
margins: 3px;
}Можно сделать изображение ссылкой на другое изображение, как это часто бывает с предварительным просмотром:
<a title="Крупное фото" href="http://site.ru/foto/large.png">
<img src="http://site.ru/foto/preview.png" alt="Предварительный просмотр" />
</a>И, конечно же, каждый уважающий себя веб-мастер настраивает по-своему ссылки. Принято, чтобы все ссылки были подчёркнуты, но эстетически куда приятнее, если это подчёркивание не так заметно. Поэтому задаётся отдельный цвет каждого состояния ссылки и её подчёркивания:
a:link, a:visited {
border-bottom: 1px solid;
border-color: #e0b2e0;
text-decoration: underline;
color: red;
}
a:hover, a:active {
border-bottom: 3px solid red;
text-decoration: none;
color: maroon;
}К сожалению, весь груз свойств, который мы понавесили на текстовые ссылки, применяется и к ссылкам-изображениям! И у них появляется гадкое и несвойственное изображениям подчёркивание. Сам автор этого блога боролся с расползшимися по всем рамкам линиям. Первое, что приходит в голову, — написать так:
a img {
text-decoration: none;
border: 0 none;
}На что действует эта корректива — на якорь (a) или изображение (img)? На изображение. Данный код убирает с изображения собственную рамку, а не ссылку. Дословно это надо понимать так: всем изображениям, которые могли бы иметь собственное обрамление (border), являясь ссылками, обрамление снять. Текстовое же форматирование (подчёркивание) здесь вообще нигде не присутствует, поскольку оно не применяется к изображению напрямую (в самом деле, попробуйте себе представить жирные изображения, курсивные изображения, изображения, набранные из малых прописных пикселей с разрядкой между символами, — изображения с применёнными к ним текстовыми декларациями). Поэтому, вместо попыток найти и обезвредить подчёркивание ссылок и создание границ, нам нужно модифицировать элементы-якори (ссылки), содержащие изображения. Это разумно — обращаться к внешнему контейнеру. Если содержимое ссылки будет подчёркиваться, то этой директиве начхать на то, что мы творим внутри неё со стилями вложенных объектов. Она просто возьмёт и подчеркнёт.
Жаль, что CSS не поддерживает создания селекторов по критериям (qualified selectors). Если бы было наоборот, то мы бы могли выцепить целевое изображение следующим методом:
a < img { border: none; }Томимые собственными сладкими грёзами об этом, мы должны искать обходной путь.
Первый путь решения проблемы — это воспользоваться присвоением особого «неподчёркнутого» класса всем изображениям, являющимся ссылками:
a.image-border {
text-decoration: none;
border: 0 none;
}Это работает, текстовое форматирование уходит со всех изображений-ссылок, принадлежащих данному классу, а сами стили изображения остаются нетронутыми. Это хорошо? Отнюдь, так как требуются колоссальные трудозатраты — перекопать все изображения-ссылки на гигантском сайте. Никому не захочется рыться в базе данных и присваивать класс всем являющимся ссылкой изображениям.
К счастью, CSS3 позволяет нам выделять определённые типы ссылок путём сопоставления с образцом и отбора атрибутов. Отбор атрибутов сужает наш круг подозреваемых на «ссыльность» или иные характеристики изображений. Пример критериев отбора: мы хотим присвоить свойства в фигурных скобках объектам, у которых выполняется равенство атрибута такого-то тэга тому-то. Для примера сделаем жёлтый фон только у тех ссылок, которые не подлежат автоматическому переходу, добавим зелёную рамку (буэ-э) изображениям, у которых замещающий текст — «arrow», и всему коду во фрагменте подсветки синтаксиса, который говорит, что он написан на языке perl, сделаем красные буквы. Записывается это короче, чем формулируется:
a[rel="nofollow"] {
background: yellow;
}
img[alt="arrow"] {
border: green;
}
pre[class="perl"] {
color: red;
}В этих примерах выбор атрибутов позволяет отфильтровать объекты с определёнными значениями. Мы можем использовать следующий синтаксис фильтра.
Элемент содержит указанный атрибут:
element[attribute]У элемента атрибут принимает конкретное значение:
element[attribute="value"]У элемента атрибут содержит в значении указанный фрагмент:
element[attribute~="valuefragment"]У элемента значение атрибута начинается с указанного фрагмента:
element[attribute^="valuebeginning"]У элемента значение атрибута кончается указанным фрагментом:
element[attribute$="valueending"]У элемента значение атрибута содержит строковое выражение фрагментом:
element[attribute*="containsstringvalue"]Подобный функционал проверки соответствия шаблону даён веб-мастеру возможность целиться только в те якори, которые обращаются к определённым типам файлов. Поэтому мы будем использовать синтаксис [атрибут$="значение"] и выбирать только те якори, которые ведут на изображения любого типа. Например, чтобы охватить вниманием ряд мелких иконок предварительного просмотра изображений, которые потом открываются полноразмерными PNG, радивый веб-мастер напишет:
a[href$=png] {
text-decoration: none;
border: 0 none;
}Это приведёт к тому, что у них у всех исчезнут границы и подчёркивания от ссылки. Все ссылки вида
http://dirtymess.gov/nav/.../...[abracadabra].../some-image.pngутратят текстовые закидоны и лишатся подчёркивающих линий. Мы можем выбирать столько типов изображений, сколько нам угодно. Ограничимся якорями, адресующимся к JPG, PNG и GIF:
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
}Это лучший способ убрать подчёркивание у изображений-ссылок, не копаясь в классах изображения. К сожалению, не всё проходит так гладко, как хотелось бы. Существуют две категории вещей, омрачающих наше ликование:
- Изображения, которые ссылаются не на выбранные нами типы файлов.
- Текстовые ссылки, ссылающиеся на выбранные нами типы файлов.
В первом случае все ссылки-изображения, на которых мы не навели мушки своих критериев, останутся со всем окружающим их форматированием, например, изображения, ведущие на аудио, видео, веб-страницы, которые довольно трудно отловить в силу сложности запросов, формирующих целевое содержимое.
Во втором случае текстовые ссылки, ведущие на картинки, утратят подчёркивание. Наша ищейка ставит знак равенства между всеми типами контейнеров, чьи атрибуты соответствуют её критериям. Поэтому все текстовые ссылки переймут стиль, который предписывает данный поиск.
И тут можно применить небольшие латки для образовавшихся прорех. Можно изменить критерии отбора и подвергнуть обесподчёркиванию (или расподчёркиванию?) объекты с другими фрагментами кода в параметрах. Можно отловить только те изображения, которые ведут на определённый сайт или в определённый раздел сайта (содержат определённую папку в пути):
a[href*=domain] {
text-decoration: none;
border: 0 none;
}
a[href*=directory] {
text-decoration: none;
border: 0 none;
}Данный приём снимет ненужное форматирование с любого объекта-ссылки, ведущего в определённое место сайта.
Надеюсь, указанные в данной статье приёмы предоставят дизайнерам возможности более точного контроля над применением стилей, особенно над удаленим свойств якоря с объекта-ссылки.