Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Pemilih CSS Level 4 yang Menarik

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

CSS selectors telah berkembang secara massal selama bertahun-tahun, memberikan developers jauh lebih banyak kekuatan untuk menargetkan bit tertentu pada halaman mereka. Contoh dalam artikel ini adalah bagian dari spesifikasi CSS penyeleksi Level 4. Mari kita menyelam dan menyelidiki tujuh selector yang menarik ini, beberapa di antaranya yang saya jamin Anda belum digunakan dalam praktek!

Selectors tingkat 4

Spec Level 4 tentu mengandung beberapa selector terkenal seperti nth-child, tetapi juga mengandung beberapa karakter yang sangat unik. Sebagian besar dari spesifikasi Level 4 menguraikan banyak kelas pseudo dan pseudo pemilih baru dan luar biasa berguna, sehingga pada subjek tersebut, mari kita tinjau secara singkat apa perbedaan antara single dan double colons ketika datang ke pseudo dalam CSS.

Single vs Double Pseudo Colons

Sebagai aturan umum hari ini, dua titik dua :: harus digunakan sebagai pengganti tunggal single colon : untuk membedakan pseudo-Class dari unsur-unsur pseudo dan konten sebagai states spesifikasi.

"Notasi [double-colon] ini diperkenalkan... untuk menetapkan pembedaan pseudo-Class dan unsur-unsur pseudo. Untuk kompatibilitas dengan ada style sheet, agen pengguna harus juga menerima one-colon sebelumnya notasi untuk unsur-unsur pseudo diperkenalkan dalam CSS tingkat 1 dan 2 (yaitu: lini pertama,: huruf pertama,: sebelum dan: setelah). Kompatibilitas ini tidak diperbolehkan untuk elemen-elemen pseudo baru diperkenalkan dalam CSS tingkat 3."-spesifikasi W3C

Oke, jadi itu jelas, tapi apa perbedaan antara classes dan elements?

Pseudo-Class vs Pseudo elemen

Class pseudo selalu terdiri dari "colon" : diikuti dengan nama class pseudo (kata kunci) dan, untuk fungsional pseudo-Class, satu atau lebih argumen antara tanda kurung (mirip dengan fungsi CSS). Ini adalah metode untuk penulis untuk menentukan dan target keadaan khusus dipilih elemen yang dipilih.

"Pseudo-Class membiarkan Anda menerapkan gaya ke elemen tidak hanya terkait dengan isi dari dokumen tree, tetapi juga dalam kaitannya dengan faktor-faktor eksternal seperti sejarah navigator (:visited, misalnya), status isinya (seperti :checked bentuk tertentu elemen), atau posisi mouse (seperti :hover, yang memungkinkan Anda mengetahui apakah mouse adalah lebih dari sebuah elemen atau tidak). "-MDN Web Docs

Unsur-unsur pseudo membuat abstraksi tentang pohon dokumen luar tersebut ditentukan oleh bahasa dokumen. Misalnya, dokumen bahasa tidak menawarkan mekanisme untuk mengakses "surat pertama" atau "baris pertama" elemen konten. Unsur-unsur pseudo memungkinkan penulis untuk merujuk informasi ini tidak dapat diakses.

Unsur-unsur pseudo juga menyediakan penulis sebuah mekanisme untuk konten referensi yang tidak ada dalam dokumen sumber terkenal:: sebelum dan:: setelah pseudo elemen yang memungkinkan akses ke konten yang dihasilkan dalam CSS 2.

Sekarang bahwa kita memiliki logistik keluar dari jalan, mari kita menyelam dalam dan menjelajahi beberapa ini menarik tingkat 4 CSS penyeleksi.

1. :matches()

:Matches() class pseudo jelas pemilih kuat datang dari tingkat 4, tapi browser masih membahas dimasukkan dengan pengecualian Safari (WebKit).

Secara umum, dapat digunakan untuk menggabungkan beberapa aturan pemilih ke dalam satu baris yang ringkas. Dan menerima daftar pemilih sebagai argumen. Argumen ini dapat compound selectors dan complex selectors, namun combinator selectors tidak diperbolehkan.

Sementara snippet ini menggabungkan semua states kami umum untuk :hover, :focus, dan :active ke dalam satu aturan, masih tidak menunjukkan potensi memiliki. Kami akan meninjau contoh yang lebih kompleks yang datang berikutnya.

Jika Anda akrab dengan "nesting" bersiap-siap untuk memiliki mengetuk kaus kaki Anda. Pertandingan dapat dikombinasikan dengan lain :matches penyeleksi untuk meniru fitur ini yang sama bahwa banyak pengguna pra-prosesor adore, tetapi dari dalam CSS!

Jika Anda begitu ingin, Anda bahkan dapat string mereka bersama-sama untuk membuka satu set kemungkinan.

Contoh ini sama dengan menulis:

Perlu diketahui bahwa :matches() tidak dapat diulang (:matches(:matches())) dan tidak bekerja dengan :not() (:matches(:not()), :not(:matches())).

Sayangnya spesifikasi untuk selektor ini hanya dipadatkan di Safari dan masih menunggu vendor browser lain untuk mendukung itu, jadi Anda harus menggunakan Deklarasi terpisah dan penjual awalan sementara itu. Saat ini, perkakas seperti Autoprefixer tidak mendukung :matches(), tetapi memiliki tidak takut karena saya baru saja mengajukan isu GitHub meminta dukungan ini.

Jika Anda memiliki contoh menggunakan selektor ini dan ingin berbagi, silahkan posting di komentar di bawah ini. Kami selalu mencintai demo CodePen!

