Подробное объяснение прогрессивного улучшения CSS (каскадных таблиц стилей).

Существует множество способов включить прогрессивное улучшение в вашу работу с помощью каскадных таблиц стилей (CSS). В этой статье будут рассмотрены некоторые из наиболее успешных из них и рассмотрены другие способы постепенного улучшения вашего сайта.

Организация таблицы стилей

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

Используйте несколько таблиц стилей

Небольшое разделение стилей может принести много преимуществ. Очевидно, что таблицу стилей, содержащую более 1500 строк, немного сложно поддерживать, и ее разделение на несколько таблиц стилей может улучшить рабочий процесс (и сэкономить ваши усилия). Есть еще одно преимущество, о котором редко упоминают: оно помогает добиться более последовательного эффекта представления на целевом типе носителя (перевод: относится к различным типам носителей, таким как компьютеры, принтеры, телевизоры, мобильные телефоны и т. д.).

Файл main.css содержит все правила стиля сайта. Рассмотрите возможность разделения его на независимые таблицы стилей, содержащие типографику, макет и цвет, названные соответственно: type.css, layout.css, color.css.


(Иллюстрация: Как разделить одну таблицу стилей на несколько связанных таблиц стилей)

Как только вышеуказанное разделение будет завершено, вы можете использовать некоторые магические приемы, чтобы автоматически обеспечить «низкую точность» для устаревших браузеров (таких как IE5/Mac) и многих браузеров, в которых отсутствует надежная поддержка макета CSS. Как это сделать? Все зависит от того, как вы импортируете файл. Предположим, что main.css представлен через элемент link:


Сначала разделите приведенную выше строку ссылки на три связанные таблицы стилей:


В прошлом многие разработчики устанавливали значение мультимедиа «экран» или «проекция», что делало стиль макета совершенно недействительным в Netscape 4.x (Примечание: Netscape 4.x не поддерживает сложные макеты, такие как плавающее и позиционирование). Однако есть лучшее решение. Прежде чем подробно объяснить этот метод, давайте взглянем на альтернативные типы носителей.

Дополнительные типы носителей

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

К сожалению, рынок мобильных устройств все еще фрагментирован и незрел (не будьте наивны, полагая, что все портативные браузеры будут отображать стили типов мультимедиа, ориентированные на «экран»). В результате подробное обсуждение прогрессивного совершенствования во всех средствах массовой информации заняло бы много страниц, если не книгу. Однако не отчаивайтесь: в мобильном мире различия начинают объединяться, и некоторые очень умные люди начинают объединять ресурсы, чтобы помочь нам развиваться. Однако, чтобы сэкономить время и силы, мы сосредоточимся на печатающих устройствах.

Обычно для добавления стилей печати нам нужно использовать другой элемент ссылки:


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

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

Возвращаясь к нашей таблице стилей, рассмотрим следующий код:


Мы не объявляли тип носителя, поэтому Netscape 4.x будет читать все стили в этих трех файлах. Однако браузер Netscape понимает базовый CSS, и мы можем этим воспользоваться. Мы можем дополнительно организовать наши стили, переместив все стили, содержащиеся в файле Layout.css, в новую таблицу стилей с соответствующим названием screen.css. Наконец, обновите содержимое файла layout.css, чтобы импортировать screen.css, чтобы NS4.x и его родственные браузеры больше не были интеллектуальными (поскольку они не понимают директиву @import). (Примечание к переводу: автор здесь говорит о том, чтобы переместить все содержимое из файла layout.css в screen.css, а затем ввести screen.css через @import в файле Layout.css. Я думаю, что лучший способ — добавить его в Layout.css Сохраните самые основные стили макета, которые также понимает NS4.x, и переместите другие расширенные стили макета в screen.css).


Есть возможности для улучшения — медиа-файлы, на которые нацелена таблица стилей, должны быть объявлены, что мы и делаем, добавляя тип мультимедиа в объявление @import:


