weiss Oct 9 2012 at 08:04

CSS Conditional Rules

3 min

16K

Website development *CSS *

Recovery mode

+18

Comments 22

M1nstrel Oct 9 2012 at 08:39

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

bolk Oct 9 2012 at 14:28

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

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

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

weiss Oct 9 2012 at 14:35

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

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

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

bolk Oct 9 2012 at 15:43

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