CSS) css최신 트렌드 5가지 - 노마드코더

1. @supports
브라우저의 css 지원여부를 체크

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

지원을 하지 않으면 아래의 display를 적용

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

 

2. css scrollsnap

#parents { scroll-snap-type: y mandatory;}
.children { scroll-snap-align: center }

https://codepen.io/serranoarevalo/pen/xxdYBxZ

Scroll Span

3. is sudoselector

:is(header, nav, form) button {
	background-color: tomato;
}

 

4. flex box gap

div {
	display: flex;
 	gap: 10px 5px;   
}

 

5. aspect-ratio

img {
	aspect-ratio: 16/ 9;
}

 

6. postition:sticky

img {
	aspect-ratio: 16/ 9;
}

https://codepen.io/serranoarevalo/pen/YzVeMyJ

Sticky