HTML 대화 요소와 함께 일부 실습

이것은 HTML에 대한 첫 번째 모습입니다<dialog></dialog> 요소. 나는 그것에 대해 한동안 알고 있었지만 지금까지 그것을 사용하지 않았습니다. 인상적인 기능을 제공합니다. 생산에 사용해야하는지 확실하게 말할 수는 없지만 점점 더 실행 가능 해지고 있습니다.

의미를 넘어서 : API 및 전문 CSS

그만큼<dialog></dialog> 브라우저 지원이 유용성에 크게 영향을 미치기 때문에 요소가 두드러집니다. 이전 HTML5 요소와 달리 기능은 기본 대안으로 쉽게 복제되지 않습니다. 당신은 단순히 그것을 의미 적으로 향상된 것으로 취급 할 수 없습니다<div> . 그 기능은 그 이상으로 확장됩니다.<h3 id="브라우저-지원-현재-환경"> 브라우저 지원 : 현재 환경</h3> <p> 글을 쓰는 시점 :</p> <ul> <li> 크롬은 그것을 지원합니다 (버전 37). Edge의 지원은 임박합니다.</li> <li> Firefox에는 사용자 에이전트 (UA) 스타일 (버전 69)이 있지만 전체 기능에는 <code>dom.dialog_element.enabled 플래그가 필요합니다. 그럼에도 불구하고 CSS 지원은 불완전 해 보입니다.

사파리에는 지원이 부족합니다.

폴리 플릴을 사용할 수 있습니다. 광범위한 지원이 바람직하지만 기존 지원은 폴리 칠과 결합됩니다.<dialog></dialog> 많은 개발자들에게 매력적인 옵션.

개방 또는 폐쇄 : 기본 상태

<dialog>
  나는 닫혔다.
</dialog>
<dialog open="">
  나는 열려있다.
</dialog>

사용자 에이전트 스타일 : 기초

Chrome 및 Firefox는 UA 스타일 시트에서 비슷한 기본 스타일을 보여줍니다. 자동 여백, 두꺼운 검은 색 테두리 및 컨텐츠 기반 크기가 있습니다. 이 스타일은 사이트 디자인에 맞게 맞춤형 CSS로 쉽게 재정의됩니다.

JavaScript API : 프로그래밍 방식 제어

dialog 요소 참조가 주어지면 :

 dialog.show ();
dialog.hide ();

모달 동작의 경우 사용 :

 dialog.showModal ();

showModal() 배경을 관리하고 중첩 된 모달을 허용하는 "보류 대화 상자 스택"과 상호 작용합니다.

HTML 기반 폐쇄 : 양식 제출

대화 내에 양식을 제출함으로써 대화를 닫을 수 있습니다.

닫다

배경 : 시각적 큐

프로그래밍 방식으로 개방 a<dialog></dialog> 자동으로 배경을 제공합니다. 외관은 ::backdrop pseudo element를 사용하여 사용자 정의 할 수 있습니다. 예를 들어, 기본 반 트랜스 펜트 블랙 배경을 빨간색 줄무늬로 교체합니다.

멋진 보너스 : backdrop-filter 배경 흐릿함과 같은 효과를 가능하게합니다.

초점 관리 : 접근성 고려 사항

그만큼<dialog></dialog> 요소는 열 때 (MACOS에서 VoiceOver로 테스트 됨) 요소가 자동으로 초점을 스스로 이동시킵니다. 본질적으로 포커스를 가두는 것은 아니지만 (모달에 이상적으로 적합) CSS 기술은이를 달성 할 수 있습니다.

Rob Dodson은 Modals를 "웹 접근성의 끝에서 보스 전투"라고 적절하게 묘사했습니다. 원주민<dialog></dialog> 요소는 자동 <kbd>Escape</kbd> 키 폐쇄를 포함 하여이 문제를 크게 단순화합니다. 외부를 클릭하면 클릭하면 아직 지원되지 않지만 향후 업데이트는 사용자 피드백을 기반으로이를 해결할 수 있습니다. IRE의 기사는 액세스 가능한 사용자 정의 대화 상자를 구축하는 데 대한 귀중한 통찰력을 제공합니다.