허용 가능한 CSS 해킹/수정
https://stackoverflow.com/questions/504261
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
'좋은'클린 CSS 해킹 목록이 있습니까?
예를 들어, zoom:1 IE에만 제공되는 한 안전하고, 당신은 그것이 거기에 있다는 것을 기억합니다. 자식 선택기 사용의 매우 일반적인 해킹은 다음과 같습니다 ~ 아니다 IE7이 지원하기 때문에 안전합니다. 사용 height:1% 그냥 더러워졌습니다 (그러나 그것은 단지 나일 수도 있습니다).
나는 알고있다 IE7-JS, 따라서 IE6 버그는 나를 걱정하지 않습니다. 또한 나는 종교적 논쟁을 찾고있는 것이 아니라 단지 출처를 찾고 있습니다.
답변에 감사드립니다 - 나는 최고의 소스를 가진 사람을 답으로 선택했습니다.
별도의 CSS 파일을 사용하거나 걱정하지 않는 제안에 감사드립니다. 나는 전적으로 당신에게 동의합니다. 그러나 레이아웃 문제에 직면했을 때, 나는 $ IE 또는 $ FF +에서 문제를 다시 방문해야 할 위험을 최소화 할 수있는 안전한 수정을 원합니다. 죄송합니다. 죄송합니다.
해결책
이곳은 잘 문서화되고 잘 테스트 된 브라우저 버그를위한 좋은 장소이며 해킹을 통해 주변에서 작업 할 수 있습니다.
다른 팁
대부분의 IE 버그를 위해 나는 당신이 사용하는 것이 가장 좋다고 생각합니다. 조건부 의견 브라우저 특정 스타일 시트에 대한 링크 주변. 그것은 물건을 꽤 깔끔하게 유지하는 경향이 있으며 그것은 꽤 자기 문서화입니다.
니콜 설리반 (일명 stubbornella) 제안 된 Yahoo Performance 팀에서 일하는 사람 뛰어난 성능을위한 7 가지 습관 CSS 밑줄을 사용하여 해킹을 사용하여 IE6 버그를 패치해야합니다.
- 해킹은 거의 없어야합니다.
- 5-6 개의 해킹 만 있으면 (이미 많은 해킹) 외부 파일에 배치하여 컨텍스트에서 분리하는 것은 의미가 없습니다.
- 추가 파일은 성능 처벌로 이어질 것입니다 (야후 모범 사례, 규칙 1).
그러나 이것은 유효한 CS가 아닙니다.
깨끗하고 수용 가능한 좋은 [CSS] 해킹과 같은 것은 없습니다. 항상 표준으로 코드를 코드 한 다음 브라우저+버전 특정 스타일 시트를 사용하여 작업을 수행하는 데 필요한 해킹에 사용됩니다.
예를 들어:default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
등
그런 다음 새 버전의 브라우저가 릴리스되면 이전 버전의 해킹을 복사하고 더 이상 적용되지 않는 비트를 제거합니다 (필요한 경우 새 비트를 추가하십시오).
(IE에 대한 조건부 주석을 사용하여 개별 스타일 시트를로드하고 다른 브라우저에 대한 사용자 에이전트 스니핑.)
IE6-Stuff의 밑줄은 예를 들어 매우 잘 작동합니다.
min-height:50px;
_height:50px;
맥락에서 새로운 CSS 파일로 옮길 필요는 없으며 IE6만으로도 IE6 지원을 중지하기로 결정한 경우 필터를 쉽게 걸러 낼 수 있습니다. 그들은 또한 매우 최소화되어 있으며 CSS를 많이 혼란스럽게하지 않습니다.
브라우저 별 지원을 위해 CSS를 수정하는 것은 쉽게 포함 할 수있는 한 결코 잘못된 것이 아닙니다. 알다시피, 표준 호환 브라우저, * 기침 * 모든 것 제외하고 MSIE, 미래의 릴리스와 절대로 깨지 않을 것입니다. 새로운 W3C 표준은 또한 이전 표준을 위반하지 않으며, 일반적으로 이전 표준을 가장 이상 사용하거나 확장합니다.
사람들은 IE를 처리하기에 좋은 조건부 의견을 언급했습니다. 그러나 모든 브라우저 (모바일, 도마뱀, 웹 키트, 오페라 등)를 처리하려면 조금 더 필요합니다. 일반적으로 수신 요청 헤더를 구문 분석하여 사용자 에이전트 매개 변수에서 브라우저 유형과 버전을 가져옵니다. 이에 따라 CSS 파일로드를 시작할 수 있습니다.
나는 우리 대부분이하는 방식이 다음과 같습니다.
- 하나의 표준 호환 브라우저를위한 첫 번째 개발 (예 : FF를 예로 들어 보자)
- CSS가 완료되면 IE에 대한 Providig 지원에 접근합니다 (이것은 관대하게 언급 된대로 조건부 의견으로 쉽게 수행 할 수 있습니다).
- 먼저 IE6 및 아래의 다른 버전에 대한 모든 것을 미세 조정하는 CSS 파일을 만듭니다.
- 그런 다음 IE7의 모든 것을 처리 할 CSS 파일을 만듭니다.
- 마지막으로, IE 버전의 IE8 이상을 처리 할 CSS 파일을 만듭니다.
- IE9가 나오면 IE8+ 처리를 IE8 특정으로 설정하고 필요한 수정 사항이있는 IE9+ CSS 파일을 작성하십시오.
- 마지막으로 WebKit 수정에 대한 추가 CSS 파일을 만듭니다.
- 필요한 경우 필요한 경우 크롬 또는 사파리를 구체적으로 대상으로 추가 파일을 만들 수도 있습니다.
브라우저 특정 CSS 구현과 관련하여 일반적으로 기본 CSS 파일에있는 모든 것을 그룹화합니다 (필요한 경우 그 문서를 쉽게 검색하고 하나의 문서로 교체 할 수 있습니다). 따라서 무언가가 투명해야한다면, 나는 불투명도와 필터 (MSIE)를 동일한 블록에 설정했습니다. 브라우저는 지원하지 않는 구현을 무시하므로 안전합니다. 내가 피하는 경향이있는 특정 구현은 사용자 정의 구현입니다 (이봐, 나는 W3C 위의 -moz 상자를 좋아하지만 그것에 의존하고 싶지는 않습니다).
CSS 상속 및 재정의와 함께 진행되면 모든 CSS 파일에서 모든 CSS 선언 및 정의를 재정의 할 필요는 없습니다. 연속으로로드 된 각 CSS 파일은해야합니다 뿐 수정에 필요한 선택기 및 특정 정의를 포함하십시오.
결국 당신이 끝나는 것은 특정 브라우저 수정을 위해 각각 몇 줄을 포함하는 (거대한) 기본 CSS 파일과 다른 사람들입니다. 기본 CSS 파일을 기반으로하는 브라우저는 개인 선호도이지만 일반적으로 다른 브라우저에 대해 최소한의 문제를 생성하는 브라우저를 타겟팅 할 것입니다 (예, IE6을 위해 개발하는 것은 그 결정이 매우 좋지 않을 것입니다. 가리키다).
항상 그렇듯이 모범 사례를 따르고 각 클래스에 대한 셀렉터 및 세부 사항과 프레임 워크 사용에 대한 세부 사항을 통해 실용적이고 세심한 것은 거의 필요한 수정 사항으로 선의의 경로를 이끌어냅니다. CSS 파일을 구조화하는 것은 무의미한 무의미한 혼란으로 끝나고 싶지 않다면 큰 장점입니다.
중심 CSS 해킹과 호환성의 좋은 목록이 있습니다.
다음은 다음에 어떤 바보 같은 일이 구현 될지 알 수 있기 때문에 미래의 증거가 될 핵 목록을 찾을 수 없다고 생각합니다.
이 기사는 CSS 해킹에 대한 좋은 요약입니다. http://www.webdevout.net/css-hacks
여기에 있습니다 좋은 목록 매우 안정적 인 필터의 :
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
@media,
{
.dude { color: silver;}
}
/* IE8 \0 */
@media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
@media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
@-moz-document url-prefix()
{
.dude { color: green; }
}
규칙을 정의 할 때, 예를 들어 CSS3에는 자연 저하가 발생할 수있게하는 것이 좋습니다. RGBA 컬러 모델에 대한 지원이 있지만 CSS2에는 없습니다.
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
따라서 이후 규칙이 지원하지 않는 이전 브라우저에서 실패하면 이전에 정의 된 스타일로 저하됩니다.
나는 선호한다 글로벌 조건부 의견 Hiroki Chalfant가 기술 한 기술;
IE- 표적화 된 규칙을 단일 유효한 스타일 시트로 표준 표적화 규칙과 함께 나란히 유지하는 것이 도움이된다고 생각합니다.
