유용한 CSS

@supports (브라우저의 css 지원여부를 체크)

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

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

 

scrollsnap (사용자가 터치, 휠 스크롤 조작을 마쳤을 때 오프셋 설정 가능)

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

 

is pseudo selector (쉽고 강력한 선택자를 제공)

before

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

 

after

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

 

Flex Box Gap (flex에서 쉽게 margin을 줄 수 있음)

div{
    display: flex;
    gap: 10px 5px; // row, column
}

 

aspect-ratio (이미지나 비디오의 비율을 쉽게 설정 가능)

img, video {
    aspect-ratio: 16/9;
}

 

position: sticky

.parent {
    height: 70% // 부모 컨테이너는 높이가 정의 되어있어야함
}

.children {
    position: sticky
}