Pull to refresh

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

Reading time 3 min
Views 1.8K
Вероятно, многие из вас используя 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.  
  7. .a1, .a2 {
  8.         width:expression(expressions('firstChild', this, {property: 'width'}));
  9. }
  10.  
  11. table {
  12.         width:expression(expressions('borderSpacing', this, {property: 'width', options:'10'}));
  13. }
  14.  
  15. input {
  16.         height:expression(expressions('any', this, {property: 'height', options:function(){this.runtimeStyle.backgroundColor = 'red';}}));
  17.         width:expression(expressions('attribute', this, {property: 'width', options: {name: 'type', value: 'text'}}));
  18. }
  19.  
  20. .min-max {
  21.         min-width:400px;
  22.         max-width:700px;
  23.         border:10px solid red;
  24.         top:expression(expressions('width', this));
  25.         padding:10px;
  26.         margin:10px;
  27. }

P.S.

Если кому пригодится, скачать можно тут
Tags:
Hubs:
+26
Comments 30
Comments Comments 30

Articles