Применение background-clip для текста с резервным css

​

Я смотрел на прекрасный дизайн сайта polygon.com и применение на нём свойств background-clip и background: linear-gradient(…) . На сайте применяется резервный JS для обеспечения поддержки не стандартного background-clip: text.

Что такое background-clip

Background-clip это свойство, которое впервые было введено браузерами семейства –webkit в 2008 году, позволяет указывать фоновое изображение на элементе с обрезкой по контуру текста этого элемента:

​

Здесь используется следующий код:

body{
 color: transparent;
 background: url(path/to/bg/image) repeat;
 -webkit-background-clip: text;
}

Проблемы с background-clip

Не удивительно, что многие пользуются нестандартными css свойствами. Проблемы с использованием таких свойств нет, если браузеры не поддерживающие их не портят внешний вид страницы. К сожалению, background-clip в браузерах отличных от webkit выглядит печально:

​

Вот так выглядит это в firefox (фоновая картинка берется из placekitten) . Текст становится не читаемым! Получаестя, что в остальных браузерах ситуация катастрофическая.

Решение проблемы с поддержкой background-clip

Наиболее часто используемым решением является применение Modernizr. Он позволяет обнаружить свойство background-clip: text, а затем выборочно применить класс backgroundcliptext. Polygon.com так и делает.

Решение проблемы с background-clip с помощью css

Глядя на код, я внезапно осознал, что если использовать –webkit префикс в составе свойства background, то свойство background-clip: text с префиксом –webkit не будет работать в браузерах отличных от webkit! Пример:

body {
 color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 -webkit-background-clip: text;
}

Ура! Мы почти у цели! Background больше не появляется в браузерах отличных от webkit:

Проблемка будет с браузером Opera, который использует префикс –webkit для режима совместимости. Но это легко решается добавлением префикса –o-:

body {
 color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

Но! Заметим, что текст у нас по-прежнему не виден, так как установлен прозрачный цвет текста. Сделаем его читаемым:

body {
 color: red;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

​

Сейчас цвет заливает текст и в webkit фоновой картинки не видно.

text-fill-color приходит на помощь

Свойство text-fill-color было представлено еще в 2006 году. Оно заполняет текст цветом, при условии использования вместе с text-stroke. Поведение точно такое же, как и у color, но в нашем случае распространяться оно будет только на браузеры –webkir. Ура!

body {
 color: red;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(path/to/bg/image) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

Вот так выглядит результат в разных браузерах:

​

Таким образом, можно обойтись без сценария Modernizr, использовав дополнительно всего два свойства. В настоящее время только Opera требует сброса свойства background с помощью префикса –o-. Если же в будущем ситуация поменяется и остальные браузеры начнут использовать префикс –webkit, тогда придется писать подобное этому: -moz-linear-gradient… Хотя я сомневаюсь, что такое произойдет когда-либо.