Использование modernizr с классами CSS, которые используют более одного стиля CSS3? - PullRequest
Новая
       16

Использование modernizr с классами CSS, которые используют более одного стиля CSS3?

0 голосов
/ 22 мая 2011

Я использую modernizr для создания альтернативных стилей для браузеров, которые не поддерживают css3. Это прекрасно работает, но я не нашел решения с классами CSS, которые используют более одного стиля CSS3.

Пример 1: 

div.button {
box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
border-radius: 5px; /* second css3 style */
}

/* fallback for browsers that don't support css3 */
.no-borderradius div.button {
background: transparent url(my-button.png) left top;
}

Проблема здесь в том, что если браузер поддерживает box-shadow, но не поддерживает border-radius, вы столкнетесь с проблемами. В этом случае обе кнопки будут использовать box-shadow, игнорируя border-radius и , применяя класс no-borderradius с фоновым изображением. Я мог бы решить это, создав два запасных варианта.

Пример 2: 

  div.button {
    box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
    border-radius: 5px; /* second css3 style */
    }

    /* fallback for browsers that don't support css3 */
    .no-borderradius div.button, .no-boxshadow div.button /* no-boxshadow added */  {
    background: transparent url(my-button.png) left top;
    }

Проблема здесь в том, что если браузер не поддерживает border-radius и box-shadow, то оба стиля будут использоваться для стилизации элемента, я не могу не думать, что это может вызвать проблемы?

Ответы [ 2 ]

1 голос
/ 22 мая 2011

Modernizr добавляет классы к элементу html (см. Как Modernizr работает в документации) на основе результатов его тестирования.Это означает, что элемент имеет все эти классы, и вы можете просто объединить несколько селекторов классов, чтобы сузить выбор.

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

Попробуйте вместо этого использовать этот селектор: 

.no-borderradius.no-boxshadow div.button {
    background: transparent url(my-button.png) left top;
}

Что касается вашего комментария, IE6 не поддерживает обаВ любом случае свойства border-radius и box-shadow, поэтому это не должно иметь значения.Это правило будет по-прежнему применяться, поскольку оно читает селектор как .no-boxshadow div.button.См. Мой ответ на этот вопрос для иллюстрации.

0 голосов
/ 22 мая 2011

CSS будет работать, так как браузеры, поддерживающие box-shadow, также поддерживают border-radius [1] . 

.no-boxshadow div.button { background:transparent url(btn.png) 0 0; }
.boxshadow div.button { border-radius:5px; box-shadow:inset 1px 1px 2px #ccc; }
...