Определить поддержку свойства CSS только с помощью CSS - PullRequest
Новая
       1

Определить поддержку свойства CSS только с помощью CSS

4 голосов
/ 10 января 2012

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

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

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

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

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

В некоторых версиях iOS и Android не поддерживает свойство background-size , поэтому спрайт будет выглядеть в два раза больше, чем должно быть. Для этих старых систем я хотел бы загрузить спрайт с низким разрешением без масштабирования фона: 

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

Ответы [ 2 ]

3 голосов
/ 11 января 2012

CSS не имеет условных операторов, так как это не язык программирования, как Javascript. Хотя я полагаю, что в работах для 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%, переопределяя старый цвет.

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

Ура!

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

Я только что наткнулся на то, что могло бы помочь. В книге Аарона Густафсона «Адаптивный веб-дизайн» он упоминает, как 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 сейчас невозможен.

0 голосов
/ 11 января 2012

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

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

selector {
    propertyA: valueA;
    propertyB: valueB;
}

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

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

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

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

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

...