Открыть список
Как стать автором
Обновить

CSS-Expressions on DOMReady (CSS+JS в одном файле)

CSS
Вероятно, многие из вас используя css-expressions сталкивались с проблемой периодического появления сообщения abort. В народе поговаривают, что связано это с изменением DOM-дерева до его готовности.

Я тоже сталкивался и, не долго думая, решил написать небольшую «обертку» для expression’ов, которые я часто использую, учитывающую готовность DOM, упакованную в файл стилей.
Оную вашему вниманию и представляю.


Использование

«Библиотека» представляет собой всего один файл CSS, но с включенным в него кодом JavaScript, который мы и вызываем в expression’ах:

  1. /*@cc_on /*@if (1) @else @*/
  2. Стилевые правила.
  3. /*@end @*/
  4. <!-- /*
  5. Код JS
  6. <!-- */

Подключение

  1. <!--[if lt IE 8]>
  2. <script type="text/javascript" src="ie.min.css"></script>
  3. <link rel="stylesheet" type="text/css" href="ie.min.css" />
  4. <![endif]-->

Использование

  1. селектор {
  2. width:expression(expressions('эмулируемое действие', this, {
  3. property: 'св-во для отмены (обычно идентично тому, в котором вызывается expression). Если указано, св-во обнуляется и expression в нем повторно не выполняется.',
  4. options: 'опции, в зависимости от действия'
  5. }));
  6. }

«Действия» вызываются по готовности DOM-дерева. Если expression запущен после готовности — сразу.

Включенные функции (действия)


before

Добавляет элемент span с классом x-expression-pseudo-before первым дочерним элементом.
Параметр options — строка, задает содержимое «псевдоэлемента».

after

Добавляет элемент span с классом x-expression-pseudo-after последним дочерним элементом.
Параметр options — строка, задает содержимое «псевдоэлемента».

firstСhild

Добавляет класс x-expression-first-child к элементу, если он является первым дочерним своего родителя. Псевоэлементы before и after, сгенерированные библиотекой, пропускаются.

borderSpacing

Эмулирует св-во border-spacing через атрибут cellSpacing.
Параметр options — число, устанавливаемое в атрибут.

attribute

  1. {
  2. name: 'имя атрибута',
  3. value: 'значение атрибута'
  4. }

Проверяется наличие у элемента атрибута с именем name, и, если задан параметр value, его значение.
Если проверка пройдена, устанавливаются классы x-expression-attribute, x-expression-attribute-name и x-expression-attribute-name-value.

width

Управляет минимальной и максимальной шириной элемента. Данные берутся из св-в min-width и max-width. Для расчета используется родительский элемент.

any

Запускает произвольную функцию в контексте элемента.
Параметр options — запускаемая функция.

Несколько примеров

  1. body {
  2. width:expression(expressions('before', this, {property: 'width', options: 'aaa'}));
  3. height:expression(expressions('before', this, {property: 'height', options: 'bbb'})); // Не сработает
  4. top:expression(expressions('after', this, {property: 'top', options: 'ccc'}));
  5. }
  6. .a1, .a2 {
  7. width:expression(expressions('firstChild', this, {property: 'width'}));
  8. }
  9. table {
  10. width:expression(expressions('borderSpacing', this, {property: 'width', options:'10'}));
  11. }
  12. input {
  13. height:expression(expressions('any', this, {property: 'height', options:function(){this.runtimeStyle.backgroundColor = 'red';}}));
  14. width:expression(expressions('attribute', this, {property: 'width', options: {name: 'type', value: 'text'}}));
  15. }
  16. .min-max {
  17. min-width:400px;
  18. max-width:700px;
  19. border:10px solid red;
  20. top:expression(expressions('width', this));
  21. padding:10px;
  22. margin:10px;
  23. }

P.S.

Если кому пригодится, скачать можно тут
Теги:internet explorerie6ie7csscss-expressionsjavascriptexpressions
Хабы: CSS
Всего голосов 36: ↑31 и ↓5 +26
Просмотры1.6K

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

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

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

Node.js: серверный JavaScript
26 апреля 202127 000 ₽Loftschool
Интенсив «Full stack разработчик. JavaScript»
26 апреля 2021245 000 ₽Elbrus Coding Bootcamp
Интенсив «Full stack разработчик. JavaScript»
26 апреля 2021190 000 ₽Elbrus Coding Bootcamp
Специалист JavaScript
24 мая 202122 690 ₽Специалист.ру

Лучшие публикации за сутки