Библиотека Интернет Индустрии I2R.ru

От таблиц к стилям за пять простых шагов

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока

СЛОИ ЛЕТАЮЩИЕ И ПЛАВАЮЩИЕ

#content   {
    float: left;
    width:  67%; 
    padding: 45px 10% 100px 15%; 
    margin: 0 15px 0 0;
    border-right: 2px dotted black;
    border-bottom: 2px dotted black;
   }

Замечу, что gif, используемый в качестве фона в черновой верстке был заменен на свойства границы (2px dotted black). Также замечу, что ширина была изменена с 75% до 67%.

Вообще говоря, мы определили, что идеальная ширина должна быть еще меньше. При разрешениях 800х600 и ниже, область меню была недостаточно широкой. В результате пункты меню сползали в подвал страницы (картинка). Идеальная ширина, таким образом, была установлена в 52%. Не забудьте, 52% -- перед тем, как добавить поля и отступы. Вы можете пока выпить водички, а потом прочитать это еще раз.

УМЕСТНЫЕ ВОПРОСЫ

1. Почему эта проблема не возникала в старой верстке ALA? Потому что табличная верстка сильно упрощает такие проблемы. Если ваш слой с меню слишком узок, броузер просто подгонит пропорции таблиц. CSS-совместимый броузер не будет подгонять пропорции, чтобы охранить вас от вашей собственной глупости.
2. Если идеальная ширина - 52%, то почему же объявленная ширина для слоя с контентом - 67%? Все просто: 67% - это фальшивое значение, чтобы обмануть IE5/Windows и заставить отображать реальную ширину более-менее корректно.

То, что описано в одном небольшом разделе, я выяснял в течение четырнадцати часов. Вы можете идти нюхать клей. Как отойдете - перечитайте все с самого начала.

СЛЕДИМ ЗА ТОЧНОСТЬЮ

body#content {
    width: 52%; 
    padding: 35px 5% 100px 10%;
	}

Несмотря на то, что body# выглядит как масонский символ, он таковым не является; это селектор CSS-2. Netscape 6, и Opera 5 понимают синтакс CSS-2; IE5/Windows - нет, и поэтому его пропускает. IE5/Win следует правилу, которое распознает - фальшивой ширине в 67%. Более совместимые боузеры следуют т.н. правилу большей специфичности. Что это такое, вы спросите?

ПРАВИЛО БОЛЬШЕЙ СПЕЦИФИЧНОСТИ

даст вам шрифт в десять точек высотой, который мы все так любим.

Более специфичное правило одерживает верх над менее специфичным.

В причудливом мире CSS, слой с контентом, который содержится в тэге считается более специфичным, нежели слой с контентом, который объявлен сам по себе, даже если они объявлены совершенно одинаково. Умей IE5/Win читать синтакс CSS-2, как делают другие броузеры, наш бы трюк не прошел.

ИСКЛЮЧАЕМ БРОУЗЕРЫ ЧЕТВЕРТЫХ ВЕРСИЙ

И вот тут на сцене появляется Инициатива по Обновлению Броузеров. Тогда же у Анонимного Донора #2 появилась великолепная идея использовать внутренние фреймы (iframes), чтобы намекнуть пользователям устаревших броузеров о необходимости их обновления.

К несчастью, последние версии XHTML не поддерживают iframe, поэтому мы решили заменить iframe на тэг OBJECT.

К несчастью, текст внутри невидимого тэга OBJECT показывается в поддерживающих стандарты броузерах (в режиме эмуляции) и устройствах типа Lynx и Palm PilotsT. Поэтому мы добавили JavaScript, который скрывал содержание тэга OBJECT в этих броузерах.

К несчастью, добавление JavaScript к тэгу OBJECT привело к тому, что IE5+/Windows стал скрывать заголовок страницы, а также время от времени выдавать фальшивый сигнал о нарушении безопасности (в зависимости от настроек).

В итоге, Анонимный Донор #1 придумал еще одну дьявольскую (но полностью соответствующую стандартам) уловку, которая подойдет для любого броузера. Но тут мы сдались. Мы просто упаковали наше сообщение в незамысловатый тэг p, и использовали CSS, чтобы его скрыть.

