Penambahbaikan progresif mudah dalam CSS

CSS telah banyak berubah dalam beberapa tahun kebelakangan ini. Nampaknya kami mendapat ciri baharu setiap bulan sekarang. Ciri baharu adalah baik dan semuanya, tetapi sukar untuk mengikuti apa yang disokong sepenuhnya atau selamat untuk digunakan.

Masukkan penambahbaikan progresif: ciri kod dan sintaks yang memberikan anda sandaran yang selamat sekiranya pengguna anda melawat tapak web anda dalam penyemak imbas yang tidak mempunyai sokongan.

Berikut ialah beberapa sifat dan teknik CSS mudah yang selamat digunakan; meningkatkan pengalaman untuk sesetengah pengguna, tetapi memberikan sandaran yang memuaskan untuk orang lain.

Teks yang lebih baik dengan pembalut teks: cantik dan pembalut teks: keseimbangan

Bukan semua penyemak imbas menyokong keseimbangan nilai balutan teks dan cantik, tetapi ia selamat untuk digunakan.

Jika anda tidak biasa dengan nilai ini, ia adalah cara untuk "membetulkan" teks anda supaya kelihatan (anda telah menekanya) lebih cantik atau lebih seimbang.

cukup membetulkan masalah dengan perkataan "yatim piatu", apabila perkataan terakhir perenggan teks dibalut ke baris baharu, meninggalkan semuanya bersendirian di bahagian bawah. pretty memastikan bahawa perkataan terakhir disertakan dengan perkataan lain, yang bagus untuk tajuk (NOTA: Jangan gunakannya untuk bahagian teks badan yang lebih besar, kerana ia menggunakan algoritma yang lebih perlahan untuk mengira hasil terbaik).

Dokumentasi MDN untuk pembalut teks: cantik

imbangan melaraskan perenggan anda supaya teks dibalut dengan cara yang mengimbangi bilangan aksara pada setiap baris, meningkatkan kualiti reka letak dan kebolehbacaan. Ia berguna untuk perenggan dengan panjang tertentu, mis. teks terkemuka atau beberapa salinan pemasaran di dalam sepanduk. (NOTA: Jangan gunakan ini pada semua teg

dalam teks kandungan anda. Pengiraan baki sempurna berdasarkan bilangan aksara adalah mahal dari segi pengiraan, jadi penyemak imbas mempunyai had pada ciri ini berdasarkan baris teks: enam atau kurang untuk Chromium, dan sepuluh atau kurang untuk Firefox)

Dokumentasi MDN untuk pembalut teks: baki

Demo

The fallback

Satu-satunya perkara yang berlaku jika penyemak imbas tidak menyokong ciri ini ialah teks akan mempunyai anak yatim atau mungkin tidak seimbang seperti yang anda mahukan. Dan itu OK; kami telah hidup dengan ini selama 30 tahun menyemak imbas web, jadi ia tidak membahayakan pengalaman pengguna dengan penyemak imbas yang tidak disokong.

---

Medan borang berkembang secara automatik dengan saiz medan: kandungan

Pernah kecewa kerana s tidak berkembang secara automatik apabila anda menulis di dalamnya? Nah, itu akhirnya dibetulkan, dengan saiz medan: kandungan.

Harta dan nilai ini akan menjadikan anda, atau berkembang secara automatik berdasarkan kandungannya. Saya syorkan anda menggunakannya untuk <textarea> terutamanya, dan ia selamat digunakan hari ini, walaupun ia ditandakan sebagai "percubaan" oleh MDN.

Dokumentasi MDN untuk saiz medan

Demo

The fallback

Sandaran untuk ini adalah mudah: medan tidak akan berkembang jika penyemak imbas tidak menyokong ciri tersebut. Dan itu OK juga!

---

Unsur psuedo ::marker dan ::placeholder

Ingin menggayakan penunjuk cakera pada item senarai dalam

, tukar warna nombor dalam

, atau gayakan pemegang tempat ? Anda boleh, menggunakan pemilih psuedo seperti ::marker dan ::placeholder.

Ambil perhatian bahawa elemen ::penanda adalah satu yang pelik, kerana hanya terdapat segelintir sifat yang akan berfungsi dengan pemilih ini:

• Semua sifat fon
• Sifat ruang putih
• warna
• teks-gabung-tegak, unicode-bidi dan sifat arah
• Harta kandungan
• Semua sifat animasi dan peralihan

Baca lebih lanjut mengenainya di sini: dokumentasi MDN untuk ::marker

Untuk ::placeholder anda boleh melakukan hampir semua perkara yang anda boleh lakukan dengan teks biasa, menukar warna, font-weight, font-family dsb., tetapi sila ingat bahawa pemegang tempat input masih perlu kelihatan seperti pemegang tempat, bukan kelihatan seperti sudah ada nilai yang ditaip ke dalam input.

Dokumentasi MDN untuk ::placeholder

Demo

The fallback

Ini tidak berfungsi dalam setiap penyemak imbas atau versi penyemak imbas, tetapi menggunakannya juga tidak akan merosakkan apa-apa, menjadikannya peningkatan progresif yang sempurna. Penanda seperti cakera dan nombor akan berundur untuk mempunyai warna yang sama dengan teks item senarai, manakala pemegang tempat akan mempunyai gaya terbina dalam penyemak imbas.

---

Kesimpulannya

Sukar untuk mengikuti apa yang selamat untuk digunakan dalam CSS, kerana Baseline (dari webstatus.dev) dan caniuse.com hanya menyatakan jika sesuatu tersedia dalam versi penyemak imbas tertentu, bukan perkara yang akan berlaku kepada UI anda jika pemilih , harta atau nilai tidak disokong.

Sentiasa fikirkan kelemahan yang akan dihasilkan oleh fungsi percubaan atau kurang disokong.

Atas ialah kandungan terperinci Penambahbaikan progresif mudah dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!