CSS 표시 속성을 기본값으로 재설정

CSS 표시 속성을 기본값으로 재설정

---

디스플레이 속성을 기본값으로 재정의 할 수 있습니까? 예를 들어 한 스타일에서 none으로 설정하고 기본값과 다른 스타일로 재정의하려는 경우.

또는 해당 요소의 기본값이 무엇인지 찾아서 설정하는 유일한 방법입니까? 요소가 일반적으로 블록인지, 인라인인지 또는 둘 중 하나인지 알 필요가 없습니다.

---

브라우저의 기본 스타일은 사용자 에이전트 스타일 시트에 정의되어 있으며 소스는 여기서 찾을 수 있습니다 . 불행히도 Cascading and Inheritance 레벨 3 사양 은 스타일 속성을 브라우저 기본값으로 재설정하는 방법을 제안하지 않는 것 같습니다. 그러나 Cascading and Inheritance 레벨 4 에서 키워드를 다시 도입 할 계획이 있습니다 . 실무 그룹은이 키워드의 이름을 아직 정하지 않았습니다 (링크는 현재 revert최종 결과는 아닙니다). 브라우저 지원에 대한 정보는 caniuse.comrevert 에서 찾을 수 있습니다 .

레벨 3 스펙은 initial키워드를 도입하지만 속성을 초기 값으로 설정 하면 브라우저에서 정의한 것이 아니라 CSS 에서 정의한대로 기본값으로 재설정 합니다 . 초기 값 display은 inline; 여기 에 지정되어 있습니다 . initial키워드는 그 값이 아닌 브라우저의 기본을 의미합니다. 사양 자체는 all속성 아래 에이 메모를합니다 .

예를 들어, 작성자 all: initial가 요소를 지정 하면 캐스케이드의 작성자, 사용자 또는 사용자 에이전트 레벨에 규칙이없는 것처럼 모든 상속을 차단하고 모든 특성을 재설정합니다.

외부 페이지의 스타일을 상속하지 않으려는 페이지에 포함 된 "위젯"의 루트 요소에 유용 할 수 있습니다. 그러나 해당 요소에 적용되는 "기본"스타일 (예 : display: block와 같은 블록 요소의 UA 스타일 시트 <div>)도 날아갑니다.

따라서 현재 순수 CSS를 사용하는 유일한 방법은 브라우저 기본값을 찾아 수동으로 설정하는 것입니다.

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(위의 대안은 div.foo:not(.bar) { display: inline-block; }이지만 재정의 대신 원래 선택기를 수정하는 것입니다.)

---

자바 스크립트 사용이 허용되는 경우display 속성을 빈 문자열로 설정할 수 있습니다 . 이로 인해 특정 요소의 기본값이 사용됩니다.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

다음은 jsbin에 대한 링크 입니다.

당신은 (로 되돌릴 디스플레이의 종류에 대해 걱정할 필요가 없기 때문에 이것은 좋은이다 block, inline, inline-block, table-cell, 등).

그러나 자바 스크립트가 필요하므로 CSS 전용 솔루션을 찾고 있다면 이것이 당신을위한 해결책이 아닙니다.

참고 : 이것은 인라인 스타일을 재정의하지만 CSS에 설정된 스타일은 재정의하지 않습니다.

---

설정 해제 display:

Firefox 및 Chromeunset 모두에서 작동 하는 값 을 사용할 수 있습니다 .

display: unset;

---

.foo     { display: none;  }
.foo.bar { display: unset; }

---

아니요, 일반적으로 불가능합니다. 일부 CSS (또는 HTML) 코드가 요소의 속성 값을 설정하면 실행 취소하고 브라우저에 기본값을 사용하도록 지시 할 수있는 방법이 없습니다.

물론 속성을 기본값으로 예상 되는 값으로 설정할 수 있습니다. HTML5 CR 의 렌더링 섹션 을 확인하면 브라우저가 실제로하는 일을 대부분 반영 할 때 다소 광범위하게 작동 할 수 있습니다 .

브라우저는 원하는 기본값을 가질 수 있기 때문에 대답은“아니요”입니다. 기본값으로 재설정하려는 이유를 분석해야합니다. 원래 문제가 계속 풀수있을 수 있습니다.

---

경우 액세스 권한이 자바 스크립트를 사용하면 요소를 작성하고 계산 된 스타일을 읽을 수 있습니다.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

---

BoltClock과 John의 답변과 관련하여 IE11을 사용할 때 개인적으로 초기 키워드에 문제가있었습니다. Chrome에서는 제대로 작동하지만 IE에서는 효과가없는 것 같습니다.

이 답변에 따르면 IE는 초기 키워드를 지원하지 않습니다. Div display : initial이 ie10 및 chrome 29에서 의도 한대로 작동하지 않습니다.

여기에 제안 된대로 공백으로 설정하려고했습니다. 표시 후 정상으로 되 돌리는 방법 : 테이블 행에 없음

이것은 효과가 있었고 내 시나리오에 충분했습니다. 물론 실제 초기 값을 설정하려면 위의 대답 만 내가 찾을 수있는 좋은 것입니다.

참고 URL : https://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value