Теория и практика применения CSS. Хитрости и правила применения CSS и HTML. Сереты профессиональной верстки страниц. Профессиональный дизайн и раскрутка сайта. Web-дизайн и web-программирование новичкам и профессионалам. Только авторские статьи. Полезные ссылки.
Логотип VektorZone
Раздел: Статьи
Вернуться на предыдущую страницу Перейти на главную страницу Отправить письмо администратору ресурса Добавить в избранное (для IE) Карта сайта
Рекомендовать другу Спецификация CSS 2 Спецификация HTML 4.0
Об авторах Статьи Обзоры книг Продукты Ресурсы Гостевая книга Поиск
Разработка сайта - студия Vektor, г.Минск

Администратор ресурса - Антипенко Дмитрий

Автор статей - Антипенко Дмитрий

Дата создания сайта - 2003г.

При перепечатке материалов ссылка на сайт VektorZone обязательна!

Свойство display: управляем отображением документа

Антипенко Д.

Опубликовано: 21.01.2003

Последнее изменение:

Одним из достоинств css-верстки является то, что все описания, относящиеся к оформлению текста и позиционированию, находятся во внешнем файле, который, будучи один раз загруженным подставляется к страницам, открываемым впервые, но использующим этот же css-файл. Таким образом, уменьшается размер страниц, упрощается работа с самим документом и т.д. Но возникает проблема следующего плана. Предположим, что пользователя заинтересовала статья сайта и он ее сохраняет себе на диск. Т.к. внешнее оформление страницы его в данный момент не интересует, то логично, что при сохранении он выбирает опцию "Web page, HTML only". Естественно, что без css-файла страница будет выглядеть ужасающе. Хорошо если ее часть со статьей останется более-менее нормальной для восприятия. Ситуацию, когда пользователь просто копирует текст страницы непосредственно из броузера мы рассмотрим чуть ниже.

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

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

Итак, задача поставлена - убрать все лишнее, если внешнего файла с css-определениями не оказалось.

Убрать ненужные блоки можно двумя способами - применить к ним свойство display: none или visibility: hidden. В первом случае блок удаляется из потока, во втором - блок становится невидимым, но продолжает занимать определенную площадь. Значит, второй вариант нам не подходит.

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

     #top {display : none}
     #mainright{display: none}

Правила, которые находятся во внешнем файле, должны их переопределить. Это можно сделать, используя ключевое слово !important, которое указывает на то, что данное правило не может быть переопределено:

     #top{
	...
	display: inline !important;
	...
	}

     #mainright{
	...
	display: inline !important;
	...
	}

Ну все, теперь, если внешний файл присутствует, то никаких изменений с документом не происходит. Если же в нужное время в нужном месте его не окажется, то нежелательные блоки будут удалены. Опять же, версию для печати исходного документа можно сделать, удалив тег, подключающий внешний файл с определениями. Это можно реализовать с помощью ssi.

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

Возможно еще одно применение описанного механизма. На сайте webmasteram.ru есть статья "Как защитить от копирования текст на Вашем сайте". В ней предлагаются довольно радикальные меры, которые лишь препятствуют копированию текста из окна броузера. Согласитесь - не самый лучший подход. А если человек просто хочет скопировать текст, чтобы затем его распечатать?

Предположим, что у нас посреди текста есть невидимый блок, содержащий текст с указанием настоящего автора и адреса статьи оригинала. При копировании текста всей статьи, туда же попадает и эта информация, но она уже становится видна читателю. Если пользователь распечатал данную статью скопировав ее из окна броузера, то эта информация может быть ему полезна для того, чтобы вспомнить откуда он эту статью взял. То же самое произойдет, если скопированная информация без ведома автора попадет на другой ресурс (будем надеяться, что "вор" не будет перечитывать статью после помещения ее на свой сайт, да и пользователи вряд ли ему сообщат о наличии ссылки на статью-оригинал). Если же страница будет распечатана полностью средствами броузера, то скрытой информации пользователь не увидит (к тому же на распечатке будет другая информация о сайте).

Для того, чтобы сделать блок невидимым у нас есть два средства. Однако если мы применим свойство display:none, то блок не только не будет виден, его не будет вообще. Значит остается только второй вариант, но учитывая, что при использовании visibility:hidden место занимаемое блоком остается пустым, его можно позиционировать абсолютно, т.е. он будет находиться поверх текста статьи и никакого дополнительного места занимать не будет:

    #noneblock{
	position: absolute;
	visibility :hidden;
	}

Теперь достаточно поместить этот блок с соответствующим текстом посреди статьи и все. Ловим преступников. Кстати, не факт, но, видимо, если в этом тексте есть адрес статьи, то внеся его в поле поиска поисковой машины, мы найдем большинство материалов сайта, разбросанных по другим ресурсам.

В заключение надо отметить, что с Oper'ой описанный механизм не пройдет, т.к. невидимый текст скопирован не будет. И еще, определение невидимого блока должно находиться во внешнем файле.


Эти и другие статьи смотрите на сайте VektorZone.Narod.Ru
При перепечатке статей ссылка на сайт VektorZone.Narod.Ru обязательна!
Hosted by uCoz