IZONE- http://www.izcity.com/- бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Поддержка новых свойств CSS в браузере Internet Explorer

FireFalcon

Браузер MSIE 6 вне всякого сомнения будет одним из самых массовых. Уже сейчас им пользуется по разным оценкам от 6% до 12% серферов, так что пришло время поговорить о том новом, что принесет с собой очередной хит компании Microsoft. Эта статья посвящена нововведениям в поддержке CSS.

Сразу надо сказать, что в глобальном плане ничего нового нет. Стандарт CSS-2 по-прежнему поддерживается слабо, однако завершена реализация поддержки стандарта CSS-1, то есть он теперь поддерживается полностью. Добавлено два новых свойства: min-height и word-spacing. Вот и рассмотрим их подробнее.

min-height

данное свойство устанавливает минимальную высоту элемента. В MSIE 6 его можно применять к элементам TR, TD, TH в таблице, у которой свойство table-layout имеет значение fixed. Здесь надо отвлечься и рассказать об этом свойстве.

Вообще свойство table-layout описано в спецификации CSS-2, и оно устанавливает алгоритм, по которому будет обрабатываться таблица. Алгоритма вообще два. Первый из них достаточно медленный и установлен по умолчанию (table-layout: auto). Медленный он по той простой причине, что пока все содержимое таблицы не будет загружено браузером, он не сможет просчитать ее параметры. Например, в таблице три столбца и четыре строки, а в каждой ячейке содержится рисунок. Получается 12 рисунков. Пока браузеру не станут известны размеры всех рисунков, он не сможет просчитать ширину и высоту таблицы.

Второй алгоритм достаточно быстрый и устанавливается так:

<TABLE style="table-layout: fixed" WIDTH=400>

Данный алгоритм не учитывает содержимое отдельных ячеек при вычислении ширины таблицы и отдельных ячеек. Он использует значения ширины таблицы, ширины столбцов, рамок и расстояний между ячейками. По этому алгоритму ширина столбцов таблицы вычисляется в следующем порядке:

  1. используя значение атрибута WIDTH элементов COL
  2. используя значение атрибута WIDTH элементов TD первого ряда таблицы
  3. если данные значения не установлены, то ширина столбцов вычисляется соответственно контенту ячеек.

То есть для быстрой обработки таблиц надо указывать ширины столбцов с помощью элементов COL. В приведенном ниже примере таблица разбита на три колонки:

<TABLE style="table-layout: fixed" WIDTH=400>
<COL width=100><COL width=200><COL width=100>

Подбираемся ближе к свойству min-height. Контент в столбце фиксированной таблицы, если это возможно, будет переноситься, а если нет, то обрезаться. Вот тут-то нам и пригодится свойство min-height. Вот пример:

<table border="1" style="table-layout:fixed; width:200px">
<tr>
<td style="height:40px;background-color:#FFCC00">Высота данной ячейки равна 40 пикселям. Так что контент в нее не влезает и обрезается</td>
</tr>
<tr>
<td style="min-height: 140px; background-color:#09F">Минимальная Высота данной ячейки равна 140 пикселям. Так что контент в нее влезает и не обрезается
</td>
</tr>
</table>

Вот как эта таблица отображается браузером MSIE 6.0:

min-height example

Так что польза от данного свойства определенно есть. Пойдем дальше.

word-spacing

позволяет устанавливать расстояние между словами, причем можно указывать и отрицательные величины.

Вот пример того, как это свойство работает:

<DIV style="width: 200px">
<P style="word-spacing: 20px">В этом абзаце расстояние между словами 20 пикселей</P>
<P style="word-spacing: -7px">В этом абзаце расстояние между словами -7 пикселей</P>
</DIV>

Вот что видим в MSIE 6.0

word-spacing example

Особой пользы, на мой взгляд, от этого свойства нет. По крайней мере я не смог придумать ситуацию, в которой его надо использовать.

Кроме двух новых свойств, в MSIE 6 реализована поддержка нескольких новых значений, но о них поговорим в другой раз.

Источник: http://www.web-anatomy.f2s.com/

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com