유투버 노마드 코더 분께서 최신 css기능을 알려주셨다!

간략하게 메모해놓는다.

@supports

브라우저가 css기능을 지원하는지 체크, 지원하지 않을 경우 대체도 가능

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

CSS Scropp Snap

스크롤링 시 스크롤이 다 내려오지 않아도 밑,위 이동중이던 페이지로 자동으로 스크롤링된다.

부모 {
 scroll-snap-type: y mandatory;
}

자식 {
 scroll-snap-align: center 
}  

scroll-snap-align을 자식에게 주면 된다!

:is Pseudo Selector

header button,
nav button,
form button {
 background-color: red; 
} // before  

:is(header, nav, form) button {
  background-color: red;
} // now!

header 혹은 nav 혹은 form이면 button의 배경색을 red로 설정한다는 뜻

Flex Box Gap

예전에는 flex box를 쓸 때
flex container 안 아이템 간 간격을 위해 아이템에 margin을 썼다.
이제 flex container에게 gap 프로퍼티를 주면 된다.

div {
  display: flex;
  gap: 10px 5px; // row - gap , column - gap 두 방향 간격도 가능
}

aspect-ratio

웹 사이트에서 영상 혹은 이미지를 보여줄때 정해진 비율을 유지할 수 있다

img {
 aspect-ratio: 16 / 9;
}

Position: sticky

이것은 알고 있던 것이었지만, sticky를 이용해 유저의 스크롤을 따라다니는 요소를 만들 수 있다.
부모(높이가 있는) 밑 자식의 요소에 positon: sticky를 넣으면 된다.

Nomad Coders's Youtube