Menyambung DNA HTML Dengan Pemilih Atribut CSS

Untuk sebagian besar karir saya, penyeleksi atribut lebih ajaib daripada sains. Saya akan menatap, terkesima, pada CSS untuk mengeluarkan tautan dalam lembar gaya cetak, tidak memahami apa pun. Saya dengan patuh menyalin, dan menempelkannya ke lembar gaya cetak saya, lalu lari untuk mengeluarkan proyek apa pun yang merupakan tumpukan sampah terbesar yang terbakar.

Tetapi Anda tidak perlu lagi terpaku pada pemilih atribut CSS. Pada akhir artikel ini, Anda akan menggunakannya untuk menjalankan diagnostik di situs Anda, memperbaiki masalah yang tidak dapat dipecahkan, dan menghasilkan pengalaman teknologi yang begitu canggih sehingga terasa seperti keajaiban. Anda mungkin berpikir saya terlalu banyak menjanjikan dan Anda benar, tetapi begitu Anda memahami kekuatan penyeleksi atribut, Anda mungkin merasa ingin melebih-lebihkan diri sendiri.

Pada tingkat paling dasar, Anda meletakkan atribut HTML dalam tanda kurung siku dan menyebutnya sebagai pemilih atribut seperti:

 [href] { color: chartreuse; }

Teks elemen apa pun yang memiliki href dan tidak memiliki pemilih yang lebih spesifik sekarang akan secara ajaib mengubah chartreuse. Spesifisitas pemilih atribut sama dengan kelas.

Catatan : Untuk lebih lanjut tentang pertandingan kandang yang merupakan kekhususan CSS, Anda dapat membaca “CSS Specificity: Things You Should Know” atau jika Anda menyukai Star Wars: “CSS Specificity Wars”.

Tetapi Anda dapat melakukan jauh lebih banyak dengan penyeleksi atribut. Sama seperti DNA Anda, mereka memiliki logika bawaan untuk membantu Anda memilih semua jenis kombinasi dan nilai atribut. Alih-alih hanya mencocokkan persis seperti yang akan dilakukan oleh pemilih tag, kelas, atau id, mereka dapat mencocokkan atribut apa pun dan bahkan nilai string di dalam atribut.

Seleksi Atribut

Pemilih atribut dapat hidup sendiri atau lebih spesifik, yaitu jika Anda perlu memilih semua tag div yang memiliki atribut title .

 div[title]

Tetapi Anda juga dapat memilih anak-anak dari div yang memiliki judul dengan melakukan hal berikut:

 div [title]

Agar jelas, tidak ada spasi di antara keduanya berarti atribut berada pada elemen yang sama (seperti elemen dan kelas tanpa spasi), dan spasi di antara keduanya berarti pemilih keturunan, yaitu memilih anak elemen yang memiliki atribut tersebut.

Anda bisa mendapatkan jauh lebih terperinci dalam cara Anda memilih atribut termasuk nilai atribut.

 div[title="dna"]

Di atas memilih semua div dengan judul "dna" yang tepat. Judul "dna is awesome" atau "dnamutation" tidak akan dipilih, meskipun ada algoritme pemilih yang menangani setiap kasus tersebut (dan lebih banyak lagi). Kami akan segera membahasnya.

Catatan : Tanda kutip tidak diperlukan dalam penyeleksi atribut dalam banyak kasus, tetapi saya akan menggunakannya karena saya yakin itu meningkatkan kejelasan dan memastikan kasus tepi bekerja dengan benar.

Jika Anda ingin memilih "dna" dari daftar yang dipisahkan spasi seperti "dna cantik saya" atau "dna bermutasi itu menyenangkan!" Anda dapat menambahkan tilde atau "berlekuk", seperti yang saya suka menyebutnya, di depan tanda sama dengan.

 div[title~="dna"]

Anda dapat memilih judul seperti "dontblamemeblamemydna" atau "kebodohannya-adalah-dari-pendidikan-bukan-dna" kemudian Anda dapat menggunakan tanda dolar $ untuk mencocokkan akhir judul.

 [title$="dna"]

