CSS 해킹

CSS 해킹은 브라우저, 버전 번호 또는 기능에 따라 CSS 마크업을 숨기거나 표시하기 위해 사용되는 코딩 기법이다.브라우저는 CSS 행동에 대한 해석이 다르고 W3C 표준에 대한 지원 수준이 다르다.CSS 해킹은 호환되는 렌더링이 없는 여러 브라우저에서 일관된 레이아웃 외관을 얻기 위해 사용되기도 한다.이러한 해킹의 대부분은 브라우저의 현대 버전에서는 작동하지 않으며, 기능 지원 감지 등의 다른 기법이 더욱 널리 보급되고 있다.

해킹 유형

유효하지 않거나 비준수 CSS

다양한 브라우저에 의한 CSS 해석의 기발함 때문에, 대부분의 CSS 해킹은 특정 브라우저에 의해서만 해석되는 잘못된 CSS 규칙을 쓰거나, 특정 브라우저의 버그에 의존하는 것을 포함한다.예를 들어 다음과 같이 밑줄을 사용하여 규칙 접두사를 지정한다._width)를 대상으로 하는 Internet Explorer 6—다른 브라우저들은 이 줄을 무시하여 한 브라우저에 특정 코드를 쓰는 데 사용할 수 있다.

지원되지 않는 CSS

비록 새로운 CSS 규칙이 현재 표준에 의해 정확하지만, 그것들은 구형 브라우저에 의해 "잘못된" 것으로 무시된다.기존 규칙을 취소하거나 수정하는 새로운 규칙에 따라 이전 규칙을 작성하면 이전 브라우저에서 특정 규칙만 활성화할 수 있다.

조건부 주석

버전 10 이전에 Internet Explorer는 HTML의 블록을 브라우저의 특정 버전에서만 읽을 수 있는 특별한 주석 구문을 지원했다.이러한 의견은 대부분 이전 버전의 브라우저에 특정 CSS 및 JavaScript 해결 방법을 제공하는 데 사용된다.어떤 브라우저도 이러한 의견을 해석하거나 유사한 기능을 제공하지 않았다.

다음은 이러한 의견에 대한 다른 구문의 예들이다.

<머리> <머리>Test</title> <link href="all_browsers.css" rel="stylesheet" type="text/css"> <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]> <![무시[--][!]무시[]> <링크 href="recent.css" el="스타일시트" type="text/css"><!--<![endif]--><![iff!]!IE]--><링크 href="not_ie.css" el="스타일시트" type="text/css"><!--<![endif]--> </head>

비평가

해킹을 이용해 코드를 숨기면 브라우저가 업데이트될 때 페이지가 잘못 표시되는 경우가 많다.이러한 해킹은 이전 브라우저와 다르게 해석할 수 있는 새로운 브라우저에서 예상치 못한 행동을 유발할 수 있다.인터넷 익스플로러 6과 7은 사용이 중단된 이후 CSS 해킹도 줄어들었다.현대적인 특징 타겟팅 방법은 덜 연약하고 오류가 발생하기 쉽다.

대안

브라우저 접두사

가장 인기 있는 각 브라우저 렌더링 엔진에는 실험용 특성을 위한 자체 벤더 접두사가 있다.그러나 이러한 속성이 라이브 코드로 확산됨에 따라 브라우저 공급업체는 기능 플래그를 선호하여 이로부터 벗어나기 시작했다.^[1]

접두사 목록

다음은 다양한 레이아웃 엔진의 접두사 목록이다.

예