Проблема в том, что браузеры IE7 и ниже не понимают этот синтаксис и поэтому игнорируют приведенную выше таблицу стилей. Если вы хотите предоставить вышеуказанную таблицу стилей этим браузерам (что часто желательно), вы можете легко сделать это, используя условные комментарии, которые будет подробно описано ниже. Если у вас острый как орёл глаз, вы, возможно, заметили, что с обеих сторон имени таблицы стилей вместо двойных кавычек (') используются одинарные кавычки ('). Эта маленькая хитрость позволяет IE5/Mac игнорировать стиль. Возможности CSS-разметки IE5/Mac очень слабы (особенно поддержка плавающего положения и позиционирования), и вполне допустимо скрывать от них правила разметки. В конце концов, они все равно могут получать информацию о цвете и макете, чего в некоторых случаях достаточно. .

Используя тот же метод, вы можете импортировать файл print.css (который, как вы можете догадаться, содержит определенные правила макета печати).


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


(Иллюстрация того, как несколько таблиц стилей связаны друг с другом и как применять их к документу)

Как бороться с IE6?

Для многих Internet Explorer 6 — это новый Netscape 4, и все хотят, чтобы он ушел.

Давайте пропустим разговоры о проблемах IE6. Проблемы с IE6 хорошо документированы и, честно говоря, исправить их не так уж и сложно. Более того, распространение IE7 происходит довольно быстро (особенно на потребительском рынке), а IE8 уже находится в стадии публичной бета-версии. Это означает, что однажды мы действительно сможем попрощаться с устаревшим IE6.

Намеренно или непреднамеренно, когда Microsoft запустила IE5, она предоставила хороший инструмент для постепенного улучшения: условные комментарии. Эти умные кусочки логики (отнесенные к комментариям HTML во всех других браузерах) не только позволяют определенным фрагментам кода разметки работать только в IE, но также позволяют этим фрагментам кода работать только в определенных версиях IE.

Как разработчики, соблюдающие веб-стандарты, мы всегда должны сначала тестировать наши проекты на большинстве существующих браузеров, соответствующих стандартам, а затем предоставлять исправления для тех браузеров, которые могут вернуться в нормальное русло с небольшими изменениями. Рабочий процесс у всех разный, но я считаю, что лучше начинать каждый проект со стандартным набором документов. Мой базовый пакет включает в себя следующие файлы:


Затем, в зависимости от потребностей проекта, добавьте файлы CSS для конкретного браузера, чтобы включить эти «незначительные изменения». Сейчас в большинстве проектов это файлы ie7.css и ie6.css. Если проекту требуется поддержка версий до IE6, я также создам для него соответствующие файлы (например, ie5.5.css и т. д.). Имея эти файлы, я начал добавлять правила стиля в соответствующие таблицы стилей.

Я начинаю тестирование CSS в Mozilla Firefox, потому что большая часть моего CSS написана с использованием боковой панели редактора CSS Firefox. Закончив разработку страницы в Firefox, я сразу же открыл другой браузер, чтобы протестировать и просмотреть ее. Большинство из них работают идеально, потому что придерживаются веб-стандартов. Затем откройте IE7 для проверки. В большинстве случаев проблем не так уж и много. Иногда необходимо запустить hasLayout или исправить другие незначительные ошибки макета. Вместо того, чтобы записывать эти исправления в файл таблицы стилей базового пакета, я добавил их в ie7.css и представил их через условные комментарии в ЗАГОЛОВКЕ документа:


