Блог

Главная - Вопросы по программированию - CSS маски, правильное свойство для использования CSS.поддерживает для обнаружения поддержки?

CSS маски, правильное свойство для использования CSS.поддерживает для обнаружения поддержки?

#javascript #css

#javascript #css

Вопрос:

Я пишу PHP-скрипт с добавлением префикса, поэтому людям, которые используют CSS с программным обеспечением, над которым я работаю, никогда не придется беспокоиться о префиксах. К сожалению, у меня не было возможности работать со всеми возможными свойствами / значениями CSS, поэтому я не уверен, какое свойство использовать CSS.supports ( background используется в примере ниже)? Просто чтобы не было смысла в комментариях, я делаю это для -khtml- , -o- , -moz- , -webkit- и — ms- для проекта, я просто так получилось, что в настоящее время я работаю над форками Chrome / Safari для Webkit / blink engine.

 alert(
CSS.supports('background','clip-path') 'n' 
CSS.supports('background','clip-rule') 'n' 
CSS.supports('background','mask-image') 'n' 
CSS.supports('background','mask-mode') 'n' 
CSS.supports('background','mask-repeat') 'n' 
CSS.supports('background','mask-position') 'n' 
CSS.supports('background','mask-clip') 'n' 
CSS.supports('background','mask-origin') 'n' 
CSS.supports('background','mask-size') 'n' 
CSS.supports('background','mask-composite') 'n' 
CSS.supports('background','mask-border-source') 'n' 
CSS.supports('background','mask-border-mode') 'n' 
CSS.supports('background','mask-border-slice') 'n' 
CSS.supports('background','mask-border-width') 'n' 
CSS.supports('background','mask-border-outset') 'n' 
CSS.supports('background','mask-border-repeat') 'n' 
CSS.supports('background','mask-border') 'n' 
CSS.supports('background','mask-type') 'n' 
CSS.supports('background','mask') 'n' 

CSS.supports('background','-webkit-clip-path') 'n' 
CSS.supports('background','-webkit-clip-rule') 'n' 
CSS.supports('background','-webkit-mask-image') 'n' 
CSS.supports('background','-webkit-mask-mode') 'n' 
CSS.supports('background','-webkit-mask-repeat') 'n' 
CSS.supports('background','-webkit-mask-position') 'n' 
CSS.supports('background','-webkit-mask-clip') 'n' 
CSS.supports('background','-webkit-mask-origin') 'n' 
CSS.supports('background','-webkit-mask-size') 'n' 
CSS.supports('background','-webkit-mask-composite') 'n' 
CSS.supports('background','-webkit-mask-border-source') 'n' 
CSS.supports('background','-webkit-mask-border-mode') 'n' 
CSS.supports('background','-webkit-mask-border-slice') 'n' 
CSS.supports('background','-webkit-mask-border-width') 'n' 
CSS.supports('background','-webkit-mask-border-outset') 'n' 
CSS.supports('background','-webkit-mask-border-repeat') 'n' 
CSS.supports('background','-webkit-mask-border') 'n' 
CSS.supports('background','-webkit-mask-type') 'n' 
CSS.supports('background','-webkit-mask')
);

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

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

2. @MikeW Я понимаю и выступаю за префиксы, но спасибо.

3. Существуют ли какие-либо префиксы, отличные от -khtml- и -webkit- даже для CSS масок? Я никогда не слышал о каком-либо другом движке, реализующем их — CSS маски долгое время были собственностью WebKit, прежде чем, наконец, были предложены в качестве стандарта.

4. Для решения с автоматическим добавлением префиксов я настоятельно рекомендую Lea Verou’s -prefix-free , хотя оно основано на JavaScript, оно имеет доступ к знаниям браузера о префиксах и, следовательно, может обрабатывать все случаи автоматически, без необходимости что-либо жестко кодировать.

5. Модуль маскирования говорит, что маскирующие свойства на самом деле являются свойствами, хотя я не уверен, как WebKit решил реализовать их до их стандартизации (зная WebKit, он, безусловно, мог бы реализовать их как значения background ).