Background images in print css
При создании стилей для печатной версии сайта нужно помнить о том, что не всегда у пользователя будет стоять галочка "Print Background Images". Но что если нам нужно распечатать фоновое изображение, которое несет некий важный смысл, не привязываясь к настройкам пользователя? Неплохим решением было бы сделать его картинкой и вывести в псевдоэлементе :before
Но данный метод плохо работает в firefox и ie, потому как при первой загрузке (печати) данная картинка не успевает загрузится и на ее месте мы ничего не увидим. При повторной попытке печати, все будет ок, но будет ли пользователь второй раз печатать?
Решение - заменить фоновую картинку дефолтной картинкой списка:
При этом важно, чтобы данная картинка была уже загружена в display версии сайта и не заменялась на другую.
.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 версии сайта и не заменялась на другую.
Комментарии