Background images in print css

При создании стилей для печатной версии сайта нужно помнить о том, что не всегда у пользователя будет стоять галочка "Print Background Images". Но что если нам нужно распечатать фоновое изображение, которое несет некий важный смысл, не привязываясь к настройкам пользователя? Неплохим решением было бы сделать его картинкой и вывести в псевдоэлементе :before

  .arrow {
    background: none;

    &:before {
        content: url('arrow.png');
    }
  }

Но данный метод плохо работает в firefox и ie, потому как при первой загрузке (печати) данная картинка не успевает загрузится и на ее месте мы ничего не увидим. При повторной попытке печати, все будет ок, но будет ли пользователь второй раз печатать?

Решение - заменить фоновую картинку дефолтной картинкой списка:

  .arrow {
    background: none;
    display: list-item;
    list-style: url("arrow.png");
    margin-left: 20px;
    width: 0;
  }

При этом важно, чтобы данная картинка была уже загружена в display версии сайта и не заменялась на другую.

Комментарии

Популярные сообщения из этого блога

Стайлгайд и компонентная разработка

Прогноз погоды в консоли

Вендорные префиксы