이미 6월 말이 되어버렸지만 문뜩 2024년 HTML과 CSS 변경사항이 궁금해져 글을 작성해 보려 합니다.

2024년 HTML 변경 사항

`user-valid` 및 `user-invalid` 가상 클래스

새로운 :user-valid와 :user-invalid를 이용해 사용자가 입력한 값에 따라 스타일링이 가능해졌습니다.

<input type="text" id="username" pattern="[A-Za-z0-9]+" required />

input:valid {
  border: 2px solid green; /* 값이 유효하다면 초록색 */
}

input:invalid {
  border: 2px solid red; /* 값이 유효하지 않는다면 빨간색 */
}

user-invalid 관련 링크
user-valid 관련 링크

`select` 요소 내에서 `hr` 사용

select 요소 내에서 hr 태그를 이용해 옵션 그룹을 시각적으로 나눌 수 있습니다.

<select>
  <option>사과</option>
  <hr>
  <option>바나나</option>
</select>

관련 링크

`field-sizing: content` 속성

field-sizing: content을 사용하면 콘텐츠를 기반으로 크기 조절을 할 수 있습니다.

textarea {
  field-sizing: content;
}

관련 링크

`@property` 규칙 도입

이제 @property는 CSS에서 타입, 유형 검사, 기본값, 대체 값도 사용 설정합니다.

@property --custom-property-name {
  syntax: <value>; /* 변수에 허용되는 값의 형태 */
  inherits: <boolean>; /* 변수의 상속 여부 */
  initial-value: <value>; /* 변수의 기본 값 */
}

@property를 이용해 다음과 같이 사용할 수 있습니다.

@property --main-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #4caf50;  /* 녹색을 기본값으로 설정 */
}

body {
  color: var(--main-color);
}

애니메이션에도 적용할 수 있습니다.

@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: var(--progress);
  height: 20px;
  background-color: #4caf50;
  animation: progress 3s infinite;
}

@keyframes progress {
  0% {
    --progress: 0;
  }
  100% {
    --progress: 100;
  }
}

관련 링크

마치며

늦게나마 2024년도 HTML, CSS변경 사항에 대해 찾아보았는데 이 부분 말고도 더 많은 것들이 변했고 이런 변경 사항들을 잘 참고해 프로젝트에 어떻게 활용할 수 있을지 고민할 수 있는 시간이 되었습니다.

이 글은 해당 문서를 보며 작성 되었습니다.
https://developer.chrome.com/blog/new-in-web-ui-io-2024

2024 HTML 변경사항