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

128 • Глава 3. Линованная бумага

Обходные пути для не поддерживающих эту возможность браузеров
Пользователи браузеров, не поддерживающих свойство border-image, не узнают
о том, что на странице чего-то не хватает? — они увидят обычный аккуратный
линованный фон. Если вы считаете, что добавить оборванный край необходимо,
то реализуйте вариант с еще одним фоновым изображением в дополнительном
обрамляющем блоке div, как рассказывается выше.

Если вы прибегнете к этому способу, вам придется либо удалить свойство border-
image из кода для всех остальных браузеров, либо скрыть дополнительное фоновое
изображение от браузеров, поддерживающих border-image. Мне больше по душе
второй подход — он более гибкий и позволяет создавать рамки с изображениями,
не прилагая особых усилий. Примените сценарий Modernizr или условные ком-
ментарии IE для создания обрамляющего правила, которое смогут увидеть только
определенные браузеры. Это правило должно определять ширину левого поля
и фоновое изображение для левого края элемента:
#wrapper {
padding-left: 50px;
background: url(images/edge.png) repeat-y;
}
Остальные браузеры это правило не увидят. Разумеется, они распознают обрамля-
ющий блок div в коде HTML, но не будут связывать с ним никакие стили.
В качестве еще одного альтернативного варианта можно объединить изображение ли-
нованной бумаги с изображением оборванного края и связать это общее изображение
с существующим блоком div под названием paper. Таким образом, вы избавитесь от
дополнительного обрамляющего div, однако на реализацию разных фоновых изобра-
жений для разных браузеров потребуется затратить больше сил и времени. И снова
удостоверьтесь, что в поддерживающих свойство border-image браузерах будут ис-
пользоваться два разных изображения: одно в качестве фонового, а второе в качестве
изображения для рамки. Вместо того чтобы отказываться от свойства border-image
в пользу фоновых изображений, можно заставить его работать с помощью сценария.
Однако решения на основе сценариев позволяют лишь растягивать изображения для
рамки, а не выводить несколько копий, поэтому в нашем случае они неприменимы.
Тем не менее если для вашего проекта достаточно будет наложить на рамку растянутое
изображение, попробуйте воспользоваться одним из следующих сценариев:
PIE автора Jason Johnston (http://css3pie.com); подробнее об этом сценарии рас-
сказывается в главе 2. Кстати, он также обеспечивает ограниченную поддержку
свойства border-image в IE версий с 6 по 8;

borderImage автора Louis-Rémi Babé (http://github.com/lrbabe/borderimage). Это
встраиваемый модуль на основе jQuery, эмулирующий свойство border-image
с помощью VML для IE и элемента canvas для остальных браузеров. Более под-
робное описание и руководство по использованию вы найдете на странице http://
www.lrbabe.com/sdoms/borderImage.

www.trk.kg