Box-Shadow로 진보적 인 향상

StackOverflow https://stackoverflow.com/questions/2044806

문제

Little 드롭 다운에 WebKit의 Box-Shadow CSS 속성을 사용하고 싶습니다. 코드는 다음과 같습니다.

.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 기반 솔루션도 고려할 것입니다.

도움이 되었습니까?

해결책

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 라이브러리를 포함해야합니다.

다른 팁

이것은 다루지 않습니다 모두 시나리오, 그리고 나는 그것이 오페라에서 실패한다고 생각하지만, 나는 이것을 할 것입니다.

.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- 실패
  • Firefox 3.5 -Pass (Shadow)
  • Internet Explorer 6.0- 패스 (회색 1px 라인)
  • Internet Explorer 7.0- 패스 (회색 1px 라인)
  • Internet Explorer 8.0- 패스 (회색 1px 라인)
  • 사파리 3.0- 패스 (그림자)
  • 사파리 4.0- 패스 (그림자)
  • Chrome 3.0 -Pass (Shadow)
  • 오페라 10- 실패

Gaby가 말한 내용을 세우는 것은이를 달성 할 수있는 좋은 방법이 없을뿐만 아니라 진보적 인 향상의 아이디어에 위배됩니다.

고려해야 할 몇 가지 이유가 있습니다 ~ 아니다 당신이 제안하는 일을하기 :

  1. 이러한 경계는 적절한 상자 모델이있는 브라우저에서 요소에 너비를 더합니다. 이는 추가 너비를 계획하지 않으면 부동 요소가 새 라인에 부딪 치는 것과 같은 문제를 일으킬 수 있습니다.
  2. 진보적 인 향상은 부가적인 방식으로 구축하는 것입니다. "대체"조건부 스타일을 만드는 것은 유지 보수를위한 두통을 초대하는 것입니다.
  3. 매력적인 국경 스타일을 선택하면 실제로 보일 수 있습니다. 더 나은 그림자가있을 때. 나는 많은 프로젝트에서 그것이 사실이라는 것을 알았습니다. 그림자는 실제로 국경을 매력적인 방식으로 돋보이게 만듭니다.

잘만되면 그것은 도움이됩니다.

각 브라우저에 특정 트릭을 사용하지 않고 쉽게 수행 할 수있는 방법은 없습니다 ...

IE 조건부 의견 (IES 만 현재 Box Shadow의 일부 버전을 지원하지 않기 때문에 ..) 또는 CSS 해킹 ..

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top