WWDC23에서 발표된 사파리 브라우저에서 사용할 수 있는 CSS 최신 사항 소개에 대한 영상 내용을 간단히 요약해 보겠습니다.
원본 영상 링크 : https://developer.apple.com/videos/play/wwdc2023/10121
크게 4개의 범위로 분류하여 소개했네요.
- 레이아웃 개선 사항
- 다양한 색상 사용
- 유용한 선택자 추가
- 타이포그라피 개선 사항들
이번에 소개한 CSS 최신 사항들이 아직 모든 브라우저에서 지원하지 않아요.
직접 확인 해보고 싶다면, Safari Technology Preview를 설치하시면 됩니다.
1. 레이아웃 개선 사항
Masonry 레이아웃
가장 먼저 소개된 내용은 grid 레이아웃을 적용할 때, 흔히 핀터레스트 UI라고 부르는 메이슨리(Masonry) UI를 적용할 수 있는 속성입니다.
영상에서는 grid-template-rows 속성에 masonry 라는 값을 넣어 쉽게 메이슨리 UI를 만들 수 있습니다.
이 속성 값은 아직 최근 버전의 브라우저들이 지원하지 않기 때문에, 동일한 형태의 UI를 만들려면, CSS multi-column 레이아웃이나 자바스크립트의 추가 적용을 통하여 구현 해야합니다. 간단하게 CSS 속성만으로 구현할 수 있게 되면 최적화 측면에서도 좋아지겠네요.
grid-template-columns 속성의 값을 조정하여 다양한 레이아웃 구현도 가능해지는군요!~
아직은 Safari Technology Preview 버전과 layout.css.grid-template-masonry-value.enabled 속성을 true로 설정한 파이어폭스 에서만 확인 할 수 있습니다.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
Native CSS Masonry Layout In CSS Grid — Smashing Magazine
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.
www.smashingmagazine.com
Margin trim
다음으로 소개하는 속성은 margin-trim 속성입니다.
사파리 16.4 버전부터 지원을 하고 있는 속성으로, 부모 요소에서 자식 요소가 가지고 있는 여백을 잘라낼 수 있는 속성입니다.
위 예 처럼 자식 요소인 h2와 p 요소에 상하 마진이 적용되어 있을 경우, UI에 따라 의도치 않은 여백을 없애기 위해 추가로 스타일을 지정해줘야 하는 경우가 있는데, 이런 경우 유용하게 사용될 수 있겠네요.
부모인 .card 요소에서 margin-trim 속성에 block 값을 적용하면 예시와 같이 부모 요소와 인접한 자식 요소의 여백이 사라지게 됩니다.
수퍼 쿨 울트라 유용한 속성입니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim
margin-trim - CSS: Cascading Style Sheets | MDN
The margin-trim property allows the container to trim the margins of its children where they adjoin the container's edges.
developer.mozilla.org
2. 다양한 색상 사용
CSS Color Module Level 4 스펙이 2022년에 후보 권고 사항(Candidate Recommendation, CR)이 되었습니다. 이 스팩안에 CSS를 이용하여 색상을 정의하는 14가지 방법이 새롭게 추가되었습니다.
최신 디스플레이는 실제로 사람의 눈에 보이는 모든 색상을 표시할 수 없습니다. 현재 사용하고 있는 색상 영역의 표준은 sRGB입니다. 이는 마이크로소프트와 HP가 협력하여 만든 색상 영역입니다.
DCI-P3는 디지털 영사기의 색상 영역으로 사용하기 위해 정의한 색 영역인데, sRBG보다 약 25% 정도 더 많은 색상을 표현할 수 있습니다.
애플은 DCI-P3를 바탕으로 한 Display P3라고 하는 규격을 사용하고 있습니다.
애플이 차세대 프로파일로 적극 밀고 있는 색 영역으로 아이폰 7 이후로 기본 사진앱으로 촬영한 모든 사진들은 P3 색 영역을 기본으로 지정하고 있습니다.
색상 조합을 위해 사용하는 다양한 방법에 대해서 설명합니다.
기존에 사용하던 hexa 코드, RGB(), HSL()로는 P3 범위의 색상을 표현할 수 없습니다.
color-mix()와 calc()를 조합하여 색상을 만들고, LCH, OKLCH, LAB, OKLAB를 이용해 다양한 색상 표현 방법을 보여줍니다.
색상과 색상 조합 관련해서 좀 더 자세히 알아봐야 겠네요. 새로운게 많이 나온 것 같습니다. ㅎㅎ
3. 유용한 선택자 추가
:user-valid , :user-invalid
input 요소에 입력되는 값의 유효성 여부를 표현할 수 있는 선택자입니다.
기존에 있던 :valid, 와 :invalid는 input 요소에 타이핑이 될 때마다 유효성 여부를 판단하는데 이런 단점을 보완한 것 같네요.
https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid
:user-valid - CSS: Cascading Style Sheets | MDN
The :user-valid CSS pseudo-class represents any validated form element whose value validates correctly based on its validation constraints. However, unlike :valid it only matches once the user has interacted with it.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid
:user-invalid - CSS: Cascading Style Sheets | MDN
The :user-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it.
developer.mozilla.org
:has()
:has()선택자는 다양한 선택자를 조합하여 상황에 맞는 스타일을 선언할 수 있습니다.
아래 예처럼 인코딩 관련 값이 있을 때 스타일을 지정한다던지, 오디오, 비디오 관련 속성들이 있을 경우 스타일을 제저할 수 있는 등 다양하게 활용할 수 있겠네요.
4. 타이포그래피 개선 사항
텍스트와 폰트 관련 사항들도 꽤 디테일한 조정이 가능하도록 개선 될 것 같습니다.
line-height unit, lh, rlh
CSS에는 길이를 정의할 때 사용하는 여러 종류의 단위가 있습니다.
svh와 lvh 같이 뷰포트와 관련된 단위도 있고, 콘테이너 크기에 따라 결정되는 cqb와 cqi도 있습니다.
타이포그라피 크기와 관련된 단위도 있습니다.
1ex는 폰트의 x-height와 같고, 1ch는 0이라는 문자의 가로 크기와 같고, 1ic는 한문과 같은 표문자의 가로 크기와 같습니다.
이런 단위들은 여러 브라우저에서 예전부터 지원되어 왔습니다.
추가로 타이포그라피 크기와 관련된 새로운 단위가 있습니다.
line-height 단위를 측정하는 lh와 rlh입니다.
최 상위 요소인 html에 line-height: 1.4 로 지정하고, section의 padding을 2rlh로 지정합니다. 그리고 제목인 h1과 문단 p 요소에 margin-block 값을 1rlh로 지정합니다.
이렇게 지정하면 루트(root) 요소인 html의 line-height를 기준으로 자식 요소의 line-height가 결정됩니다. 콘테이너 역할을 하는 section의 상하 padding 값이 html의 line-height의 2배 값이 적용(2rlh)되고, 자식 요소로 있는 h1, p 요소는 1배 값(1rlh)이 적용됩니다.
디자인 의도나 문단 간격을 맞추기 위해 헤드라인과 문단 요소에 별도의 padding을 적용하거나 인위적인 간격을 적용할 필요가 없어집니다.
font-size-adjust
동일한 line-height 값을 가지고 있더라도 폰트 서체 별로 위치나 높이가 다르게 보이던 것을 font-size-adjust 속성을 이용하여 조정할 수 있게 됩니다.
웹페이지의 폰트를 지정할 때, font-family 속성에 우선적으로 적용될 서체를 순서대로 지정합니다. 일반적으로 하나의 폰트를 지정하지 않고 사용자의 시스템에 해당 폰트가 없을 경우를 대비하여 여러 폰트를 적용 순서대로 지정합니다.
그런데 이렇게 폰트를 적용했을 때, 한 페이지에서 여러 서체가 사용되는 경우, 문단 안에서 폰트 크기나 위치가 달라지는 경우가 생깁니다. 비록 같은 크기의 font-size를 지정하였더라도 폰트마다 x-height의 차이가 존재하기 때문입니다.
의도와 다르게 크기가 작아 보이는 서체의 크기만 상대값으로 조정(font-size: 120%)해도 두 서체 간의 간격은 크게 달라지지 않습니다.
이를 보완하기 위해 부모요소에 font-size-adjust: 0.47 을 추가하면, 두 서체의 높이가 자연스럽게 비슷하게 적용됩니다.
저 0.47이라는 값은 어떻게 나온 숫자일까요?
해당 폰트의 font-size와 x-height 의 비율이라고 이해하시면 됩니다.
쉽게 이해하도록 말한다면, 폰트의 x-height를 font-size의 절반 정도(47%) 크기로 맞추라는 의미입니다.
이 font-size-adjust 속성은 사파리 16.4부터 지원됩니다.
저 0.47 이라는 숫자는 아마 일반적으로 적용될 수 있는 비율의 값일 것입니다.
하지만 사파리 17 버전부터는 from-font 라는 값이 지원되어, 따로 값을 넣어주지 않아도 브라우저가 알아서 font-size-adjust값을 조정해줄 수 있습니다.
혹은 폰트의 값일 미세하게 조정하고 싶을 때는 two-value 문법을 적용할 수도 있게 됩니다.
두 개의 값을 이용할 때는 ex-height 뿐 아니라, cap-height, ch-width, ic-width, ic-height와 같은 값을 기준으로도 세부적으로 조정할 수 있게 됩니다.
Text-box trim
위에 나왔던 margin-trim과 유사하게 이 속성은 텍스트 박스에서 원하지 않는 여백을 제거해 줄 수 있습니다.
프로필 이미지와 이름이 함께 노출되는 UI에서 스타일을 수직 중앙으로 정렬해도 텍스트가 영역의 수직 중앙에서 조금 아래쪽으로 내려가 보입니다.
폰트마다 문자를 표현하기 위해 확보하고 있는 상하 여백의 차이가 존재하기 때문인데요. 이 여백을 제거할 수 있는 속성이 text-box-trim입니다. 이 속성은 이전에 있던 leading-trim 속성 의 이름이 변경되어 아직 초안(Working Draft) 작업 중입니다.
h2에 지정한 text-box-trim: both 로 헤드라인 텍스트의 상하에 있던 여백을 제거하여 이미지의 상단라인과 그리드를 맞출 수 있습니다.
여기까지 이번 WWDC23에서 소개된 새로운 CSS 스펙을 살펴봤습니다.
당장 사용할 수 있는 기능들은 아니지만 미래의 기능을 미리 알아두면 좋을 것 같습니다.
몇가지 소개를 건너 뛴 속성도 있는데요. 전체 동영상은 아래 링크를 확인해주세요.
https://developer.apple.com/videos/play/wwdc2023/10121
What's new in CSS - WWDC23 - Videos - Apple Developer
Explore the latest advancements in CSS. Learn techniques and best practices for working with wide-gamut color, creating gorgeous...
developer.apple.com
