CSS에서 별표 선행 속성은 무엇을 의미합니까?


85

오늘 css 파일을보고 다음 규칙 세트를 발견했습니다.

div.with-some-class {
    display:block;                   
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;   
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

* padding 및 * line-height에서 별표는 무엇을 의미합니까?

감사.

답변:


98

이것은 "밑줄 해킹"과 같은 줄에있는 "별 속성 해킹"입니다. IE가 무시하는 속성 앞에 정크를 포함합니다 (*는 IE 7까지 작동하고 _는 IE 6까지 작동 함).


7
감사! 그리고 나는 "별 속성 해킹"을 찾아 보았고 Ed Eliot의 명확하고 포괄적 인 게시물을 찾았습니다. "CSS Tip : IE 5.x, 6 및 7을 별도로 타겟팅" ejeliot.com/blog/63
Majid Fouladpour 2009

1
CSS 해킹을 사용하는 대신 조건부 주석을 시도 할 수도 있습니다. 예를 들어 quirksmode.org/css/condcom.html 양식 추가 정보를 확인하십시오 .
Capi Etheriel 2010-06-15

별 속성 ​​해킹을 사용하면 Safari (7.0.1) 및 이전 버전 (확인할 수 없음)에서 콘솔 경고가 표시됩니다.
Jim

RIP IE7 및 이러한 종류의 '수정'.
ChristoKiwi

참고 : "조건부 주석이 HTML 주석 구조를 사용하기 때문에, 그들은 단지가 아닌 CSS 파일에서, HTML 파일에 포함 할 수있는" quirksmode.org/css/condcom.html
조지 Birbilis

32

CSS에서? 아무것도; 오류입니다.

일부 Internet Explorer 버전의 버그로 인해 잘못된 속성 이름을 올바르게 무시하지 않으므로 이러한 브라우저에 특정한 CSS를 제공하는 한 가지 방법입니다.

조건부 주석을 사용하는 것이 더 명확하고 안전합니다.


2
과연. 유효한 CSS가 아닌 CSS 해킹은 피해야합니다. 미래의 브라우저가 그들과 함께 무엇을할지 결코 알 수 없습니다.
bobince

@bobince 나는 당신이 과거에 그 주석을 거슬러 올라간 것을 알고 있지만 이제는 모든 미래의 브라우저가 이것을 CSS 파싱 알고리즘으로 해석하는 방법이 매우 엄격하고 브라우저가 그러한 규칙을 조용히 무시하도록 지시하는 방법을 절대적으로 확신 할 수 있습니다.
mgol

1
@m_gol — 아니 우리는 할 수 없습니다. 우리는 *속성 앞 의 의미에 대해 미래의 CSS 사양이 무엇을 말할지 모릅니다 . 의미가 있으면 현재 브라우저는이를 무시하여 확장 프로그램을 안전하게 추가 할 수 있습니다. 이것이 "반드시 무시해야하는"규칙의 요점입니다.
Quentin

8

별표 문자는 CSS에서 유효한 와일드 카드입니다. 이를 단독으로 사용하면 DOM의 모든 요소 노드에 대해 다음 CSS 속성이 사용됩니다. 예:

*{color:#000;}

위의 속성은 모든 DOM 요소에 적용되므로 CSS의 자연스러운 계단식 연결이 해제됩니다. 해당 타겟팅이 고유 한 식별자 참조를 시작하는 DOM 요소를 구체적으로 준비하여 재정의 할 수 있습니다. 예:

#uniqueValue div strong{color:#f00;}

위의 속성은 와일드 카드를 재정의하고 id 속성 값이 "uniqueValue"인 요소 내부의 div에서 발생하는 모든 강력한 요소의 텍스트를 만듭니다.

첫 번째 예와 같이 보편적으로 적용되는 와일드 카드를 사용하는 것은 재설정 스타일 시트를 작성하는 빠르고 더러운 방법이 될 수 있습니다. 와일드 카드 이후의 세분화 된 표현 정의는 매우 부풀어 오른 스타일 시트를 만들 가능성이 높기 때문에 빠르고 더럽습니다. 와일드 카드를 사용하려면 다음과 같이보다 구체적으로 사용하는 것이 좋습니다.

* strong{color:#f00;}

위의 예는 고유 식별자로 지정되지 않은 다른 CSS 속성에 관계없이 모든 강력한 요소의 텍스트를 빨간색으로 만듭니다. 이것은 "! important"선언을 사용하는 것보다 훨씬 더 안전한 것으로 간주됩니다. 그 선언은 의도 된 동작의 자연스러운 기능을 방해하는 것으로 알려져 있고 유지 보수의 악몽입니다.

예제의 별표는 속성 선언, 중괄호 안에 들어가는 코드 내에서 발생하는 것처럼 보이므로 잘못된 위치에 있으며 오류가 발생할 수 있습니다.


4
정답이 아니더라도 내가 검색 한 내용에 대한 답변
Steve

4

이것은 IE7의 해킹입니다.

이것을 쓰면 :

.test {
    z-index: 1;
    *z-index: 2;
}

W3C 표준 <div class="test"></div>HTMLElement 를 존중하는 모든 네비게이터 z-index: 1에서 IE7의 경우이 요소는 z-index: 2.

이것은 표준이 아닙니다.

W3C 표준으로 동일한 결과를 얻으려면 다음 단계를 따르십시오.

  • Internet Explorer 조건부 주석을 추가합니다 (다른 모든 탐색에 대한 간단한 HTML 주석이므로 표준 방식입니다).

    <!-[IE 7 인 경우]> <html lang = "fr"class = "ie7"> <! [endif]->

    <!-[if gt IE 7]> <!-> <html lang = "fr"> <!-<! [endif]->

그리고 다음과 같은 이전 규칙을 사용하십시오.

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.