MediaQueries для различных экранов
Относительные и абсолютные пути. Как правильно прописать path

Медиазапросы и принт-версия вебстраницы #

Давайте поговорим о рецептах. Я поддерживаю один сайт с кулинарными рецептами. И на нём я в первый раз решал интересную и полезную задачу. И так. Представим, что ты пользователь, который ищет условный рецепт на ужин. Например “рецепт драников по-могилёвски”.

Пошаговый usercase для сайта рецептов #

  1. Вбить в гугл поисковый запрос.
  2. Найти или выбрать в выдаче сайт с подходящим, привлекательным рецептом.
  3. Распечатать его на принтере

В процессе обсуждения, усложнения или упрощения поведения пользователя мы можем прийти к тому, что страница с рецептом в браузере может очень существенно отличаться от желаемой странице распечатанной на листе А4.

  1. Различия могут быть в фоне страницы, розовенький на сайте и белый на листе. Хотя бы из-за экономии чернил принтера.
  2. Различия могут быть в яркости, толщине, высоте и типе шрифта. Знамениты шрифты с засечками и без.
  3. Различия могут быть в величине или вообще наличия красивых фотографий в распечатке. Привлекать внимание рецепт должен, но нужны ли пользователю фотографии сырой картошки или даже готовых драников на бумаге?
  4. Отступы, дата, автор, название сайта, категории рецептов - практический каждый блок и элемент сайта нуждается в проверке.

media print #

Надеюсь теперь убеждать в том, что принт-версия страницы важна, нужна и уникальна никого не надо.

Для добавления особенных стилей на сайт мы можем воспользоваться специальным правилом добавления:

@media print {
    p {
        font-family: Georgia, serif;
        font-size: 1.6rem;
    }

    .title {
        font-family: Georgia, serif;
        font-size: 2.8rem;
    }

    img .print {
        width: 400px;
    }

    img[class="hidden"], footer {
        display: none;
    }
}

Классом hidden мы можем пометить те секции, которые не нужны в распечатке. Мы можем просто через запятую указать все секции, которые нерелевантны для принтверсии.

Стили можно выложить отдельным css-файлом, правда это скорее The Old Ways:

<!--The Old Ways-->
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>

Размеры, сантиметры и пойнты #

Возможно это тот пример, где применение сантиметров оправдано и разумно. Мы можем указать наши отступы именно в них, что бы принтер смог адекватно распечатать рецепт.

Это может выглядеть так:

body {
    margin: 25mm 25mm 25mm 25mm;
}

Но на самом деле правильнее вот так:

@page {
    margin: 2.5cm;
}

body {
    margin: 0;
}

Можно встретить и такую запись:

@page {
    size: 210mm 297mm;
    margin: 27mm 16mm 27mm 16mm;
}

Или такую:

@page {
    size: A4;
    /* Формат бумаги в Европе А4, 
    DIN A4 standard, Europe 
    DIN = Deutsche Institut für Normung или устаревшее Deutsche Industrienorm */
    margin: 0;
}

На секундочку стоит задуматься, если наши пиксели превратились в миллиметры и сантиметры, то правильно ли мы указали размер шрифтов? Если и указывать, то в пойнтах. Но вообще есть мнение, что мы не можем переписывать стандартные настройки пользователя. Решать вам:

@media print {
    body {
        font-size: 12pt;
        font-family: Georgia, serif;
    }
}

Background #

Стоит изменить background наших статей на тот, при котором мы не будем вынуждены работать на принтер и его чернила:

body {
    background: white;
}

article {
    background: transparent;
}

Цвет шрифта #

Проверьте, что текст статьи чёрный:

main {
    color: #111;
}

Ссылки #

Достаточно глупо выглядит в тескте на бумаге “подробнее тут”. У нас есть возможность добавлять в анкоры ссылок саму ссылку:

a:link:after {
    content: " (" attr(href) ") ";
}

Ссылки можно и нужно выделять. Общепринят синий цвет для ссылок, многие любят подчёркивание(я лично не люблю). Технически возможность добавить стили для ссылок может выглядеть так:

a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;
}

Перенос на новую страницу #

Порой мы наверняка не знаем нужна часть информации пользователю или нет. Это могут быть фотографии к рецепту или комментарии. У нас есть параметр “page-break-before” и “page-break-after”, которые выносит контент на отдельную страницу. Пользователь при распечатке сам может укать печатать ему все страницы или только первую, вторую и седьмую. Есть параметр “page-break-inside”

#comments {
    page-break-before: always;
}

:first |:left |:right #

Теоретически мы можем обратиться к титульной странице и к последующим. ч

@page :first {
    /* .... */
}

Бесплатная реклама #

Порой распечатки передают дальше. И мы можем сделать себе небольшую маленькую рекламу. Например:


<div class="printMsg" id="printMsg">
    <p>
        Спасибо, что тебе интересен мой сайт andron13.de. Я буду рад увидеть тебя здесь снова!
    </p>
</div>

#printMsg {
    display: block;
    /* добавьте красивые границы  */
    border: dashed 1px black;
}

Не забудьте только отключить этот блок в обычной версии.

#printMsg {
    display: none;
}

Это основные мысли по поводу принт-версий страницы.

Полезные материалы #

comments powered by Disqus