Прогрессивное улучшение с box-shadow - PullRequest
Новая
       30

Прогрессивное улучшение с box-shadow

2 голосов
/ 11 января 2010

Я хотел бы использовать свойство box-shadow css WebKit для небольшого раскрывающегося списка. Код будет выглядеть так: 

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

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

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}

Проблема в том, что я не хочу, чтобы тень на основе границ отображалась для браузеров, которые поддерживают box-shadow. Я хотел бы избежать перехвата браузера, потому что я предполагаю, что трудно охватить все случаи. Какой самый простой способ сделать это? Я предпочитаю решение без javascript, но я рассмотрю и простые, основанные на javascript.

Ответы [ 4 ]

4 голосов
/ 11 марта 2010

Modernizr делает функцию обнаружения. Код будет: 

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}
.boxshadow .drop_down{
  border: 0px none;
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

Вам нужно включить библиотеку javascript modernizr, чтобы это работало

3 голосов
/ 12 января 2010

Если исходить из того, что сказал Габи, то не только нет хорошего способа сделать это, но и против идеи прогрессивного улучшения.

Вот несколько причин, по которым не делает то, что вы предлагаете:

  1. Эти границы добавят ширину вашему элементу в любом браузере, который имеет правильную блочную модель. Это может вызвать проблемы, такие как всплывающие элементы, врезавшиеся в новые строки, если вы не планируете добавленную ширину.
  2. Прогрессивное улучшение - это наращивание аддитивным способом. Создание «альтернативных» условных стилей вызывает головную боль для обслуживания.
  3. Если вы выберете привлекательные стили границ, на самом деле они могут выглядеть лучше в тени. Я обнаружил, что это правда во многих проектах. Тень действительно выделяет границу привлекательным образом.

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

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

Это не будет охватывать все сценарии, и я думаю, что это не работает в Opera, но я бы сделал это: 

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  -moz-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
  border: solid 1px #bbb;
  border: solid 0px rgba(0,0,0,0); /* Ignored by browsers that don't support it */
}

Результаты испытаний

Очевидно, rgba был представлен в Firefox 3.0, но -moz-box-shadow был введен в 3.5. Итак, Firefox 3.0 не проходит тест. Вот где мы находимся пока:

Тестовая страница

  • Firefox 2.0 - Pass (серая линия 1px)
  • Firefox 3.0 - Fail
  • Firefox 3.5 - Pass (Shadow)
  • Internet Explorer 6.0 - Pass (серая линия 1px)
  • Internet Explorer 7.0 - Pass (серая линия 1px)
  • Internet Explorer 8.0 - Pass (серая линия 1px)
  • Safari 3.0 - Pass (Shadow)
  • Safari 4.0 - Pass (Shadow)
  • Chrome 3.0 - Pass (Shadow)
  • Opera 10 - Fail
1 голос
/ 11 января 2010

Нет простого способа сделать это без использования специальных трюков для каждого браузера ...

либо условные комментарии IE (потому что я думаю, что только IE не поддерживают некоторую версию box-shadow сейчас ..), либо css-хаки

...