cari

Rumah >hujung hadapan web >tutorial css >Petua di sebalik 'Pencerobohan HTML Mutant'

Petua di sebalik 'Pencerobohan HTML Mutant'

Linda Hamilton
Linda Hamiltonasal
2024-12-04 00:42:09392semak imbas

Pada 17 Oktober, saya menganjurkan bengkel di devFest Nantes bertajuk "The Invasion of Mutant HTML".

Bengkel mesti mengikut definisi melibatkan peserta, saya memilih untuk mencipta permainan mini sebagai sokongan. Ia adalah tapak statik yang tersedia dalam talian, sumber terbuka di GitHub — supaya anda boleh memperbaikinya!

Apabila saya sebut statik, maksud saya statik: repositori mempunyai satu kebergantungan, pelayan, bertanggungjawab untuk menyediakan pelayan HTTP asas untuk berfungsi secara tempatan dan pelayan itu sendiri tidak mempunyai kebergantungan. Selebihnya hanyalah HTML, CSS dan JavaScript.

Ia membolehkan saya kembali kepada asas dan memperoleh kecekapan yang ketara; tetapi yang terpenting… temui pelbagai petua dan helah!

Mekanik permainan

Apabila anda memulakan permainan, anda akan bermula dengan menyesuaikan watak anda. Objektif tunggal langkah ini adalah untuk menemui struktur visual tahap, membolehkan anda melibatkan diri secara peribadi dalam permainan Nilai yang dipilih akan digunakan secepat mungkin kepada semua watak dalam permainan, dalam satu jenis perwakilan cermin .

Selepas memilih watak anda, tahap latihan membiasakan anda dengan mekanik permainan yang sangat mudah: sebahagian kod untuk dilengkapkan dan diserahkan, dilaksanakan secara langsung, yang menjejaskan kawasan yang diceroboh secara beransur-ansur oleh mutan! Kod ini dalam kebanyakan peringkat pilihan yang dihantar kepada mutationObserver, tetapi kadangkala juga dalam fungsi panggil balik.

Jika berlaku kegagalan atau kejayaan, tetingkap modal akan memaklumkan anda. Mari bincang tentang tetingkap modal ini!

Keistimewaan

Saya bercakap mengenainya pada tahun 2022 di Paris Web kemudian di devFest Nantes dalam topik saya "Temui "HTML yang baik" dan simpan JS dan CSS",

adalah sangat menarik dan akhirnya akan menggantikan semua pelaksanaan tetingkap modal dalam pelbagai pustaka komponen.

Di bengkel, saya menggunakannya di beberapa tempat:

  1. untuk memaparkan peraturan permainan dalam skrin utama;
  2. untuk mengganggu tahap, apabila bilangan mutan melebihi seratus;
  3. untuk memberitahu kegagalan apabila menyerahkan kod yang tidak berfungsi;
  4. untuk memaklumkan kejayaan, jika tidak — dan membenarkan kemajuan ke peringkat seterusnya.

Buka tingkap

Kebanyakan dibuka secara pemrograman, sebagai tindak balas kepada acara. Tiada yang lebih mudah: hanya dapatkan rujukan kepada

menggunakan querySelector() atau rujukan kepada pengecam melalui akses sifat bernama, dan menggunakan kaedah showModal() (pada MDN).

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

Tanpa JavaScript luaran

Walau bagaimanapun, satu pengecualian, untuk mengelakkan penambahan pendengar acara yang tidak diperlukan: tetingkap peraturan permainan digunakan menggunakan pengendali acara onclick HTML:

<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);
}

Dimensi

Belum menguasai mod tontonan permainan, saya menggunakan sedikit CSS moden untuk lebar tetingkap modal supaya ia mempunyai lebar bendalir, tetapi dengan nilai minimum dan maksimum.

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

Sifat saiz sebaris maks ialah sifat logik yang sepadan dengan lebar maks dalam kes bahasa Perancis. Dan fungsi clamp() adalah permata kecil, yang saya sudah menyalahgunakan banyak dalam chaarts (dalam bahasa Inggeris) untuk mendapatkan pseudo-Boolean dalam CSS berdasarkan nilai, seperti yang dijelaskan pada slaid 27 persidangan saya "Lukiskan saya grafik (dalam CSS)” diberikan di devFest Nantes 2023, TNT #24 dan DevQuest 2024.

