Брутальное руководство по эффективному использованию CSS

Владимир Синельников

Спецвыпуск: Хакер, номер #067, стр. 067-018-6

<![endif]-->

Более разумной, с точки зрения стандартов, альтернативой хакам и проприентарным тегам может послужить использование Javascript для определения типа браузера. Однако параноидальные пользователи, отключая исполнение скриптов в браузерах, не позволяют использовать данное решение как панацею.

[печать] CSS предоставляет нам блестящую возможность больше не заботиться о создании страниц с printer-friendly версиями документов. В первую очередь скроем функциональные блоки, бесполезные в твердой копии страницы, при помощи значения «none» свойства display;. Это большая часть дизайнерских наворотов в шапке и подвале страницы, а также навигация, баннеры и все прочее, что не имеет прямого отношения собственно к контенту. Поскольку принтеры имеют более высокое разрешение, имеет смысл скрыть также и логотип сайта и отдать принтеру другой (можно даже черно-белый) — с более высоким разрешением. Для этого создай блок со вторым логотипом и скрывай его в версии для дисплея. Подобным образом, например, поступила команда Артемия Лебедева — они создали таблицу стилей для печати страниц сайта Студии.

Для печати принято задавать размер кегля шрифта в пунктах (типографская единица измерения), и будет вполне логичным поступить таким же образом и при создании стилей для принтера. В результате пользователи получат буквы оптимального размера, привычные им по распечаткам документов Microsoft Office.

Отдельного упоминания заслуживают фоновые изображения. Поскольку шансы на то, что текст будет читаться так же хорошо, как и на экране, минимальны (большинство пользователей печатают на ч/б), смело отменяем использование картинок на бэкграунде. Также не помешает оптимизация палитры для придания ей максимальной контрастности. Идеал — белый фон и черный текст. Если ты все же решил использовать в стилях для печати не только оттенки серого, не поленись проверить, как будет выглядеть твое буйство красок, если его распечатают на стареньком монохромном лазернике.

На благодарном поприще создания стилей для печати разработчика поджидают несколько подводных камней. Один из них — ошибка в Mozilla (касается всех браузеров, основанных на движке Gecko — Firefox, Netscape, Camino и др.), связанная с печатью блочных элементов, для которых задано свойство float. Баг выражается в том, что независимо от размеров блок распечатывается только на одной странице. Все, что не поместилось на нее, игнорируется. Решение проблемы просто, как советские трусы за рупь двадцать: назначаем свойству float значение «none» и радуемся жизни.

Хотелось бы упомянуть рацпредложение Эрика Майера, выдвинутое в его статье «CSS. Going to Print» на сайте A List Apart. Суть новации такова: при распечатывании документа, содержащего ссылки, естественным образом теряются адреса URL (кто там кликает на листе бумаги?). Пытливый ум нашего буржуйского коллеги нашел выход из данной ситуации — применил в стилях для печати достижения CSS2. Результатом их работы станет появление после текста самой ссылки адреса URL в скобках. Эта красота работает в браузерах Mozilla и Netscape 6.x.