CSS 해커를 지원하는 기술

CSS표 해커하면 IE표 6표, 반박 7표 시대를 떠올리는 사람도 있을 것 같다.그러나 CSS ⇔哈克은 현대에도 확실히 존재한다. 내가 한가할 때 捞CSS 捞哈克을 찾고 있다.
또한 지금까지 발견된'栂CSSハハ'의 오픈 원본 코드를 공개했다.모처럼의 기회인 만큼'CSS 태클 해커'를 어떻게 찾아낼 수 있는지 소개하고 싶다.
https://github.com/takamoso/css-hacks

CSS 해커

그 전에 CSS 해커가 뭔지 간단히 설명해 드리겠습니다.CSS 페이 해커란 CSS 페이가 특정 브라우저나 특정 버전에만 적용되는 기술로 브라우저 고유의 오류 수정 등에 주로 사용된다.
최근 사파리와 알려진'사파리'와'어린 왕자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자','어린 남자'.가능한 한 'CSS 반박 해커' 를 사용하지 않는 것이 좋겠지만, 어쨌든 도움이 될 것이다.

CSS 해커 조직

CSS 해커는 몇 가지 유형이 있습니다.

CSS 파서의 버그

CSS 박파사에 반작용한 문법 해석 오류의 수법이다.
IE 8

@media \0 {
  .selector {
    property: value;
  }
}

@media'다들'에 이어'다들'\0'다들'을 넣으면'다들','다들'에만 적용된다.
IE 9

@media (min-width: 0\0) and (min-resolution: .001dpcm) {
  .selector {
    property: value;
  }
}

이는 미디어 쿼리의 특성에'더러움'\0을 넣은 것으로, 삽IE 9에만 적용된다.
IE 7

_:_, .selector {
  property: value;
}

더욱 특이한 것은 이'박IE 7'의'박CSS'에만 적용된다.
이러한 "CSS 반박 Parer"취약점을 이용하는 기법은 버전 업그레이드로 최근 브라우저에서는 거의 사용할 수 없습니다.

위원소와 위류

잘 알려지지 않았지만 위원소와 위류가 설치되었는지 판단할 수 있는 문법이 있다.

_[擬似要素・擬似クラス], .selector {
  // ブラウザが擬似要素・擬似クラスを実装していた場合
  // ここに書かれたCSSが適用される
}

예를 들어 다음과 같이 브라우저가 모루:is() 모루 선택기에 대응할 때 .title 모루의 문자 색깔이 녹색으로 변한다.

_:is(_), .title {
  color: green;
}

:is(_)'여러분'이전의'여러분'_'여러분'은 무의미한 글이다._'椛'을 빼면 *:is(_)'삽'과 같은 모든 요소가 대상이 되기 때문에 무의미하고 효과적인 문자로서 일반적인'삽 웹'제작에 사용되지 않는 문자로'삽_'을 사용했다.
또한:is()'더러운 선택기'는 반드시 파라미터를 지정해야 하기 때문에'더러운'_도 사용한다.이 기법을 사용하여 논리적 CSS를 구현할 수 있습니다.
IE 11

_:not(_)::-ms-backdrop, .selector {
  property: value;
}

IE 11 변은 변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변변이
Chrome 39+, Opera 26+

_:lang(_), _::-internal-media-controls-overlay-cast-button, .selector {
  property: value;
}

이렇게 하면 그 브라우저만의 위조 요소와 위조 클래스를 찾을 수 있다면 간단하게 '삽 CSS' 를 실현할 수 있다.그러나 위에서 말한 바와 같이 브라우저의 특정 버전 이후 계속 적용되고 있는 '스치기 CSS' 해커를 발견할 때 주의해야 한다.
그 브라우저는 자신의 위조 요소와 위조류가 중간에 추천되지 않아 브라우저에서 삭제될 수 있기 때문에 설명서에 기재된 것들과 브라우저의 자원을 최대한 찾아 당분간 삭제되지 않을 것을 선택해야 한다.

@supports 쿼리

현대 브라우저에서, 우리는 '조회' 라고 불리는 브라우저가 속성과 값에 대응하는지 조사했는데, 이것이 바로 우리가 가장 적합한 기능이다.
Firefox 74

@supports (text-underline-offset: 1%) and (not (top: min(1%, 1%))) {
  .selector {
    property: value;
  }
}

예를 들어 Firefox 74표 삽질에만 적용되는'사회적 책임'이다.:not()는'다들'에 대응하고, ::-ms-backdrop는'다들'함수에 대응하지 않는 것은'다들'뿐이다.
Safari 9+, iOS Safari 9+

@supports (paint-order: fill) and (-webkit-marquee-speed: 0) {
  .selector {
    property: value;
  }
}

@supports 단지'다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들','다들'.
Chrome 84, Opera 70

@supports (appearance: auto) and (top: revert) and (-webkit-column-width: 0) and (not (counter-set: none)) {
  .selector {
    property: value;
  }
}

여러 속성을 사용하여 다른 브라우저와 일치하지 않도록 할 수도 있습니다.

selector () 함수

text-underline-offset: 1%는'박'함수를 사용하여 선택기의 대응 상황min()을 판단할 수 있고,'박'산자를 조합하면'거CSS','해커 제거'를 더욱 간단하게 실현할 수 있다.
Firefox 82

@supports selector(::file-selector-button) and (not (background: conic-gradient(red, tan))) {
  .selector {
    property: value;
  }
}

위요소박paint-order: fill, -webkit-marquee-speed: 0, 부적응@supports 함수에 대응하는 것은'삽'Firefox82표만 남았다.
Firefox 81

@supports (overflow: clip) and (not selector(::file-selector-button)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

selector() 삽처럼 사용할 수 있어 1,1개 이하 버전 판정에도 사용이 편리하다.

최후

기본적으로 위조 요소와 위조류, 속성과 그 값의 실현 상황을 이용하여'사회 각 계층'을 발견한다.또한, 오류가 있는지 확인하려면'모'caniuse와'모루'browser-compat-data로 확인하고'BrowserStack'모'라는 서비스용 실기로 검증한다.
가능하다면 여러분의 협조를 받을 수 있다면 정말 감사합니다!