2. :placeholder-shown

Elemen-elemen input memiliki pilihan untuk menampilkan placeholder text mengisyaratkan kepada pengguna apa yang harus diketik ke input. Hal ini terjadi ketika atribut placeholder hadir pada input tag dan dengan demikian sesuai dengan elemen input yang menampilkan teks pengganti.

Pada dasarnya :placeholder-shown adalah untuk memilih masukan sendiri ketika teks pengganti yang sedang ditampilkan vs ::placeholder yang gaya placeholder text. Bahkan ada dokumentasi tentang :placeholder yang dicatat dalam CSS pseudo elemen modul tingkat 4 editor Draft. Perlu diketahui bahwa :placeholder-shown adalah class pseudo (itu adalah sebuah elemen dalam keadaan tertentu) dan ::placeholder merupakan elemen pseudo (terlihat hal yang tidak benar-benar dalam DOM).

Selama penelitian saya, saya menemukan bahwa color adalah sebuah properti tertentu (ketika digunakan dengan :placeholder-shown untuk mengubah warna teks pengganti) yang hanya dihormati oleh Firefox, sedangkan Chrome dan Safari mempertahankan warna teks pengganti abu-abu.

3. :any-link

:any-link pseudo-class mewakili elemen yang bertindak sebagai source anchor hyperlink.

Misalnya, di HTML5, setiap <a>, <area>, atau <link> elemen dengan atribut href adalah hyperlink yang cocok :any-link dan setara dengan :matches(:link, :visited). Menurut pendapat saya ini adalah benar-benar aneh pemilih dan masih menunggu lebih baik nama rupanya, namun dukungan adalah hari cukup lebar ini kecuali Edge.

Autoprefixer saat ini mendukung properti ini dan menyediakan awalan Penjual tepat untuk browser yang membutuhkan mereka.

4. :indeterminate

Class pseudo :indeterminate adalah selector yang ditujukan untuk unsur-unsur bentuk tertentu dan berlaku untuk semua media.

Biasanya pemilih ini akan mencocokkan masukan seperti radio dan kotak centang saat tidak ada atribut yang dicentang. Masukan seperti ini dapat ada tanpa tanpa status yang dicentang atau tidak dicentang.

Itu juga memilih unsur-unsur seperti elemen progress tanpa value atribut konten (yaitu ketika persentase penyelesaian tidak diketahui). Dukungan sangat stabil saat ini di banyak vendor browser yang digunakan secara luas.

5. :user-error

Kelas pseudo :user-error mewakili elemen input dengan input yang salah, tetapi hanya setelah pengguna berinteraksi dengannya. Misalnya, dari saat pengguna telah mencoba mengirimkan formulir dan sebelum pengguna berinteraksi lagi dengan elemen formulir.

Dukungan, namun, tidak ada dan tidak ada cara untuk mengetahui jika ini akan dilaksanakan oleh vendor browser utama. Untuk waktu yang yang lebih baik untuk menggunakan :invalid atau :required jika Anda memerlukan jenis kesalahan styling untuk formulir web.

6. :optional

Class pseudo :optional dapat digunakan ketika nilai valid dan sebelum itu milik formulir dikirimkan.

Ini memilih elemen input atau textarea yang tidak memiliki atribut yang required. Ini memungkinkan formulir untuk dengan mudah menunjukkan bidang opsional, dan memberi gaya sesuai dengan itu.

Ini adalah salah satu penyeleksi didokumentasikan sangat ringan yang dimasukkan dalam rancangan spesifikasi tingkat 4 penyeleksi.

7. :scope

Ruang kelas pseudo :scope lingkup dapat membatasi aturan gaya yang hanya berlaku untuk bagian halaman dengan mengatur atribut scoped pada elemen <style> (child langsung dari elemen akar subtree yang Anda inginkan agar gaya diterapkan) . Ini membatasi gaya untuk mempengaruhi hanya elemen yang merupakan induk dari elemen <style> dan semua keturunannya, atau dengan kata lain, induk dari elemen <style scoped> dan apa pun di dalamnya. dan semua keturunannya, atau dengan kata lain, induk dari elemen dan apa pun di dalamnya.

Sayangnya, kebanyakan browser tidak mendukung itu, atau melakukan pada satu waktu dan memiliki sejak dihapus sepenuhnya. Meskipun Chrome dan Safari mendaftar pertandingan kelas pseudo, dan karena itu berlaku aturan CSS, mereka belum mendukung gaya scoping itu sendiri; ini berarti bahwa aturan CSS diterapkan banjir luar bagian dimaksudkan dokumen dan setara dengan :root.

Berdasarkan penelitian saat ini Chrome 35 dan 55 FF dihapus dukungan namun ada saat ketika Chrome dan Firefox didukung :scope. Semua ini kembali dan sebagainya membuat ruang lingkup di outlook tampak suram, dan dapat saya gunakan saat ini kebanyakan browser memiliki dukungan ditempatkan di belakang bendera.

Kesimpulan

Ada pasti beberapa penyeleksi sangat menjanjikan di tingkat 4 dan banyak lebih tidak disebutkan dalam artikel ini. Seperti dengan apa pun dalam bentuk spesifikasi, penyeleksi beberapa bisa berubah sedikit dari waktu ke waktu atau dihapus sepenuhnya. Terserah kita sebagai developers untuk melekat pada yang paling kita hargai dan pastikan tim yang bertanggung jawab sadar. Jika Anda memiliki pertanyaan atau komentar atau bahkan contoh dari pemilih yang disebutkan sebelumnya, silakan mempostingnya di bawah. Selamat coding!

Spesifikasi

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.