CSS가 프로그래밍 언어로 느껴지는 매--직!
@supports
@supports CSS 규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다. 이를 기능 쿼리(feature query)라고 부릅니다.
즉, 최신 스펙의 css값을 사용할 때 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 해줍니다.
@supports의 사용법
@supports (text-align: center) {
body {
text-align: center;
}
}위의 코드처럼 supports 뒤에 테스트할 프로퍼티 그리고 조건부 코드만 작성하면 사용할 수 있습니다.
supports를 사용할 때에는 대체값이나 기본값을 제공하는 것이 좋습니다.
header {
display: flex;
}
@supports (display: grid) {
header {
display: grid;
}
}위의 코드를 보면 페이지의 header가 기본적으로 display: flex이지만 css grid를 지원하는 브라우저에서는 header가 display: grid가 됩니다.
이렇게 코드를 작성하면 일부 기능을 지원하지 않는 브라우저에서도 웹사이트가 깨져 보이지 않고, 지원하는 브라우저에서는 더욱 멎지게 보이게 됩니다.
not 연산자
@supports not (border-radius: 10px) {
.old-browser-alert {
display: block;
}
}위의 코드는 'border-radius'를 지원하지 않는 브라우저에서 유저에게 경고를 표시하고 있습니다.
원한다면 여러개의 not을 연결하여 부정을 무효화할 수도 있습니다.
@supports not (not (border-radius: 10px)) {
}and 연산자
and연산자는 모든 조건이 참인지 확인합니다.
@supports not ((display: flex) and (display: grid)) {
.old-browser-alert [
display: block;
}
}브라우저가 display: flex display: grid를 지원하는지 확인하고, 그렇지 않다면 유저에게 경고를 표시합니다.
or 연산자
반대로 or연산자는 조건 중 하나가 참이면 참으로 평가합니다.
@supports not ((scroll-snap-type: x) or (-ms-scroll-snap-type: x)) {
body {
scroll-snap-type: x;
-ms-scroll-snap-type: x;
}
}이 코드에서는 scroll-snap-type이 Microsoft prefix와 함께 지원되는지 여부를 확인하고 있습니다.
selector
CSS속성을 테스트하는 것 외에도 selector 함수를 사용하여 선택자 지원여부를 확인할 수 있습니다.
@supports selector(:first-child) {
li:first-child {
...
}
}이 코드에서 selector 함수를 사용하여 브라우저가 :first-child선택자를 지원하는지 테스트 하고 있습니다.
지원하는 브라우저
@supports와 selector 함수는 현재 모든 주요 브라우저에서 지원되고 있습니다.
of 선택자 구문
<li></li>
<li class="link"></li>
<li></li>
<li></li>
<li class="link"></li>
<li></li>:nth-child(2) .link {}위의 코드는 2번째 li가 선택될 것입니다.
:nth-child(2 of .link) {}그러나 위의 코드는 5번째 li가 선택될 것입니다.
왜냐하면 linkclass인 모든 아이템 중에서 2번째 항목이기 때문입니다.
또한, ,를 사용해서 다른 선택자를 포함시킬 수도 있습니다.
:nth-child(2 of .link, .button) {}지원하는 브라우저
:is() 의사클래스 함수
더 짧고 간결한 코드를 작성하는데 도움을 줍니다.
예를 들어
h1 {
font-size: 18px;
}
section h1,
div h1,
article h1 {
font-size: 28px;
}18px인 타이틀이 있습니다. 'section'과 'article'혹은 'div'안에 있는 타이틀의 폰트 사이즈를 바꿀려면 위의 코드처럼 작성합니다. 경우가 많아진다면 코드는 길어지고 별로 좋아보이지 않을 것입니다.
바로 이때 :is의사클래스 함수로 문제를 해결할 수 있습니다.
h1 {
font-size: 46px;
}
:is (section, article, div) h1 {
font-size: 36px;
}
:is (section, article, div) :is(section, article, div) h1 {
font-size: 36px;
}지원하는 브라우저
:is의사클래스 함수는 모든 주요 브라우저에서 지원됩니다.
@property
css 변수를 더욱 강력하게 만들어줍니다.
html {
--primaryColor: red;
}
.link {
color: var(--primaryColor);
}위의 코드처럼 css변수를 사용할 수 있습니다.
이 방법도 괜찮지만 변수에 기본값을 부여하여 변수를 재정의하고 유형까지 지정할 수 있도록 하면 더 좋지 않을까?
이를 위해 @property 규칙을 사용합니다.
@property 사용법
@property --primaryColor {
syntax: "<color>";
initial-value: red;
inherits: false;
}
.link {
color: var(--primaryColor); //red
}
.link:hover {
--primaryColor: blue; // blue
}
.link:first-child:hover {
--primaryColor: false; // redproperty이름을 --primaryColor로 지정한 다음 브라우저에 이 프로퍼티가 보유할 값의 유형이 color임을 알리고 기본값을 red로 지정합니다. 마지막으로, 이 property가 상속될 수 있는지 여부를 선택할 수 있는데 True로 설정하면 이 property는 아버지로부터 값을 상속하고 False면 상속하지 않습니다.
사용할 때는 css변수처럼 사용하면 되고, .link가 hover 되었을 때 --primaryColor의 값을 다른 값으로 설정하기만 하면 됩니다.
여기서 가장 흥미로운 부분은 --primaryColor를 색이 아닌 False로 설정하고 있지만, 오류가 발생하지 않습니다. 왜냐하면 @property를 사용하고 있기 때문입니다ㅏ.
무슨소리냐면 @property규칙에 의해 --primaryColor의 값을 initial-value로 다시 설정하기 때문입니다.
다양한 종류의 구문
퍼센트
@property --width {
syntax: "<percentage>";
initial-value: 40%;
inherits: false;
}주소
@property --logo {
syntax: "<url>";
initial-value: url("logo.jpg");
inherits: false;
}변형함수
@property --transform {
syntax: "transform-function";
initial-value: translateX(10px);
inherits: false;
}지원하는 브라우저
모두 다 지원되는 것은 아니지만 거의 다 지원되고 있습니다.
참고자료
