Родительские страницы:
  1. Главная
  2. Проекты
  3. {display: table} для IE6 и IE7

{display: table} для IE6 и IE7

Библиотека display-table.htc предназначена для эмуляции CSS-свойств семейства display: table* в браузере Internet Explorer версий 6 и 7, лишённых их встроенной поддержки.

Библиотека предназначена исключительно для IE6/IE7 и автоматически отключается в IE8 и выше.

Эмуляция работает на JavaScript и реализуется путём генерации реальной HTML-таблицы, автоматически заменяющей исходный элемент, который должен вести себя как таблица. (Замена на таблицу происходит только в IE6/IE7. Более современные браузеры эмуляцией не затрагиваются.)

Поддерживаются прозрачная эмуляция display: table для всех элементов, имеющих нестандартное CSS-свойство -dt-display: table (без необходимости явной привязки display-table.htc к каждому такому элементу), и эмуляция CSS-свойства border-spacing (с помощью CSS-свойства -dt-border-spacing).

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

HTML-код:
<ul id="nav" class="example">
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/contacts/">Contacts</a></li>
</ul>
CSS-код для всех браузеров:
/* Стандартный CSS-код для браузеров, поддерживающих {display: table} */
#nav    {border-spacing: 5px; display: table; } /* таблица */
#nav LI {display: table-cell; } /* ячейка таблицы */
CSS-код для IE6/IE7:
/* HTC-компонент привязывается к элементу-таблице (рекомендуется) */
#nav {behavior: url(/_/js/display-table.min.htc); }

/* Свойства с префиксом -dt- необходимы для display-table.htc */
#nav    {-dt-border-spacing: 5px; } /* таблица */
#nav LI {-dt-display: table-cell; } /* ячейка таблицы */
/* HTC-компонент можно привязать к BODY */
BODY {behavior: url(/_/js/display-table.min.htc); }

/* и тогда элементу-таблице необходимо свойство -dt-display: table */
#nav    {-dt-border-spacing: 5px; -dt-display: table; } /* таблица */
#nav LI {-dt-display: table-cell; } /* ячейка таблицы */

Для привязки HTC-компонента к элементу следует указать путь к HTC-файлу в CSS-свойстве behavior этого элемента. display-table.htc можно привязать к элементу BODY (или HTML) либо непосредственно к элементу, подлежащему преобразованию в таблицу.

Внимание
При привязке HTC-компонентов следует всегда использовать только абсолютные пути от корня сайта, поскольку относительные пути применительно к HTC-компонентам исторически отсчитываются не от пути расположения файла таблицы стилей, содержащей CSS-правило для подключения HTC-файла, а от пути расположения HTML-страницы, использующей соответствующую таблицу стилей.

В случае привязки к BODY или HTML элементы, подлежащие преобразованию в таблицу, определяются по наличию у них псевдосвойства -dt-display: table.

По умолчанию исходные элементы для генерации строк и ячеек определяются автоматически — на основании глубины их вложенности относительно родительского элемента-таблицы (таблица → строка → ячейка). Если же элементы-ячейки являются непосредственными потомками элемента-таблицы, то для элементов-ячеек следует указать псевдосвойство -dt-display: table-cell — тогда промежуточная строка таблицы будет сгенерирована при эмуляции автоматически.

В результате работы display-table.htc элемент, к которому он привязан, применительно к приведённому выше примеру, будет заменён такой таблицей:

<table id="nav" class="example UL" cellpadding="0" cellspacing="5"><tbody valign="baseline">
    <tr>
        <td class="LI first LI-first"><a href="/">Home</a></td>
        <td class="LI"><a href="/products/">Products</a></td>
        <td class="LI last LI-last"><a href="/contacts/">Contacts</a></td>
    </tr>
</tbody></table>

