No public Twitter messages.


Этот блог устарел и, скорее всего, больше не будет обновляться. В ближайшем будущем он переедет сюда.
9 ноября 2012 // Веб-разработка

Динамическое изменение CSS-expression через JS

Привет.

Всем давно известно, что IE до 7 версии не поддердживал CSS-свойство position: fixed; и всем также давно известно, как осуществляется совместимость — через JS внутри CSS-expression: position: absolute; top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");. Казалось бы, что сейчас такие дремучие версии IE уже никому не нужны, однако, как опять же всем давно известно, существует и некий Quirks Mode, который используют некоторые крупные сервисы (Amazon, например) и при создании браузерных плагинов, которые вставляют свой код в страницу, приходится учитывать. А поскольку взаимодействие с сайтом происходит через JS, то и применять CSS-свойства приходится динамически.

Итак, столкнулся я со следующей проблемой: IE не хочет корректно обрабатывать

  1. строку с CSS-expression отправленную в св-во так:
    obj.style.top = 'expression(document.getElementsByTagName("body")[0].scrollTop + "px")';
  2. так (хотя здесь проблема в ином, IE просто не применяет ничего аттрибуту style через setAttribute):
    obj.setAttribute('style', 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px")');
  3. так:
    obj.cssText = 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");';
  4. и даже так:
    obj.className = 'pew';
    $("<style>.pew{top: expression(document.getElementsByTagName("body")[0].scrollTop + "px";}</style>").prependTo('body');

Но потом наткнулся на гайд по экспрешнам в MSDN и нашёл там решение:

Для работы с CSS-expression у IE в объекте style есть три метода (+1 для document):

  1. setExpression(property, "expression"); — присваивание экспрешна (условие пишется в кавычках);
  2. getExpression(property); — получение строки с экспрешном;
  3. removeExpression(property); — удаление экспрешна;
  4. document.recalc(true); — перерасчёт всех динамических CSS-значений текущего документа.

Таким образом спасла меня строка obj.setExpression('top', 'document.getElementsByTagName("body")[0].scrollTop + "px"');. Пользуйтесь.

теги: , , , , , ,

комментарии отключены.


19 января 2011 // Веб-разработка

position:fixed в ie6

Как известно, ie6 не поддерживает css-правило position: fixed, для иммитации существует вот такой несложный хак:

#some {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}
/* эмуляция position: fixed */
* html #some {
    position: absolute;
    top: expression(document.getElementsByTagName( 'body' )[0].scrollTop + "px");
    left: expression(document.getElementsByTagName( 'body' )[0].scrollLeft + "px");
    margin-left: 10px; /* эмуляция top: 10px; */
    margin-top: 10px; /* эмуляция left: 10px; */
}

У этого хака известен один досадный баг — из-за постоянного и очень неспешного пересчёта координат див будет постоянно дёргаться. Решается эта проблема полным сносом доктайпа со страницы. В некоторых случаях, кстати, этот костыль вообще не работает при наличии доктайпа на странице. Падений браузера и прочих критических проблем при использовании костыля не замечено.

Присутствует также ещё один минус — свойства bottom и right реализовать получится только дополнительным js-кодом. Для проектов использую jQuery, по-этому для имитации, например, bottom: 10px; вполне прокатывает конструкция $("#some").css("margin-top", ($(window).height() - 10) + "px");.

теги: , , ,

комментарии отключены.


9 апреля 2010 // Веб-разработка

Сегодня CSS Naked Day 2010!

CSS Naked Day

CSS Naked Day был учреждён в 2006м году Дастином Диазом, дабы продвигать и популяризировать веб-стандарты. Отключая CSS показать всему миру, что сайт сделан с учётом всех стандартов, обладает семантической вёрсткой и хорошей структурой.

Идея мне очень нравится и вы сами можете поглядеть, что блог мой структурирован на ура и я вообще даволен как всё сделал :)

теги: , , ,

комментарии отключены.



  • twitter
  • rss
  • хабр
  • жежека
  • ластфм