12 fakta CSS yang kurang dikenali (sekuel)

Artikel ini memperkenalkan dua belas fakta CSS yang kurang dikenali, sesuai untuk kedua-dua pemula dan pemaju yang berpengalaman. Walaupun ada yang biasa, yang lain menawarkan pandangan yang mengejutkan ke dalam keupayaan CSS.

karya seni oleh SitePoint/Natalia Balska.

sorotan utama:

• sintaks slash: border-radius Buat sudut bulat asimetri menggunakan slash untuk menentukan radius mendatar dan menegak secara berasingan.
• Kata kunci relatif: font-weight Gunakan dan bolder untuk menyesuaikan berat fon secara dinamik berbanding dengan nilai yang diwarisi. lighter
• harta: outline-offset Visual mengimbangi garis besar tanpa perubahan susun atur (Sokongan IE terhad).
• Harta: table-layout Mengoptimumkan kelajuan rendering jadual dengan susun atur bebas daripada kandungan sel. fixed
• tingkah laku: vertical-align Memahami tingkah laku yang berbeza untuk sel -sel meja berbanding unsur -unsur lain.
• pseudo-element: memanfaatkan keupayaannya untuk kesan tipografi lanjutan pada unsur-unsur peringkat blok. ::first-letter
mari kita menyelidiki butiran:

1. sintaks slash: Harta border-radius menerima slash untuk menentukan radius mendatar dan menegak berasingan, membolehkan sudut bulat bukan simetri. Lihat Demo Interaktif MDN untuk pemahaman visual: border-radius

   Kata kunci relatif kata kunci:
2. dan

   kata kunci menyesuaikan berat fon relatif kepada nilai yang diwarisi, yang menawarkan kawalan tipografi yang lebih dinamik, terutamanya dengan fon yang mempunyai banyak berat. font-weight bolder lighter

   Harta:
Harta ini mengimbangi garis besar dari elemen, meningkatkan daya tarikan visual tanpa mempengaruhi susun atur. Perhatikan kekurangan sokongan Internet Explorer.

3. outline-offset

   Harta:
Menggunakan
4. dengan ketara mempercepat rendering jadual dengan membuat susun atur bebas daripada kandungan sel.

   table-layout table-layout: fixed

   dalam jadual:
5. mempengaruhi penjajaran kandungan

   dalam sel meja, tidak seperti tingkah lakunya pada unsur -unsur lain. vertical-align

6. Pseudo-element: ::first-letter Pseudo-elemen ini secara konsisten menggayakan huruf pertama unsur-unsur peringkat blok di seluruh pelayar utama, membolehkan kesan tipografi yang canggih.

7. aksara tidak sah sebagai pembatas kelas: Walaupun secara teknikal tidak sah, watak -watak tertentu (seperti "/") boleh digunakan sebagai pembatas dalam senarai kelas HTML untuk pembacaan yang lebih baik; Walau bagaimanapun, mereka tidak boleh digunakan secara langsung sebagai nama kelas dalam CSS.

8. Animasi Animasi Fractional: Hartanah menerima nilai pecahan, yang membolehkan animasi berhenti pertengahan. Perhatikan variasi keserasian penyemak imbas mungkin wujud. animation-iteration-count

9. Animasi Konflik Shorthand: Elakkan menggunakan nama -nama animasi yang bertentangan dengan kata kunci animasi animasi (mis., , reverse). alternate

10. Memilih julat elemen: rantaian pemilih untuk memilih julat elemen dengan cekap. Keserasian penyemak imbas harus dipertimbangkan. :nth-child

11. Pseudo-elements pada unsur-unsur tidak sah: Walaupun tidak berkenaan untuk semua unsur yang tidak sah, elemen pseudo boleh digunakan untuk beberapa, seperti . <hr>

12. Nilai atribut case-insensitive:

    Pemilih atribut adalah sensitif kes untuk beberapa atribut (seperti ) tetapi bukan yang lain (seperti ). class type

Eksplorasi yang diperluaskan ini ciri-ciri CSS yang sering diabaikan memberi kuasa kepada pemaju untuk menulis kod yang lebih cekap dan ekspresif. Marilah kita tahu helah CSS kegemaran anda yang tidak jelas dalam komen!

Soalan -soalan yang sering ditanya (Soalan Lazim) mengenai CSS: (Bahagian ini ditinggalkan untuk keringkasan, kerana ia tidak berkaitan dengan topik utama dan memperluaskan panjang tindak balas. Ia boleh ditambah secara berasingan jika diperlukan.)

Atas ialah kandungan terperinci 12 fakta CSS yang kurang dikenali (sekuel). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!