История замены изображений в CSS

История замены изображений в CSS

От автора: история замены изображений в CSS довольно насыщена и разнообразна. Если вы заинтересованы данной тематикой, то в сети можно найти множество современных техник по замене изображений. Важно отметить тот факт, что в скором будущем Google будет наказывать владельцев сайтов за использование отдельных техник, если уже не делает этого. Так что к этому вопросу стоит подходить с осторожностью. Однако вы никогда точно не сможете предугадать, когда ваша CMS или проект заставят вас воспользоваться данным инструментарием! В этой статье мы собрали все известные методики по замене изображений, которые вам могут еще пригодиться, пока интернет не ушел далеко вперед.

Отрицательное значение свойства text-indent – Метод Фарка

Самый распространенный метод, который так или иначе использовали почти все веб-разработчики. Идея заключается в том, чтобы сдвинуть текст далеко за пределы окна браузера при помощи отрицательного значения свойства text-indent:

.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

В CodePen демо показано, как будет выглядеть заголовок со спрятанным текстом при помощи свойства text-indent:

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

Метод Скотта Келлума

Вместо большого отрицательного значения свойства text-indent можно задать значение в 100%. В таком случае браузеру не нужно будет создавать огромный блок, что повысит производительность. Данный метод не требует дополнительной разметки. Необходимо прописать в CSS:

.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Свойство overflow: hidden скрывает текст, а whitespace: nowrap запрещает переход текста на следующую строку. В данном методе текст остается доступным для скрин ридеров. Демо:

Свойство margin – Техника Раду Дарваса

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

.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}

Как и в предыдущих примерах, в качестве фонового рисунка к заголовку используется логотип сайта SitePoint. Ниже представлено демо данной техники – сперва без margin, потом с ним:

Если прокрутить окно вправо, вы увидите фон первого заголовка. В реальности же вам не нужно будет беспокоиться о полосе прокрутки, так как большой отрицательный margin компенсируется шириной заголовка (как во втором заголовке). Данный метод не самый лучший, так как он заставляет браузер рисовать очень большие блоки.

Свойство padding – Метод Лэнгриджа

В этот раз мы будем выталкивать текст за пределы блока заголовка при помощи свойства padding-top. Свойству необходимо указать значение, равное высоте логотипа. Одного свойства будет недостаточно, нам придется спрятать текст при помощи свойства overflow: hidden.

.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
}

По сравнению с двумя предыдущими примерами данный метод очень хорош с точки зрения производительности. В данном методе достигается тот же уровень доступности текста, что и в предыдущих двух. Ниже продемонстрировано демо – в первом заголовке отсутствует padding фон, а во втором есть:

Маленькое значение свойства font-size – Метод Линдси

Еще один способ скрыть текст это сделать его очень маленьким и покрасить его в цвет логотипа. Данный метод никак не влияет на доступность текста, но с другой стороны, могут возникнуть проблемы с SEO из-за слишком мелкого текста и маскировки цветом.

.replace-font {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  font-size: 1px;
  color: white;
}

Демо данного метода – первое изображение без свойства font-size, второе с данным свойством:

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

Свойство display – Замена изображения по Фарнеру

В отличие от других методов тут вам потребуется дополнительная разметка. Текст необходимо обернуть при помощи тега span и задать ему значение display: none. Собственно, разметка:

<h1 class="replace-display">
  <span>SitePoint</span>
</h1>

CSS:

