jojo9719 июл 2014 в 16:22

Использование элементов, в качестве фоновых изображений при помощи -moz-element

2 мин

9.8K

Веб-разработка * CSS * HTML *

Туториал

Перевод

+13

Комментарии 15

mhspace 19 июл 2014 в 17:16

Преимущество, которое я вижу в -moz-element это то, что вы сможете включать текст в фон, также вы сможете использовать элементы сгенерированные внешними скриптам (скрипты социальных закладок, например).

Но зачем это в фоне? Почему просто не включить элемент как child?

jojo97 19 июл 2014 в 17:30

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

Zibx 19 июл 2014 в 17:53

Слепить что-то в свг и замостить. Получится векторный паттерн.

jojo97 19 июл 2014 в 18:06

Ну согласитесь, что векторный паттерн это не то же самое, что HTML элемент, его нельзя трансформировать(css3), редактировать при помощи джаваскрипта, hover событие не будет изменять бэкграунд целевого элемента(вот маленькая демка от меня) и тд. А вообще, я не понимаю, что вы пытаетесь сказать, что это не самое полезное свойство? Согласен, это, по моему свойство для каких-то уж очень редких случаев, ну и чисто поиграться. Но рассказать об этом стоит, хотя бы потому что, если бы такой байндинг к элементам и их свойствам был внедрен на уровне CSS, то это могло бы сделать CSS просто всемогущим.

xamd 19 июл 2014 в 19:54

Вообще-то, svg-объект является таким же DOM элементом, как и всё остальное. Вы можете изменять SVG с помощью CSS и JS(Raphael, Fabric и куча всего-всего).

А вообще, я не понимаю, что вы пытаетесь сказать, что это не самое полезное свойство?

Абсолютно бесполезное, т.к. аналогов у Chrome, Opera и IE нет, а значит, в реальности применять его никто не будет.

если бы такой байндинг к элементам и их свойствам был внедрен на уровне CSS, то это могло бы сделать CSS просто всемогущим.

Я считаю такой подход неправильным. Вёрстка становится завязана на разметку, это вообще бред какой-то, на мой взгляд.

jojo97 19 июл 2014 в 20:33

Вообще-то, svg-объект является таким же DOM элементом, как и всё остальное. Вы можете изменять SVG с помощью CSS и JS(Raphael, Fabric и куча всего-всего).

И как установить этот svg-DOM объект в качестве фонового изображения?

Абсолютно бесполезное, т.к. аналогов у Chrome, Opera и IE нет, а значит, в реальности применять его никто не будет.

Ну кто знает, не будет ли оно в будущем поддерживаться

Я считаю такой подход неправильным. Вёрстка становится завязана на разметку, это вообще бред какой-то, на мой взгляд.

Похоже, вы меня не поняли, чем плохо было бы сделать так:

.col1 {
     width:300px;
     background:gray;
     height: element(.col2); // колонки будут автоматически подгоняться под одинаковую высоту
}

.col2 {
     width:700px;
     background: #88aaff;
}

конечно такое можно реализовать, но не так просто и декларативно.

xamd 19 июл 2014 в 22:09

И как установить этот svg-DOM объект в качестве фонового изображения?

Ну, например, написав

background: url(/path/to/svg/file.svg);

Ну кто знает, не будет ли оно в будущем поддерживаться

В roadmap'ах ни слова об этом. Гадание на кофейной гуще не аргумент.

Похоже, вы меня не поняли, чем плохо было бы сделать так

Не могу себе представить, чем это лучше, чем написать

height: 700px; 
background: #88aaff;

Или, создать модификатор (если это планируется использовать в нескольких местах). Где профит от конкретно этого подхода? Когда я буду дебажить этот код из firebug/cdt я увижу лишь строку background: -moz-element(.col1) (например) и что мне теперь, искать где применяется .col1 чтобы понять, какие атрибуты я примешиваю? Никакого удобства, на мой взгляд. Те же модификаторы, только намного неудобнее.

И так мне придется делать для всех наследуемых свойств? Почему бы просто их не прописать, или, если вы используете препроцессоры, то просто создать переменную?

jojo97 19 июл 2014 в 22:23

Ну, например, написав

background: url(/path/to/svg/file.svg);

Вы сейчас говорите о html svg элементе или о внешнем файле? Как в таком случае можно с заданным бэкграундом работать из джаваскрипта?

Или, создать модификатор (если это планируется использовать в нескольких местах). Где профит от конкретно этого подхода? Когда я буду дебажить этот код из firebug/cdt я увижу лишь строку background: -moz-element(.col1) (например) и что мне теперь, искать где применяется .col1 чтобы понять, какие атрибуты я примешиваю? Никакого удобства, на мой взгляд. Те же модификаторы, только намного неудобнее.

И так мне придется делать для всех наследуемых свойств? Почему бы просто их не прописать, или, если вы используете препроцессоры, то просто создать переменную?

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

SerDIDG 20 июл 2014 в 00:25

> Как в таком случае можно с заданным бэкграундом работать из джаваскрипта?

Костыльно, но можно.
screencloud.net/v/fRul

А ещё можно задать фон из канваса, как это сделано на iCloud:
background-image: -webkit-canvas(bubble_182_216_242_blurredTo2);

xamd 20 июл 2014 в 11:15

Вы сейчас говорите о html svg элементе или о внешнем файле? Как в таком случае можно с заданным бэкграундом работать из джаваскрипта?

Я говорил о внешнем файле. Если вам хочется работать с svg файлом по средствам JS, то почему бы просто не сделать нечто следующее? При чём этот подход работал во всех браузерах с момента поддержки embed-элементов.

как здесь, только гораздо проще

Куда ещё проще-то? По-вашему неявное связывание значения свойства одного элемента с другим является более простым решением? Тем более, это не всегда будет работать так, как вы предполагаете. Если у .col1 будет position: absolute; height: 700px; а у .col2 будет height: -moz-element(.col1);, то реальная высота .col2 не всегда будет 700px;. И вы никак это не отладите с таким подходом.