CSS Conditional Rules

[M1nstrel]

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

[bolk]

Писать всё два раза? Ужасно, по-моему. Мне бы подошло что-то вроде:

@try {
    h1 { 
        font-size: calc(10px+50%);
        border-radius: 10px;
    }
    
    @catch (font-size) { /* ловим только ошибки с font-size */
         h1 {
                  font-size: 12em;
         }
    }

    @catch { /* ловятся все ошибки */
           h1 {
                 border: 0;
           }
  }

[weiss]

Я написал 2 раза, чтобы показать еще и not. Понятно, что написать можно так:

h1 {
    font-size: 26px;
}
@supports (font-size: calc(1rem + 12px)) {
    h1 {
        font-size: calc(1rem + 12px);
    }
}

Получится, что в браузерах, поддерживающих это всё, свойство переопределится.

[bolk]

Да нет. Я о том, что здесь приходится писать «font-size: calc(1rem + 12px)» два раза.

[bolk]

Или вот так ещё можно: http://bolknote.ru/2011/09/07/~3394/.

[weiss]

для данного примера приоритет одинаковый, обработка просто идёт слева направо

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

[Zverik]

Жаль, что нынешние браузеры не поддерживают @supports not (@supports)

[weiss]

Этот блок не будет выполняться даже там, где calc() поддерживается. В контексте Media Queries тот же width с префиксами max/min есть media features и, насколько я понимаю, calc() в media features не работает, да и не должен.

[weiss]

Да, уже нашел этого после того, как написал. Впрочем, у меня это ни в одном браузере не работает.