Tutup tingkap

Saya menyebut keupayaan untuk menutup modal dengan kekunci Esc, tetapi

menarik kuasa besar lain daripada menjadi asli, termasuk perkaitannya dengan unsur Ini adalah semula jadi, kerana tetingkap modal biasanya membenarkan anda mengesahkan atau membatalkan tindakan yang dikaitkan dengan entri.

Inilah sebabnya nilai dialog ditambah pada kaedah penyerahan borang. Ia tidak sepadan dengan kaedah HTTP seperti get atau post, tetapi dengan konteks HTML, dan membolehkan anda menutup terus tetingkap modal induk. Ia sangat mudah untuk digunakan:

<form>



<p>Et, pour revenir à du HTML à l’ancienne : saviez-vous qu’un bouton à l’autre bout du DOM peut soumettre un formulaire ? Il suffit de lui indiquer le formulaire à soumettre :<br>
</p>

<pre class="brush:php;toolbar:false"><button form="fermer">Fermer la fenêtre</button>

Dan anda mempunyainya: ia adalah butang serah jenis yang akan menyerahkan borang dengan pengecam ditutup, yang dengan sendirinya akan menutup tetingkap dialog. Ia cantik, bukan? Dan atribut ini bertarikh dari (sekurang-kurangnya) 2006, dalam spesifikasi Borang Web W3C (dalam bahasa Inggeris) yang draf pertamanya bermula sejak 2004..

Emoji

Untuk bengkel ini, saya memerlukan penceroboh dan hiasan yang jahat. Jelas sekali tiada masa untuk membuat ilustrasi dengan tangan, mahupun cara untuk membeli visual. Carian di internet mengajar saya bahawa jenis visual yang saya cari dipanggil set jubin atas ke bawah, tetapan dan aksara kecil ini biasanya dalam 8-bit dengan perspektif yang hancur.

Dengan melihat visual 8-bit, saya akhirnya membuat kaitan dengan tabiat lama dalam bahan persidangan saya: emoji hiasan di penghujung tajuk. Sial, tetapi ia pasti! Emoji!

Emoji sangat bagus. Ini adalah mata Unicode, teks semata-mata, dan sangat banyak sekarang dengan banyak ciri baharu dalam setiap versi Unicode. Malah terdapat variasi, digubah mengikut urutan!

watak-watak

Contoh terbaik bagi urutan Unicode pada pendapat saya ialah aksara: Tiada siapa yang neutral? boleh jadi lelaki? atau perempuan? dengan menambahkan titik unikod bagi jantina maskulin ♂️ atau feminin ♀️, dipisahkan oleh penyambung lebar sifar, ‍).

Untuk mendapatkan anggota bomba ?‍?, kami hanya menambah trak bomba ?? kepada seseorang? ! Bukankah itu hebat, secara jujur? Dan kami jelas boleh menambah jantina dan ton kulit.

Pemperibadian

Oleh itu, tahap pertama membolehkan anda memperibadikan jantina dan warna kulit wira.

Borang ini terdiri daripada hanya dua kumpulan butang radio, setiap satu dengan nilai yang sepadan dengan titik Unikod yang dipersoalkan.

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

Dan itu sahaja: Pengguna Firefox tidak akan memuatkan apa-apa, dan yang lain akan memuat turun tipografi untuk memaparkan perkara yang sama seperti Firefox. Pilih penyemak imbas anda dengan lebih baik pada masa akan datang!

Les astuces derrière « l’Invasion du HTML mutant »

WebKit

Seperti yang sering berlaku semasa saya menyediakan topik, saya menghadapi beberapa had penyemak imbas. Seperti yang berlaku, WebKit, enjin Safari dan Epiphany, menghadapi masalah dengan varian warna Twemoji-COLR. Saya dapat membuka tiket pada Bugzilla mereka (dalam bahasa Inggeris).

Penserlahan sintaks tanpa JS

Dalam mekanik permainan, bahagian kod dipaparkan (untuk membuat “kod lubang”) dan kod dimasukkan daripada dan