2021은 CSS 논리적 특성의 광범위한 채택으로 크게 전환됩니다! 최근 Chrome API 릴리스는 토론을 일으켰으며 SVG의 종횡비 제어는 새로운 유연성을 제공하고 WordPress는 액세스 가능한 타이포그래피를 우선시하며 CSS 사용자 정의 미디어 쿼리 개발은 중단되었습니다. 세부 사항을 탐구합시다.

논리적 CSS : 새로운 기본값

Mozilla의 초기 구현 6 년 후, CSS 논리적 특성은 2021 년에 전체 브라우저 지원에 가깝습니다. Firefox, Chrome 및 최신 Safari 미리보기는 이미 아래에 요약 된 속성과 값을 지원합니다. 논리적 CSS는 마진 인라인 ( 마진-왼쪽 와 마진 오른쪽 와 inset 탑 , , , , , , , ,

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

).

/* 전에 */ 기본 { 마진 좌파 : 자동; 마진 오른쪽 : 자동; } /* 후에 */ 기본 { 마진 인라인 : 자동; }

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

오른쪽에서 왼쪽 (RTL) 레이아웃에 적응하는 것이 훨씬 쉬워집니다. 간단한 클래스 스위치는 아랍어, 페르시아어 및 우르두어와 같은 RTL 언어로 번역 된 사이트의 전환을 처리합니다.

/ * 번역 될 때 RTL로 전환 */ .TransLated-rtl { 방향 : RTL; }

David Bushell의 웹 사이트는 Google Translate의

Translated-RTL

클래스를 활용 하여이 접근법을 예시합니다. Chrome에서 번역 후 RTL 및 LTR 레이아웃을 비교하여 차이를 확인하십시오.

Chrome의 논쟁의 여지가있는 Fugu Apis

• Chrome의 최근 WebHid 및 Web Serial (Desktop) 및 Project Fugu의 일부인 Web NFC (Android)를위한 고급 하드웨어 상호 작용을위한 3 개의 API 릴리스가 논쟁을 일으켰습니다. W3C 커뮤니티 그룹 내에서 개발되었지만 아직 웹 표준이 아닙니다.
• WebHid API : OS 드라이버가없는 드문 인간 인터페이스 장치와 웹 앱 상호 작용을 가능하게합니다 (예 : Nintendo Wii Remote).
• Web Serial API : 에뮬레이션 된 직렬 연결을 통해 마이크로 컨트롤러 및 3D 프린터와 같은 주변 장치와의 바이트 별 통신을 촉진합니다.

Web NFC API :

NFC 태그에 대한 단거리 무선 읽기/쓰기가 가능합니다.

Apple과 Mozilla Express 예약, 지문, 보안 및 기타 우려를 인용합니다. Mozilla의 위치는 사양 위치 페이지에 자세히 설명되어 있습니다.

svg 유연성 :

preserveaspectratio = none

기본적으로 SVG는 종횡비를 보존하는 동안 스케일링됩니다.

preserveaspectratio = "none"

SVG를 늘려서 컨테이너를 채우고 잠재적으로 이미지를 왜곡합니다. 이것은 특정 공간을 채우는 데 필요한 경계 또는 대각선과 같은 반응 형 페이지의 간단하고 장식적인 요소에 유용 할 수 있습니다.

WordPress : 접근성을위한 이탤릭체 감소

이탤릭체는 강조를 향상 시키지만 확장 된 사용은 특히 난독증이있는 독자에게 접근성 문제를 나타냅니다. WordPress 5.7은 설명에서 이탤릭체를 제거하고, 텍스트를 돕고, 관리자 인터페이스 내의 다른 영역을 제거하여 가독성을 향상시켜이를 해결합니다. 이 업데이트는 또한 사용자 정의 웹 글꼴을 시스템 글꼴로 대체합니다.

CSS 사용자 정의 미디어 쿼리 : 여전히 진행 중이며

거의 7 년 전에 제안 된

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

규칙은 아직 미개발 상태입니다. 이 기능은 재사용 가능한 미디어 쿼리를 정의하고 코드 복제를 줄이고 가독성을 향상시킬 수 있습니다.

@Custom-Media-Narrow-Window (Max-Width : 30em); @Media (-narrow-window) { / * 좁은 창 스타일 */ }

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

브라우저 지원이 불확실하지만 공식 PostCSS 플러그인은 즉각적인 구현 이점을 제공합니다. 미디어 쿼리의 저자 정의 환경 변수의 개념도 탐색되고 있지만 진행중인 작업으로 남아 있습니다.

@media (max-width : env (-좁은 창)) { / * 좁은 창 스타일 */ }