Приведенные выше условные комментарии позволяют IE7 и более ранним версиям (примечание к переводу: lte — это сокращение от «меньше или равно») распознавать представленный стиль. Поэтому при просмотре страницы с IE7 эти патчи будут получены. Но если вы используете новую версию IE, которая, возможно, исправила эти проблемы, например, IE8 отказался от hasLayout и больше не имеет этих проблем, эти стили будут игнорироваться. С другой стороны, эти стили можно получить с помощью IE6. Это хорошо, поскольку ошибки рендеринга в IE7, как правило, присутствуют и в IE6. Как упоминалось выше, версии IE7 и ниже не могут понимать @import с типом носителя. Представление screen.css таким образом недопустимо для версий IE7 и ниже. Поэтому вам также необходимо добавить оператор @import без типа носителя в верхней части файла ie7.css, чтобы представить screen.css.

Как только я исправлю IE7, я открою IE6 и посмотрю, нужно ли мне что-нибудь исправить. При необходимости я бы добавил к документу еще один условный комментарий, импортировав его в ie6.css:


Затем просто добавьте исправления, необходимые для IE6, в соответствующие таблицы стилей. Эти таблицы стилей будут игнорироваться IE7, но по-прежнему будут влиять на такие версии, как IE5.5.

Используя условные комментарии таким образом, вы можете легко управлять целевыми браузерами в своем проекте и сохранять файлы исправлений CSS независимыми и бесплатными.

Другие соображения

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

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

В качестве примера возьмем простую контактную форму:


(Иллюстрация: HTML-форма, используемая в этом примере (код будет приведен ниже))

При написании приведенного выше HTML-кода вполне вероятно, что двоеточие (:) будет естественным образом записано в элементе метки. Зачем это делать? Действительно ли контент добавляется в элемент метки? Не совсем. Целью этого является предоставление пользователю дополнительных визуальных подсказок. Для элемента метки он является избыточным и его следует удалить:


Более подходящий способ — добавить двоеточие обратно в документ, создав контент:


Написание форм таким способом дает нам гибкость: когда нам нужно удалить декоративные символы со всего сайта, мы можем просто редактировать CSS-файл, не находя каждую форму (хотя когда-то мы знали где). Этот трюк также хорошо деградирует, потому что без двоеточия форма не становится непригодной для использования — отличный пример прогрессивного улучшения.

Возможно, вы обнаружили, что с помощью расширенных селекторов CSS (перевод: селектор, также переводится как селектор, но я думаю, что селекторы могут лучше отражать исходное значение, например, оператор переводится как оператор, а не оператор), вы можете изменить определенный стиль. более продвинутых браузерах, это помогает со временем улучшить сайт. Хорошим примером является селектор атрибутов, который не понимается (и поэтому игнорируется) в IE6, его современниках и более ранних браузерах. Егор Клоос прекрасно использовал эту концепцию в своем материале под названием «Gemination» на CSS Zen Garden:


(Иллюстрация: Сравнение рендеринга работы CSS Zen Garden Егора Клооса («Double Double») в стандартных браузерах и IE6)

Как он это сделал? Вот слегка измененный пример кода:


Разница очевидна и является прекрасной иллюстрацией того, как можно использовать прогрессивное улучшение в CSS.

Аналогично, на сайте Энди Кларка есть некоторые интересные моменты по IE6. Используя фильтры IE и добавляя некоторые условные аннотации, Энди удалось удалить весь цвет с сайта и предоставить несколько заменяемых изображений, которые создают по-настоящему «лоу-фай» впечатление.


(Иллюстрация: сравнение сайта Энди Кларка в стандартных браузерах и IE6)

Техника серого цвета на рисунке выше такова: в таблицу стилей для IE6 (и ниже), добавленную условным комментарием, добавьте следующий оператор:


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

Подвести итог

Как мы уже говорили, существует несколько способов применить прогрессивное улучшение CSS к вашему сайту. Самый простой и, возможно, лучший способ — организовать таблицы стилей и тщательно продумать, как вы свяжете их с документом. Как только вы поймете условные комментарии, решение проблем, специфичных для IE, станет проще простого. Если у вас есть четкое понимание того, как использовать селекторы и сценарии, в которых они используются, вы можете внести более тонкие настройки в CSS.

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