We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
There was an error while loading. Please reload this page.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
.inbox { container: inbox / inline-size; /* container-name / container-type */ /* container-type은 inline-size, size, normal이 있다 */ } @container (width <= 550px) { .item { grid-template-columns: 3.5rem 1fr 4fr; } .time { display: none; } }
has
<target>:has(<condition>) { <styles> }
.card:has(.visual) { grid-template-columns: 1fr 1fr; } .card:not(:has(.visual)) h1 { font-size: 4rem; }
:nth-child
:nth-child(2 of .special)
.card {} .card:hover {} /* can be done with nesting like */ .card { &:hover { } } .card { display: grid; gap: 1rem; @container (width >= 480px) { display: flex; } }
@scope (.card) { .title { font-weight: bold; } }
@property
/* AS-IS */ html { --primaryColor: red; } .link { color: var(--primaryColor); } .link:hover { color: blue; } /* TO-BE */ @property --primaryColor { syntax: "<color">; /* 변수의 유형 지정 initital-value: red; /* 기본값 지정 */ inherits: false; /* dom tree 상속 여부 */ } .link { color: var(--primaryColor); /* red */ } .link:hover { --primaryColor: blue; /* blue */ } .link:fisrt-child:hover { --primaryColor: false; /* red */ }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Uh oh!
There was an error while loading. Please reload this page.
CSS 새로운 스펙
component 기반 개발에 적합한 API
Container queries
has
selectornth-of syntax
:nth-child
selector의 발전된 버전. 특정 selector 중 몇번째 child인지 새로운 조건을 걸 수 있음.nesting 기본 지원
scope
JS를 대체할 수 있는 API
@property
scroll-based animation css
The text was updated successfully, but these errors were encountered: