Однажды, много лет назад, ко мне свалилась задача – размещение некой сложной формы на сторонних ресурсах. Очевидное и годами отработанное решение – iframe было забраковано, т.к. опыт и пятая точкашестое чувство подсказывали – как только владелец сайта разместит форму у себя, его светлую голову немедленно посетит мысль – “а как мне приделать перламутровые пуговицы?!”. Это, признаться, пугало – целыми днями верстать и раскрашивать незнакомым дядям и тётям одну и ту же страницу пятью миллионами способов? Нет, пристрелите меня семеро! Второй способ – разработать и задокументировать API, чтобы владелец ресурса сам разрабатывал себе форму, был отвергнут как трудозатратный, но совершенно нежизнеспособный так как рядовой клиент как правило (тут могло бы быть нечто оскорбительное про уровень интеллекта и радиус кривизны передних конечностей, но цензура не пропустит) не готов своими силами что-то создавать, тогда как продукт конкурента был проще в освоении (работал из коробки). Был выбран третий путь – размещение формы в виде html-разметки, которую мы отдаём заказчику, что называется “в руки”, а данные подгружаем через <script src="http://my-resource.example.com/?parameters"></script>, это позволяло владельцу ресурса до определённой степени контролировать внешний вид полученного документа и избавляло нас от трудозатратной кастомизации сотен инсталляций продукта. Но этот способ потенциально создавал много проблем, т.к. находясь в инородной среде наш документ мог “подхватить” незапланированные свойства, “заразится” чужими переменными и вообще рассыпаться в пыль в руках неуклюжего веб-мастера. Необходимо было тщательно изолировать всё и вся. Одним из способов отделить своё “добро” внутри документа было создание уникального “пространства имён”, например создание атрибутов в виде <div rpz:property="value"></div> – это самое rpz: давало надежду на то, что внешний скрипт(движок сайта или сам вебмастер) “случайно” не создаст аналогичный атрибут с другим value (или вовсе без него), развалив всю эту шаткую конструкцию. Решение оказалось рабочим во всех доступных графических браузерах и популяризировалось мной не только в этом продукте, но и повсеместно в других (печатая эти строки пытаюсь понять – зачем вообще нужны были именно атрибуты и почему их нельзя было заменить на переменные в скрипте, но разумного ответа почему-то не нахожу).

Это неоднозначное решение “выстрелило в ногу” только на днях – появился IE9… Невероятно быстр, ангельски красив, дьявольски умён – блеск, а не браузер На вид такой же унылый как все предыдущие В общем обзор новшеств можно наверное найти на сайте разработчиков, ну а я увидел его первый раз два дня назад, ничего хорошего про него сказать не могу, да и речь совсем не о том. Случись такое совпадение – сайт заказчика оказался настолько весь из себя валиден, что IE9 работал со страницей в своём новом document.documentMode. И чтобы вы думали? Точно! Годами отработанная “технология” дала сбой – “самодельные” атрибуты просто-напросто не видны на такой странице, а моя твёрдая уверенность в том, что они есть запретила здравому смыслу проверять их наличие… так и случаются epic fail-ы, так было и со мной.

Один грязный хак удалось временно залатать другим грязным хаком, но урок получен – недокументированная возможность это лишь “возможность”, строить на ней что-то прочное нельзя.

К слову сказать, не так давно вместо атрибута rpz:property="value", я начал использовать “документированную возможность” – атрибут data-rpz-property="value" и соответствующий вызов в js изменился с jQuery(selector).attr("rpz:property") на jQuery(selector).data("rpz-property") , видимо “шестое чувство” о чём-то подозревало…

Вчера, как многие знают, вышел IE8.Собственно на этом можно было бы многозначительно пост закончить…

В общем в IE8 более этот трюк не работает. В currentStyle не попадают неизвестные браузеру свойства. Изящного решения пока не нашёл – если уж пользовались им, то просто замените непонятные буквы в css на cellSpacing = <число> вместо вычислений, которые были раньше…

Update а вот переводная статья о других особенностях IE8

Update: 06.11.08
ЕЩЁ раз обращаю внимание тех, кто бездумно скопирует и будет использовать приведённый рецепт (судя по количеству почитателей этого поста, сектантов культа Режь-Клей тьма) – если вам нужен border-spacing: 0, прочитайте ДО КОНЦА, а лучше сразу последнюю строчку.

Делюсь грязным хаком, для добавления поддержки border-spacing в IE. Собственно сам css:

table {
border-spacing: 50px; /* для всех кто в теме */
scrollbar-face-color: expression( runtimeStyle.scrollbarFaceColor = '#fff', cellSpacing = parseInt(currentStyle['border-spacing'])); /* угадайте кто?*/
}

Ну и пояснения: суть кода думаю ясна – вместо border-spacing, задать аналогичный cellspacing. Единственный (на мой взгляд) недостаток – считаю что border-spacing задан в px. Желающим поизвращаться поупражняться в переводе из других единиц – милости прошу.

Ну и вкратце о магический пассах, которые сплетены вокруг рабочего кода – они нужны для того чтобы expression выполнился ровно один раз (любопытным предлагаю заменить в вышепреведённом заклятье runtimeStyle… на alert(“Интересно как же часто я покажусь?”) ).

А за разъяснениями о runtimeStyle, currentStyle и разнице между ними отправляю к источнику сей мудрости – докладу о “тонком css” для IE с Client Side’2007.

Update: описанный хак нужен лишь в случае если border-spacing отличен от нуля, в противном случае используется border-collapse: collapse.

Update 20.03.2009 Почему перестало работать в IE8 ?

Как же достал этот IE…

Technorati Tags: web, dev, js, ie, onload, jquery