% CSS: <fieldset>&#s border <legend> gelagat kalah mati untuk sebarang elemen !-tutorial css-php.cn

% CSS:

&#s border gelagat kalah mati untuk sebarang elemen !

Susan Sarandon

Lepaskan： 2025-01-08 16:09:41

asal

269 orang telah melayarinya

Lagenda mengatakannya, akan tiba satu hari apabila kesan kalah mati sempadan set medan yang indah akan dapat dilakukan dengan mana-mana elemen html.

Dan saya ada berita baik: Dalam Chrome, hari itu ialah hari ini!

Fieldset? Lagenda?

Jika anda tidak biasa, berikut ialah kesan kalah mati sempadan pada set medan dengan legenda:

a picture of two simple fieldset elements with their legend (titles) leaving a gap the width of their text in the fieldset's border _{contoh legenda set medan dalam tangkapan skrin yang diubah suai sedikit daripada VanillaHTML}

Lebar legenda (tajuk) memotong lubang di sempadan set medan secara automatik.

Walaupun secara teknikal mungkin untuk hanya menggunakan

dan di mana-mana sahaja, biasanya tidak disyorkan untuk menggunakan di luar dan tanpa sebarang elemen di dalamnya, kerana tujuan utama set medan adalah untuk semantik mengumpulkan input borang yang berkaitan. Menggunakannya dalam konteks yang tidak berkaitan bertentangan dengan maksud yang dimaksudkan dan boleh memberi kesan negatif kepada kebolehcapaian untuk pembaca skrin.

Tingkah laku kalah mati legenda sempadan set medan di mana-mana sahaja

Ini bukan perkara remeh untuk dicapai jadi saya menyembunyikan setiap kerumitan yang saya boleh untuk menjadikannya sebagai hampir remeh untuk ditiru:

@import utiliti fieldset-legend dalam css anda.
Tambahkan kelas fieldset-legend pada pembalut
Tetapkan sifat --fl-left kepada sebarang nilai (walaupun nilai negatif jika anda mahu)

Dan perpustakaan akan meletakkan :first-child supaya ia berpusat secara menegak dengan bahagian atas elemen dan mengetuk keluar bahan di belakangnya!

Untuk mencipta jurang di sekeliling tajuk, tambahkan padding pada :first-child walau bagaimanapun anda mahu.

Gotcha terbesar di sini ialah anda tidak boleh meletakkan nod teks biasa secara langsung dalam pembalut legenda set medan, teks perlu bersarang di dalam elemen mereka sendiri.

Selain itu, secara teknikal kalah mati sempadan fieldset tidak tenggelam ke bahagian bawah elemen legenda dan klip latar belakang juga, seperti yang berlaku di atas.

Jika anda lebih suka kalah mati hanya tenggelam melalui sempadan, anda boleh memberikan property, --fl-sink dan tetapkannya sama dengan lebar sempadan anda:

Adakah ia melakukan apa-apa lagi?

Memang betul!

--fl-left alternatif

Sebaliknya --fl-left, anda boleh menggunakan --fl-center.
Jika anda menetapkan --fl-center kepada 0px, tajuk akan dipusatkan secara mendatar di sepanjang tepi atas.
Jika anda menetapkannya kepada -10px, ia akan diimbangi ke kiri tengah sebanyak 10px.
Tetapkan kepada 15px dan ia akan beralih ke kanan tengah sebanyak 15px.

Daripada --fl-left atau --fl-center, anda juga boleh menggunakan --fl-right dengan gelagat yang dijangkakan.

Kesemua 3 ini ialah dan boleh menjadi positif, 0px atau negatif.

Tajuk sebagai :alternatif anak pertama

Mungkin penting untuk anda meletakkan elemen lain, seperti lompatan halaman pembaca skrin sahaja, sebelum tajuk di dalam bekas legenda set medan.

Letakkan kelas fieldset-legend-title pada mana-mana SATU keturunan langsung elemen fieldset-legend anda dan pustaka akan mengangkat elemen itu ke kedudukan yang diingini yang sama di bahagian atas, meninggalkan :first-child sahaja.

fieldset-legend menggunakan pseudo ::before

Anda boleh membuatnya menggunakan pseudo ::after, cuma tukar nama kelas daripada fieldset-legend kepada fieldset-legend-after

fieldset-legend tiada pseudo?

Ini adalah penggunaan lanjutan tetapi...

Anda boleh memasukkan: 0px; elemen di dalam pembungkus, sesuaikan mengikut apa yang anda mahukan dan gunakan fieldset-legend-custom dan bukannya fieldset-legend atau fieldset-legend-after.

Ini menggugurkan semua keratan perpustakaan dan memberi anda topeng tersuai untuk digunakan di mana-mana bahagian dalam elemen set medan-legend-tersuai.

Contohnya, jika anda ingin menggunakan ini dengan perpustakaan pembentukan sci-fi kegemaran anda, augmented-ui:

Tingkah laku mundur

Sokongan ciri mengehadkan yang diperlukan untuk menggunakan utiliti ini ialah skop garis masa.

Pertanyaan gaya bekas juga diperlukan.

Beginilah rupa demo pertama dalam artikel ini dalam penyemak imbas bukan Chrome:

picture of the fallback behavior as described below

Ia menggunakan penggayaan mekanikal yang sama untuk meminimumkan perbezaan, seperti kedudukan bukan statik dan pengasingan: mengasingkan; tetapi yang paling ketara, ia menggerakkan tajuk kembali sebaris dan melakukan dua perkara penting:

Warna tajuk menjadi Warna semasa - kandungan di sebalik tajuk bertukar dari badan ke bahagian dalam bekas legenda set medan anda, yang mungkin mempunyai latar belakang yang sangat berbeza. Menggunakan currentColor memastikan kandungan boleh dibaca kerana selebihnya kandungan dalam set bukan medan anda mungkin telah ditetapkan dengan sewajarnya.
Sepanjang baris yang sama, saya tidak dapat mengetahui sama ada elemen tajuk anda sudah mempunyai latar belakangnya sendiri (walaupun jika ada, anda tidak memerlukan utiliti ini untuk meletakkannya di atas sempadan) jadi latar belakang terpaksa telus, memastikan Warna semasa pada latar belakang set medan-legend, yang dalam kebanyakan kes sudah boleh dibaca.

Untuk menentukan gelagat sandaran tertentu, anda boleh menetapkan
--fl-fallback-title-color dan --fl-fallback-title-background yang akan digunakan sebagai ganti currentColor atau lutsinar sekiranya ia dipaparkan di suatu tempat tanpa sokongan.

Dan inilah rupa demo tersuai di atas dalam penyemak imbas yang tidak menyokong fieldset-legend:

picture of the fallback behaviors as described above