Деградация - «CSS3» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 19 апрель 2023, 08:23
Причины популярности камеры GoPro и особенности современной техники
Популярные статьи
  • 18 апрель 2024, 00:00
SpaceX отключит от Starlink нелегальных абонентов - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 19 апрель 2023, 08:23
Причины популярности камеры GoPro и особенности современной техники
  • 15 март 2020, 12:20
? ССЫЛКА НА Maestro - «Видео уроки - CSS»
29-03-2016, 11:26
Деградация - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3

Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation) — принцип сохранения работоспособности при потере части функциональности.

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

  • Firefox — свойства, начинающиеся с -moz-;
  • Safari и Chrome — свойства, начинающиеся с -webkit-;
  • Opera — свойства, начинающиеся с -o-.

Разные версии этих браузеров могут понимать некоторые свойства как с префиксом, так и без него, поэтому для универсальности добавляют одновременно несколько свойств сразу. Так, для создания скруглённых уголков нам потребуется следующий стиль.

-moz-border-radius: 10px; /* Для Firefox */
-webkit-border-radius: 10px; /* Для Safari и Chrome */
border-radius: 10px; /* Для Opera и IE9 */

Хотя применение этих свойств приведёт к невалидному коду CSS, в данном случае важнее работа в браузерах Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, а также в их старших версиях. В примере 1 показано использование свойств CSS3 для создания тени и скруглённых уголков.

Пример 1. Блок с тенью

XHTML 1.0CSS 2.1CSS3IE 8IE 9+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Блок</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   .block {
    background: #c5fddb; border: 1px solid #666;
    padding: 1px 10px;
    /* Скругленные уголки */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* Тень вокруг блока */
    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
    box-shadow: 0 0 5px #666; 
   }
   input[type="submit"] {
    background: #f0f0f0; border: 1px solid #666;
    font-size: 1.2em; padding: 0 40px;
    /* Скругленные уголки */
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
   }
  </style>
 </head>
 <body>
  <div class="block">
   <p>Вам необходимо пройти 20 вопросов, которые в случайном порядке 
   выбираются из базы данных. Для прохождения теста достаточно правильно 
   ответить не менее чем на 75% предложенных вопросов 
   (15 и более вопросов).</p>
   <p><input type="submit" value="Начать тест" /></p>
  </div>
 </body>
</html>

Результат примера продемонстрирован на рис. 1.

Рис. 1. Вид блока в Safari

Тот же пример в браузере IE8 и ниже представлен на рис. 2.

Рис. 2. Вид блока в IE8

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

Что даёт на практике этот подход?

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

Разумеется, изящная деградация применима не всегда. Если в требованиях к вёрстке указана поддержка старых версий, то придётся искать альтернативные решения, например, для скруглённых уголков использовать изображения. Но в большинстве своём требования к вёрстке выставляют без учёта общей ситуации. И если сравнить все преимущества изящной деградации с недостатком, который проявляется только в том, что устаревшие браузеры, в частности IE8 отображают страницу недостаточно «красиво», то симпатии окажутся на стороне прогресса.


Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation)
Просмотров: 2 672
Комментариев: 0:   29-03-2016, 11:26
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
Комментарии для сайта Cackle
ДОБАВИТЬ БАННЕР