[CSS/SCSS] :is() , :where() , @supports

P1ush·2021년 9월 30일
0

HTML/SCSS

목록 보기
3/5

:is() , :where()

중복선택으로 길어지는 코드를 방지하기 위한 가상 클래스입니다.

예전에는 속성을 여러개의 태그 또는 클래스 및 아이디에 적용하고 싶을 경우 콤마(,) 를 사용하였습니다.

.wrap h1,h2,h3{color: #000}

이 방법이 잘못된 방법은 아니지만, 클래스들이 많아지고 하다보면 다음의 코드처럼 쓸대없이 길어지게 됩니다.

header p:hover,
main p:hover,
footer p:hover {
  color: red;

}

하지만, :is() , :where() 를 사용하면 다음과 같이 코드가 직관적이고 간결하게 변합니다.

:is(header, main, footer) p:hover {
  color: red;
}

scss

&:is(header, main, footer) p {
  &:hover{color: red;}
}

만약, 다른 클래스에 속해있는 경우라면 다음의 코드처럼 앞에 클래스명만 붙이면 됩니다.

html

<div class="wrap">
  <div class="txt">
    <h1 class="fz1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus, repudiandae saepe?</h1>
    <h2 class="fz2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus, repudiandae saepe?</h2>
    <h3 class="fz3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus, repudiandae saepe?</h3>
  </div>
</div>

css

.txt :is(.fz1,.fz2,.fz3){
	color: red;
}
txt :where(.fz1,.fz2,.fz3){
	color: red;
}

scss

.txt{
   &:is(.fz1,.fz2,.fz3){color: red;}
}
.txt{
   &:where(.fz1,.fz2,.fz3){color: red;}
}

결과는 h1,h2,h3 모두 글씨 색상이 빨간색으로 변경됩니다.



:is() 와 :where()의 차이점?

그런데, 결과를 보고나니까 한가지 의문점이 생기게됩니다. 분명 똑같은 결과인데 왜 굳이 :is():where() 이 두가지를 나눠서 사용하게 되는걸까요?

저도 정확하게 아는건 아니지만, 구글에 검색을 해서 찾아본 결과...

css 우선순위가 :is() 가 더 높다! 라는 답을 찾게 되었습니다. MDN 문서를 찾아보면 :where() 특이성 값은 0이라는 것입니다. 라는 문장이 있는데 우선순위가 낮다는 말이 맞게 되는 것 같네요.


그외 :any() , :matches()

이전 버전의 브라우저에서는 :-moz- Or -webkit-:any() , :matches() 라는 이름으로 지원을 했었는데, :is() , :where()로 이름이 바뀌면서 사용할 일이 없어졌습니다.

브라우저 호환성

:is() & :where()은 구버전 브라우저와 IE를 제외한 최신 버전의 브라우저들은 다 지원이 됩니다.

참고 링크 :
https://developer.mozilla.org/en-US/docs/Web/CSS/:is
https://caniuse.com/?search=is



@supports

css속성 지원상황에 따라 다른 속성을 적용시킬 수 있습니다. 문법의 경우는 미디어 쿼리와 비슷합니다.

 @supports (display: grid){
           .txtBox{display: grid;}
       }

해당 속성 (display: grid) 을 지원하는 브라우저에서는 .txtBoxdisplay: grid 를 적용시킨다 라는 의미입니다.

not

@supports not (display: grid){
            .txtBox{display: flex;}
       }

해당 속성 (display: grid) 을 지원하지 않는 브라우저에서는 .txtBoxdisplay: grid 대신 display: flex 속성을 대체해서 적용하겠다는 의미입니다.

사용법을 보면, IE에 대항할 수 있는 유일한 문법이 아닌가 싶은데, 아쉽게도 @supports 는 IE를 지원하지 않는다는게 단점인 것 같네요.

브라우저 호환성

IE와 구버전 브라우저를 제외한 모든 최신 버전의 브라우저에서는 지원이 됩니다.

참고링크 :
https://caniuse.com/?search=%40supp
https://abcdqbbq.tistory.com/71

0개의 댓글