[CSS/SCSS] :is() , :where() , @supports
: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
) 을 지원하는 브라우저에서는 .txtBox
에 display: grid
를 적용시킨다 라는 의미입니다.
not
@supports not (display: grid){
.txtBox{display: flex;}
}
해당 속성 (display: grid
) 을 지원하지 않는 브라우저에서는 .txtBox
에 display: grid
대신 display: flex
속성을 대체해서 적용하겠다는 의미입니다.
사용법을 보면, IE에 대항할 수 있는 유일한 문법이 아닌가 싶은데, 아쉽게도 @supports
는 IE를 지원하지 않는다는게 단점인 것 같네요.
브라우저 호환성
IE와 구버전 브라우저를 제외한 모든 최신 버전의 브라우저에서는 지원이 됩니다.
참고링크 :
https://caniuse.com/?search=%40supp
https://abcdqbbq.tistory.com/71
Author And Source
이 문제에 관하여([CSS/SCSS] :is() , :where() , @supports), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sky/CSSSCSS-is-where-supports저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)