.replace-display {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-display span{
  display: none;
}

Демо с тегом span и свойством display: none:

Очень простой метод, но очень сильно страдает доступность. Из-за свойства display: none элементы игнорируются скрин ридерами. Со свойством visibility: hidden та же проблема, так что оно тоже не подойдет. Можно установить opacity: 0. Так элемент будет скрыт, но останется видимым для скрин ридеров.

Свойство overflow – Метод Леона Дуайера

Мы уже использовали свойство overflow для того, чтобы прятать текст в паре со свойством padding. В этот раз мы будем прятать текст, используя только это свойство. Как и в предыдущем примере, тут нам потребуется обернуть текст в тег span. CSS код:

.replace-overflow {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-overflow span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

Высота и ширины span’а задаются в ноль, что вынуждает текст внутри выехать за пределы блока. Затем текст скрывается при помощи свойства overflow: hidden. На CodePen продемонстрирована данная техника:

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

Абсолютное позиционирование – Техника Левина

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

<h1 class="replace-position">
  <span></span>SitePoint
</h1>

CSS

.replace-position {
  width: 264px;
  height: 106px;
  position: relative;
}

.replace-position span {
  background: url("assets/logo.png");
  width: 100%;
  height: 100%;
  position: absolute;
}

Демо метода по замене изображений при помощи абсолютного позиционирования:

Обратите внимание, что ширина и высота заданы в 100%, чтобы полностью закрывать наш заголовок. Единственная проблема в том, что изображения должны быть полностью непрозрачными. Если у вас заголовок со степенью прозрачности пользователь будет видеть текст через изображение.

Поддельное изображение – Метод Раду Дарваса

Для работы метода нам потребуется помимо тега span еще и поддельное изображение – прозрачное GIF изображение размером 1х1 пиксель. Основная задача данного изображения показывать альтернативный текст, если основное не загрузилось. Разметка:

<h1 class="replace-image-span">
  <img src="assets/transparent.gif" alt="SitePoint" />
  <span>SitePoint</span>
</h1>

CSS

.replace-image-span {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-image-span span{
  display: none;
}

Демо ниже разъяснит принцип работы метода:

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

Изображение – Метод Фарка и инлайновое изображение

На этот раз для замены изображения мы возьмем настоящее изображение. Изображению задан атрибут alt, который будет показываться, если изображение отключено. Разметка:

<h1 class="replace-image-link">
  <img src="assets/logo.png" alt="SitePoint" />
</h1>

CSS код, осуществляющий замену:

.replace-image-link {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

Демо ниже показывает принцип работы техники:

Вы видите изображение не из тега img, а из свойства background. Помимо имеющихся проблем из-за большого отступа у текста, о которых мы говорили ранее, данная техника не подходит для SEO. Один плюс – изображение останется видимым даже, если отключить CSS. Но тогда возникает вопрос, а почему просто не вставить изображение…

Свойство clip-path

Свойство clip-path скрывает все, что выходит за пределы заданного вам пути. Данное свойство можно использовать для сокрытия нашего текста. Текст скроется визуально, но останется видим для скрин ридеров. Разметка:

<h1 class="replace-clip-path">
  <span>SitePoint</span>
</h1>
.replace-clip-path {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
}

.replace-clip-path span{
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

Чтобы понять, по какому принципу обрезается текст, вы можете менять значения свойства clip-path:

У данного метода есть один недостаток – очень плохая поддержка. На сайте SitePoint недавно публиковалась статья по свойству clip-path, где данное свойство было подробно разобрано. Когда поддержка данного свойства вырастет, данный метод окажется ненужным из-за устаревания самой техники замены изображений.

Псевдоэлементы – Замена изображений по Нэшу

Для сдвига текста в сторону в данном методе используются псевдоэлементы. Разметка:

<h1 class="replace-pseudo">
  SitePoint
</h1>
.replace-pseudo {
  width: 264px;
  height: 106px;
  overflow: hidden;
}

.replace-pseudo:before{
  content: url("assets/logo.png");
}

Демо с техникой в действии:

Псевдоэлемент сдвигает текст. Текст, выходя за пределы блока, скрывается при помощи свойства overflow: hidden. Одна проблема – техника работает только в IE8 и выше.

Заключение

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

Обновление от PatCat (30/06/2016): В статье утверждается, что изображения в заголовках сайтов отрицательно влияют на SEO и доступность, что совсем не так. На самом деле, верен обратный тезис, если учитывать штрафные санкции Google за использование методов замены изображений. Я внес изменения в статью, благодарю зоркий глаз читателей за то, что показали мне этот комментарий.

Редакция: Автор: Baljeet Rathi

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree