WIL 5월 4주차

이번 주는 최근 새로 알게 된 토막 지식들을 모아 보았다.

OKLCH 컬러 모델

참고: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

색상은 rgb나.. hex code 로 쓰는게 보통이었는데 oklch는 처음 들어봤다.

이 색상 표현 방법은 인간친화적이어서(?) 다른 색상 표기 보다 직관적이고 색을 변경할 때 예상치 못한 색이 나오는 경우가 덜 하다고 한다.

밝기, 채도, 색상 값으로 표현이 된다.

좋은 점

• rgb 혹은 hex 와 달리 사람이 읽을 수 있다(human readable). 값만 보고 어떤 값인지 예측하기 쉽다. hsl과 비교해서 밝기 값이 더 지각할 수 있다(직관적).
• hsl과 달리 색상 수정이 좋다. Sass의 darken 처럼 예측하기 어려운 결과가 나오지 않는다.
• 예측가능한 밝기 덕분에 디자인 시스템에서 컬러팔레트 생성시 특히 접근성이 좋다.
• sRGB보다 더 많은 색을 표현할 수 있는 기기(p3 색상을 지원하는)에서 사용하는 색을 지정할 수 있다.

부족한 점

• 밝기L, 채도C, 색상H의 모든 조합이 모든 모니터에서 지원되지는 않는다. (색 변환기를 사용할 수 있다)
• 새로운 색 공간이기 때문에 아직 생태계가 제한적이다.

(더 찾아볼 것: oklab, p3 color)

css nesting

사파리 웹킷 업데이트 내용 보다가 다시 떠오른 CSS 중첩.

중첩 문법은 매우 편리하고, 생산적이어서 오직 이것 때문에라도 SCSS같은 CSS 전처리기를 사용하기도 했다. 이제는 퓨어한 CSS에서 이걸 써도 브라우저가 알아들을 수 있다니 정말 신기하다.

아무렇지도 않게 널리 쓰이려면 몇 년은 더 걸리겠지만, 계속해서 새롭게 추가되어 발전하는 것은 의미있다.

aria-invalid and aria-errormessage

평소에 aria, 즉 접근성에 관련한 고려를 잘 못했지만 이번 기회에 자주 쓸 거 같은 거 하나 알아간다.

Form을 다룰 때 값의 검증이 필요한 경우, 이 속성을 추가하면 스크린 리더 사용자에게 해당 인풋의 값의 유효 여부와 에러 메세지를 알려줄 수 있다.

<input
  type="email"
  autocomplete="username"
  required
  aria-invalid="true"
  aria-errormessage="email-error"
/>