CSS attr()가 업그레이드됨

Bramus

게시일: 2025년 1월 15일

새롭게 설계된 attr() 함수

CSS attr()를 사용하면 CSS에서 HTML 속성의 값을 사용할 수 있습니다. 지금까지 attr()는 가상 요소의 content 속성 내에서만 작동했으며 값을 CSS <string>로만 파싱할 수 있었습니다.

Chrome 133부터 사용할 수 있는 새롭게 설계된 attr() 함수를 사용하면 더 많은 기능을 사용할 수 있습니다. 이제 맞춤 속성을 포함한 모든 CSS 속성에 attr()를 사용할 수 있으며 값을 <string> 이외의 데이터 유형으로 파싱할 수 있습니다.

예

다음 예에서 div의 color 속성 값은 data-color 속성의 값을 사용합니다. 이 속성 값은 attr() 및 type()를 사용하여 <color>로 파싱됩니다. 대체 값은 red로 설정됩니다.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

다음 예에서는 view-transition-name 속성이 요소의 id 속성에 따라 결정됩니다. 이 속성은 view-transition-name에 필요한 유형인 <custom-ident>로 파싱됩니다. attr()가 없으면 카드마다 view-transition-name를 선언해야 했지만 이제는 한 번에 할 수 있습니다.

<div class="cards">
  <div class="card" id="card-1"></div>
  <div class="card" id="card-2"></div>
  <div class="card" id="card-3"></div>
  <div class="card" id="card-4"></div>
</div>

.card {
  view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, etc. */
  view-transition-class: card;
}

유형을 CSS 크기 단위 또는 % 문자와 일치하는 식별자로 설정하여 값을 길이로 파싱할 수도 있습니다. 다음 예에서는 data-size 속성이 픽셀 값으로 파싱됩니다.

<div data-size="10">test</div>

div {
  font-size: attr(data-size px);
}

유형 없이 attr()을 사용하면 속성이 CSS 문자열로 파싱되며 이는 이전 동작과 동일합니다.

자세히 알아보기

attr()에 관한 자세한 내용은 사양 및 MDN을 참고하세요.