10 cara untuk menyembunyikan unsur -unsur di CSS

Penjelasan terperinci mengenai kaedah bersembunyi elemen CSS dan perbandingan prestasi

CSS menyediakan pelbagai cara untuk menyembunyikan unsur -unsur, tetapi kesannya terhadap kebolehcapaian, susun atur, animasi, prestasi, dan pengendalian acara berbeza -beza. Artikel ini akan membincangkan kaedah ini secara terperinci dan menganalisis kelebihan dan kekurangan mereka.

mata utama

CSS mempunyai pelbagai cara untuk menyembunyikan unsur -unsur, masing -masing dengan kesan yang berbeza terhadap kebolehcapaian, susun atur, animasi, prestasi, dan pengendalian acara.
• Ciri -ciri
• dan opacity boleh menjadikan elemen itu benar -benar telus, tetapi elemen tetap berada di halaman dan masih boleh mencetuskan peristiwa. filter: opacity() Atribut
• boleh menyembunyikan unsur -unsur dengan memindahkan mereka keluar dari skrin atau mengurangkan skala mereka, memberikan prestasi unggul dan percepatan perkakasan. transform Atribut
• adalah cara yang biasa untuk menyembunyikan unsur -unsur, tetapi ia tidak boleh animasi dan boleh mencetuskan susun atur halaman, jadi ia tidak sesuai dalam banyak kes. display
Kaedah lain untuk bersembunyi elemen termasuk sifat HTML
• , kedudukan mutlak, menimpa elemen lain dan mengurangkan saiz, masing -masing dengan kelebihan dan kelemahannya sendiri. hidden

Kesan animasi

Beberapa pilihan tersembunyi CSS adalah semua atau tidak. Unsur -unsur sama ada kelihatan sepenuhnya atau tidak kelihatan, tanpa keadaan pertengahan. Pilihan lain, seperti ketelusan, boleh mempunyai pelbagai nilai, jadi animasi CSS interpolasi dapat dilaksanakan.

Kebolehcapaian

Setiap kaedah yang diterangkan di bawah menyembunyikan unsur -unsur secara visual, tetapi ia mungkin tidak menyembunyikan kandungan elemen teknologi bantuan. Sebagai contoh, pembaca skrin masih boleh mengumumkan teks telus kecil. Atribut CSS selanjutnya atau atribut ARIA (mis. ) mungkin diperlukan untuk menerangkan operasi yang sesuai.

aria-hidden="true" Sila ambil perhatian bahawa animasi juga boleh menyebabkan sesetengah orang mengalami disorientasi, migrain, sawan, atau ketidakselesaan fizikal yang lain. Pertimbangkan untuk menggunakan

pertanyaan media untuk mematikan animasi apabila ditentukan dalam keutamaan pengguna.

prefers-reduced-motion

pengendalian acara

Menyembunyikan elemen akan menghalang peristiwa daripada dicetuskan pada elemen itu, atau ia tidak mempunyai kesan. Iaitu, unsur -unsur tidak dapat dilihat, tetapi masih boleh diklik atau diterima oleh interaksi pengguna lain.

Prestasi

Selepas penyemak imbas beban dan menghancurkan model objek HTML DOM dan CSS, halaman akan dibentangkan dalam tiga peringkat:

susun atur: menjana geometri dan kedudukan setiap elemen

1. lukis: Lukis piksel setiap elemen
2. Komposisi: Susun lapisan elemen dalam urutan yang sesuai
Kesan yang hanya menyebabkan perubahan sintesis jauh lebih lancar daripada yang mempengaruhi susun atur. Dalam sesetengah kes, pelayar juga boleh menggunakan pecutan perkakasan.

1 Ciri -ciri

dan opacity boleh lulus nombor antara 0 dan 1, atau peratusan antara 0% dan 100%, yang mewakili ketelusan penuh dan jumlah kepelbagaian, masing -masing. filter: opacity()

