정의 및 사용 방법

revert 키워드는
현재 요소의 해당 속성에 선언된 값이 있다면 취소하고, 속성에 변경이 없었다면 가졌을 값으로 되돌리는(revert, 되돌아가다) 값입니다.

속성에 변경이 없었다면 가졌을 값

revert 키워드 값은 일반적으로 HTML 문서의 스타일을 위해 작성한 스타일시트, 즉 개발자(또는, '작성자'라고도 함)를 위한 속성의 값만은 아닙니다.

CSS 명세서에서는 속성에 적용되는 규칙을 정의하고 있는데, 이 규칙을 캐스케이드(Cascade, 딘계식 규칙)이라고 합니다. 즉, 단계적인 규칙을 가지고 있다는 것입니다.

Cascade origin

이러한 단계식 규칙에서 단계란 스타일 규칙이 단계별로 있다는 것을 의미하며, 이 단계별 시작점을 "Cascade origin"이라고 합니다. CSS는 세 가지 "Cascade origin"을 정의합니다.

  • Author Origin
    앞서 언급했던 HTML 문서의 스타일을 위해 작성한 내부 또는 외부 스타일시트
  • User Origin
    일반 사용자가 자신의 브라우저에 사용자 정의로 설정한 스타일시트
  • User-Agent Origin
    브라우저에 내장되어 있는 기본 스타일시트

속성에 변경이 없었다면 가졌을 값이란?

revert 키워드의 값은 세 가지 "Cascade origin "중 어느 단계에서 지정되었는지에 따라 되돌리는 값의 기준이 달라집니다.

Author Origin에서 revert 키워드가 지정되어 있다면

Author Origin은 웹 페이지 개발자가 작성한 스타일시트를 의미합니다. 일반적으로 우리가 작성하는 내부 또는 외부 CSS가 여기에 해당합니다.

Author Origin에서 revert 키워드를 지정하면, 해당 속성은 작성자가 직접 지정하지 않은 상태로 되돌린 것과 동일하게 처리됩니다. 그 결과, 브라우저에 내장된 기본 스타일시트(User agent stylesheet)에서 정의한 값이 적용됩니다.

하지만, User Origin(일반 사용자가 자신의 브라우저에 사용자 정의로 설정한 스타일시트)에서 지정한 값이 있다면 그 값이 적용됩니다.

User Origin에서 revert 키워드가 지정되어 있다면

User Origin은 일반 사용자가 브라우저 설정에서 직접 적용한 스타일시트를 의미합니다. 시각 접근성이나 읽기 편의성을 위해 사용자 정의 스타일을 적용하는 경우가 여기에 해당합니다.

User Origin에서 revert 키워드를 지정하면, 해당 속성은 사용자가 값을 지정하지 않은 상태로 되돌린 것처럼 처리됩니다. 그 결과, 브라우저에 내장된 기본 스타일시트(User agent stylesheet)에서 정의된 값이 적용됩니다.

User-Agent Origin에서 revert 키워드가 지정되어 있다면

User-Agent Origin은 브라우저에 내장되어 있는 기본 스타일시트를 의미합니다. 웹 페이지 개발자가 작성한 CSS 스타일이 없고, 일반 사용자가 브라우저 설정에서 직접 적용한 스타일시트가 없을 때 화면에서 보여지는 기본적인 스타일입니다.

User-Agent Origin에서 revert 키워드를 지정하면 해당 속성은 명세서에서 정의한 초깃값(Initial value)이 적용됩니다. 정확히 unset 키워드의 값과 동일합니다.

User-Agent Origin에서 revert 키워드를 지정은 어느 상황에서 누가 할 수 있나?

웹 페이지 개발자나 사용자는 User-Agent Origin에서 revert 키워드를 지정할 수 없습니다. 단지 이 규칙은 브라우저에 내장된 기본 스타일시트(User agent stylesheet)를 만드는 브라우저 제조사에서 지정할 수 있습니다.

여기서 말하는 "속성에 변경이 없었다면 가졌을 값"은 스타일 규칙이 적용되는 Cascade origin에 따라 기준이 달라집니다.

기본 예제

HTML 
<button>커스텀 버튼</button>
<button class="revert-button">revert 버튼</button>
CSS 
button {
    border: 2px solid red;  /* Author Origin(웹 페이지 개발자가 작성한 스타일)에서 지정 */
}
.revert-button {
    border: revert;  /* Author Origin 값을 제거하고, 브라우저 기본(User-Agent) 스타일로 되돌림 */
}
실제 적용된 모습

활용 예제

실제로 revert 키워드는 특정 요소에 적용했던 스타일을 모두 다시 브라우저 기본 스타일로 되돌리기 위해 사용될 때 매우 유용합니다.

HTML 
<button>커스텀 버튼</button>
<button class="revert-button">revert 버튼</button>
CSS 
button {  /* Author Origin(웹 페이지 개발자가 작성한 스타일)에서 지정 */
    border: 2px solid red;
    border-radius: 0.3em;
    padding: 0.3em;
    background-color: orange;
    color: white;
}
.revert-button {
    all: revert;  /* Author Origin에서 지정한 모든 스타일 제거하고, 브라우저 기본(User-Agent) 스타일로 되돌림 */
}

코드 부연설명
all 속성은 unicode-bidi, direction, CSS 사용자 지정 속성을 제외한 모든 속성에 적용됩니다. 따라서 all: revert는 위 제외 항목을 제외한 모든 Author Origin에서 적용된 속성의 값을 브라우저 기본 스타일로 되돌립니다.

실제 적용된 모습

브라우저 호환성

revert 키워드의 브라우저 호환성
키워드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
revert 84 84 67 9.1

명세서

revert 키워드의 명세서 사양
명세서 사양
revert CSS Cascading and Inheritance Module Level 4
#default

같이 보기