Skip to content

CSS 신기술과 라이브러리 트렌드 #7

New issue

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

Open
ed-jinyoung-park opened this issue Aug 23, 2023 · 0 comments
Open

CSS 신기술과 라이브러리 트렌드 #7

ed-jinyoung-park opened this issue Aug 23, 2023 · 0 comments

Comments

@ed-jinyoung-park
Copy link
Collaborator

ed-jinyoung-park commented Aug 23, 2023

CSS 새로운 스펙

component 기반 개발에 적합한 API

Container queries

.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 selector

<target>:has(<condition>) { <styles> }
.card:has(.visual) {
  grid-template-columns: 1fr 1fr;
}

.card:not(:has(.visual)) h1 {
  font-size: 4rem;
}

nth-of syntax

  • :nth-child selector의 발전된 버전. 특정 selector 중 몇번째 child인지 새로운 조건을 걸 수 있음.
:nth-child(2 of .special)

nesting 기본 지원

  • sass를 통해 지원되던 nesting을 css에서도 기본 지원
.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {
    
  }
}

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

scope

@scope (.card) {
  .title { 
    font-weight: bold;
  }
}

JS를 대체할 수 있는 API

@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 */
}

scroll-based animation css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant