CSS 최신 기술

@Container

반응형 웹 사이트를 만들 때 @media를 사용하는데,
여기에 부모박스에 맞춰서 반응형으로 만들 수 있게 되었다.

.Wrapper{
	contain : style layout inline-size;
    //이 부분을 부모 css에 추가
}
.content{
	width : 100px;
}

@container (max-width : 500px){
	.content{
    	widht : 50px;
    }
}

위의 예시코드는 Wrapper가 500px 미만이 되면 content가 자동으로 반응할 수 있도록 작성한 css이다.

@scope

다음과 같이 css가 작성되있을 때,

.content {
	width : 50px;
}

class content를 쓰는 모든 div는 width :50px을 받게 될 것이다.

그런데 여기서 특정 component안에서만 적용될 수 있도록 scope 말 그대로 범위를 지정할 수 있는 기능이 추가되는 것이다.

@scope(.father) to (.sun) {
	.content {
    	width : 50px;
    }
}

위 처럼 scope를 지정하면 father div 부터 안에 있는 sun div까지의 범위에서만 class content width가 적용된다.

nesting

또한 Sass나 styled-coponent 등에서만 가능하던 nesting 문법이 가능해진다.

ex )

.father{
	어쩌구
	.sun{
    	저쩌구
    }
}

anime

그리고 시간의 흐름에 따른 애니메이션만 제공하던 @keyframes에서 스크롤 애니메이션이 추가된다.