% CSS: &#s border gelagat kalah mati untuk sebarang elemen !

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:

_{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:

1. @import utiliti fieldset-legend dalam css anda.
2. Tambahkan kelas fieldset-legend pada pembalut
3. 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:

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:

1. 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.
2. 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:

Sokongan sandaran lanjut

Jika anda tahu cara menggunakan teknik Togol Angkasa lama saya, perpustakaan juga menyediakan:

--fl-disokong, yang akan menjadi ruang apabila disokong dan parap apabila tidak disokong

dan

--fl-tidak-disokong, iaitu sebaliknya.

---

Buka Kenalan ?

Sila hubungi jika anda memerlukan bantuan dengan mana-mana perkara ini, mempunyai permintaan ciri atau ingin berkongsi perkara yang telah anda buat!

% CSS: s border gelagat kalah mati untuk sebarang elemen !	% CSS: s border gelagat kalah mati untuk sebarang elemen !	DEV Blog	% CSS: s border gelagat kalah mati untuk sebarang elemen !	% CSS: s border gelagat kalah mati untuk sebarang elemen !

?@JaneOri.% CSS:

s border

gelagat kalah mati untuk sebarang elemen !

?@Jane0ri

Atas ialah kandungan terperinci % CSS: &#s border gelagat kalah mati untuk sebarang elemen !. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!