집 >웹 프론트엔드 >CSS 튜토리얼 >'Mutant HTML Invasion' 뒤에 숨은 팁

'Mutant HTML Invasion' 뒤에 숨은 팁

Linda Hamilton원래의: 2024-12-04 00:42:09421검색

10월 17일 devFest Nantes에서 "The Invasion of Mutant HTML"이라는 제목의 워크숍을 주최했습니다.

워크샵은 당연히 참가자가 참여해야 하기 때문에 지원으로 미니게임을 만들기로 결정했습니다. 온라인에서 사용할 수 있고 GitHub에서 오픈 소스로 제공되는 정적 사이트이므로 개선할 수 있습니다!

정적이라는 것은 정적을 의미합니다. 저장소에는 로컬 작업을 위한 기본 HTTP 서버 제공을 담당하는 단일 종속성인 서버가 있으며 서버 자체에는 종속성이 없습니다. 나머지는 HTML, CSS, JavaScript뿐입니다.

기본으로 돌아가 효율성을 크게 높일 수 있었습니다. 하지만 무엇보다도… 다양한 팁과 요령을 발견해보세요!

게임 메커니즘

게임을 시작하면 캐릭터 커스터마이징부터 시작됩니다. 이 단계의 유일한 목표는 레벨의 시각적 구조를 발견하여 게임에 개인적으로 참여할 수 있도록 하는 것입니다. 선택한 값은 일종의 방식으로 게임의 모든 캐릭터에 가능한 한 빨리 적용됩니다. 거울표현 .

캐릭터를 선택한 후 훈련 레벨을 통해 게임의 매우 간단한 메커니즘에 익숙해질 수 있습니다. 즉, 완료하고 제출할 코드의 일부가 라이브로 실행되어 점진적으로 돌연변이가 침입하는 영역에 영향을 미칩니다! 이 코드는 대부분의 수준에서 mutationObserver에 전달되는 옵션이지만 때로는 콜백 함수에도 포함됩니다.

실패하거나 성공할 경우 모달 창에서 알려드립니다. 이 모달 창에 대해 이야기해 봅시다!

의 특징

저는 2022년 Paris Web에서 그리고 devFest Nantes에서 ""좋은 HTML"을 발견하고 JS와 CSS를 저장하세요"라는 주제로

매우 흥미롭고 결국 다양한 구성 요소 라이브러리의 모든 모달 창 구현을 대체해야 합니다.

워크숍에서는 여러 곳에서 사용합니다.

홈 화면에 게임 규칙을 표시합니다.
돌연변이의 수가 100개를 초과하면 레벨을 중단합니다.
작동하지 않는 코드를 제출할 때 실패를 알리기 위해
성공 여부를 알리고 다음 단계로의 진행을 허용합니다.

창 열기

대부분은 이벤트에 대한 응답으로 프로그래밍 방식으로 열립니다. 이보다 더 간단한 것은 없습니다. <대화상자>에 대한 참조를 검색하기만 하면 됩니다. querySelector() 또는 명명된 속성 액세스를 통해 식별자에 대한 참조를 사용하고 (MDN에서) showModal() 메서드를 호출합니다.

document.querySelector('dialog').showModal();

외부 JavaScript 없이

그러나 불필요한 이벤트 리스너 추가를 피하기 위한 한 가지 예외: 게임 규칙 창은 HTML onclick 이벤트 핸들러를 사용하여 호출됩니다.

<button type="button" onclick="rules.showModal()">Règles du jeu</button>
<dialog>



<h5>
  
  
  Aparté : la projection des identifiants HTML en objets globaux
</h5>

<p>Dans cet exemple, j’invoque l’ouverture de la fenêtre modale avec rules.showModal(), sans avoir défini la variable rules. Comment est-ce possible ? En résumé, tout élément porteur d’un attribut id devient mécaniquement une propriété globale de l’objet window, et devient donc accessible directement par son nom. C’est spécifié sous le joli nom de Named Access on Window Object (en anglais).</p>

<p>C’est drôlement pratique, non ? Figurez-vous que c’est aussi un vecteur d’attaque méconnu faisant partie d’un groupe sobrement intitulé DOM clobbering (en anglais). Je vous encourage à parcourir les recommandations de l’OWASP pour mitiger le DOM clobbering (en anglais).</p>

<h4>
  
  
  Accessibilité
</h4>

<p>La méthode showModal() permet d’ouvrir une fenêtre modale, pas une simple boîte de dialogue — en respectant les exigences en matière d’accessibilité : la focus est mécaniquement piégé dedans, la fermeture est possible avec la touche <kbd>Échap</kbd>, etc.</p>

<h3>
  
  
  L’arrière-plan
</h3>

<p>Une fois la fenêtre modale ouverte, on peut s’appliquer à la styler. Là où moult bibliothèques de composants imposent une <div> (voire plusieurs) pour servir d’arrière-plan à la fenêtre, la version native est livrée avec un pseudo-élément ::backdrop qui s’étend naturellement sur tout le viewport et est promue, avec la fenêtre modale, par-dessus le reste de la page dans ce qui est spécifié sous le nom de top layer.

<p>Vous n’avez plus qu’à lui appliquer une couleur, une opacité ou que sais-je encore. Dans le jeu, j’ai utilisé une propriété au nom évocateur de backdrop-filter pour appliquer un effet de flou grisé sur l’arrière-plan.<br>
</p>

<pre class="brush:php;toolbar:false">dialog::backdrop {
    backdrop-filter: grayscale(50%) blur(.25rem);
}

치수

게임 보기 모드를 익히지 않았기 때문에 모달 창의 너비에 약간의 최신 CSS를 사용하여 유동적인 너비를 가지되 최소값과 최대값을 갖도록 했습니다.

dialog {
    max-inline-size: clamp(50vw, 100%, 67.5rem);
}

max-inline-size 속성은 프랑스어의 경우 max-width에 해당하는 논리적 속성입니다. 그리고 클램프() 함수는 작은 보석입니다. 저는 이미 차트(영어)에서 값을 기반으로 CSS의 의사 부울을 얻기 위해 이 기능을 많이 남용했습니다. 컨퍼런스의 슬라이드 27에 설명된 대로 "Draw me a graphic (in CSS)”는 devFest Nantes 2023, TNT #24 및 DevQuest 2024에서 제공되었습니다.