Page 117 - Сила CSS3 Освой новейший стандарт

Усложнение фона • 117

Обходные пути для не поддерживающих данную возможность браузеров
Браузер IE 8 и более ранних версий, а также старые версии Firefox и Opera не под-
держивают добавление к одному элементу нескольких фоновых изображений.
В случаях, подобных нашему, когда дополнительные изображения — это всего
лишь вариант украшения страницы, не стоит беспокоиться о реализации каких-то
обходных путей. Пользователи все так же увидят линованный фон, который сам
по себе представляет завершенное изображение. У них не создастся впечатления,
будто на странице чего-то не хватает.
Однако возможны ситуации, когда отсутствие дополнительных изображений создает
впечатление, будто бы веб-сайт недоделан или сломан. Например, вы с помощью
нескольких изображений создаете сложную кнопку, которая выглядит сломанной,
если отображается только один из составляющих ее графических объектов. Будьте
очень внимательны и осторожны, применяя несколько фоновых изображений, по-
скольку обходных путей не так много:
использование одного альтернативного изображения. Самый простой обходной
путь для не поддерживающих данную возможность браузеров — добавить одно
альтернативное изображение вместо множества, составляющих многослойный
фон. Для этого вставьте отдельное объявление background-image перед тем, где
перечисляются несколько изображений (выше мы прибегали к этому решению),
или воспользуйтесь помощью Modernizr. Удостоверьтесь, что этого изображения
будет достаточно для того, чтобы страница смотрелась целостной. Данный об-
ходной путь легко реализовать, и он не искажает страницу в устаревших брау-
зерах, однако может оказаться недостаточно эффективным в ситуациях, когда
без дополнительных изображений страница действительно выглядит неполной;

использование вложенных блоков div с дополнительными изображениями.
Более надежный, но трудоемкий обходной путь подразумевает возвращение
к старому испытанному методу с вложенными блоками div и добавлением разных
изображений к разным полям. Если вы решите прибегнуть к нему, вам понадо-
бится помощь сценария Modernizr или условных комментариев IE для передачи
разных правил браузерам с разными уровнями поддержки. В противном случае в
браузерах, поддерживающих несколько фоновых изображений, фон будет двоить-
ся. Разумеется, если вы в любом случае собирались добавлять эти дополнительные
блоки div и правила для обработки фона, можно полностью отказаться от новой
возможности и применять старую технику для всех браузеров, независимо от
того, понимают они элементы с несколькими фоновыми изображениями или нет.
Таким образом, я не уверена, что этот обходной путь действительно имеет смысл;
генерирование дополнительных элементов для добавочных изображений.
Более изящный способ реализации обходного пути с вложенными блоками div
подразумевает использование псевдоэлементов :before и :after для генера-
ции дополнительных элементов, с которыми затем можно связывать нужные
фоновые изображения. О том, как это делается, рассказывает Николас Галлахер

www.trk.kg