Прогрессивное улучшение с помощью коробки

Question

Я хотел бы использовать свойство CSS от Webkit-Shadow для небольшого раскрытия. Код будет выглядеть как:

.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-Shox. Я хотел бы избежать нюхания браузера, потому что я предполагаю, что трудно покрыть все чехлы. Какой самый простой способ сделать это? Я предпочитаю решение без JavaScript, но я тоже рассмотрю простые JavaScript.

Answer 1

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;
}

Вы должны включить библиотеку Modernizr JavaScript для работы.

Answer 2

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

.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 - проход (серая линия 1PX)
• Firefox 3.0 - неудача
• Firefox 3.5 - Pass (Shadow)
• Internet Explorer 6.0 - Pass (Grey 1px line)
• Internet Explorer 7.0 - Pass (Grey 1px line)
• Internet Explorer 8.0 - Pass (Grey 1px line)
• Safari 3.0 - Pass (Shadow)
• Safari 4.0 - Pass (Shadow)
• Chrome 3.0 - Pass (Shadow)
• Opera 10 - Fail

Answer 3

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

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

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

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

Answer 4

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

Либо, т.е. условные комментарии (потому что я думаю, что только IE не поддерживают какую-то версию The Box-Shadow сейчас ..) или CSS Hacks ..