@supports

@supports를 이용해 브라우저가 특정 CSS 속성을 지원할때와, 지원하지 않을 때의 스타일을 각각 지정할 수 있다. @supports (속성명: 값) {...} 형태로 사용한다. 지원하지 않을 땐 not 연산자를 추가한다.

/* 브라우저가 display: grid를 지원하면 적용 */
@supports (display: grid) {
	div {
		display: grid;
	}
}

/* 브라우저가 display: grid를 지원하지 않으면 float 적용  */
@supports not (display: grid) {
  div {
    float: right;
  }
}

CSS 스타일 속성뿐만 아니라 CSS 선택자(셀렉터)를 지원하는지도 판별할 수 있다.

/* 브라우저가 > 자식 셀렉터를 지원할 때 */
@supports selector(A > B) {}

and or 연산자도 사용할 수 있다. and는 모두 참일 때, or은 하나라도 참이면 통과한다.

/* 브라우저가 괄호안 속성을 모두 지원할 때(2개 이상도 가능) */
@supports (display: table-cell) and (display: list-item) {}
@supports (display: table-cell) and (display: list-item) and (display:run-in) {}

/* 브라우저가 괄호안 속성 중 하나라도 지원 할 때 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

소괄호 ()를 이용해 연산자 순서를 정의할 수 있다. 아래 예시에선 표현식3과 표현식4를 비교하고 → 그 결과를 표현식2와 비교하고 → 그 결과를 표현식1과 비교한다.

@supports (표현식1) or ((표현식2) or ((표현식3) or (표현식4)))

CSS Scroll Snap ⭐️

Scroll Snap을 이용해 스크롤할 때 항상 요소 끝(혹은 시작/중간) 부분에 붙도록 할 수 있다(사용자가 터치나 휠 스크롤을 마쳤을 때의 오프셋 설정). 예전엔 JS를 이용해야 했지만 이젠 CSS 코드 2줄이면 가능하다. 스크롤이 필요하므로 부모 요소에서 스크롤하는 방향의 overflow 속성 값이 auto 혹은 scroll이어야 한다.

.parents {
	overflo-y: scroll;
	scroll-snap-type: y mandatory; /* 부모 요소에 적용(가로 스크롤이면 y를 x로 변경) */
}
.children {
	scroll-snap-align: center; /* 자식 요소에 적용 */
}

Scroll Snap 적용 전 / 사용자가 스크롤한 만큼 움직인다

Scroll Snap 적용 후 / 스크롤할 때 항상 요소의 윗부분으로 붙는다 (scroll-snap-align: start 기준)

scroll-snap-type (부모 요소에 적용)

snap-scroll-type: [none | x | y | block | inline | both] [mandatory | proximity]?