... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Использование блоков. Блоковая модель. (стр.6)

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы


Кроме селекторов из CSS 2, которые неодинаково поддерживаются браузерами, есть свойства, которые не относятся к визуальным браузерам. И если визуальный браузер встречает такое свойство, то должен его просто пропустить и продолжить обработку этого правила. Однако браузером Internet Explorer 5 такие конструкции также некорректно обрабатываются, на этом и основан другой метод. Придумал его один из разработчиков стандарта CSS 3 Тантек Целик (Tantek Celik). Решение будет таким:

#block {
border:10px solid #660;
padding:5 0рх;
width:52Орх;
voice-family: "\"}\"";
voice-family:inherit;
width:400px }

HTML>BODY #block {
width: 400px }

Давайте разбираться, как это работает. Описание стилей построено таким образом, что в начале идет задание ширины width: 52 0рх, которое предназначено для браузера Internet Explorer 5. Он установит такую ширину, и блок будет отображаться в нем правильно. Затем браузер Internet Explorer 5 наткнется на конструкцию voice-family: "\"}\"";

Это свойство относится к звуковым таблицам стилей, и Internet Explorer 5 некорректно его обработает, в результате чего придет к заключению, что на этом месте CSS-правило для #block заканчивается. Все остальные браузеры корректно обработают эту конструкцию, т.е. просто пропустят и переопределят ширину блока последней записью свойства: width:400px. Internet Explorer5 не понимает селектора непосредственной) потомка (HTML>BODY #block), поэтому значение ширины для него останется равным 520 пикселей.

Но не только у Internet Explorer 5 проблемы с обработкой свойства voice-family, они также могут возникнуть и у браузера Opera 5 и выше. Зато Opera прекрасно понимает селектор непосредственного потомка и переопределит ширину блока с его помощью.

Браузер Mozilla правильно пропускает свойство voice-family, а также понимает селектор непосредственного потомка. Таким образом, в нем будет установлена нужная ширина блока - 300 пикселей.

Остается еще браузер Internet Explorer 6, который корректно обрабатывает свойство voice-family, т.е. пропускает его, но не понимает селектора непосредственного потомка. В общем, проблем и с ним не будет, если в браузере корректно работает блоковая модель. Если модель корректна, то установленная последним объявлением в первом правиле ширина в 300 пикселей обеспечит нам нужную картину. Как уже упоминалось ранее, режим работы браузера Internet Explorer 6 зависит от формата директивы DOCTYPE.

Еще раз о важности директивы DOCTYPE

При изучении HTML мы говорили о том, что спецификация HTML 4.0 требует, чтобы для Web-страницы было задано определение типа документа DTD. Для этого в первую строку описания типа документа включается декларация DOCTYPE соответствующего формата. Если вы не задаете DTD в своем документе, то имейте в виду, что совместимые с HTML 4.0 браузеры по умолчанию используют строгое определение DTD.

Формат директивы при этом следующий:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Кроме определения собственно типа документа, формат этой директивы определяет режим работы браузера. Если в директиве указывается полный URL страницы с описанием DTD, это дает сигнал браузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.

Если воспользоваться неполным тегом DOCTYPE (например, без указания URL - устаревшим его видом), браузер перейдет в так называемый режим обратной совместимости и будет работать, как его предыдущие версии, не поддерживая, соответственно, новейшие стандарты. В результате может возникнуть неприятная ситуация. Представьте, что вы создавали Web-страницу, используя новейшие средства и CSS-правила, а также типы селекторов, которые должны поддерживать современные браузеры. А на практике при просмотре страницы окажется, что она отображается так, как будто вы ее просматриваете в браузере Internet Explorer 4.0, который очень слабо поддерживает CSS. При этом надо отметить, что подобным недостаткам не подвержен браузер Opera, который всегда старается отобразить документ так, как будто он написан в соответствии со всеми стандартами.

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

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 - | - 7 - | - 8 -

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены