Lima petua bahagian hadapan yang membuat orang bersinar

Untuk memudahkan pengaturcaraan untuk semua orang, buku ini memilih beberapa teknik yang berguna tetapi agak jarang dan berguna. Tanpa berlengah lagi, mari memandu.

1 Sembunyikan Pantas

Untuk menyembunyikan elemen DOM, JavaScript tidak diperlukan. Atribut HTML asli sudah cukup untuk disembunyikan. Kesannya serupa dengan menambah gaya display: none;.

<p hidden>该段落在页面上是不可见的，它对HTML是隐藏的。</p>

Helah ini tidak berfungsi pada unsur pseudo, walaupun.

2. Cari dengan pantas

Adakah anda biasa dengan sifat CSS `inset`? Ia adalah versi singkatan daripada `top`, `left`, `right` dan `bottom`. Sama seperti trengkas `margin` dan `padding`, kita boleh menetapkan semua offset elemen dalam satu baris.

// Before
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// After
div {
  position: absolute;
  inset: 0;
}

3. Ujian kelajuan rangkaian bahagian hadapan

Pelayar Chrome menyediakan API asal navigator.connection.downlink yang boleh mengakses lebar jalur rangkaian persekitaran rangkaian semasa pengguna .

navigator.connection.downlink;

connection.downlink tidak mengembalikan kelajuan penghantaran rangkaian yang dipaparkan dalam persekitaran semasa pengguna, tetapi lebar jalur rangkaian semasa Pernyataan rasmi ialah: mengembalikan lebar jalur berkesan dalam unit Mb/s dan kekalkannya Nilai ini ialah gandaan integer terdekat 25kb/s.

Contohnya, jika saya menjalankan statement navigator.connection.downlink dalam konsol penyemak imbas Chrome di rumah, hasil yang dikembalikan ialah 10, bermakna lebar jalur muat turun ialah 10M.

4 Lumpuhkan tarik untuk menyegarkan harta

CSS overscroll-behavior membolehkan pembangun mengatasi penyemakan imbas apabila mencapai bahagian atas/bawah kandungan Tingkah laku menatal limpahan lalai penyemak imbas. Kes penggunaan untuk ini termasuk melumpuhkan ciri "tarik untuk menyegarkan semula" pada peranti mudah alih, mengalih keluar kilauan lebih tatal dan kesan jalur getah dan menghalang kandungan halaman daripada menatal di bawah modal/tindihan

body {
 overscroll-behavior-y: contain;
}

Harta ini ialah berguna untuk organisasi Menatal dalam tetingkap modal juga sangat berguna - ia menghalang halaman utama daripada memintas menatal apabila ia mencapai sempadan.

5. Memasukkan teks adalah dilarang

Apabila pengguna memulakan operasi "tampal" dalam antara muka pengguna penyemak imbas, acara tampal akan dicetuskan.

Kadangkala, saya mahu melumpuhkan pengguna daripada menampal teks yang disalin dari suatu tempat ke dalam kotak input. Ini boleh dilakukan dengan mudah dengan mendengar acara tampal dan memanggil kaedahnya preventDefault().

<input type="text"></input>
<script>
  const input = document.querySelector(&#39;input&#39;);

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })

</script>

Pepijat yang mungkin wujud selepas penggunaan kod tidak dapat diketahui dalam masa nyata Untuk menyelesaikan BUG ini selepas itu, banyak masa telah digunakan untuk penyahpepijatan log alat kepada semua orangFundebug.

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Lima petua bahagian hadapan yang membuat orang bersinar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!