[CSS] 다양한 속성

순서는 아래와 같습니다.

1. gap

flex, grid, multi-column에서 사용가능한 속성으로
요소 사이에 여백을 주는 속성

.flex{
  display: flex;
  gap: 30px;
}

2. subgrid
   grid에서 사용가능한 속성
   자식의 자식요소까지 grid 영향을 주기위해 사용

3. ::marker
   list-style에서 마커를 커스텀할 수 있는 속성
   ::before,::after를 이용해서 마커를 적용하는 방법 대신 사용

4. :is, :where
   하나의 선택자로 여러 요소를 선택할 수 있는 속성

header p:hover,
main p:hover,
footer p:hover{
	color: red;
	cursor: pointer;
}
/* 위와 같게 작용 */
:is(header, main, footer) p:hover{
	color: red;
	cursor: pointer;
}

:where(header, main, footer) p:hover{
	color: red;
	cursor: pointer;
}

:is와 :where 차이는 :is는 요소(element)선택자보다 우선순위가 높고
:where는 우선순위가 낮아 요소(element)선택자 css가 덮어쓰이는 효과가 발생된다.

5. :root & var()
   DOM 구조의 root 요소를 선택, HTML의 루트 요소는 html라 :root은 html 요소라고 봐도 되지만, :root의 명시도(우선순위)가 더 높습니다

6. @supports
   부여된 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 하는 방법
   display: grid를 지원하는 브라우저에서만 특정 CSS를 적용하고 싶을 때, 아래처럼 코드 작성

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

not, and, or 연산자 사용이 가능하고 여러 조합으로도 활용할 수 있습니다.

/*not 연산자*/
@supports not (transform-origin: 10em 10em 10em) {}

/*and 연산자*/
@supports (display: table-cell) and (display: list-item) {}

/*or 연산자*/
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

참조 : https://teamdable.github.io/techblog/New-CSS-features