Стильный вывод (работа со стилями в CSS)

Использование стилей для оформления страничек — это быстрый и лёгкий метод для создания красивых и качественных сайтов. Помимо текущего оформления, можно задавать разные условия для вывода. Например, можно корректировать отображение странички в зависимости от разрешения монитора или устройства на которое выводится изображение. Все эти плюшки появились сравнительно недавно. Точнее разграничение на устройства вывода — это давняя история, а вот работа с разрешениями экрана и подобия условий в CSS — это уже недавние разработки. Раньше, изменения дизайна в зависимости от разрешения, можно было производить только используя возможности JavaScript, сейчас же — это можно реализовать всего несколькими строчками в файле с каскадными таблицами стилей.

Собственно гибкость в работе с оформлением — это та самая последняя капля в море которая подтолкнула меня полностью избавиться от таблиц и перейти на дивную вёрстку. Теперь я реализовал свою старую задумку с ещё более гибким резиновым дизайном. Меня сильно напрягало, что меню сайта занимает много места при выводе на экранах мобильных устройств. Работая с таблицами невозможно добиться подобной гибкости, а вот работая со стильной вёрсткой — легко. Собственно, я сейчас отрабатываю стили для вывода на мобильные устройства. Если мой блог пытаются просмотреть с наладонника или сотового телефона, то я переношу меню из левой колонки в заголовок страницы (собственно, то же самое я делаю в том случае, если размер окна меньше 720 пикселей). Жалко, что отработка подобных условий появилась относительно недавно. Раньше, с малыми габаритами экранов, подобный функционал был бы крайне кстати.

Работа со стилями в CSS

И так, как спрятать div-слой при маленьком разрешении экрана? Достаточно добавить в CSS обработку размеров экрана. Это делается с помощью тригера @media:

@media (max-width: 720px)
{ #hisize {display: none;} }

Этот тригер сработает в том случае, когда размер окна не более 720 пикселей. Получается, что в случае когда размер окна не достигает указанного числа, то у него будет установлено свойство display: none. Но когда размер окна увеличится сверх установленной границы, то войдёт в действие свойство указанное в основном теле описания каскадной таблицы стилей.

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

• all (все)
• braille (брайль-устройство)
• embossed (брайль-принтер и перфоратор)
• handheld (наладонники, смартфоны, коммуникаторы)
• print (устройства печати)
• projection (проектор)
• screen (экран)
• tv (телевизионный выход с малым разрешением)

Это не полный перечень, но достаточный, для тех вэб-мастеров, которые заботятся о своих пользователях и желающие, чтобы их странички можно было корректно просматривать на любом медиа носителе.

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

Стильная печать с @media print

Ещё один интересный нюанс использования @media заключается в возможности изменения стиля страницы при выводе на печать. Практически все блоги выводят массу ненужной информации. Вот, что я рекомендую удалять при выводе на печать:

• облако меток,
• последние посты,
• добавлялки в социальные сети и закладки,
• лайки,
• подписки на комментарии,
• формы для комментирования,
• блоки со счётчиками посещаемости,
• блоки с категориями,
• популярные записи,
• фоновая картинка в подложке,
• рекламные баннеры,

По сути, даже меню лучше не включать в печатаемую область. Я за то, чтобы на выходе у пользователя был чистый контент, а не масса рекламы и облаков меток. Даже от меню и списка категорий нет никакого толка, если это напечатано на бумаге. Я предлагаю создавать печатные формы в таком виде, чтобы их было легко и приятно читать. Ведь любой юзер, не удовлетворившись результатом напечатанного, может вырезать текст и вставить его в вордовский документ, после чего распечатает его в том виде в каком он хочет. Но если пользователю заранее дать красиво подготовленный к печати документ, то мы сможем сохранить в напечатанном виде и наш логотип и пару строчек с копирайтом.

Раньше, для подобного шага на встречу к пользователю, использовались скрипты генерирующие красивый дизайн для печатной формы. А теперь у нас есть отличный механизм для управления дизайном контента не прибегая к программированию. Достаточно лишь обернуть ненужный нам контент в специальные div-слои и прописать им свойство невидимости в случае если контент выводится на печать. А для владельцев блогов на CMS типа WordPress, можно подключить стилевую таблицу в виде отдельного файла и переопределить формат отображения практически любого элемента. Там практически каждый блок и каждая строчка имеет свой класс, чем можно легко воспользоваться и сделать шаг на встречу своим пользователям.

Тот кто пользуется стандартными шаблонами для WordPress, могут не задумываться о проблемах с некрасивой печатью так как в шаблонах, типа TwentyTen, уже есть тригер @media print со вполне красивым оформлением для печати. А вот в нестандартных шаблонах, лучше проверить и включить обработку CCS для вывода на печать.

В качестве примера могу предложить следующий код для подключения:

@media print {
body {
 background: none !important;
 }
 #wrapper {
  clear: both !important;
  display: block !important;
  float: none !important;
  position: relative !important;
 }
 #header {
  border-bottom: 2pt solid #000;
  padding-bottom: 18pt;
 }
 #colophon {
  border-top: 2pt solid #000;
 }
 #site-title,
 #site-description {
  float: none;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
 }
 #site-title {
  font-size: 13pt;
 }
 .entry-content {
  font-size: 14pt;
  line-height: 1.6em;
 }
 .entry-title {
  font-size: 21pt;
 }
 #access,
 #branding img,
 #respond,
 .comment-edit-link,
 .edit-link,
 .navigation,
 .page-link,
 .widget-area {
  display: none !important;
 }
 #container,
 #header,
 #footer {
  margin: 0;
  width: 100%;
 }
 #content,
 .one-column #content {
  margin: 24pt 0 0;
  width: 100%;
 }
 .wp-caption p {
  font-size: 11pt;
 }
 #site-info,
 #site-generator {
  float: none;
  width: auto;
 }
 #colophon {
  width: auto;
 }
 img#wpstats {
  display: none;
 }
 #site-generator a {
  margin: 0;
  padding: 0;
 }
 #entry-author-info {
  border: 1px solid #e7e7e7;
 }
 #main {
  display: inline;
 }
 .home .sticky {
  border: none;
 }
}

Методы подключения CSS к документу

О, предвижу фразу, что подключить CSS легче лёгкого. Не спорю. Но тут есть пара тонкостей, которые я хочу осветить подробно. Начнём с того, что портянки с описанием каскадных таблич стилей могут занимать огромные объёмы. А портянки разработанные специально для каждого вида устройств вывода займут дополнительные объёмы, возможно даже значительно большие чем основные CSS. По этому напомню синтаксис подключения линка с CSS:

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

В свойстве media указывается для какого устройства используется данный CSS. Какие типы могут там использоваться я уже перечислял выше. Если вы хотите чтобы в одном файле хранились все определения, то можете туда вписать просто all.

Но можно всё хранить в одном месте, тогда для переопределения носителя используется тригер @media. Но, о его использовании я уже писал. Будет желание и свободное время, то я рекомендую поиграть с выводом на принтер. Свою вариацию на тему сокрытия ненужных информационных блоков при выводе на принтер я скоро допишу.

Тэги: SEO

Отредактировано:2020-09-28 08:05:40