요즘 웹 사이트에 있어야 하는 3가지 최신 CSS 속성

출처 : 

Three modern CSS properties your website must have

 

1. 스크롤 여백

h2:target {
  scroll-margin-top: var(--header-height);
}

:is(h2, h3, h4):target {
  scroll-margin-top: var(--header-height);
}

:target {
  scroll-margin-top: calc(var(--header-height) + 1lh);
}

2. 색 구성표

:root {
	color-scheme: dark light;
}

<meta name="color-scheme" content="light dark">

@media (prefers-color-scheme: dark) {
  form {
    color-scheme: dark;
  }
}

:root:has(body.dark) {
  color-scheme: dark;
}

3. 텍스트 줄 바꿈

위 사진과 같이 마지막 줄에 한 단어로 끝나는 제목이나 캡션

h2 {
  text-wrap: balance;
}