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

Дата публикации: 2016-07-15

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

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

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

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

.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;
}

.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;
}

.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;
}

.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;
}

.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>

<span>SitePoint</span>

</h1>

CSS:

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

.replace-display span{
  display: none;
}

.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;
}

.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>

<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;
}

.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>

<span>SitePoint</span>

</h1>

CSS

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

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

.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>

</h1>

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

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

.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>

<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);
}

.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>

SitePoint

</h1>

.replace-pseudo {
  width: 264px;
  height: 106px;
  overflow: hidden;
}

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

.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

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

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

Метки: css