В то время, когда все, кажется, есть планшет, который позволяет потреблять все в цифровом виде, и единственной реальной работе мы используем это туалетной бумаги, это может показаться странным, чтобы написать о давно забытой привычке печати веб-страниц.
Тем не менее, как бы странно это может показаться, провидцев и таблетки производители, мы все еще далеки от реальности безбумажной world.
В самом деле, тонны бумаги плавать из принтеров во всем мире каждый день, потому что не у каждого есть планшет еще и компьютер не всегда в пределах досягаемости.Более того, многие из нас чувствуют, что написанный текст просто лучше потребляется в автономном режиме.Потому что я люблю готовить, иногда я печатаю рецепты на дому, или сообщения электронной почты и скриншоты на работу, хотя я делаю это как можно реже из уважения к environment.
Листы для печати стиля являются полезными, а иногда даже необходимы.Некоторые читатели, возможно, захотите хранить информацию локально, а в формате PDF сослаться на информацию позже, когда они не имеют подключение к Интернету.Тем не менее, стили печати часто forgotten В возрасте реагировать веб-дизайна.Хорошей новостью является то, что лист стиля печати самом деле очень легко обработать: Вы можете следить за пару простых приемов CSS, чтобы создать хороший опыт для читателей и показать им, что вы прошли лишнюю милю, чтобы доставить только немного лучше пользователюопыт.Итак, как мы начнем
Как Started
Давайте посмотрим на процесс создания печатного листа стилей.Самый лучший способ, чтобы начать с нуля и полагаться на таблицу стилей по умолчанию в браузере, который заботится о печатной продукции довольно хорошо по умолчанию.В этом случае, вставить все заявления для печати в конце вашей основной таблицы стилей, и заключить их с различными правило:
@media print {
…
}
Для того чтобы это работало, мы должны подготовить две вещи:
- Включить весь экран стилей в отдельном
@media screen {…}правила; - Исключить тип носителя для сокращенной таблицы стилей:
<link rel="stylesheet" href="css/style.css"/>
В редких случаях, используя экран стилей для печати подходом к разработке таблиц стилей печати.Хотя сделать два вывода похожих по внешнему виду было бы легче Таким образом, решение не является оптимальным, поскольку экран и печати разные чайники рыбы.Многие элементы должны быть сброшены или стиль по-разному, так что они выглядят нормально на листе бумаги.Но самая большая ограничения ограниченной ширины страницы и необходимость лаконичную, ясный вывод.Создание стилей печати отдельно от экрана стилей, тем лучше.Это то, что мы будем делать на протяжении всего этого article.
Конечно, вы можете отделить объявления для экрана и печати в двух файлах CSS.Просто установите тип носителя для вывода на экран до media="screen" и тип носителя для печати на media="print", опуская его в первый, если вы хотите построить на экране стиле sheet.
Чтобы проиллюстрировать это, ясоздали простой сайт вымышленного Smashing Winery.
Пример нашей website.
Все необходимое для правильного отображения экрана на место.Но как только изменения окружающей среды от виртуального пикселя реальный документ, единственное, что имеет значение фактического content.
Две страницы неизменной предварительного просмотра.В заголовке пока не оптимальна, и как основной навигации и нижний колонтитулы superfluous.
Таким образом, в качестве первой задачи, мы скроет все помехи, а именно: Главной навигации и footer.
header nav, footer {
display: none;
}
В зависимости от типа сайта, вы могли бы также рассмотреть скрывается изображение по умолчанию.Если изображение большое, это будет мудро, чтобы сохранить некоторые пользователи затраты на печать.Но если изображения в основном поддерживают содержание, и их удаление может нанести ущерб смыслу, просто оставьте их сюда бы вы ни решили ограничить изображения на определенную ширину, так что они не кровоточат от бумаги.Я обнаружил, что 500 пикселей является хорошим compromise.
img {
max-width: 500px;
}
В качестве альтернативы можно также рассчитывать на проверенным max-width: 100%, который отображает изображение в своем максимальном размере, но не больше, чем страницы width.
Вы можете использовать простую хитрость, чтобы получить высокое качество изображения при печати.Просто укажите более высоким разрешением версии каждого изображения необходимо, и изменить его размер до оригинального размера с CSS.Узнайте больше об этой технике в статье “ изображение с высоким разрешением Printing” на список Apart.
Конечно, мы должны скрывать видео и другие интерактивные элементы, потому что они бесполезны на бумаге.Они включают в себя <video> <audio> <object> и <embed> элементов.Вы можете рассмотреть вопрос о замене каждого видео элемент с изображением в таблице стилей печати, too.
С Главной навигации и нижний колонтитулы и изображения нет, сам текст становится все ближе к центру сцены.Но работы еще предстоит сделать, особенно с header.
Настройка справа Size
Чтобы определить поля страницы, вы можете использовать @page правила просто применить края по всему периметру страницы.Например:
@page {
margin: 0.5cm;
}
Установят страницы, поля со всех сторон 0,5 см.Вы также можете настроить поля для каждой другой страницы.Следующий код устанавливает левой странице (1, 3, 5 и т.д.) и правой страниц (2, 4, 6 и т.д.) полей independently.
@page :left {
margin: 0.5cm;
}
@page :right {
margin: 0.8cm;
}
Вы также можете использовать :first страница псевдо-класс, который описывает стиль первой страницы при печати документа:
@page :first {
margin: 1cm 2cm;
}
К сожалению, @page не поддерживается в Firefox, ноподдерживаются в Chrome 2.0, IE 8.0, Opera 6.0 и Safari 5.0.@page :first поддерживается только в IE8 и Opera 9.2.( Спасибо за совет, Designshack )
Теперь давайте настроить некоторые общие параметры шрифтов.Большинство браузеров установить по умолчанию Times New Roman, потому что шрифты с засечками считаются легче на глаза при чтении на бумаге.Мы можем использовать Грузию в 12-кегля шрифта и чуть выше линии высоте для лучшего legibility.
body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}
Однако, чтобы сохранить определенный контроль, мы должны явно задать размер шрифта ниже. карты на ReedDesign дает нам почувствовать это, но со всеми размерами экрана и резолюций там, это лишь грубая estimates.
h1 {
font-size: 24pt;
}
h2 {
font-size: 14pt;
margin-top: 25px;
}
aside h2 {
font-size: 18pt;
}
Кроме особых случаев (например, <h2> товарной позиции, которые иначе были бы слишком близко к предыдущему пункту), мы не должны коснуться поля или вид любого элемента, поскольку они обрабатываются довольно красиво по умолчаниюнастройки.Если вам не нравится, что некоторые элементы с отступом, например, <blockquote> <ul> и <figure>, вы всегда можете сбросить свои поля:
blockquote, ul {
margin: 0;
}
Или вы могли бы изменить стиль по умолчанию пулю в неупорядоченных списков …
ul {list-style: none}
… И заменить его на любого другого, например, двойной стрелкой (и пробел, чтобы придать ей комнату):
li {
content: "» ";
}
Вы можете также сделать <blockquote> выделяется немного, увеличивая его и курсивом text.
Header
В настоящее время, остальные вещи, которые будут рассматриваться в заголовке являются <h1> название и логотип.Во-первых, там только для accessibility цели и прячется за экраном дисплея с помощью CSS.В то время как мы могли использовать его в качестве своего рода заголовки в печати, чтобы указать источник содержания, давайте попробуем что-то более привлекательное.Не было бы неплохо отображать фактическое логотип, вместо скучных текстовых
К сожалению, «Винзавод» часть логотипа белый и, следовательно, не подходит для печати на светлой бумаге.Вот почему две версии логотипа в исходный код, по одной для экрана, по одному для печати.Последнее изображение не имеет alt текста, в противном случае чтения с экрана будет повторить считывание __4 “Smashing Winery”. |
<a href="/" title="Home" class="logo"> <img src="img/logo.png" alt="Smashing Winery" class="screen"/> <img src="img/logo_print.png" alt="" class="print"/> </a>
Во-первых, нам нужно, чтобы скрыть экрана с логотипом и <h1> товарной позиции.В зависимости от значимости образов, мы могли бы уже решили спрятать их вместе с другими ненужные элементы:
header h1, header nav, footer, img {
display: none;
}
В этом случае, мы должны вернуть печать логотипа.Конечно, вы можете использовать соседнего селектора брата на работу (header img + img), чтобы сохранить имя класса и жить с ним не работает в Internet Explorer 6.
header .print {
display: block;
}
В противном случае, вы можете использовать только header .screen (или header :first-child), чтобы скрыть основной логотип.И тогда второй логотип останется.Имейте в виду, что вмакетов печати, только изображения, вложенные через <img> теги отображаются на дисплее.Фоновые изображения являются not.
Вуаля!Теперь у нас есть хороший заголовок для нашей печати, что ясно показывает, источником всего.Кроме того, можно еще удалить второй логотип с исходным кодом и использовать <h1> рубрика, что мы выключен ранее (другими словами, удалить его из display: none линия).Возможно, вы будете нуждаться, чтобы скрыть оставшийся логотип, как мы делали раньше.Кроме того, размер шрифта может быть расширен так, чтобы он четко признана в качестве названия website.
header h1 {
font-size: 30pt;
}
Как немного больше, заголовок в распечатке может показать URL веб-сайта.Это делается с применением :after псевдо-элемента на <header> теги, которые, к сожалению, не будет работать в IE до версии 8, а потому, что это всего лишь маленький бонус, мы можем жить с shortcoming.__0 в IE |
header:after {
content: "www.smashing-winery.com";
}
Чтобы посмотреть, что еще эти псевдо-элементы можно сделать, читайте описание разработчиков Mozilla Network или обратитесь __ Крис Куаэ по 8 | прекрасную статью по CSS-Tricks.
Еще одна вещь, о IE 6 до 8 является то, что HTML5 теги не могут быть напечатаны.Потому что мы с помощью этих тегов на примере веб-сайта, мы должны будем применить Remy Sharp, HTML5shiv в заголовке.Шив позволяет не только теги в стиле HTML5, но печатать их.Если вы уже используете Modernizr, который идеально подходит, потому что нож входит в it.
<script src="js/html5.js"></script>
К сожалению, поведение IE, еще немного багги, даже если это Шив применяется.HTML5 теги, которые были в стиле для экрана необходимо сбросить, иначе стиль будет принят для печати out.
Некоторые разработчики добавить короткое сообщение в качестве дополнения (или альтернативные) с отображаемым URL, напоминая пользователям, где они были, когда они напечатали страницу и следите за свежий контент.Мы можем сделать это с :before псевдо-элемент, так что она предстает перед логотипом.Опять же, это не будет работать в IE 6 или 7.
header:before {
display: block;
content: "Thank you for printing our content at www.smashing-winery.com. Please check back soon for new offers on delicious wine from our winery.";
margin-bottom: 10px;
border: 1px solid #bbb;
padding: 3px 5px;
font-style: italic;
}
Чтобы отличить его от реального содержания, мы дали ему серое границу, немного обивка и курсивом.И наконец, я сделал это элемент блока, так что граница проходит вокруг него, и с учетом логотипа margin.
Чтобы сделать его более сдержанный, мы могли бы переместить это сообщение в нижней части страницы и добавить его в основной контейнер страницу, которая имеет .content класса.Если это так, мы будем использовать :after элементов и верхнее поле, чтобы держать его отличным от содержания боковой панели.Насколько я могу судить, является указанием URL достаточно, так что я бы полагаться на это и опускать message.
Наконец, нам нужно, чтобы удалить границу логотип, чтобы он не показывается в старых браузерах, и двигаться <header> от содержания:
img {
border: 0;
}
header {
margin-bottom: 40px;
}
Заголовок показан двумя разными способами, один с логотипом и простой URL, а другой с сообщением, и название в простой text.
The Missing Link
Очевидно, что на бумаге, ссылки не являются интерактивными и так довольно бесполезно.Вы могли бы попытаться построить обходной путь, заменяя связи с QR-кодами на лету, но решение не может быть осуществимо.Чтобы поставить ссылки в использовании, позволяет отображать URL после каждой строки якорный текст.Но текст изобилует URL-адреса могут быть недовольными и может привести к ухудшению опыт чтения и щадящие читателя излишней информации, где возможно это advisable.
Лучшее решение :after псевдо-элемент.Он отображает URL после каждого якорного текста, окруженный скобками.И размер шрифта уменьшается чтобы сделать его менее intrusive.
p a:after {
content: " (" attr(href) ")";
font-size: 80%;
}
Мы ограничили эту технику, чтобы ссылки в <p> элементов в качестве меры предосторожности.Чтобы пойти дальше, мы могли бы выбрать для отображения только URL-адреса внешних ссылок. атрибут selector идеально подходит для этого:
p a[href^="http://"]:after {
content: " (" attr(href) ")";
font-size: 90%;
}
Возможности для ссылок в печатных документах, кажется, почти бесконечным, так что давайте попробуем еще немного.Чтобы отличить все внутренние ссылки, давайте перед ними домена сайта (опуская все остальные свойства, чтобы держать вещи четко и ясно):
p a:after {
content: " (http://www.smashing-winery.com/" attr(href) ")";
}
Тогда, мы можем скрыть внутренние ссылки (#), потому что там не так много, чтобы отобразить:
p a[href^="#"]:after {
display: none;
}
Кроме того, внешние ссылки будут добавлены, как есть, как и выше.Рассмотрим SSL защищенных веб-сайтах, тоже (т.е. те, которые начинаются с https://):
p a[href^="http://"]:after, a[href^="https://"]:after {
content: " (" attr(href) ")";
}
Но есть одна вещь, чтобы помнить, особенно с внешними ссылками.Некоторые из них очень длинные, такие, как те, в Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров