Дедушкин блог о дизайне и фрилансе

Работаем дома с удовольствием

  • Рубрики
  • cоветы
  • блог
  • деньги
  • дизайн
  • интересно
  • код
  • реклама
  • софт
  • фриланс

    • Вы RSS выписывать будете?

    Извините, я почему вредный был? Потому что у меня велосипеда не было. А теперь я сразу добреть начну.

    Делаем версию для печати через CSS

    16 января, 2009 г. · Комментариев: 8

    Сегодня вас ждёт заметка из серии советов по дизайну. И дизайну не графическому, а дизайну интерфейса. Думаю, многие из вас хоть раз распечатывали страницу сайта прямо из браузера. Последовательность обычно такая: нажать Ctrl+P, ждать минуту, потом догадаться вставить бумагу в принтер, снова нажать Ctrl+P, удивиться, зачем было печатать столько баннеров, счётчики и главное меню. Нужна-то была всего лишь карта проезда и контакты.

    print it Делаем версию для печати через CSS

    Некоторые дизайнеры решают этот вопрос так: для каждой страницы соаздаётся отдельная версия для печати. Чаще всего это документ, в который не вставляются баннеры, меню и остальные лишние для печати элементы страницы.

    Зачем делать отдельную версию

    Если страница большая, то возможен вариант, когда она не вмещается на А4 и распечатается только до половины, а остальная часть будет на втором листе. Убирая лишние блоки перед печатью, мы сэкономим место на бумаге, краску в принтере и нервные клетки.

    Кроме того, разное разрешение экранов пользователей не позволит нам знать, как именно распечатается тот или иной элемент. Поэтому я бы советовал убирать всё лишнее и быть уверенными, что все распечатки будут одинаковыми.

    Как указать, что печатать?

    Обычно благодаря классам и идентификаторам объектов мы можем спрятать практически любой элемент страницы. Чтобы не спрятать лишнего, я бы рекомендовал скрывать шапку с навигацией, логотип сайта, боковую панель (если она есть) и футер (низ страницы).

    Таким образом в печать уйдёт то, что находится в области контента. Всем элементам, которые вы хотите спрятать при печати, присваивайте свой класс, например «no-print».

    <img src="/ban/sobchak.jpg" class="no-print">

    Также мы можем указать, что на печать не должны отправляться изображения, находящиеся в папке с баннерами. Делается это с помощью маски. Для этого надо указать в CSS:

    img[src*="/ban/"] { display: none !important; }

    Этим кодом мы скроем все баннеры, которые будут встречаться в любом месте на странице. Таким же образом нужно сделать невидимыми остальные элементы.

    .no-print { display: none !important; }

    Применение на практике

    Для того, чтобы файл print.css обрабатывался только во время отправки на печать, нужно указать его в <head> таким образом:

    <link rel="stylesheet" type="text/css" media="print" href="print.css">

    На странице мы можем вставить ссылку на печать:

    <a href="javaScript:window.print();">Распечатать эту страницу</a>

    Несколько лет назад я был приятно удивлён, узнав о существовании такой функции. Это удобно и достаточно просто, поэтому рекомендую вам её к использованию.

    Теги: , ,

    Вам тут просили передать:

    — Голосовой поиск в Google Chrome на любом сайте
    — Скрипт «Перезвони мне» v 0.2 (CallMe)
    — Танцуем и программируем
    — Свой стиль для игры «Яндекс.города»
    — Смски Мегафона попали в Яндекс
    — Закрепляем меню слева в WordPress
    — Простое слайдшоу на js: SlowShow v 0.5b

    Рубрика: cоветы
    противоморозные добавки в раствор реламикс . новости хокея, донбасс.

    Комментариев: 8 ↓

    • 1 Максим Покровский // 19 января, 2009 // 19:48.

      Вовсе не обязательно указывать для каждой картинки класс. В грамотной верстке почти к любому элементу можно получить доступ из CSS без дополнительных изголений. С другой стороны, если печать страницы планируется, то верстка будет несколько другой.

      img[src*="/ban/"]
      Красиво, но сам знаешь где это не будет работать :)

    • 2 Дедушка // 19 января, 2009 // 21:11.

      Максим, именно, при ГРАМОТНОЙ верстке. Из 10 последних проектов в 5 вёрстку приходилось доделывать, при том, что я плачу за неё обычно выше средней рыночной стоимости, надеясь на качество.

      А где работать не будет, что-то я не понял?

    • 3 madFobos // 21 января, 2009 // 19:19.

      img[src*="/ban/"]

      А действительно смысл от этого, если в IE все равно не будет работать, если не ошибаюсь (сам не верстальщик). Ведь очень многие его используют (особенно за пределами России и СНГ).

    • 4 Дедушка // 21 января, 2009 // 22:00.

      madFobos, давно вас не слышал. Если обращаться к объекту по его классу, он будет скрываться и в Internet Explorer. А вариант с маской в IE я не опробывал, т.к. он чаще используется тогда, когда нет доступа к html и нужно решать вопросы исключительно через CSS.

    • 5 madFobos // 22 января, 2009 // 12:44.

      Да отдыхал я от фриланса и вообще от всего :) Я-то как раз про маску говорил, что от нее смысла немного, т.к. в IE баннеры таким способом на печати не уберутся.

    • 6 Дедушка // 22 января, 2009 // 13:22.

      Понятно, и как дорожка?
      Убирать лучше классами, они везде работают.

    • 7 madFobos // 22 января, 2009 // 14:17.

      Дорожка отлично :) Бегаю каждое утро по 15 минут… Выносливость и дыхалка точно развиваются. 1.5 км вообще уже без проблем можно пробежать :)

    • 8 Дедушка // 22 января, 2009 // 15:04.

      Супер, а я всё присматриваю…

    Пожалуй, я отвечу

    спасибо