Возможности

  • Сгенерированным таблицам, строкам и ячейкам автоматически назначаются идентификаторы (атрибут id) и классы (атрибут class), имевшие место в исходных элементах, на основе которых табличные элементы генерируются.

  • Сгенерированным таблицам, строкам и ячейкам автоматически назначаются классы, соответствующием именам исходных HTML-элементов в верхнем регистре (все исходные классы при этом сохраняются). Это позволяет писать для IE6/7 почти такой же CSS-код, как для более современных браузеров:

    /* Для браузеров, поддерживающих {display: table}: */
    #example UL {...}
    #example LI {...}

    /* Для IE6/7: */
    #example .UL {...}
    #example .LI {...}

  • Первым и последним строкам и ячейкам назначаются, соответственно, классы first и last (если первый и последний элементы совпадают, единственному элементу будут назначены оба класса). Для дополнительного удобства назначаются составные классы вида ЭЛЕМЕНТ-first и ЭЛЕМЕНТ-last. Например, первой строке таблицы, сгенерированной из элемента UL, будут назначены классы UL, first и UL-first. Если элемент является единственным потомком своего родителя, ему дополнительно добавляется класс вида ЭЛЕМЕНТ-first-last — это позволяет обойти отсутствие поддержки выборки по нескольким классам (.first.last) в IE6.
  • Вертикальное выравнивание ячеек генерируемой HTML-таблицы — baseline (в соответствии с выравниванием по умолчанию для ячеек псевдотаблиц, создаваемых средствами CSS) — и может быть переопределено при помощи стандартного CSS-свойства vertical-align.
  • Внутренние отступы ячеек генерируемой HTML-таблицы обнулены (в соответствии с отступами по умолчанию в CSS-таблицах) и могут быть переопределены при помощи стандартного CSS-свойства padding элемента-ячейки.
  • Если непосредственными дочерними элементами таблицы являются не строки, а ячейки (без промежуточного элемента-строки), то дочерним элементам исходного элемента-таблицы следует назначить CSS-свойство -dt-display: table-cell — тогда подразумеваемая строка в результирующей таблице будет сгенерирована автоматически.
  • Если display-table.htc привязан не к элементу, подлежащему преобразованию в таблицу, а к элементу BODY или HTML, то эмуляция display: table будет прозрачно применена ко всем элементам на странице, имеющим CSS-свойство -dt-display: table.
  • Поддерживается эмуляция CSS-свойства border-spacing. Чтобы ей воспользоваться, следует добавить CSS-свойство -dt-border-spacing со значением, дублирующим значение, указанное для стандартного CSS-свойства border-spacing. Значением border-spacing по умолчанию является ноль (соответствует значению по умолчанию для CSS-псевдотаблиц).
  • Элементы-разделители HR, расположенные в иерархии в исходном элементе-таблице на месте строки или ячейки, автоматически удаляются.

Ограничения

  • Если исходным элементом, на основе которого следует сгенерировать таблицу, является элемент, прямая замена которого на таблицу семантически недопустима (DT, DD, LI), либо если функциональность исходного элемента при замене на таблицу была бы нарушена (FORM, A), сгенерированной таблицей заменяется не сам элемент, а его содержимое.
  • Между таблицей и её строками в DOM-иерархии генерируется дополнительный элемент TBODY, необходимый для IE6/IE7. Таким образом, результирующая иерархия элементов в сгенерированной таблице будет такой: TABLE > TBODY > TR > TD. Это следует учитывать при использовании дочерних CSS-селекторов (вида E1 > E2).
  • Прозрачная автоматическая привязка значений CSS-свойств исходных элементов к динамически сгенерированным не производится. По этой причине:
    • поддерживается генерация только обычных строк (table-row; не table-header-group и проч.);
    • необходима явная привязка значений всех необходимых CSS-свойств к элементам сгенерированной HTML-таблицы при помощи дополнительных CSS-правил, предназначенных именно для IE6/7.

Настройки веб-сервера

Content-Type

Для гарантированной работы HTC-компонента необходимо, чтобы сервер отдавал для таких файлов HTTP-заголовок Content-Type со значением text/x-component. В веб-сервере Apache это можно сделать при помощи следующей строки в файле .htaccess, расположенном в одной из родительских директорий htc-файла:

AddType text/x-component .htc

