Практический JS: оптимизируем CSS expressions

Автор оригинала: Erik Arvidsson
  • Перевод
Примечание: ниже находится перевод статьи «CSS Expression Optimization», в которой автор немного освещает использование и проблематику динамических свойств в CSS (aka CSS expressions). Также автор предлагает способ их оптимизации (исполнение один-единственный раз вместо постоянного выполнения). Далее приведены несколько тезисов с ClientSide'2007 по заявленной тематике. Мои комментарии даны курсивом.

CSS expressions были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит разместить элемент в зависимости от того, какого размера окно браузера.

#myDiv {
   position:   absolute;
   width:      100px;
   height:     100px;
   left:       expression(document.body.offsetWidth  - 110 + "px");
   top:        expression(document.body.offsetHeight - 110 + "px");
   background: red;
}


Не самый лучший способ решения поставленной задачи, но в качестве примера его достаточно.

читать дальше на webo.in →
Поделиться публикацией

Похожие публикации

Комментарии 26

    +4
    а является expression() валидным с точки зрения W3C?
      0
      нет
        –4
        И этим всё сказано :)
          +1
          это говорит только о Вашей некомпетентности в вопросах вёрстки.

          P.S. читайте про Conditional Comments
            0
            Про CC я знаю. Мне просто не очень нравится сама перспектива использовать средства, не поддерживаемые стандартами.
            Как сказано в самом посте,
            Ну и общий совет: используйте CSS expressions по минимуму. Лучше всего будет, если они вообще не встретятся у вас на сайте.

            Конечно, когда делаешь какой-то хак для IE, это пригодится.
              0
              Ну так для «хороших» браузеров всё будет по стандартам, а для IE его собственные костыли т.е. expression и СС, получается код проходит валидацию + в IE всё тоже работает как задумано. ИМХО на данный момент это единственный вариант верстать валидно и кроссбраузерно.
            0
            Что сказанно? Многие люди гордятся валидностью своих страничек, не понимая самого понятия валидности.
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                Нужно отличать понятие "валидность" от понятия "соответствие спецификации". А если завтра появится новый браузер и станет популярным на столько, что прийдется на него ориентироваться, я буду только рад, особенно если он в полной мере будет поддерживать стандарты. А прав всегда тот, кто не ленится разбираеться в сущности вопроса.
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Знаете ли вы, что документ считается соответствующим спецификации языка, только в том случае, если выполняются не только четкие синтаксические правила языков XML и SGML, а и изложенные простым языком инструкции. Примером такой инструкции может быть то, что значением атрибута lang тега html должен быть код языка. А теперь проверьте такую конструкцию:
                    <html lang="english">

                    Уверяю вас, она валидна. Так что документ может быть полностью валидным, но совершенно не соответствовать стандартам.

                    Советую прочесть статью Сагалаева Ивана, в ней более подробно рассмотрен этот вопрос.

        0
        интересно, это такой костыль вместо right: 10px; bottom: 10px; ?
        • НЛО прилетело и опубликовало эту надпись здесь
            +1
            а expression, значит, всеми? ;-)
              0
              кроссброузерность и всё такое :)
              IE6 еще существует, будь он неладен!
                –1
                ie7 тоже неладен :)
                • НЛО прилетело и опубликовало эту надпись здесь
              0
              оп-па... а давно??... что я пропустил в ночь с 1 на 22 января...
              0
              Ну это всё равно просто пример :)
              • НЛО прилетело и опубликовало эту надпись здесь
                  –2
                  Да, поднадоело писать две CSS-ки - одну для IE, другую для всего остального.. По сабжу на самом верху: кой-чего узнал, кое-что любопытно. Спасибо за статью.
                    +1
                    Рабоьа верстальщика заключается в том, чтобы всё работало. И уж как он будет изворачиваться — это его проблемы, точнее степень профессиональной компетентности.
                      0
                      да если б я был верстальщиком.. )
                    0
                    Работает. Главное чтобы у контейнера был hasLayout.
                    +1
                    Для ie6.css будет полезно ;)
                      0
                      < right/bottom поддерживаются не всеми браузерами

                      Интересно, какими браузерами они не поддерживаются?

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое