10 月 17 日、私は devFest Nantes で「変異型 HTML の侵入」と題したワークショップを主催しました。
ワークショップには本来、参加者が参加する必要があるため、サポートとしてミニゲームを作成することにしました。これはオンラインで利用できる静的サイトであり、GitHub でオープンソース化されているため、改善することができます!
私が静的と言うときは、静的を意味します。リポジトリには、ローカルで動作するための基本的な HTTP サーバーを提供する役割を担うサーバーという単一の依存関係があり、サーバー自体には依存関係がありません。残りは HTML、CSS、JavaScript だけです。
そのおかげで基本に立ち返ることができ、効率が大幅に向上しました。しかし何よりも…たくさんのヒントやコツを発見してください!
ゲームを開始すると、まずキャラクターをカスタマイズします。このステップの唯一の目的は、レベルの視覚的な構造を発見し、選択した値がゲーム内のすべてのキャラクターにできるだけ早く適用されるようにすることです。鏡表現。
キャラクターを選択した後、トレーニング レベルでゲームの非常に単純な仕組みに慣れていきます。完成して提出するコードの一部はライブで実行され、ミュータントが徐々に侵入するエリアに影響を与えます。このコードは、ほとんどのレベルで mutationObserver に渡されるオプションですが、コールバック関数に含まれる場合もあります。
失敗または成功の場合は、モーダル ウィンドウで通知されます。このモーダル ウィンドウについて話しましょう!
私は、2022 年の Paris Web で、その後 devFest Nantes で、「「良い HTML」を発見し、JS と CSS を保存する」というテーマ、 でこのことについて話しました。これは非常に興味深いものであり、最終的にはさまざまなコンポーネント ライブラリのすべてのモーダル ウィンドウ実装に取って代わるはずです。
ワークショップでは、いくつかの場所でそれを使用します。
ほとんどは、イベントに応じてプログラムによって開かれます。これ以上簡単なことはありません。
document.querySelector('dialog').showModal();
ただし、不要なイベント リスナーの追加を避けるための例外が 1 つあります。ゲーム ルール ウィンドウは、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 に対応する論理プロパティです。そして、clamp() 関数は小さな宝石であり、私のカンファレンスのスライド 27 で説明したように、値に基づいて CSS で擬似ブール値を取得するために、charts (英語) で多用しています。 CSS)」は、devFest Nantes 2023、TNT #24、DevQuest 2024 で開催されました。
Esc キーでモーダルを閉じる機能について説明しましたが、<ダイアログ>