Detect поддержку CSS собственности с CSS только

Question

Короткий вопрос

Использование только CSS, как я могу определить, что background-size свойство поддерживается? Если он не поддерживается, я хотел бы предоставить некоторый резервный CSS. Я уже знаю, как это сделать с Javascript, но он чище с CSS.

Длинный вопрос

У меня есть спрайт изображения с высоким разрешением, что нужно, чтобы хорошо выглядеть на всех мобильных телефонах, независимо от его точной плотности пикселей. Используя background-size trick, я могу масштабировать спрайт соответствующим образом.

.sprite { 
    background-image: url(sprite180x76.png); 
    /* 180/2 = 90 */ 
    background-size: 90px auto; 
} 

Есть некоторые IOS и версии Android, которые don't support the background-size property, так что спрайт будет выглядеть в два раза больше, как это должно быть. Для этих старых систем, я хотел бы загрузить с низким разрешением спрайт без фона масштабирования:

/* fake CSS */ 
@notSupported(background-size) 
    .sprite { 
     background-image: url(sprite90x38.png); 
    } 
} 

Answer 1

CSS не имеет условных операторов, как это не язык программирования, как JavaScript. Хотя, я считаю, что в CSS для CSS может быть какой-то условный оператор.

Вам придется полагаться на JavaScript, чтобы получить какой-либо условный тестовый пример для CSS.

Смысл, вы не можете напрямую обнаружить поддержку CSS.

Однако CSS имеет «трюк» благодаря своей «каскадной» природе, но он может использоваться только при поиске старого кода с более новым кодом для того же стиля.

Это звучит смешно, вот несколько примеров:

-moz-border-radius: 6px; 
-o-border-radius: 6px; 
-webkit-border-radius: 6px; 
-ms-border-radius: 6px; 
border-radius: 6px; 

В браузерах, поддерживающих официальный CSS, это будет стиль, как обозначено на линии 5. В то время как в более ранних версиях говорить Firefox, строка 1 будут применены, а строка 2-5 будет проигнорирована, потому что они неизвестны.

Другой (и, возможно, лучше) примером может быть:

background-color: #AAA; 
background-color: rgba(0, 0, 0, 0.5); 

Этот код даст фону серый цвет, в то время как новые браузеры даст черный цвет с прозрачностью 50%, отменяя старый цвет ,

Надеюсь, что поможет немного.

Cheers!

- Обновление -

Я только что пришел через что-то, что могло бы помочь. В книге Аарона Густафсона «Адаптивный веб-дизайн» он упоминает, как CSS игнорирует все правило, если данный браузер/рендерер не поддерживает данный селектор.

С выше концепции, если вы можете найти селектор, который не был реализован в старой версии, но доступна в новой версии вы могли бы сделать что-то вроде этого:

/* fake CSS */ 
.sprite { 
    background-image: url(sprite90x38.png); 
} 

[[ selector that is supported by newer browser/OS ]], 
.sprite { 
    background-image: url(sprite180x76.png); 
    /* 180/2 = 90 */ 
    background-size: 90px auto; 
} 

Идея заключается в том, что для «старые» браузеры вы можете загрузить старый PNG, но для нового браузера он загрузит большую PNG и применит размер фона.

Единственное, что меня беспокоит, - это то, что поддерживающие браузеры загружают оба изображения, но применяют один.

И все же требуется найти неподдерживаемый селектор в одной версии другого. Quicksmode.com может помочь вам найти один:

http://www.quirksmode.org/css/contents.html

- ОБНОВЛЕНИЕ 2 -

Я положил это в комментариях, но я добавлю это здесь, как это могло бы помочь. Я потратил некоторое время, пытаясь выяснить, какая версия браузера iOS 3.1.3 поддерживается, и для чего можно использовать селекторы с вышеупомянутым трюком.

Что я нашел этот сайт разработчиков Apple: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html

Если вы делаете поиск страницы (Ctr + F) для фона размера, это показывает, что IOS 1+ поддерживает собственную версию под названием:

-webkit-background-size: length 
-webkit-background-size: length_x length_y 

Это может быть возможным решением. Если вы добавите это до реального, вы сможете обеспечить обратную совместимость.

-webkit-background-size: length 
background-size: length 

Надеется, что помогает найти альтернативные решения, поскольку оригинальный вопрос делать условный тест, чтобы увидеть, если правило поддерживаются не представляется возможным в CSS прямо сейчас.

Answer 2

Вы не можете (сейчас) обнаружить поддержку свойства А и, учитывая или не эта поддержка, служат различные значения для свойства B только с помощью CSS ...

... кроме того, если поддержка браузера для свойства A и B точно такие же! Затем следующие инструкции:

selector { 
    propertyA: valueA; 
    propertyB: valueB; 
} 

оба потерпят неудачу или оба успеха.

Оставшаяся проблемой является найти свойство CSS, который имеет ту же самую поддержку, чем background-size :)
Я думал о multi-background: он должен (не) работать в IE6/7/8 согласно CSS Background Properties support in Standardista, но я не может тестироваться в iOS и Android, только в bada/Dolfin 2.0 (Samsung Wave, также на основе Webkit).

Вот Fiddle: http://jsfiddle.net/PhilippeVay/2VaWu/ , который показывает пункт только с простым фоном, что любой браузер должен отображать, а затем другой пункт как с простым фоном и (*) мульти-фон с измененным размером с background-size, которые должны отображаться только современные браузеры (старые браузеры должны иметь тот же фон, что и для первого абзаца). Fx9 и dolfin 2.0 оба правильно отображают второй абзац. IE8, как и ожидалось, не работает.

Другим решением было бы использовать селектор, понятный браузерами, которые также понимают background-size, но не поняты другими. Хотя IE более легко найти, чем для смартфонов на базе Webkit!

(*) используя другое правило CSS с более высокой специфичностью, с целью демонстрации. В реальном мире будет только одно правило с простым фоном, определенным перед множественным фоном.