What’s !important #12는 오래된 방식(Safari가 없을 때 Safari에서 테스트하기), 새로운 방식(::checkmark), 그 중간 단계(HTML을 이용한 anchor positioning), 그리고 더 많은 내용을 다룹니다.

준비하세요!

Safari가 없을 때 Safari에서 테스트하기

출처: Frontend Masters.

Safari는 두 번째로 인기 있는 웹 브라우저이지만, Apple 사용자만 사용할 수 있습니다. 그럴 만도 합니다. 즉, Apple은 Safari를 Apple의 소프트웨어 및 하드웨어와 깊게 통합된 독점 브라우저로 만들기 위해 집중적으로 투자하고 있습니다. 하지만 이로 인해 Safari에서 웹사이트를 테스트하는 것이 다소 번거로워졌습니다. Declan Chidlow는 Safari가 없을 때 Safari에서 테스트하는 것과 관련하여 우리의 선택지가 무엇인지 설명했습니다.

::checkmark 첫 살펴보기

Sunkanmi Fafowora는 체크마크(checkmark)를 (실제로) 스타일링할 수 없었던 오래된 문제를 해결하는 ::checkmark 의사 요소(pseudo-element)에 대한 첫 번째 모습을 보여주었습니다. 이 요소는 체크박스뿐만 아니라 라디오 버튼(radios)과 셀렉트 박스(selects)의 체크된 상태 표시기(checked state indicator)도 대상으로 한다는 점에 유의하세요!

border-shape + shape()를 이용한 다양한 모양 스타일

Temani Afif는 border-shape를 shape() 함수와 결합할 때 (clip-path와 비교하여) 더 많은 모양 스타일을 생성할 수 있으며, 이들 사이를 쉽게 전환할 수 있다는 점을 지적했습니다.

출처: CSS Tip.

sibling-index() 및 sibling-count()에 대한 간결한 가이드

Durgesh Pawar는 sibling-index() 및 sibling-count()에 대한 심층 분석`을 통해, 거의 Baseline CSS 함수가 된 이 기능들로 우리가 할 수 있는 멋진 일들을 모두 보여주었습니다.

CodePen Embed Fallback

또한, CSS-Tricks의 Durgesh가 작성한 View Transition의 주의사항에 관한 2부작 시리즈도 놓치지 마세요.

데이터 속성(data attributes)과 고급 attr()을 이용한 앵커 연관성 관리

이 내용은 사실 제가 작성한 것입니다! anchor 속성이 제외되었다는 소식을 듣고 실망했습니다. 만약 유지되었다면 HTML을 사용하여 앵커 연관성(anchor associations)을 관리할 수 있는 방법을 제공했을 텐데 말이죠. 저는 데이터 속성(data attributes)과 고급 attr()을 사용하여 앵커 연관성을 관리하는 대안 기술을 시연했습니다.

CSS 코드를 스포일러하지는 않겠지만, 제가 탐구했던 다양한 HTML 구문은 다음과 같습니다:

<!-- anchor 속성 -->
<div anchor="anchorA">Boat A</div
<div id="anchorA">Anchor A</div
...

State of CSS 2026 설문조사 참여하기

또다시 그 시기가 돌아왔습니다!

저는 이런 "상태(state of)" 설문조사를 매우 좋아합니다 (특히 State of CSS 2026 설문조사를 좋아하지만, 여러분도 이미 알고 계실 겁니다). 하지만 올해는 느낌이 조금 다르며, 이를 눈치챈 사람이 저뿐만이 아닐 것이라 확신합니다.

오프닝 크롤(opening crawl) 문구에 따르면:

심호흡을 하세요. 진정하세요. 모든 새로운 CSS 속성(property)을 다 알지 못해도 괜찮습니다. 사실, 우리 중 그 모든 것을 아는 사람은 거의 없습니다.

이 설문조사의 목표 중 하나는 개발자들이 최신이자 최고의 CSS 개선 사항들을 계속 파악할 수 있도록 돕는 것이었습니다. 하지만 단점은 이러한 모든 진보가 때로는 압도적으로 느껴질 수 있다는 점입니다.

그래서 올해 우리는 설문조사에서 다루는 기능의 수를 줄이고, 대신 가장 중요한 기능들에 집중하기 위해 의식적인 노력을 기울였습니다.

충분히 이해합니다. CSS를 따라가는 것이 점점 더 어려워지고 있습니다. 저의 "확인해 볼 것들" 목록은 계속 길어지기만 하네요! 그렇긴 하지만, CSS의 팬이 되기에 이보다 더 흥분되는 시기는 없었습니다. 새로운 기능을 하나 배웠는데 곧이어 두 개가 더 출시되었을 때의 그 기분은, 압도적이지만 가장 긍정적인 의미에서 그렇습니다.

하지만 여전히 시간은 무한하지 않기에, 우리는 어떤 기능에 투자할지 결정해야 하며, 그것이 바로 이러한 "현황(state of)" 설문조사가 존재하는 이유입니다. 그리고 올해 설문조사는 정말 제대로, 가장 중요한 것들에 완전히 집중하고 있습니다.

하지만 만약 당신이 CSS의 모든 것에 대한 갈증이 있다면, 이를 위한 훌륭한 블로그가 있다고 들었습니다!

새로운 웹 플랫폼 기능

• Firefox 151
  • 컨테이너 스타일 쿼리 (Container style queries) (현재 Baseline 적용)
  • 문서 Picture-in-Picture API (데스크톱 전용, Safari 미지원)

양보다는 질이군요!

다음에 만나요.