Удалить стиль, если поддержка CSS3

Question

Можно ли удалить стиль в случае, если в браузере используются элементы CSS 3 (тени, скругленные углы и т. Д.)? Например:

.fancy
{
  /* only display if no drop shadow support */
  border: thin solid #888;

  box-shadow: 0px 1px 4px #888;
  -webkit-box-shadow: 0px 1px 4px #888;
  -moz-box-shadow: 0px 1px 4px #888;
}

Answer 1

Лучше, если вы не удаляете правила стиля, а применяете их только при включенном CSS3. Вы можете использовать этот необычный кусок Javascript для этого, называемый Modernizr .

Позвольте привести вам краткий пример того, как вы можете использовать его в своей таблице стилей:

.boxshadow .fancy {
    border: thin solid #888;

    box-shadow: 0px 1px 4px #888;
    -webkit-box-shadow: 0px 1px 4px #888;
    -moz-box-shadow: 0px 1px 4px #888;
}

Modernizr добавляет классы к элементу HTML, который сообщает вам, какие функции браузера включены.

Answer 2

CSS не делает условных выражений.В любой версии.

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

Answer 3

Один из способов - хотя, учитывая неоднозначный характер принятия / реализации CSS, который может / не будет работать исчерпывающе, - это использовать:

.fancy
{
  border: thin solid #888;
}

.fancy:nth-of-type(odd), .fancy:nth-of-type(even)
{
   border: 0 none transparent;
   box-shadow: 0px 1px 4px #888;
   -webkit-box-shadow: 0px 1px 4px #888;
   -moz-box-shadow: 0px 1px 4px #888;
}

Это немного грязно, так как селектор должен явно указывать все элементы odd и even .fancy, я бы предпочел более аккуратное решение, но оно работает (конечно, в Chrome / Linux). Демо в: http://jsbin.com/ezako3

Answer 4

Поскольку CSS3 является разметкой стиля, а не языком программирования, вы не можете делать истинное «если-еще» - однако вы можете разработать свои стили CSS3 так, чтобы они переопределяли стили CSS2, и конечным результатом будет CSS3, где поддерживается с CSS2 как запасной вариант.

Однако с точки зрения практичности этот подход, вероятно, будет более болезненным, чем динамическое обслуживание таблиц стилей CSS3 для поддерживаемых браузеров.