p class="ahem"
big
Этот сайт будет работать куда лучше в броузере, который поддерживает a href="http://www.webstandards.org/upgrade/" target="ala" title="The Web Standards Project's BROWSER UPGRADE initiative."стандарты Web/a,но он также доступен в любом другом броузере или Интернет-устройстве.
/big
/p

Как и почему это работает, объясняется на странице WaSP для разработчиков.

ЗАЩИТИМ НЕВИННЫХ

link rel=StyleSheet href="/css/style.css" type="text/css" media=screen

... мы подключаем ее так:

style type="text/css" media="all"
@import "/nucss.css";
/style

Версии, начиная с пятой, понимают этот метод. Четвертые - нет. Дети, попробуйте это дома.

Используя метод @import с двойными кавычками, вы защищаете старые броузеры от самих себя и можете свободно использовать CSS так, как его следует использовать. Скажем так, теперь у вас есть полная свобода использовать стандарты Web в соответствии со спецификацией, не отвлекаясь на постоянный поиск обходных решений и компромиссов.

Для тех, кто делает сайты, иначе, как революцией, это не назовешь.

ОП-ПА...

Таким образом, IE4.5/Mac отображает декларацию как написано, согласно спецификации CSS-1. К сожалению, декларация , как вы помните, была написана с использованием фальшивых значений, дабы заставить IE5.5/Windows корректно отображать нашу разметку. Поэтому IE4.5 замечательно проделывает работу по отображению неверной декларации, и наша верстка будет отображаться в нем, мягко говоря, неверно.

И финальный аккорд. После того, как ALA подвергся смене оформления с помощью методов, описанных выше, публике была представлена бета-версия IE6/Windows. Как IE5/Mac, она поддерживает переключение режимов с помощью DOCTYPE. Как IE5/Mac, Opera 5 и броузеры Gecko, она корректно понимает блочную модель. Но, в отличие от этих броузеров, она не распознает селекторы CSS-2. В результате, в точности как IE4.5/Mac, бета-версия IE6 проделывает виртуозную работу по отображению неверной декларации. Броузер <прав>, а вот разметка - нет.

К счастью, нам удалось решить эту проблему в ALA № 100, который использует упрощенную таблицу стилей и <упаковочный> слой, соединяющий все части воедино в любом CSS-совместимом броузере. Подробности смотрите в заметках к № 100.

7 апреля мы переделали верстку номера 99 (в том числе и статью, которую вы сейчас читаете), согласно обновленной таблице стилей и шаблону, дабы избежать проблем с бета-версией IE6 и IE4.5/Mac. Мы обновили также текст данной статьи. Почему? Да потому, что мы вас любим.

ПРАЗДНЫЕ БЕСЕДЫ

Основные выводы этих дискуссий были собраны участником по имени Eric Costello. В том числе, мы обсуждали плюсы и минусы <взлома> блочной модели, созданного Tantek Celik, ведущим разработчиком IE5/Mac и соавтором CSS-2 и CSS-3. Не волнуйтесь, этот трюк гораздо проще, чем кажется на первый взгляд.

Приемы CSS, которые использует ALA начиная с номера № 100 базируются на различных подходах и они корректно работают в бета-версии IE6, IE5/Win, IE5.5/Win, IE5/Mac, Mozilla, Konqueror, Netscape 6, и Opera 5.

ВОЗВРАЩЕНИЕ БЛУДНОГО СЫНА

1. BlueRobot's CSS Layout Reservoir
2. Glish's CSS Layout Techniques
3. Owen Briggs's Little Boxes

ПУТЕШЕСТВИЕ ПРОДОЛЖАЕТСЯ

Тому, кто оценивает Web исключительно критериями графического дизайна, придется несколько расширить свой кругозор, но взамен он получит больший контроль и гибкость в управлении разметкой.

Возможно, вы начнете помогать нам закатывать камень на гору уже сейчас. Возможно вы предпочтете наблюдать со стороны за развитием событий. Но, вне зависимости от того, выберете вы место на сцене или в зрительном зале, сейчас самое время начать изучать, как работают эти стандарты и прикидывать, какую пользу они могут принести вашим сайтам.

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

Разумеется, если вы не желаете изучать CSS и прочие стандарты Web - при ресторанах MacDonald's есть отличные курсы менеджмента.

Увидимся на баррикадах.

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока