'CSS 해킹'의 정의는 무엇입니까?

최소 2 년 동안 CSS를 작성한 경우 CSS 해킹을 가장 많이 사용했습니다. 그러나 CSS를 비교적 처음 접한다면 용어를 들었을 가능성이 있지만 그 의미가 무엇인지 정확히 확실하지 않습니다.

이 게시물에서는 CSS 해킹이라는 용어가 정확히 무엇을 의미하는지, CSS 해킹이 어떻게 사용되는지 설명하겠습니다. 그러나 먼저, 왜이 게시물이 필요한지 느꼈는지 설명하는 배경.

키 테이크 아웃

CSS 해킹은 다른 브라우저 버전에 스타일을 적용하면서 다른 브라우저 버전에 적용되는 기술입니다. 종종 최신 CSS 표준을 완전히 지원하지 않는 이전 버전의 브라우저에서 브라우저 불일치 또는 한계를 극복하는 데 사용됩니다. CSS 해킹이 반드시 유효하지 않은 것은 아닙니다. 일부 해킹은 CSS 유효성 검사기를 통과 할 때 경고 나 오류를 일으킬 수 있지만 다른 해킹은 문제없이 통과 할 수 있습니다. 시간과 예산이 허용 될 때 더 쉬운 리팩토링을 위해 해킹을 분리하고 문서화하는 것이 중요합니다. CSS 해킹은 어떤 상황에서는 유용 할 수 있지만, 일반적으로 코드를 더욱 복잡하고 유지 관리하기가 더 어려워 질 수 있으므로 나쁜 관행으로 간주됩니다. 기존 브라우저에서 표준 CSS 기술과 디자인 웹 사이트를 사용하여 우아하게 저하되는 것이 좋습니다.

많은 개발자들이

라는 용어를 오해하는 것 같습니다 많은 분들이 알고 있듯이 Sitepoint는 최근에 제가 한 대규모 CSS 설문 조사 결과를 발표했습니다. 설문 조사가 요청한 질문 중 하나는 다음과 같습니다. 다음 중 다음 중 어떤 Microsoft 브라우저가 CSS 해킹을 작성하거나 포함합니까? 결과를 ​​처음 연구했을 때, 나는이 질문의 결과에서 이상한 점을 놓친 것 같았다. 다행히도 Microsoft의 최신 브라우저에서 일하는 엔지니어 인 David Storey가이를 지적했습니다. 이 질문에 대답 한 1,418 명 중 결과는 다음과 같습니다.

ie9 - 62%

ie10 - 61% ie11 - 57% 가장자리 - 45%
• ie8 - 35%
ie7 - 9%
• ie6 - 3%
ie5.5 - 1%

개발자의 60% 이상이 IE9 및 IE10에 대한 CSS 해킹을 작성한다고 주장하는 것은 충분히 나쁘지 만 Edge는 45%입니까? Edge 용 해킹이 게시되었지만 아직 Browserhacks 웹 사이트에 있지 않으므로 많은 사람들이 해당 브라우저에 해킹을 사용하지 않을 것 같습니다. 그러나 더 중요한 질문은 다음과 같습니다. 개발자가 해킹을 요구하는 CSS를 렌더링하는 데 어떤 문제가 발생 하는가? 처음에는 많은 참가자들이 사용자 에이전트 스니핑을 통해 브라우저 감지와 해킹을 혼란스럽게 할 것이라고 생각했습니다. 그러나 그조차도 왜 그 숫자가 가장자리가 그렇게 높은지 설명하지 않을 것입니다.

그런 다음 나는 그들이 질문을 완전히 오해해야한다는 것을 깨달았습니다. 그들은‘브라우저 X의 CSS 해킹 쓰기’는‘지원 브라우저 X’와 동일하다고 생각합니다. 다른 논리적 설명은 실제로 없습니다. 특히 해킹이 필요하지 않은 다른 브라우저의 높은 비율을 고려할 때. 따라서 해킹이 무엇인지 정확히 정의 해 봅시다. 용어에 의해 혼란 스러울 수있는 사람들. CSS 해킹이란 무엇입니까? CSS 파일의 무언가가 "해킹"으로 간주 되려면 다른 모든 브라우저를 무시하는 동안 타겟팅되는 브라우저에만 스타일을 적용해야합니다. 예를 들어 봅시다. 이것은 CSS 해킹입니다 :

위의 예제에서 CSS (종종 "Star-Html Hack"이라고도 함)는

이하의 Internet Explorer 버전 만 목표로합니다. IE6을 지원하는 대부분의 개발자는 IE6 이전에 아무것도 신경 쓰지 않으므로 일반적으로 IE6 전용 해킹으로 작동합니다.

. "핵"인 부분은 별표와 "html"이 뒤 따릅니다. 이것은 범용 선택기와 요소 유형 선택기의 조합입니다. 어느 시점에서 누군가 다른 선택기 앞에 다른 선택기가 다른 브라우저에는 영향을 미치지 않으면 서 특정 버전의 IE에서만 작동한다는 것을 발견했습니다. 이는 위 코드 예제에 정의 된 .sidebar 요소의 왼쪽 마진이 IE6 또는 이전에만 적용됨을 의미합니다. 이 경우 CSS는 실제로 유효하므로 오류 나 경고를받지 못할 것입니다 (나중에 자세한 내용). 다음은 BrowserHacks 웹 사이트에서 가져온 또 다른 예입니다. 이번에는 IE11을 대상으로합니다.

나는 이것이 해킹 인 이유에 대한 세부 사항에 들어 가지 않을 것이지만 (부분적으로 이해하지 못하기 때문에) 위의 CSS는 Internet Explorer 버전 11에만 적용됩니다. 'IE11 이상'이므로 이것이 Microsoft 's Edge Browser에서도 작동한다는 것을 의미한다고 가정하지만

는 확인하지 않았습니다. 여기서 중요한 요점은 브라우저가 대상이되는 것이 아니라 CSS 해킹이 무엇인지 이해하는 데 같은 페이지에 있다는 것입니다. CSS Hacks가 유효하지 않은 CSS? 입니다 스타일 시트에 해킹이있는 경우 CSS가 W3C의 CSS 유효성 검사기를 통해 실행하면 CSS가 경고 및/또는 오류를 일으킬 수 있습니다. 그러나 그것은 보장이 아니며 무언가가 해킹인지 인식하는 방법도 아닙니다. CSS에 해킹이 포함되어 있고 경고 나 오류가 발생하지 않을 수 있습니다. 예를 들어, 사용하는 유일한 CSS 해킹이 Star-HTML 해킹을 사용하여 IE6을 대상으로하는 경우 스타일 시트는 해킹과 관련된 오류 나 경고없이 잘 확인됩니다. 또한 (위에서 논의한 IE11 핵과 같은 일부 해킹)는 공급 업체 별 코드 (예 : -ms-fullscreen)를 사용합니다. 이 경우 유효성 검사기의 기본 설정은 "Pass"녹색 화면 메시지와 함께 CSS를 표시 할 수 있습니다.

그러나 유효성 검사 화면에서 아래로 스크롤하면 다음과 같은 경고가 표시됩니다.

이 경우 : -ms-fullscreen은 "알 수없는 공급 업체 확장 의사 클래스"로 간주되기 때문에 경고합니다. 이런 종류의 CSS를 경고 대신 오류로 보는 것이 더 편안하다고 느끼면 유효성 검사기 입력 영역 아래의 "더 많은 옵션"섹션을 사용하여 유효성 검사기 설정을 조정할 수 있습니다.

"공급 업체 확장자"옵션을 "오류"로 변경하면 공급 업체 접두사 또는 기타 브라우저 특정 CSS (반드시 해킹이 아님)가 포함 된 경우 스타일 시트가 유효성 검사를 전달하지 못하게됩니다. 반면에 , 당신은 다음과 같은 것을 사용할 수 있습니다 : .

위의 CSS는 IE8 이하를 목표로합니다. "해킹"은 백 슬래시와 9 개 (9)의 조합입니다. 9 부분이 라인을 유효하지 않은 CSS를 만들기 때문에 대부분의 브라우저는 전체 라인을 무시합니다. 그러나 어떤 이유로 든 Internet Explorer 버전 8 이하는 여전히 유효한 것으로 간주되며 여백 설정을 적용합니다.

. 이 경우 유효성 검사기에서 어떤 설정을 선택하든 오류 메시지가 표시되며 스타일 시트는 유효성 검사를 전달하지 않습니다.

어떤 기술이 해킹이 아닌가? 다음 방법과 기술이 반드시 CSS 해킹으로 분류되어서는 안됩니다.! 중요한 선언은 해킹이 아닙니다

중요한 키워드가 추가 된 CSS 라인은 완전히 다른 문제입니다. 이것은 유효한 CSS이며 특정 브라우저를 타겟팅하는 데 사용되지 않습니다. 이것은 해킹이 아니지만 나쁜 CSS로 볼 수 있습니다.

 공급 업체 접두사가 반드시 해킹은 아닙니다 

공급 업체 접두사는 특정 브라우저를 대상으로하지만 이는 우리가 관습 적으로 해킹이라고하는 것이 아닙니다. 대부분의 경우 공급 업체 접두사를 사용하는 경우 유효한 표준 코드도 제공합니다. 그것은 해킹이 아닙니다. 즉, 브라우저를 타겟팅하기 위해 공급 업체 별 코드를 작성하는 경우가 있으므로 해킹 자격이 있습니다. _ :-ms-fullscreen을 사용하는 위의 코드가 예입니다. 또 다른 좋은 예는 하드웨어 가속을 트리거하는 것입니다 WebKit 브라우저에서. 그러나 벤더 접두사는 대부분 별도의 주제입니다. 실제로 W3C는 공급 업체 별 코드에 대한 문서를 가지고 있으며, 이는 그 자체로 해킹으로 여겨지지 않아야한다는 개념을 뒷받침합니다. 고속 선택기는 해킹이 아닙니다

스타일 시트의 다른 부분 (예 : Body .Content #SideBar P)에서 무언가를 무시하려는 선택자와의 특정한 것은 CSS 해킹이 아닙니다. CSS는 나쁜 일이지만 해킹은 아닙니다. Old Syntax는 해킹이 아닙니다 이에 대한 좋은 예는 Flexbox의 딥 브라우저 지원에 필요한 복잡한 코드입니다. 이것이 오늘날 불필요하다는 사실 외에도, 나는 그런 종류의 것을 해킹으로 분류하지 않을 것입니다. 해당 브라우저가 지원했을 때 유효한 코드이므로 해킹과 동일한 영향을 미칠 수 있지만 같은 것은 아니라고 생각합니다. 조건부 의견은 어떻습니까?

CSS 또는 HTML을 작성하여 특정 버전의 Internet Explorer (또는 특정 버전의 Internet Explorer를 제외 할 수있는)를 작성할 수있는 조건부 의견은 약간의 회색 영역입니다. 특정 방식으로 작성되면 유효한 HTML이지만 "해킹"입니다. 2008 년에 Paul Irish는 우리가“조건부 클래스”라고 부르는 것을 대중화했습니다. 이들은 조건부 의견을 사용하여 스타일 시트에서 사용할 수있는 클래스를 생성하여 유효한 CSS를 사용하여 IE의 특정 버전을 대상으로합니다. 조건부 의견을 사용하는 것은 "CSS 해킹"입니까? 나는 더 관례적인 CSS 해킹을 사용할 때 의도 한 것과 정확히 같은 것을 성취하기 때문에 예라고 말할 것입니다.

CSS 해킹을 사용해야합니까? 많은 웹 개발 주제의 경우와 마찬가지로, 여기서의 대답은 단순히

예

또는 가 아닙니다. 정답은 입니다. 대부분의 순수 주의자들은 그것들을 사용하지 않는다고 말할 것입니다. 그러나 종종 그렇게 간단하지 않습니다. 해킹에 관해서는 내 조언은 다음과 같습니다

프로젝트의 예산 및 시간 제약 내에서 모든 권력을 수행하여 해킹을 사용하지 않고 유효한 표준 기반 크로스 브라우저 CSS를 작성하십시오. 모든 길을 소진했거나 유효한 해킹이없는 CSS로 문제를 해결할 시간이나 예산이 없으면 해킹을 사용하십시오. 해킹을 작성할 때 Harry Roberts가 권장하는 것과 같은 일을하십시오. 따라서 시간과 예산이 허용 할 때 해킹이 분리되고 리팩터가 더 쉽게 리팩터링 할 수 있습니다. 항상 해킹에 댓글 (또는 문서)을 포함시키고 가능한 빨리 코드를 리팩토링하려고합니다.
1. 요약 이 ​​게시물에서 다른 것을 기억하지 못하면 이것을 기억하십시오 :
2. CSS 해킹은 하나 이상의 특정 브라우저 버전에 CSS를 적용하고 동일한 CSS는 다른 브라우저에서 무시됩니다. CSS 해킹의 간단한 정의입니다. 따라서 CSS에서 Microsoft Edge를 지원한다고해서 Edge에 대한 해킹을 쓰는 것을 의미하지는 않습니다. 지원은 전혀 다른 주제입니다.
이 게시물에는 모든 사람이 동의하지 않는 몇 가지가있을 수 있지만, 해킹이 무엇인지 이해하는 대부분의 개발자는 위의 결론 요약에 동의 할 것이라고 생각합니다. 내가 남겼거나 오류가 있으면 의견에 자유롭게 알려 주시면 필요한 수정이 필요합니다. CSS 해킹에 대한 자주 묻는 질문 (FAQ) CSS 해킹의 목적은 무엇입니까?
CSS 해킹은 웹 개발자가 표준 CSS 규칙으로 불가능할 수없는 특정 스타일 또는 레이아웃을 만드는 데 사용되는 기술입니다. 이러한 해킹은 종종 브라우저 불일치 또는 한계를 극복하는 데 사용됩니다. 예를 들어, 개발자는 CSS 해킹을 사용하여 웹 사이트가 이전 버전의 Internet Explorer에 올바르게 표시되도록 할 수 있으며, 이는 최신 CSS 표준을 완전히 지원하지 않을 수 있습니다. 그러나 코드가 더 복잡하고 유지 관리하기가 더 어려워지기 때문에 CSS 해킹을 드물고 필요한 경우에만 사용하는 것이 중요합니다.
CSS 해킹을 어떻게 식별 할 수 있습니까?

CSS 해킹 자주 자주 비 전통적인 방식으로 CSS 선택기 또는 속성을 사용합니다. 예를 들어, 개발자는 CSS 해킹을 사용하여 해당 브라우저에 고유 한 버그 또는 기능을 악용하여 특정 브라우저를 타겟팅 할 수 있습니다. 여기에는 해당 브라우저에서만 인식되는 CSS 속성을 사용하거나 해당 브라우저 만 이해하는 방식으로 CSS 선택기를 사용하는 것이 포함될 수 있습니다. 비정상적으로 보이거나 표준 CSS 구문을 따르지 않는 CSS 코드가 표시되면 CSS 해킹 일 수 있습니다.

CSS 해킹이 나쁜 연습이 좋지 않습니까?

CSS 해킹이 유용 할 수 있습니다. 어떤 상황에서는 일반적으로 나쁜 관행으로 간주됩니다. 코드를 이해하고 유지하기가 더 어려워지고 다른 브라우저에서 예상치 못한 동작을 일으킬 수 있기 때문입니다. CSS 해킹을 사용하는 대신 일반적으로 표준 CSS 기술을 사용하고 이전 브라우저에서 우아하게 저하되는 방식으로 웹 사이트를 디자인하는 것이 좋습니다. 일부 일반적인 CSS 해킹이란 무엇입니까?

일부 일반적인 CSS 해킹에는 "박스 모델 핵"이 포함되어 있으며, 여기에는 브라우저가 요소의 너비와 높이를 계산하는 방법의 차이로 인해 레이아웃 문제를 해결하는 데 사용됩니다. 인터넷 익스플로러 7 이하를 타겟팅하는 데 사용되는 "Star Hack". 또 다른 일반적인 CSS 해킹은 인터넷 익스플로러 6 이하를 대상으로하는 "밑줄 핵"입니다.

CSS 해킹을 사용할 필요가없는 방법?

CSS 해킹을 사용하는 것은 모든 주요 브라우저와 호환되는 방식으로 웹 사이트를 디자인하는 것입니다. 여기에는 CSS 재설정을 사용하여 스타일이 다른 브라우저에서 일관되게 적용되도록하고 널리 지원되지 않는 CSS 기능을 사용하지 않아도됩니다. 또한 다양한 CSS 기능의 브라우저 호환성을 확인하는 데 사용할 수있는 도구를 사용할 수 있습니다.

CSS 해킹의 대안은 무엇입니까?

CSS 해킹을 사용하는 대신 기능을 사용할 수 있습니다. Modernizr과 같은 감지 라이브러리는 사용자의 브라우저에서 특정 CSS 기능이 지원되는지 여부를 감지합니다. 그런 다음이 정보를 사용하여 브라우저의 기능에 따라 다른 스타일이나 레이아웃을 적용 할 수 있습니다. 또 다른 대안은 SASS 이하와 같은 CSS 전 처리기를 사용하는 것입니다. 이는보다 강력하고 유지 관리 가능한 CSS 코드를 작성할 수 있습니다.

CSS 해킹에 대해 더 많이 배울 수있는 방법은 무엇입니까?

사용 가능한 많은 리소스가 있습니다. CSS 해킹에 대해 더 많이 배울 수있는 온라인. CSS-Tricks 및 Smashing Magazine과 같은 웹 사이트는 종종 CSS 해킹 및 기타 고급 CSS 기술에 관한 기사를 게시합니다. 또한 Codepen 및 JSFiddle과 같은 웹 사이트에서 CSS 해킹의 많은 튜토리얼과 CSS 해킹 예를 찾을 수 있습니다.

CSS 해킹은 오늘날에도 여전히 관련이 있습니까?

CSS 해킹은 과거에 더 일반적이지만 현대식 브라우저의 표준 준수 개선으로 인해 오늘날 덜 관련성이 있습니다. 그러나 이전 브라우저를 지원하거나 브라우저 버그를 둘러싼 CSS 해킹이 필요한 상황이 여전히 있습니다. 따라서 CSS 해킹이 무엇인지, 작동 방식을 이해하는 것이 여전히 유용합니다.

CSS 해킹이 내 웹 사이트의 성능에 영향을 줄 수 있습니까?

CSS 해킹은 특히 웹 사이트의 성능에 영향을 줄 수 있습니다. 그들이 과도하게 사용된다면. 브라우저가 구문 분석하기가 CSS 코드를보다 복잡하고 어렵게 만들 수 있기 때문입니다. 또한 일부 CSS 해킹에는 성능에 최적화되지 않은 CSS 속성 또는 선택기를 사용하는 것이 포함됩니다.

CSS 해킹의 효과를 어떻게 테스트 할 수 있습니까?

CSS 해킹의 효과를 테스트 할 수 있습니다. 브라우저 개발자 도구를 사용하여 요소에 적용되는 스타일을 검사합니다. Browserstack과 같은 온라인 도구를 사용하여 웹 사이트가 다른 브라우저에서 어떻게 보이고 동작하는지 테스트 할 수 있습니다. 또한 Selenium과 같은 자동 테스트 도구를 사용하여 다양한 브라우저 및 장치에서 웹 사이트가 올바르게 작동하는지 확인할 수 있습니다.

위 내용은 'CSS 해킹'의 정의는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!