Деградация - «CSS3» » Самоучитель CSS

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

Афоризмы
• Поистине, подобно солнцу, люблю я жизнь и все глубокие моря. И вот что называю я познанием: чтобы все глубокое поднялось на высоту мою!

Афоризмы
• - «Оставайтесь голодными. Оставайтесь безрассудными». И я всегда желал себе этого. И теперь, когда вы заканчиваете институт и начинаете заново, я желаю этого вам.

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

Афоризмы

Сегодня

• Кто много знает, с того много и спрашивается.

• Не учись до старости, а учись до смерти.

• Без терпенья нет ученья.

• Знание лучше богатства.

• Учи показом, а не рассказом.

• Не для знания, а для экзамена.
• Знание — сила.

• Без муки нет и науки.

• Всему учен, только не изловчен.

• Велико ли перо, а большие книги пишет.

• Перо пишет, а ум водит.

• Не бойся, когда не знаешь: страшно, когда знать не хочется.
• Учение — путь к умению.

• Много ученых, мало смышленных.

• Наука учит только умного.

• Учи других — и сам поймешь.

• На все руки, кроме науки.

• Наукой люди кормятся.
• Писать — не языком чесать.

• От учителя наука.

• И медведя плясать учат.

• Не пером пишут — умом.

• Мудрым ни кто не родился, а научился.

• Корень учения горек, да плод его сладок.

Меню

Наши новости

Видео уроки

02 май 2024, 08:05

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

Samsung утратила лидерство в сфере дорогущих огромных телевизоров, но всё равно зарабатывает на них больше всех - «Новости сети»

Наш опрос

Помогли мы вам

Наши новости

24 март 2016, 17:40

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

25 апрель 2024, 01:19

Скачать приложение Betera на Android

29-03-2016, 11:26

Деградация - «CSS3»

Рейтинг:

Категория: Самоучитель CSS / CSS3

Давайте разберём этот приём на небольшом примере, в котором выводится текст в блоке и кнопка. У блока и кнопки заданы скруглённые уголки, к блоку также добавляется небольшая тень. Пока браузеры для 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) — принцип сохранения работоспособности при потере части функциональности. Давайте разберём этот приём на небольшом примере, в котором выводится текст в блоке и кнопка. У блока и кнопки заданы скруглённые уголки, к блоку также добавляется небольшая тень. Пока браузеры для CSS3 применяют преимущественно специфические свойства со своими префиксами: Firefox — свойства, начинающиеся с -moz-; Safari и Chrome — свойства, начинающиеся с -webkit-; Opera — свойства, начинающиеся с -o-. Разные версии этих браузеров могут понимать некоторые свойства как с префиксом, так и без него, поэтому для универсальности добавляют одновременно несколько свойств сразу. Так, для создания скруглённых уголков нам потребуется следующий стиль. Хотя применение этих свойств приведёт к невалидному коду CSS, в данном случае важнее работа в браузерах Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, а также в их старших версиях. В примере 1 показано использование свойств CSS3 для создания тени и скруглённых уголков. Пример 1. Блок с тенью XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx Результат примера продемонстрирован на рис. 1. Рис. 1. Вид блока в Safari Тот же пример в браузере IE8 и ниже представлен на рис. 2. Рис. 2. Вид блока в IE8 Хотя вид элементов различается в деталях, сохраняется работоспособность страницы в целом. На кнопку можно нажать, текст остался прежним, включая его цвет и фон, ошибок отображения нет. Фактически, разница только в мелочах, которые выполняют декоративные, а не прикладные функции. Все принципы изящной деградации выполнены. Что даёт на практике этот подход? Позволяет активно использовать декоративные свойства CSS3 без оглядки на браузер. Мотивирует применять различные эффекты CSS3. Существенно облегчает жизнь разработчика, так как ему теперь не надо искать решения для устаревших браузеров. Ускоряет производительность работы. Разумеется, изящная деградация применима не всегда. Если в требованиях к вёрстке указана поддержка старых версий, то придётся искать альтернативные решения, например, для скруглённых уголков использовать изображения. Но в большинстве своём требования к вёрстке выставляют без учёта общей ситуации. И если сравнить все преимущества изящной деградации с недостатком, который проявляется только в том, что устаревшие браузеры, в частности IE8 отображают страницу недостаточно «красиво», то симпатии окажутся на стороне прогресса.

Комментариев: 0: 29-03-2016, 11:26

Распечатать

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

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

Другие новости по теме:

ДОБАВИТЬ БАННЕР

АВТОРИЗАЦИЯ

РегистрацияЗабыли?

ДОБАВИТЬ БАННЕР
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется."
«Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации.

«Все для веб-дизайнера - CSS»

Афоризмы

Афоризмы

Афоризмы

Афоризмы

• Кто много знает, с того много и спрашивается.

• Знание — сила.

• Учение — путь к умению.

• Писать — не языком чесать.

Учебник CSS

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

Новости

Справочник CSS

Афоризмы

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

Samsung утратила лидерство в сфере дорогущих огромных телевизоров, но всё равно зарабатывает на них больше всех - «Новости сети»

Написание эффективного кода

Базовый синтаксис CSS

Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей

Скачать приложение Betera на Android

Деградация - «CSS3»