CSS 5 변경점
2022 CSS 변경점
- 기존의 responsive web
@media (max-width : 768px { // 브라우저폭이 768px이하면
.text {
font-size : 16px;
// -이런거 적용해주세요
}
})
이런식으로 구축해서 페이지 사이즈에 따라 반응하게 함
W3C(Cascading Style Sheets working group) 더 다양한 것에 반응하는 CSS언어들을 업테이트하기 시작함
예를들어 플립폰에서 반으로 접히는 디스플레이에 반응한다든가 다크모드에 반응해 사이트도 다크모드 적용한다든가 애니메이션을 끈 핸드폰으로 접속했을때 사이트의 애니메이션도 끈다든가
container-query 는 지금도 써볼 수 있는 문법 여태까지는 브라우저 폭에 반응하는 문법 지금은 부모 divbox에 반응하는 문법으로 바뀜
현재 chrome에서는 동작하지 않음 (카나리아 버전 : 컨테이너 쿼리 옵션사용 설정)
scope 특정 컴포넌트 안에서만 적용되는 문법이 나올예정
CSS 애니메이션은 timebase 시간이 흐를때 적용됨 근데 scroll 위치에 따라 애니메이션이 적용되게하는 문법이 추가될듯 (기존에는 JS로 구현함)