[Перевод] Использование элементов, в качестве фоновых изображений при помощи -moz-element19.07.2014 20:34

Перевод статьи «Use Elements as Background Images with -moz-element», David WalshВсе мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element, это реализованное Mozill’ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!

Смотреть демоHTML и CSS Предположим, что HTML элемент существует внутри текущей страницы и у него задан стиль. У элемента есть CSS градиент, текст и несколько CSS свойств:

I’m in the background.

Я задал стили внутри атрибута элемента, но -moz-element работает и со стилями указанными в тегах style или внешних таблицах стилей. Теперь, имея элемент на нашей странице, мы можем использовать его как «background» для другого элемента: #mySpecialElement { /* mozElementBack exists as an element within the page */ background: -moz-element (#mozElementBack) repeat; } Присваивание ID элемента свойству -moz-element, теоретически, превращает элемент в фоновое изображение, позволяющее применять background-repeat и все остальное. Также, заметьте, что элемент обновляется при обновлении стиля и содержимого фонового элемента, так что вы работаете с «живим» фоном! Смотреть демо Потрясающее CSS свойство, не так ли? Возможность использования существующего HTML элемента, в качестве CSS фона, просто удивительна, но благодаря Mozilla, это полностью возможно. Вы думаете о реальном применении это свойства? Преимущество, которое я вижу в -moz-element это то, что вы сможете включать текст в фон, также вы сможете использовать элементы сгенерированные внешними скриптам (скрипты социальных закладок, например). Какая же это интересная реализация!