Веб-сервер Microsoft IIS обычно отдаёт правильный заголовок Content-Type по умолчанию, без дополнительной настройки.

Кэширование

По умолчанию HTC-файлы не кэшируются в браузере и повторно загружаются с сервера при загрузке каждой страницы. Чтобы HTC-файл кэшировался, сервер должен отдавать HTTP-заголовок Expires с ненулевым сроком «годности» файла. В веб-сервере Apache это можно сделать при помощи следующих строк в файле .htaccess:

# кэшируем любой файл на час (3600 секунд)
ExpiresActive on
ExpiresDefault A3600

При этом в конфигурации Apache должен быть включён модуль mod_expires (обычно включён).

Рекомендации по быстродействию

  • Привязка display-table.htc к элементу BODY/HTML удобнее, но при привязке непосредственно к элементу, преобразуемому в таблицу, эмуляция отработает намного быстрее. Это связано с тем, что при привязке к BODY/HTML последовательно перебираются и проверяются на наличие свойства -dt-display: table все элементы HTML-документа — даже если среди них вообще нет ни одного элемента, подлежащего преобразованию в таблицу. Чем больше элементов в документе, тем больше времени займёт их перебор и тем заметнее будет задержка между первичной отрисовкой страницы и повторной отрисовкой после замены элементов на таблицы.
  • Чтобы избежать повторного применения HTC-компонента к уже сгенерированной таблице, имеет смысл в CSS-селектор правила, содержащего подключение display-table.htc, включать имя исходного элемента (например, не #nav, а DIV#nav). Тогда селектор будет соответствовать исходному элементу, но не сгенерированной таблице. Защита от зацикливания предусмотрена (эмулирующий скрипт автоматически завершает свою работу, если элемент уже является таблицей), но предотвращение холостого повторного запуска эмуляции в любом случае положительно скажется на быстродействии.
  • Чтобы HTC-компонент кэшировался в браузере, не загружаясь повторно с каждой страницей, сервер должен отдавать правильный HTTP-заголовок Expires (см. секцию «Настройки веб-сервера» → «Кэширование» выше).
Скачать

display-table.htc
, 4 КБ, Zip

Демо-страница
Увидеть display-table.htc в действии можно на демо-странице.
Сценарии использования

Табличное представление полезно:

  • при создании «резинового» навигационного меню шириной 100% без зазоров;
  • для вывода текста в несколько столбцов равной ширины при неизвестном заранее количестве столбцов;
  • для вертикального центрирования элементов произвольной высоты в блоке фиксированной высоты и проч.
История версий
  • Потенциально увеличено быстродействие при прямой (не через BODY/HTML) привязке display-table.htc к элементам, преобразуемым в таблицы.
  • Удалена поддержка служебного класса _dt-no-rows. Вместо него следует использовать CSS-свойство -dt-display: table-cell.
  • display-table.htc теперь можно с идентичным результатом привязать как к элементу BODY, так и к элементу HTML.
  • Классы вида ЭЛЕМЕНТ-first и ЭЛЕМЕНТ-last теперь добавляются как в IE6, так и в IE7 — это позволяет использовать единые CSS-селекторы для обеих версий IE.
  • Если элемент является единственным потомком своего родителя, ему добавляется класс вида ЭЛЕМЕНТ-first-last — это позволяет обойти отсутствие поддержки выборки по нескольким классам (.first.last) в IE6.
  • display-table.htc теперь можно привязать не только к элементу, подлежащему преобразованию в таблицу, но и к элементу BODY, в результате чего эмуляция display: table автоматически применяется ко всем элементам, для которых задано CSS-псевдосвойство -dt-display: table.
  • Теперь можно помещать элементы-ячейки напрямую в элемент-таблицу: строка таблицы генерируется автоматически, если первому дочернему элементу исходного элемента-таблицы задано CSS-псевдосвойство -dt-display: table-cell.
  • Реализована эмуляция CSS-свойства border-spacing с помощью псевдосвойства -dt-border-spacing, задаваемого для исходного элемента-таблицы.
  • Первая публично доступная версия.
Мелодичная авторская музыка