Untuk mencocokkan bagian depan nilai atribut seperti judul "dnamutan" atau "penyambungan DNA-untuk-semua" gunakan tanda sisipan.

 [title^="dna"]

Meskipun memiliki pencocokan tepat sangat membantu, pemilihan ini mungkin terlalu ketat, dan pencocokan sisi depan mungkin terlalu lebar untuk kebutuhan Anda. Misalnya, Anda mungkin tidak ingin memilih judul "silsilah", tetapi tetap memilih "gen" dan "data-gen". Karakter pipa (atau batang vertikal) hanya itu; itu melakukan pencocokan tepat, tetapi termasuk ketika pencocokan tepat diikuti oleh tanda hubung.

 [title|="gene"]

Terakhir, ada operator atribut pencarian lengkap yang akan cocok dengan substring apa pun.

 [title*="dna"]

Tetapi gunakan dengan bijak karena di atas akan cocok dengan "Saya-seperti-dna-saya-seperti-daging-saya-langka" serta "edna", "penculikan", dan "echidnas" (sesuatu yang seharusnya tidak dilakukan Edna. )

Apa yang membuat penyeleksi atribut ini lebih kuat adalah bahwa mereka dapat ditumpuk — memungkinkan Anda untuk memilih elemen dengan beberapa faktor yang cocok.

Tetapi Anda perlu menemukan tag a yang memiliki judul dan memiliki kelas yang diakhiri dengan "gen"? Berikut caranya:

 a[title][class$="genes"]

Anda tidak hanya dapat memilih atribut elemen HTML, Anda juga dapat mencetak gen yang bermutasi menggunakan "sains" semu (artinya elemen semu dan deklarasi konten).

 <span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span>

 .joke:hover:after { content: "Answer:" attr(title); display: block; }

Kode di atas akan menunjukkan jawaban untuk salah satu lelucon terburuk yang pernah ditulis di hover (ya, saya menulisnya sendiri, dan, ya, menyebutnya "lelucon" adalah bermurah hati).

Hal terakhir yang perlu diketahui adalah Anda dapat menambahkan tanda untuk membuat pencarian atribut tidak peka huruf besar/kecil. Anda menambahkan i sebelum tanda kurung siku penutup.

 [title*="DNA" i]

Dan dengan demikian akan cocok dengan "dna", "DNA", "dnA", dan variasi lainnya.

Satu-satunya downside ini adalah bahwa i hanya bekerja di Firefox, Chrome, Safari, Opera dan segelintir browser seluler.

Sekarang kita telah melihat cara memilih dengan pemilih atribut, mari kita lihat beberapa kasus penggunaan. Saya telah membaginya menjadi dua kategori: Penggunaan Umum dan Diagnostik .

Penggunaan Umum

Gaya Berdasarkan Jenis Masukan

Anda dapat mengatur jenis input secara berbeda, misalnya email vs. telepon.

 input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

Tampilkan Tautan Telepon

Anda dapat menyembunyikan nomor telepon pada ukuran tertentu dan menampilkan tautan telepon untuk mempermudah panggilan di telepon.

 span.phone { display: none; } a[href^="tel"] { display: block; }

Tautan Internal vs. Eksternal, Aman vs. Tidak Aman

Anda dapat memperlakukan tautan internal dan eksternal secara berbeda dan menata tautan aman secara berbeda dari tautan tidak aman.

 a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }

Unduh Ikon

Satu atribut yang diberikan HTML5 kepada kami adalah "unduh" yang memberi tahu browser untuk, Anda dapat menebaknya, mengunduh file itu daripada mencoba membukanya. Ini berguna untuk PDF dan DOC yang Anda ingin orang akses tetapi tidak ingin mereka buka sekarang. Ini juga membuat alur kerja untuk mengunduh banyak file berturut-turut menjadi lebih mudah. Kelemahan dari atribut download adalah tidak ada visual default yang membedakannya dari tautan yang lebih tradisional. Seringkali ini yang Anda inginkan, tetapi jika tidak, Anda dapat melakukan sesuatu seperti di bawah ini.

 a[download]:after { content: url(download-arrow.svg); }

Anda juga dapat mengomunikasikan jenis file dengan ikon yang berbeda seperti PDF vs. DOCX vs. ODF, dan seterusnya.

 a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }

Anda juga dapat memastikan bahwa ikon tersebut hanya ada di tautan yang dapat diunduh dengan menumpuk pemilih atribut.

 a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }

Ganti Atau Terapkan Kembali Kode Usang/Usang

Kita semua pernah menemukan situs lama yang memiliki kode usang, tetapi terkadang memperbarui kode tidak sepadan dengan waktu yang diperlukan untuk melakukannya pada enam ribu halaman. Anda mungkin perlu mengganti atau bahkan menerapkan kembali gaya yang diterapkan sebagai atribut sebelum HTML5.

 <div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

Ganti Gaya Inline Tertentu

Terkadang Anda akan menemukan gaya sebaris yang menyempurnakan karya, tetapi gaya tersebut berasal dari kode di luar kendali Anda. Seharusnya dikatakan jika Anda dapat mengubahnya itu ideal, tetapi jika Anda tidak bisa, inilah solusinya.

Catatan : Ini berfungsi paling baik jika Anda tahu persis properti dan nilai yang ingin Anda timpa, dan jika Anda ingin itu ditimpa di mana pun ia muncul.

Untuk contoh ini, margin elemen diatur dalam piksel, tetapi perlu diperluas dan diatur dalam em s sehingga elemen dapat menyesuaikan kembali dengan benar jika pengguna mengubah ukuran font default.

 <divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

Catatan : Pendekatan ini harus digunakan dengan sangat hati-hati karena jika Anda perlu mengganti gaya ini, Anda akan jatuh ke dalam perang yang !important dan anak kucing akan mati.

Menampilkan Jenis File

Daftar file yang dapat diterima untuk input file tidak terlihat secara default. Biasanya, kami akan menggunakan elemen semu untuk mengeksposnya dan, meskipun Anda tidak dapat melakukan elemen semu pada sebagian besar tag input (atau sama sekali di Firefox atau Edge), Anda dapat menggunakannya pada input file.

 <input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }

Menu Akordeon HTML

details dan summary tag duo yang tidak dipublikasikan dengan baik adalah cara untuk melakukan menu yang dapat diperluas/akordeon hanya dengan HTML. Detail membungkus tag summary dan konten yang ingin Anda tampilkan saat akordeon terbuka. Mengklik ringkasan akan memperluas tag detail dan menambahkan atribut buka. Atribut open memudahkan untuk menata tag details terbuka secara berbeda dari tag details tertutup.

 <details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

 details[open] { background-color: hotpink; }

Mencetak Tautan

Menampilkan URL dalam gaya cetak membawa saya ke jalan ini untuk memahami pemilih atribut. Anda harus tahu bagaimana membangunnya sendiri sekarang. Anda cukup memilih semua tag a href , menambahkan elemen semu, dan mencetaknya menggunakan attr() dan content .

 a[href]:after { content: " (" attr(href) ") "; }

Tip Alat Kustom

Membuat tooltips khusus itu menyenangkan dan mudah dengan penyeleksi atribut (oke, menyenangkan jika Anda seorang kutu buku seperti saya, tetapi bagaimanapun juga mudah).

Catatan : Kode ini akan membawa Anda ke lingkungan umum, tetapi mungkin perlu beberapa penyesuaian pada spasi, padding, dan skema warna tergantung pada lingkungan situs Anda dan apakah Anda memiliki selera yang lebih baik daripada saya atau tidak.

 [title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }

AccessKeys

