플랫폼 뉴스 : 논리적 CSS, FUGU API, 사용자 정의 미디어 쿼리 및 WordPress 대 이탈리아에 대한 기본값

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

논리 CSS : 신흥 기본값

Mozilla의 초기 구현 6 년 후 CSS 논리적 특성은 2021 년에 전체 브라우저 지원에 가깝습니다. Firefox, Chrome 및 최신 Safari 미리보기는 이미 아래에 요약 된 속성과 값을 지원합니다. 논리 CSS는 margin-inline ( margin-left 및 margin-right 결합)과 inset ( top , right , bottom 및 left )과 같은 속기로 스타일링을 단순화합니다.

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

/* 후에 */
기본 {
  마진 인라인 : 자동;
}

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

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

David Bushell의 웹 사이트는 Google Translate의 translated-rtl 클래스를 활용 하여이 접근법을 예시합니다. 크롬에서 번역 후 RTL 및 LTR 레이아웃을 비교하여 차이를 확인하십시오.

크롬의 논란이 많은 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 규칙은 아직 미개발 상태입니다. 이 기능을 사용하면 재사용 가능한 미디어 쿼리를 정의하고 코드 복제를 줄이고 가독성을 향상시킬 수 있습니다.

 @Custom-Media-Narrow-Window (Max width : 30em);

@Media (-narrow-window) {
  / * 좁은 창 스타일 */
}

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

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

위 내용은 플랫폼 뉴스 : 논리적 CSS, FUGU API, 사용자 정의 미디어 쿼리 및 WordPress 대 이탈리아에 대한 기본값의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!