/* 크로스 브라우저 css3 선형 그라데이션 */ .선형의 {    /* Gecko 브라우저(Firefox) */   배경 이미지: -210-선형의(맨 위의, #D7D 0%, #068 100%);    /* 오페라 */   배경 이미지: -o-선형의(맨 위의, #D7D 0%, #068 100%);    /* 이전 Webkit 구문 */   배경 이미지: -웹킷-구배(일직선의, 남겨진 맨 위의, 남겨진 밑바닥의,     색을 칠하다-그만(0, #D7D), 컬러 스톱(1, #068));    /* 웹킷(Safari, Chrome, iOS, Android) */   배경 이미지: -웹킷-선형의(맨 위의, #D7D 0%, #068 100%);    /* W3C */   배경 이미지: 선형의(로 밑바닥의, #D7D 0%, #068 100%);  } 

한계

벤더 접두사는 개발 중인 기능에 맞게 설계되었으며, 이는 구문이 최종적이지 않을 수도 있다는 것을 의미한다.또한, 각 브라우저의 기능 구현에 대한 규칙을 추가하는 것은 많은 브라우저를 지원하고자 할 때 잘 확장되지 않는다.결과적으로, 주요 브라우저 공급업체들은 다음과 같은 다른 방법을 선호하여 공급업체 접두사로부터 멀어지고 있다.@supports특집 질의

피쳐 삭제

JavaScript 기능 탐지

특정 브라우저에서 사용할 수 있는 기능을 감지하여 CSS 규칙을 대상으로 작성할 수 있도록 하기 위해 여러 JavaScript 라이브러리가 존재한다.Modernizr와 같은 라이브러리는 에 클래스를 추가한다.html요소, 다음과 같은 CSS 규칙 허용.cssgradients .header.

기능 쿼리

기능 쿼리로 알려진 새로운 기능이 CSS3에 도입되어 CSS 내에서 특정 기능을 탐지할 수 있게 되었다(기능 탐지에 자바스크립트 라이브러리를 사용할 필요 없음).이 새로운 지시는 특정 기능에 대한 지원 또는 지원 부족을 확인하는 데 사용할 수 있으며, 체크는 다음과 결합될 수 있다.and,or그리고not. 분명히,@supports규칙은 지원하는 브라우저에서만 작동함@supports.

머리글 {     전시하다: 막다; }  @지지하다 (전시하다: 플렉스박스) {     머리글 {         전시하다: 플렉스박스;     } } 

대본 폴리필

JavaScript 기능 검색 중@supports규칙은 예비 기능이 필요한 브라우저를 대상으로 할 수 있지만 특정 브라우저에서 버그를 다루거나 고급 기능을 활성화하지 않는다.모든 브라우저에서 동작을 일관성 있게 만드는 스크립트인 폴리필드는 특정 브라우저의 버그를 수정하는 것뿐만 아니라 새로운 CSS 규칙(예를 들어 IE 8의 미디어 쿼리)에 대한 지원을 추가하는 데 사용될 수 있다.폴리필은 기능이 없는 브라우저에서 기능을 추가하거나 수정하기 때문에 기능 쿼리와는 다른 용도로 사용되지만, 그것과 결합하여 사용할 수 있다.

• 웹 브라우저 엔진 비교(CSS 지원)
• 조건부 주석

참조

외부 링크

• 브라우저 이상성 – Jeff Clayton의 Live CSS 해킹 및 테스트로 알려진 유일한 Safari 7 및 8용 CSS 해킹을 포함하여 메인스트림 브라우저용 필터링
• browserhacks.com – 다중 브라우저 필터 방법 및 테스트(Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
• Safari/Webkit(웹 키트) 접두사 필터 리픽스 필터]
• Mozilla(moz) 접두사 필터
• 오페라(wap) 접두사 필터 – 이 페이지에는 오페라의 모든 CSS 선택기가 있다.
• CSS 필터 – 특정 브라우저에서 규칙을 표시하고 숨기는 상당히 완전한 CSS 해킹 표.
• 필터 및 크로스오버 – CSS 필터구문 분석 오류는 빨간색으로 표시됨.
• – CSS Browser Selector – 브라우저별 CSS를 단일 스타일시트로 결합할 수 있음(JavaScript 사용).
• – #IEROOT – 모든 CSS를 포함하는 단일 스타일시트로 IE 타겟팅(JavaScript를 사용하지 않고 조건부 주석을 사용하여 임의 컨텐츠 루트[div]에 브라우저별 태그를 할당)