css 최신

field-sizing

input,textarea{
	field-sizing: fixed;
    field-sizing: content; 
}

크롬 ~ 135
사파리 x

입력 필드 크기를 고정하는 데 사용.
input,textarea와 같은 폼 요소에 적용되며 브라우저가 자동으로 필드의 크기를 조정하는 것을 방지함

achor-name

.anchor{
	anchor-name: --my-anchor;
}

.target {
  position: absolute;
  top: anchor(--my-anchor bottom);
  left: anchor(--my-anchor left);
  padding: 10px;
}

Chrome, Firefox, Safari, Edge 중 일부에서 이 기능이 동작하지 않음

.target 요소는 --my-anchor를 기준으로 위치가 결정
.anchor의 아래(bottom)와 왼쪽(left)에 배치

anchor-center;

.anchor {
  width: fit-content;
  anchor-name: --myAnchor;
}

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  top: calc(anchor(bottom) + 5px);
  justify-self: anchor-center;
}

최신 브라우저만 부분적으로 지원

anchor-center는 앵커 포지션(anchor positioning) 된 요소가 있을 때
앵커 요소의 블록 방향 중앙에 해당 요소를 정렬하는 값

text-wrap: balance

p {
  text-wrap: balance;
}

크롬 부분 114 - 129, 지원 130 - 135
사파리 17.5 -18.4

균형 있게 줄바꿈

animation-timeline

.box {
  animation: move 1s linear;
  animation-timeline: scroll();
}
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

크롬 115 - 135
사파리 X

스크롤이나 시간에 따라 애니메이션을 제어할 수 있는 기능

view-transition

html::view-transition {
  position: fixed;
  inset: 0;
}

페이지 전환 시 애니메이션 효과를 적용하는 기능
페이지 A에서 페이지 B로 전환할 때 요소가 부드럽게 이동하거나 사라지는 효과를 만들 수 있음

@container

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    font-size: 1.2rem;
  }
}

크롬 106 - 135
사파리 16 - 18.4
컨테이너의 크기에 따라 스타일을 적용

@scope

@scope (.card) {
  h2 {
    color: blue;
  }
  p {
    color: gray;
  }
}

크롬 118 - 135
사파리 17.4 - 18.4

.card 내부의 h2와 p 요소에만 스타일 적용

@media

@media (width <= 28rem) {
}