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

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

 

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

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

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

 

 

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


Устранение различий

<р>На первый взгляд может показаться, что устранить различия довольно просто: нужно сделать так, чтобы для Internet Explorer 5 было установлено одно значение ширины (400 + 2x10 + 2x50 = 520), а для всех остальных браузеров, работающих корректно, другое значение - 400. Сделать это можно двумя способами. <р>Первый способ - написать разные таблицы стилей для разных браузеров и подключать нужную в зависимости от того, какой браузер используется. Сделать это можно, например, при помощи средств языка JavaScript. Подробнее о том, как это сделать, будет рассказано чуть ниже, в этой же главе. Второй способ - разместить оба объявления в одной таблице стилей и сделать так, чтобы каждый браузер воспринимал только нужное ему объявление.

Первый способ универсальный, и с его помощью можно устранить любые несоответствия в работе различных браузеров. Единственный случай, когда он не сможет помочь, это при отключении поддержки языка JavaScript в настройках браузера — пользователи иногда так поступают из соображений безопасности. Но чаще всего JavaScript поддерживается, и в этом случае вы можете воспользоваться любым из уже написанных ранее сценариев, которых существует великое множество. Или, если вы знакомы с JavaScript, можете написать подходящий сценарий самостоятельно.

Второй способ далеко не универсален - он основывается на том, что некоторые браузеры некорректно обрабатывают неизвестные им конструкции, что позволяет таким образом "скрыть" ненужные для этого браузера объявления. Как вы уже знаете, для определения элемента, к которому будет применен стиль, используются селекторы. До сих пор мы знакомились с селекторами, описанными в спецификации CSS 1, однако многие селекторы из спецификации CSS 2 также поддерживаются браузерами.

Рассмотрим, например, селектор, определяющий непосредственного (прямого) потомка для некоего элемента HTML. Пример иерархии элементов, потомков элемента <BODY>

<BODY>
<Н1>Заголовок — прямой потомок BODY</H1>
<DIV ID="block">
<Н1>Заголовок — непрямой потомок BODY, прямой потомок DIV</H1> Содержимое блока
<DIV>
</BODY>

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

BODY>H1{color: green;}

Тогда в примере, представленном в листинге, первый заголовок, являющийся непосредственным потомком элемента BODY, будет зеленым, а второй останется прежнего цвета, так как прямым потомком этого элемента не является.

Браузер Internet Explorer 5.x не понимает этого селектора, поэтому будет его просто игнорировать. А браузеры Opera 5 и Mozilla его понимают и будут применять записанные правила. Теперь наши проблемы с устранением различий в блоковой модели браузеров можно попробовать решить так:
#block {
border:10px solid #660;
padding:5 0рх;
width:520рх}


B0DY>#block {
width:400px
}

При использовании такой конструкции все браузеры установят ширину блока, равную 520 пикселей, в том числе и Internet Explorer 5, а затем те браузеры, которые понимают селектор непосредственного потомка и имеют корректную блоковую модель, установят для ширины блока значение 400 пикселей.

Все бы хорошо, но браузер Internet Explorer 6 также не понимает селектора непосредственного потомка, но при этом блоковая модель работает в нем правильно. Тогда в нем сначала ширина блока будет установлена равной 520 пикселей, а так как второй селектор он не поймет и пропустит, то правильное для него значение в 300 пикселей не будет установлено. Такая ситуация недопустима, и надо искать другие пути.

 

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

 

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

 

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

 

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