jQuery, CSS3, клиенты, картинки

Проблема:

Клиент, радостный, хочет выложить фото своей новой собаки. Открывает свой сайт, создаёт статью, вставляет картинку выравнивает её по левому краю. Сохраняет, смотрит на сайт…. и о боже, у картинки нету отступов! Или наоборот, они есть с обоих сторон…

Задача

Приделать отступы к картинкам, которые обтекает текст. Для «левых» картинок отступ справа, для «правых» отступ слева.

Решение

Решение это CSS2

ХТМЛ-редактор клиента вставляет картинку с атрибутом align="чего то там...", ага…

/* Классы для картинок в http://css-framework.ru/ */

/* Images
------------------------------ */

#content img { padding: 5px; border: 1px solid #ccc; margin-top: .4em; }
img.f-left { margin-right: 1em; }
img.f-right { margin-left: 1em; }

Если бы не самизнаетекакой браузер под номером 6(номер 7 вроде получше, но не суть, хватает пока номера 6). Мы писали бы так:

img[@align='left'], img.f-left { margin-right: 1em; }
img[@align='right'], img.f-right { margin-left: 1em; }

Утопия… номер 6 портит картину маслом. На помощь приходит JavaScript(спасибо pepelsbey).

Есть много библиотек, у нас в примере jQuery. Этот код вставляется в head документа.

<script type="text/javascript">
$(document).ready(function(){
	$("img[@align='left']").addClass("f-left");
	$("img[@align='right']").addClass("f-right");
 });
</script>

Все довольны :)



Социальное

  • http://www.flamefork.ru/ Илья Flamefork

    Все работает до тех пор, пока HTML генерится статически. Иначе, приходится применять данную конструкцию к новому DOMу, причем иногда момент необходимости применения не очевиден.

  • http://lusever.livejournal.com/ lusever

    И этот код в conditional comments.
    Либо expression:

    img {behavior: expression( (align) ? className += ‘f-’+align) : ”, runtimeStyle.behavior = ‘none’}

    Должно работать.

  • http://pokrovskii.com leMur

    Уже не в первый раз встречаю упоминание о этой библиотеке. Наверное, стоит ей заняться.

    ЗЫ
    В первом примере кода, у строчка (#content img … ) выплывает за границы. :)

  • http://webdev.lovata.com Zigzag

    интересно, спасибо. имхо, пора начинать применять CSS2и CSS3 в полной мере, а ИЕ вот таким образом скармливать стили

  • Avalon

    В тему оффтопа:

    Мда.. ишак под номер шесть питается не css-зеленью, которой питаются все его нормальные его сородичи, а клетками мозга веб-девелпмента ©.

    Впору бы открывать международное сообщество пострадавших от IE6 и предъявить иск на компенсацию за все тысячи человеко-часов работы ведущих специалистов, а они, т.е. человеко-часы, стоят не малых денег.

  • http://lusever.livejournal.com/ lusever

    Avalon, если бы не ie6, наша профессия не стоила бы и половину текущей цены :)

  • http://forumishka.net форум

    Работает! ИМХО ИЕ – самый баговый и уязвимый браузер!

  • http://prosi.ru/ Костик

    Полностью согласен, более багового браузера не было за всю историю Интернета…

  • http://www.hq-studio.ru/ Колесников Сергей

    Вау, спасибо всем за советы.. Мне понравилось.. Я слабоват в CSS, только начал изучать CSS 1, а уже 3 появился. Блин.. Надо жать на газ.

  • http://kata-log.ru/ Каталог статей

    форум, “ИЕ – самый баговый и уязвимый браузер!” был когдато, сейчас багов на порядок меньше!!! Хотя я Firefox Mozilla юзаю…