megafon4u.ru

Иногда требуется встроить какие-нибудь символы в хтмл-код, типа черточек, палочек, стрелочек и пр. Все бы было хорошо, прямо в верстку вставляем эти элементы и начинаем натягивать на движок. И тут оказывается, что те красивые стрелочки мы вставить не можем, так как этот список полностью генерируется системой управления содержимым. Хорошо, если она имеет открытый исходный код, тогда можно залесть поглубже, отыскать нужные строчки и изменить их как душе угодно. А если нет? А если это все находится глубоко в базе, куда нет доступа? Вот тут мы и вспоминаем, что вроде бы есть какое-то свойство, позволяющее вставлять символы в хтмл из цсс-файла. Но во всех учебниках написано, что оно никак не поддерживается нашим любимым эксплорером до версии 8.0. Ниже я покажу, как обойти эту проблему и эмулировать свойство content с помощью скриптов.
Имеем список:

<ul class="breadcrumbs">
  <li>Пункт меню 1 </li>
  <li>Пункт меню 2 </li>
  <li>Пункт меню 3 </li>
  <li>Пункт меню 4 </li>		
</ul>

Для нормальных браузеров в цсс напишем:

.breadcrumbs li:after{ content: "\00a0\2192\00a0"}
.breadcrumbs li{ float:left; list-style:none}

А для ие6 и ие7:

.breadcrumbs li{zoom: expression(runtimeStyle.zoom=0,insertBefore(createElement("m")));}
.breadcrumbs m{zoom: expression(runtimeStyle.zoom=0, innerText="\00a0\2192\00a0");}

Применив свойство float, мы получим красивое меню - 'хлебные крошки' с помощью цсс. Проверить.

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

.breadcrumbs li{ float:left; list-style:none}
.breadcrumbs li:first-child:before{ content: ""}
.breadcrumbs li:before{ content: "\00a0\2192\00a0"}

Для ие6 и ие7:

.breadcrumbs  li{zoom: expression(runtimeStyle.zoom=0,previousSibling&&insertBefore(createElement("m"), firstChild));}
.breadcrumbs  li m{zoom: expression(runtimeStyle.zoom=0, innerText="\00a0\2192\00a0");}

Проверить.

Теперь последний вариант, когда необходимо поставить стрелочку(или что-то другое) перед каждым пунктом меню. Я покажу на примере длинного тире. Хтмл-код следующий:

	<ul class="mdash">
	  <li>Пункт меню 1 </li>
	  <li>Пункт меню 2 </li>
	  <li>Пункт меню 3 </li>
	  <li>Пункт меню 4</li>	
	</ul>

Цсс для нормальных браузеров:

.mdash li:before{ content: "\2015\00a0"}
.mdash li{ list-style:none} 

Для ие6 и ие7:

.mdash li{zoom: expression(runtimeStyle.zoom=0,insertBefore(createElement("m"), firstChild));}
.mdash m{zoom: expression(runtimeStyle.zoom=0, innerText="\2015\00a0");}

Проверить.

Теперь, добавив класс "mdash" к тегу "ul", мы получим красивые списки с длинным тире, которые генерируются цсс.
Остается отметить, что пользователи ие6 и ие7, которые отключают скрипты, генерируемого содержимого не увидят. Ну здесь мы им уже ничем помочь не сможем, кроме как посоветовать включить скрипты или обновить браузер до 8 версии.

Чтоб картина была более полной, приведу таблицу с наиболее часто используемыми шестнадцатеричными символами Unicode:

Естественно, область применения свойства "content" не ограничивается генерацией элементов, которые я приводил в своих примерах. Она намного шире и ограничена только фантазией автора.