Lihat Contoh

Dalam pelayar moden, hampir tidak ada perbezaan praktikal antara kedua -dua, walaupun filter harus digunakan jika kesan berganda digunakan pada masa yang sama (fuzzy, kontras, kelabu, dan lain -lain).

opacity boleh animasi dan memberikan prestasi yang sangat baik, tetapi sedar bahawa unsur -unsur yang benar -benar telus kekal di halaman dan boleh mencetuskan peristiwa.

指标	效果
浏览器支持	良好，但IE仅支持opacity 0到1
可访问性	如果设置为0或0%，则内容不会被读取
布局影响	否
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	是

2

mempengaruhi seluruh elemen, tetapi sifat

, opacity dan color juga boleh ditetapkan secara berasingan. Menggunakan background-color atau kaedah yang serupa untuk memohon saluran sifar Alpha akan menjadikan projek itu benar -benar telus. border-color rgba(0,0,0,0)

Lihat Contoh

Setiap atribut boleh menghidupkan secara berasingan untuk menghasilkan kesan yang menarik. Perhatikan bahawa ketelusan tidak boleh digunakan untuk elemen dengan latar belakang imej melainkan dijana menggunakan

atau kaedah yang serupa.

linear-gradient Saluran Alpha boleh ditetapkan menggunakan kaedah berikut:

: sepenuhnya telus (animasi pertengahan tidak dapat dilakukan)
• transparent
: Merah, Hijau, Biru dan Alpha
• rgba(r, g, b, a)
: warna, ketepuan, kecerahan dan alpha
• hsla(h, s, l, a)
dan
• #RRGGBBAA #RGBA

3 Sifat -sifat boleh digunakan untuk pan (MOV), skala, berputar, atau elemen kecondongan. transform atau (bergerak keluar dari skrin) akan menyembunyikan elemen:

transform Lihat Contoh scale(0) translate(-999px, 0px)

menyediakan prestasi yang sangat baik dan pecutan perkakasan, kerana unsur -unsur sebenarnya dipindahkan ke lapisan yang berasingan dan boleh animasi dalam 2D ​​atau 3D. Ruang susun atur asal tetap sama, tetapi unsur -unsur yang tersembunyi tidak mencetuskan sebarang peristiwa.

4 transform

Properties Membuat kawasan klip yang menentukan bahagian -bahagian elemen mana yang dapat dilihat. Menggunakan nilai seperti

指标	效果
浏览器支持	良好
可访问性	内容仍然会被读取
布局影响	否——原始尺寸保持不变
渲染需求	合成
性能	最佳，可以使用硬件加速
动画帧	是
隐藏时触发事件	否

akan menyembunyikan elemen sepenuhnya.

clip-path Lihat Contoh

clip-path menyediakan pelbagai animasi yang menarik, walaupun ia hanya boleh digunakan dalam pelayar moden. clip-path: circle(0);

5 Atribut

boleh ditetapkan ke

atau clip-path untuk menunjukkan dan menyembunyikan unsur -unsur.

指标	效果
浏览器支持	仅限现代浏览器
可访问性	一些应用程序仍然可以读取内容
布局影响	否——原始尺寸保持不变
渲染需求	绘制
性能	合理
动画帧	是，在现代浏览器中
隐藏时触发事件	否

Lihat Contoh visibility Kecuali

nilai digunakan, ruang yang digunakan oleh elemen akan kekal di tempat.

visibility

6 Atribut display mungkin merupakan kaedah yang paling biasa digunakan untuk bersembunyi unsur -unsur. Nilai

dengan berkesan menghilangkan elemen seolah -olah ia tidak pernah wujud di DOM.

display none Lihat Contoh

Walau bagaimanapun, ia mungkin merupakan harta CSS yang paling teruk dalam kebanyakan kes. Ia tidak boleh disusun semula dan mencetuskan susun atur halaman melainkan elemen dipindahkan dari aliran dokumen menggunakan atau atribut yang baru diterima pakai.