Salah satu hal hebat tentang web adalah ia menyediakan banyak pilihan berbeda untuk mengakses informasi. Salah satu atribut yang jarang digunakan adalah kemampuan untuk mengatur accesskey sehingga item tersebut dapat diakses secara langsung melalui kombinasi tombol dan huruf yang diatur oleh accesskey (kombinasi tombol yang tepat tergantung pada browser). Tetapi tidak ada cara mudah untuk mengetahui kunci apa yang telah disetel di situs web.

Kode berikut akan menampilkan kunci tersebut pada :focus . Saya tidak menggunakan di hover karena sebagian besar orang yang membutuhkan accesskey adalah mereka yang kesulitan menggunakan mouse. Anda dapat menambahkannya sebagai opsi kedua, tetapi pastikan itu bukan satu-satunya opsi.

 a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

Diagnostik

Opsi ini untuk membantu Anda mengidentifikasi masalah selama proses pembuatan atau secara lokal saat mencoba memperbaiki masalah. Menempatkan ini di situs produksi Anda akan membuat kesalahan menempel pada pengguna Anda.

Audio Tanpa Kontrol

Saya tidak terlalu sering menggunakan tag audio , tetapi ketika saya menggunakannya, saya sering lupa untuk menyertakan atribut controls . Hasilnya: tidak ada yang ditampilkan. Jika Anda bekerja di Firefox, kode ini dapat membantu Anda mengetahui apakah Anda menyembunyikan elemen audio atau jika sintaks atau masalah lain mencegahnya muncul (hanya berfungsi di Firefox).

 audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

Tidak Ada Teks Alt

Gambar tanpa teks alternatif adalah mimpi buruk logistik dan aksesibilitas. Mereka sulit ditemukan hanya dengan melihat halamannya, tetapi jika Anda menambahkan ini, mereka akan langsung muncul.

Catatan : Saya menggunakan outline daripada garis border karena batas dapat menambah lebar elemen dan mengacaukan tata letak. outline tidak menambah lebar.

 img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

File Javascript Asinkron

Halaman web bisa menjadi kumpulan sistem manajemen konten dan plugin serta kerangka kerja dan kode yang ditulis Ted (duduk tiga bilik) saat liburan karena situsnya mati dan dia takut pada bos Anda. Mencari tahu apa yang dimuat JavaScript secara asinkron dan apa yang tidak dapat membantu Anda fokus pada tempat untuk meningkatkan kinerja halaman.

 script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

Elemen Acara Javascript

Anda juga dapat menyorot elemen yang memiliki atribut peristiwa JavaScript untuk memfaktorkannya kembali ke dalam file JavaScript Anda. Saya telah berfokus pada atribut OnMouseOver di sini, tetapi ini berfungsi untuk semua atribut acara JavaScript.

 [OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

Item Tersembunyi

Jika Anda perlu melihat di mana elemen tersembunyi atau input tersembunyi Anda berada, Anda dapat menunjukkannya dengan:

 [hidden], [type="hidden"] { display: block; }

Tetapi dengan semua kemampuan luar biasa ini, Anda pikir pasti ada tangkapan. Tentunya penyeleksi atribut hanya boleh bekerja saat ditandai di Chrome atau di build malam Fiery Foxes di Edge of a Safari. Ini terlalu bagus untuk menjadi kenyataan. Dan, sayangnya, ada tangkapan.

Jika Anda ingin bekerja dengan pemilih atribut di browser yang paling disukai — yaitu, IE6 — Anda tidak akan bisa melakukannya. (Tidak apa-apa; biarkan air mata jatuh. Tidak ada penilaian.) Cukup banyak tempat lain yang bisa Anda kunjungi. Pemilih atribut adalah bagian dari spesifikasi CSS 2.1 dan karenanya telah ada di browser selama lebih dari satu dekade.

Jadi penyeleksi ini seharusnya tidak lagi ajaib bagi Anda tetapi diungkapkan sebagai teknologi yang cukup canggih. Mereka lebih sains daripada sihir, dan sekarang setelah Anda mengetahui rahasia terdalam mereka, terserah Anda. Maju dan kerjakan keajaiban sains yang membingungkan di web.