Banyak laman web masih menggunakan JavaScript untuk membuat tooltips, tetapi sebenarnya lebih mudah menggunakan CSS. Penyelesaian yang paling mudah adalah menggunakan sifat data dalam kod HTML untuk menyediakan teks tooltip, seperti . Dengan tag ini, anda boleh meletakkan perkara berikut ke CSS untuk memaparkan teks tooltip dalam fungsi

data-tooltip="…" attr() Ia sangat mudah dan jelas, bukan? Sudah tentu, lebih banyak kod diperlukan untuk benar -benar gaya tooltips, tetapi jangan risau, terdapat perpustakaan CSS tulen yang khusus untuk tujuan ini yang dipanggil HINT.CSS.

.tooltip::after {
  content: attr(data-tooltip);
}

kami telah menggunakan untuk tooltips, tetapi ia mempunyai beberapa kes penggunaan lain. Menggabungkan sifat data, anda boleh membina imej kecil dengan tajuk dan penerangan menggunakan hanya satu baris kod HTML:

attr() Anda kini boleh menggunakan fungsi

<a class="caption" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="禿鷲" data-description="...">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
</a>

attr() Ini adalah contoh kerja lakaran kecil dengan tajuk animasi paparan hover: [pautan contoh codepen] (dengan asumsi bahawa pautan codepen harus dimasukkan di sini)

.caption::after {
  content: attr(data-title);
  ...
}

NOTA: Kandungan yang dihasilkan mungkin mempunyai masalah dengan aksesibiliti. Artikel ini mengenai sokongan aksesibiliti untuk kandungan CSS yang dihasilkan memberikan tafsiran yang berguna mengenai topik ini.

counter css

Walaupun anda tidak boleh menggunakan kaunter CSS untuk senarai yang diperintahkan (<ol>), kaunter sangat bagus untuk penomboran atau memaparkan nombor di bawah item di galeri. Anda juga boleh mengira bilangan item yang dipilih, yang sangat mengagumkan memandangkan anda memerlukan kod yang sangat sedikit (dan tiada JavaScript): [Pautan Sampel Codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini).

kaunter CSS juga bagus untuk nombor berubah secara dinamik dalam senarai projek, yang boleh disusun semula oleh seret dan drop: [pautan contoh codepen] (dengan mengandaikan bahawa pautan codepen harus dimasukkan di sini).

Seperti contoh terakhir, ingat bahawa kandungan yang dihasilkan mungkin mempunyai masalah dengan aksesibiliti.

Dengan pelepasan iOS 7, Apple membawa kita kesan "frosted kaca" -unsur -unsur kabur yang kelihatan seperti tingkap kaca beku. Diilhamkan oleh pelaksanaan Apple, kesan ini mula muncul di banyak tempat. Menghasilkan semula kesan ini agak rumit sebelum anda mempunyai penapis CSS, anda perlu menggunakan imej kabur untuk membuat kesan kaca beku. Sekarang, hampir semua pelayar utama menyokong sepenuhnya penapis CSS, jadi lebih mudah untuk menghasilkan semula kesan ini. [Bolehkah saya menggunakan CSS-Filters?] (Dengan mengandaikan bahawa boleh saya gunakan pautan harus dimasukkan di sini)

Pada masa akan datang, kita boleh menggunakan fungsi

untuk menghasilkan kesan yang sama, tetapi kedua -dua fungsi ini hanya disokong oleh Safari. backdrop-filter filter()

Biasanya, anda menentukan fail JPEG atau PNG sebagai imej latar belakang, atau mungkin kecerunan. Tetapi adakah anda tahu bahawa menggunakan fungsi

sebagai imej latar belakang? Pada masa ini, fungsi element() hanya disokong oleh Firefox: [Bolehkah saya menggunakan fungsi CSS-elemen?] (Dengan mengandaikan bahawa boleh saya gunakan pautan hendaklah dimasukkan di sini) <div> element() Kemungkinan hampir tidak terbatas, di sini adalah contoh dari MDN.

Mesh cecair adalah perkara yang hebat, tetapi ada beberapa masalah yang serius. Sebagai contoh, tidak mungkin untuk membuat jarak di antara bahagian atas dan bawah saiz yang sama dengan jarak antara kiri dan kanan. Juga, penandaan sangat mengelirukan, bergantung kepada sistem grid yang anda gunakan. Malah Flexbox sendiri bukan penyelesaian akhir, tetapi menggunakan fungsi

adalah ciri yang mudah anda pastinya digunakan. [Bolehkah saya menggunakan calc?] (Dengan asumsi bahawa boleh saya gunakan pautan harus dimasukkan di sini) calc() calc()

Satu lagi kes penggunaan untuk fungsi adalah untuk menyelaraskan elemen dengan kedudukan tetap. Sebagai contoh, jika anda mempunyai pembalut kandungan di sebelah kiri dan kanan dengan jarak cecair, dan anda ingin menyelaraskan unsur -unsur tetap di dalam pembungkus itu - anda akan mengalami kesukaran menentukan pemilihan atribut "kanan" atau "kiri" ? Dengan

, anda boleh menggabungkan nilai relatif dan mutlak untuk menyelaraskan elemen dengan sempurna: calc() calc()

.tooltip::after {
  content: attr(data-tooltip);
}