Лучшая практика для CSS3 фонов и поддержка старых браузеров?

Question

Мой коллега и я испытываем трудности с выбором оптимального подхода для поддержки ie6, ie7 для сайта, который мы создаем. Сайт предназначен для пожилых людей, поэтому о поддержке этих браузеров не может быть и речи.

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

У нас есть 2 варианта, если мы хотим использовать фоны CSS3 и не добавлять посторонние теги обертывания для фонов:

• Используйте псевдоэлементы: after,: before и т.д. для добавления нескольких элементов фона. (это выбор, который мы сделали сейчас)
• Использовать несколько спецификаций фона CSS3

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

Modernizr.js говорит нам проверить наличие конкретной поддержки, а затем написать запасные варианты:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Однако нам не дано много указаний по фактическим запасным вариантам для определенных функций. Итак, в случае чего-то вроде фонов CSS3, какой была бы эффективная резервная стратегия?

Будем ли мы (например) использовать jQuery, чтобы обернуть эти дополнительные теги, которые нам нужны (например, btn-container, nav-container и т. Д.), Вокруг элементов навигации, кнопок и контейнеров, чтобы иметь дополнительные элементы для добавления атрибутов стиля?

Answer 1

О CSS3 multiple backgounds и / или background gradients Я думаю, что есть подход лучше, чем тот, который вы предложили: CSS3 Pie .

Таким образом, вы сможете использовать все эти приятные эффекты также в IE6, 7 и 8 (включая также border-radious) без какого-либо вмешательства JavaScript .

Answer 2

1. Ошибка изящно. Некоторые сложные элементы могут быть скрыты с помощью CSS и показаны при загрузке страницы с помощью JavaScript в зависимости от браузера в качестве одного примера.

2. Условные таблицы стилей или исправления JavaScript. Потратьте много времени на исправление каждой проблемы в каждом браузере и напишите таблицу стилей именно для нее. Кроме того, вы можете попробовать различные сценарии JavaScripts, которые утверждают, что приведение старых браузеров в соответствие. Я пробовал этот JavaScript , но, похоже, он конфликтует с jQuery. CSS Pie - это еще один вариант для создания закругленных углов в старых браузерах.

3. Игнорировать старые браузеры. Ничего особенного для старых браузеров не делать. Люди в IE6 / 7 уже видят мир иначе, чем все остальные. В качестве альтернативы, не делайте ничего особенного для старых браузеров, но активно избегайте чрезмерно сложных функций и возможностей. При желании вы можете добавить изящное сообщение об обновлении без особых усилий.

Answer 3

Будем ли мы (например) использовать jQuery, чтобы обернуть те дополнительные теги, которые нам нужны (например, btn-container, nav-container и т. Д.), Вокруг элементов навигации, кнопок и контейнеров, чтобы иметь дополнительные элементы для добавления атрибутов стиля?

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

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