2022/06/01 CSS 신기능

https://youtu.be/kkiLBF_YerM

color-mix

accent-color : radio, checkbox, slider 버튼 등 수동으로 일일이 수정하지 않아도 됨. 

colot-contrast() : 배경에 가장 잘 대비가 되는 색상을 브라우저가 자동으로 선택 

color: color-contrast(blue vs pink, yellow, green)

inert : 원래 html 속성이었으나 페이지의 속성을 고정할 수 있는 것.

:has() : 부모 요소의 스타일 바꿈

form:has(button) {

}

/* button이 있는 form의 스타일 바꿈 */

viewport units : lvh (largest viewport height), svh(smallest viewport height: 네비게이션 있는 사이즈), dvh(dynamic viewport height)

https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/

Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...

@nest

nav {
 & ul {
  & li {
   }
  }
 }

@scope : 자신만의 스타일 분류 (테마별로 스타일 분류 가능). 이해하기 쉬운 코드

@container

custom-media : 미디어 쿼리를 사용할 때 더 유용