주간 플랫폼 뉴스 : CSS :: 마커 의사 요소, 사전 렌더링 웹 구성 요소, 사이트에 웹 멘션 추가

Šime의 주간 웹 플랫폼 뉴스는 개발자를위한 통찰력있는 업데이트를 제공합니다. 이번 주 하이라이트로는 날짜 선택기와의 키보드 접근성 문제, FOUC를 다루는 새로운 웹 구성 요소 컴파일러, CSS가있는 스타일링 목록 항목 마커 및 웹 커넥션 추가에 대한 간단한 가이드가 포함됩니다.

날짜 입력 접근성 문제

표준 텍스트 필드는 키보드 사용자가 복잡한 날짜 선택기보다 선호합니다. 스크린 리더 사용자는 또한 기본 날짜 컨트롤과 도전을 경험합니다. 사용자 지정 유효성 검사를 통한 일반 텍스트 입력은보다 액세스 가능한 솔루션을 제공합니다.

클라이언트 측 및 서버 측 유효성 검사를 통해 날짜에 대한 일반 텍스트 입력 우선 순위를 정하는 것은 특히 생일과 같은 알려진 날짜에 효과적인 것으로 입증되었습니다.

(Adrian Roselli를 통해)

스텐실로 웹 구성 요소를 간소화합니다

스텐실, 웹 구성 요소 컴파일러, 사전 렌더링 구성 요소 (Shadow DOM 포함) 또는 스타일링이 완료 될 때까지 렌더링을 지연하여 FOUC (플래시되지 않은 콘텐츠의 플래시)를 방지합니다. 폴리 필드 로딩을 ​​최적화하고 유용한 데코레이터와 후크가있는 개발자 친화적 인 구성 요소 API를 제공합니다.

 "@Stencil/Core"에서 {component, prop, h} 가져 오기;

@요소({
  태그 : "내 구성 요소"
})
수출 클래스 MyComponent {
  @prop () 연령 : 숫자 = 0;

  렌더 () {
    반품<div> 나는 {this.age} 나이입니다</div> ;
  }
}

(Max Lynch를 통해)

CSS :: 마커가있는 스타일링 목록 항목 마커

::marker pseudo element는 display: list-item 사용하는 경우 목록 항목 마커 (총알, 숫자)를 스타일링 할 수 있습니다. 현재 Firefox는 완전한 지원이있는 기본 브라우저입니다.

(레이첼 앤드류를 통해)

네 단계로 웹 오는 구현

사이트에 웹 사이트를 추가하면 참여와 상호 작용이 향상됩니다.

1. 레지스터 : webmention.io (웹 멘션 수신 서비스)에서 계정을 만듭니다.
2. 링크 태그 추가 : 포함<link rel="webmention" href="%5Byour-webmention-endpoint%5D"> HTML에서. CMS 플러그인도 제공됩니다.
3. 가져 오기 부과 : Ajax를 사용하여 webmention.io에서 wabmentions를 검색하여 디스플레이.
4. 자동 보내기

(Daniel Aleksandersen을 통해)

위 내용은 주간 플랫폼 뉴스 : CSS :: 마커 의사 요소, 사전 렌더링 웹 구성 요소, 사이트에 웹 멘션 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!