Главная/ HTML и CSS приемы | Обходим баги, находим интересные решения/ Content/ Оформление изображений по атрибуту align=left/right

Оформление изображений по атрибуту align

Дата публикации: 18.10.2009

Современные системы управления сайтом (CMS) позволяют пользователю вставлять изображения в контентную область, посредством визуального редактора — нажал на кнопку «Вставить изображение», указал имя картинки, размер, выравнивание (опций может много и они могут отличаться в различных CMS). Большинство визуальных редакторов делают выравнивание с помощью атрибута align — не по стандартам, но пользователю и программисту просто.

Заметка

Mpbox за то, чтобы в CMS для кнопок выравнивания изображений, привязать добавление классов картинкам (img) imgLeft и imgRight, тогда HTML код станет чище, боле предсказуемым, по стандартам и с лучшей SEO оптимизацией.

Задача

Задать оформление изображений, вставленных пользователем в контент, с учетом выбранного пользователем выравнивания — align.

Заметки

  • если не указать оформление картинок для контента, при вставке пользователем картинки могут себя вести не адекватно. На примере в контент вставлены две картинки, первая с align=left, вторая с align=right. Смотрим что получается:
    картинки в контенте в firefox 3.5 картинки в контенте в IE 6
    FF 3.5 IE 6
  • нужно учесть, что изображение должно иметь отступы от окружающего текста, но не от левой и правой границ контентного блока.

Решение

CSS позволяет привязывать оформление элементу с заданными атрибутами. Этим и воспользуемся. Для IE 6, который данных правил не понимает, используем оптимизированный experession, который отработает один раз при загрузке страницы, определит изображения с атрибутами align и в зависимости от значения атрибута добавит нужный класс тегу img

.content img[align=left] {
margin: 0 10px 10px 0;
float: left;
}
.content img[align=right] {
margin: 0 0 10px 10px;
float: right;
}
.content img {
z-index: expression(runtimeStyle.zIndex = 1, align && "left" == align.toLowerCase() ? (className += " imgLeft") : (align && "right" == align.toLowerCase() ? (className += " imgRight") : 0 ) )
}
.content .imgLeft {
margin: 0 10px 10px 0;
float: left;
}
.content .imgRight {
margin: 0 0 10px 10px;
float: right;
}

Результат. Проверено в:

Плюсы метода:

  • достаточно прост
  • оптимизированный expression отработает только один раз при загрузке страницы

Недостатки:

  • не проходит валидацию (использование атрибута align запрещено по стандартам (Strict / XHTML 1.1))

Заметка

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