position: absolute juga terlalu banyak dan mempunyai pilihan seperti contain,

,

, display, block, inline, dan lain -lain. Menetapkan semula kepada nilai yang betul selepas table boleh menyusahkan (walaupun flexbox boleh membantu). grid display: none; unset

7.

指标	效果
浏览器支持	极佳
可访问性	内容不会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	否
隐藏时触发事件	否

anda boleh menambah atribut html

ke mana -mana elemen: hidden Ini akan menggunakan gaya lalai penyemak imbas:

hidden Ini mempunyai kelebihan dan kelemahan yang sama seperti

, walaupun ia berguna apabila menggunakan sistem pengurusan kandungan yang tidak membenarkan perubahan kepada gaya.

<code class="language-html"><p hidden>隐藏内容</p></code>

8 Atribut

<code class="language-css">[hidden] {
  display: none;
}</code>

membolehkan penggunaan display: none,

,

, dan untuk memindahkan unsur -unsur dari kedudukan statik lalai dalam susun atur halaman. Oleh itu, unsur -unsur yang benar -benar diposisikan boleh dipindahkan dari skrin menggunakan atau kaedah yang serupa.

position Lihat Contoh top bottom left

9 Elemen boleh disembunyikan secara visual dengan meletakkan elemen lain dengan warna yang sama seperti latar belakang di atas. Dalam contoh ini, pseudo-elemen

ditimpa, walaupun mana-mana elemen kanak-kanak boleh digunakan.

::after

Lihat Contoh

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	否，如果绝对定位
渲染需求	绘制
性能	如果小心谨慎，则性能合理
动画帧	是，当覆盖伪元素或子元素时
隐藏时触发事件	是，当覆盖伪元素或子元素时

10

unsur -unsur boleh disembunyikan dengan menggunakan , ,

,

, width, dan/atau height untuk meminimumkan saiz elemen. Anda juga mungkin perlu memohon padding untuk memastikan bahawa kandungan tidak melimpah. border-width font-size overflow: hidden Lihat Contoh

boleh mencapai animasi yang menarik, tetapi prestasi jauh lebih baik daripada .

transform

memilih elemen tersembunyi

指标	效果
浏览器支持	极佳
可访问性	内容仍然会被读取
布局影响	是
渲染需求	布局
性能	差
动画帧	是
隐藏时触发事件	否

Selama bertahun -tahun, telah menjadi penyelesaian pilihan untuk unsur -unsur tersembunyi, tetapi ia telah digantikan oleh pilihan yang lebih fleksibel dan lebih mudah untuk diwujudkan. Ia masih berfungsi, tetapi hanya boleh digunakan jika anda ingin menyembunyikan semua kandungan pengguna secara kekal. Apabila mempertimbangkan prestasi,

atau

adalah pilihan yang lebih baik. display: none transform opacity (pautan demo sejuk mengenai cara menunjukkan dan menyembunyikan imej menggunakan CSS harus dimasukkan di sini)

FAQ

(bahagian Soalan Lazim harus dimasukkan di sini dan diselaraskan dan ditambah mengikut kandungan asal. Ia disyorkan untuk menyusun semula bahagian FAQ asal ke dalam struktur yang lebih jelas dan menyatakannya dalam bahasa yang lebih mudah.) 🎜> Singkatnya, kaedah mana untuk memilih untuk menyembunyikan unsur -unsur bergantung kepada senario dan keperluan aplikasi tertentu, dan perlu menimbang faktor seperti prestasi, aksesibiliti dan kesan animasi.

dan

biasanya pilihan yang lebih baik, manakala sesuai untuk menyembunyikan kandungan secara kekal yang tidak perlu diakses. Ingatlah untuk sentiasa mengutamakan kebolehcapaian dan pengalaman pengguna.

Atas ialah kandungan terperinci 10 cara untuk menyembunyikan unsur -unsur di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!