[CSS] CSS value <revert>, CSS Property <all: revert>

revert

현재 적용된 값이 제거된다면 보여질 상태를 확인 할 수 있는 CSS value 값입니다.

revert

.color-blue 로 파란색을 적용했지만 revert 값을 통해 제거했고, 그 전에 캐스케이딩 된 빨간색이 적용됨을 확인할 수 있습니다.

See the Pen [CSS] revert keyword by zinee (@zineeworld) on CodePen.

 

all: revert

재밌는 것은 바로 이 녀석 입니다. .inner 에는 파란색 배경, 검정 글씨를 적용해 놓았는데, 이 모든 속성을 한번에 revert 시켜서 .wrapper을 스타일을 받아서 표현해 줍니다. 스타일 디버그 할때 사용하면 좋을 것 같습니다.

See the Pen [CSS] all: revert by zinee (@zineeworld) on CodePen.

 

브라우저 호환성

all: revert 가 크롬84에서 지원되지 않는다고 나오지만 테스트 해 본 결과 크롬에서 지원되네요~

 

역시나 IE에서는 동작하지 않습니다.

IE is not supported 'all: revert'