CSS-Tricks 업데이트

CSS-Tricks의 최신 릴리스, 보안 패치, 기능 업데이트 소식을 확인하세요.

CSS-Tricks 최신 소식

CSS-Tricks 2026년 7월 7일

강력한 CSS border-shape 속성을 맞이할 준비를 하자

CSS-Tricks에서 새로운 border-shape 속성을 소개했다. clip-path와 같은 값을 받으면서도 border, box-shadow, outline 같은 장식 속성이 도형을 따라가도록 해주는 속성이다.

CSS-Tricks 2026년 6월 30일

CSS-Tricks What's !important #14: Gap Decorations, random(), <select> 필드 사이징 등 최신 CSS 소식 정리

CSS-Tricks의 What's !important 14호는 CSS Gap Decorations, random() 함수 실험, field-sizing을 활용한 <select> 너비 조절, 그리고 최신 CSS 테마 설정 방법 등을 다룬다. 브라우저 업데이트는 Firefox 152의 field-sizing Baseline 진입 정도로 조용한 편이다.

CSS-Tricks 2026년 6월 25일

CSS translateZ() 함수 알마낙 레퍼런스 정리

CSS-Tricks가 translateZ() 함수에 대한 알마낙 레퍼런스를 게시했다. perspective와의 관계, GPU 가속 활용법까지 정리되어 있어 3D 트랜스폼을 다루는 프런트엔드 개발자에게 참고할 만하다.

CSS-Tricks 2026년 6월 19일

스크롤 트리거 애니메이션 첫 살펴보기

Chrome 146에서 CSS 스크롤 트리거 애니메이션이 처음 출시되었다. CSS-Tricks가 기존 스크롤 드리븐 애니메이션과의 차이점, 새로운 timeline-trigger·animation-trigger 속성의 사용법을 정리했다.

CSS-Tricks 2026년 6월 17일

ariaNotify()의 유혹 — 강력하지만 신중하게 써야 할 스크린 리더 알림 API

WAI-ARIA 1.3 명세에 정의된 ariaNotify() 메서드를 소개하며, 기존 라이브 리전의 구조적 한계를 짚고 새 API의 올바른 사용 맥락을 강조하는 CSS-Tricks 글에 대한 코멘터리.

CSS-Tricks 2026년 6월 15일

CSS @function, alpha(), Grid Lanes, 그리고 최근 웹 플랫폼 소식 정리

CSS-Tricks의 What's !important 13호가 CSS @function, alpha() 함수, Grid Lanes 가이드, dialog 개선 사항, Chrome 149 업데이트 등을 한 번에 정리했다. 개발 도구 설정 관점에서 눈여겨볼 포인트를 짚는다.

CSS-Tricks 2026년 6월 8일

스크롤 기반 애니메이션, 스크롤 트리거, 스크롤 상태, 뷰 전환 — 개념 구분 정리

CSS-Tricks에서 스크롤 기반 애니메이션, 스크롤 트리거 애니메이션, 컨테이너 쿼리 스크롤 상태, 뷰 전환 네 가지 개념의 차이를 정리한 글이다. 이름이 비슷해 혼동하기 쉬운 CSS 기능들을 한눈에 비교할 수 있다.

CSS-Tricks 2026년 6월 3일

CSS offset-path 속성 정리: 경로 기반 애니메이션의 현재 상태

CSS-Tricks가 offset-path 속성에 대한 Almanac 레퍼런스를 업데이트했다. 기존 motion-path에서 offset-path로의 네이밍 전환, 현재 지원되는 값, 관련 속성들을 정리하고 있다.

CSS-Tricks 2026년 5월 29일

CSS-Tricks !important #12: Safari 테스팅, ::checkmark, HTML 앵커 포지셔닝 등

CSS-Tricks의 뉴스레터 12호가 Safari 크로스 브라우저 테스팅, ::checkmark 의사 요소, data 속성 기반 앵커 연결 기법, 그리고 Firefox 151의 컨테이너 스타일 쿼리 Baseline 진입 등을 다뤘다.

CSS-Tricks 2026년 5월 27일

CSS letter-spacing으로 텍스트 등장 효과 만들기

CSS-Tricks에서 letter-spacing 속성의 음수 값과 투명 색상을 조합해 순수 CSS만으로 텍스트 등장·토글·약어 확장 효과를 구현하는 기법을 소개했다.

CSS-Tricks 2026년 5월 26일

AI 시대의 기술 문서 작성

CSS-Tricks 편집장이 AI 시대에 기술 문서 작성이 처한 현실과 앞으로의 방향에 대해 솔직하게 진단한 에세이다. 트래픽 하락, Stack Overflow의 동일한 추세, 그리고 그럼에도 기술 글쓰기가 여전히 필요한 이유를 다룬다.

CSS-Tricks 2026년 5월 25일

크로스 문서 뷰 트랜지션: 수백 개 요소로 확장하기

CSS-Tricks의 크로스 문서 뷰 트랜지션 시리즈 2편. view-transition-class를 활용해 수백 개 요소의 트랜지션 스타일링을 CSS 규칙 몇 줄로 해결하는 패턴을 다룬다.

CSS-Tricks 2026년 5월 22일

2026년 CSS 센터링의 현주소

CSS-Tricks에서 CSS 센터링 방법을 재정리했다. 100가지 센터링 코드를 열거한 뒤, 실제로 유효하고 고유한 방식은 15개 미만임을 보여주며 block·grid·flex 각 레이아웃별 권장 패턴과 text-box 속성을 소개한다.

CSS-Tricks 2026년 5월 20일

Stack Overflow: 우리가 질문을 멈출 때

CSS-Tricks가 Stack Overflow 질문 수의 급격한 감소를 분석하며, AI 의존과 커뮤니티 모더레이션 문제가 개발자 생태계 전반에 미치는 영향을 짚었다.

CSS-Tricks 2026년 5월 18일

크로스 문서 뷰 트랜지션: 아무도 언급하지 않는 함정들

CSS-Tricks에서 크로스 문서 뷰 트랜지션의 실질적인 구현 과정과 흔한 실수들을 정리한 2부작 시리즈의 첫 번째 글을 게시했다. 더 이상 유효하지 않은 meta 태그 방식 대신 CSS @view-transition at-rule 기반 opt-in과 디버깅 포인트를 다룬다.

CSS-Tricks 2026년 5월 15일

CSS-Tricks What's !important #11: 3D 복셀 씬, 플라잉 포커스, CSS 신규 문법 등

CSS-Tricks의 큐레이션 뉴스레터 11호가 나왔다. Heerich.js, of <selector> 문법, 범위 문법, 스크롤 기반 애니메이션, Chrome 148·Safari 26.5 업데이트 등을 다루고 있다.

CSS-Tricks 2026년 5월 12일

곧 자바스크립트를 ShadowRealm으로 추방할 수 있게 된다

TC39에서 진행 중인 ShadowRealm 제안을 CSS-Tricks가 상세히 해설했다. 메인 스레드를 공유하면서도 별도의 전역·내장 객체를 갖는 격리된 realm을 통해 서드파티 코드 샌드박싱 등의 사용 사례를 다룬다.