ประกบ DNA ของ HTML ด้วย CSS Attribute Selectors

ตลอดอาชีพการทำงานของฉัน ตัวเลือกคุณลักษณะมีเวทย์มนตร์มากกว่าวิทยาศาสตร์ ฉันจ้องเขม็งไปที่ CSS เพื่อส่งลิงก์ในสไตล์ชีตการพิมพ์ ไม่เข้าใจอะไรเลย ฉันจะคัดลอกและวางลงในสไตล์ชีตการพิมพ์ของฉันตามหน้าที่ จากนั้นจึงวิ่งออกไปเพื่อเอาโปรเจ็กต์ที่เป็นกองขยะที่ใหญ่ที่สุด

แต่คุณไม่จำเป็นต้องจ้องเขม็งไปที่ตัวเลือกแอตทริบิวต์ CSS อีกต่อไป ในตอนท้ายของบทความนี้ คุณจะใช้มันเพื่อเรียกใช้การวินิจฉัยบนไซต์ของคุณ แก้ไขปัญหาที่ไม่สามารถแก้ไขได้ และสร้างประสบการณ์ทางเทคโนโลยีขั้นสูงจนรู้สึกเหมือนมหัศจรรย์ คุณอาจคิดว่าฉันสัญญามากเกินไปและคุณคิดถูก แต่เมื่อคุณเข้าใจพลังของตัวเลือกแอตทริบิวต์แล้ว คุณอาจรู้สึกว่าตัวเองพูดเกินจริง

ในระดับพื้นฐานที่สุด คุณใส่แอตทริบิวต์ HTML ในวงเล็บเหลี่ยมและเรียกมันว่าตัวเลือกแอตทริบิวต์ดังนี้:

 [href] { color: chartreuse; }

ข้อความขององค์ประกอบใดๆ ที่มี href และไม่มีตัวเลือกที่เจาะจงกว่านี้จะเปลี่ยนการใช้แผนภูมิอย่างน่าอัศจรรย์ ความจำเพาะของตัวเลือกแอตทริบิวต์เหมือนกับคลาส

หมายเหตุ : สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจับคู่แบบกรงที่มีความเฉพาะเจาะจงของ CSS คุณสามารถอ่าน "CSS Specificity: สิ่งที่คุณควรรู้" หรือถ้าคุณชอบ Star Wars: "CSS Specificity Wars"

แต่คุณสามารถทำสิ่งต่างๆ ได้มากขึ้นด้วยตัวเลือกแอตทริบิวต์ เช่นเดียวกับ DNA ของคุณ พวกมันมีตรรกะในตัวเพื่อช่วยคุณเลือกชุดค่าผสมและค่าแอตทริบิวต์ทุกประเภท แทนที่จะจับคู่แบบตรงทั้งหมดกับวิธีที่แท็ก คลาส หรือตัวเลือก id จะทำ พวกเขาสามารถจับคู่แอตทริบิวต์ใดๆ และแม้แต่ค่าสตริงภายในแอตทริบิวต์ได้

การเลือกคุณสมบัติ

ตัวเลือกแอตทริบิวต์สามารถอยู่ได้ด้วยตัวเองหรือเฉพาะเจาะจงมากขึ้น เช่น หากคุณต้องการเลือกแท็ก div ทั้งหมดที่มีแอตทริบิวต์ title

 div[title]

แต่คุณยังสามารถเลือกลูกของ div ที่มีชื่อโดยทำดังต่อไปนี้:

 div [title]

เพื่อความชัดเจน ไม่มีช่องว่างระหว่างพวกเขาหมายความว่าแอตทริบิวต์อยู่ในองค์ประกอบเดียวกัน (เช่นเดียวกับองค์ประกอบและคลาสที่ไม่มีช่องว่าง) และช่องว่างระหว่างพวกเขาหมายถึงตัวเลือกลูกหลานคือการเลือกลูกขององค์ประกอบที่มีแอตทริบิวต์

คุณจะได้รับรายละเอียดมากขึ้นในการเลือกแอตทริบิวต์รวมถึงค่าของแอตทริบิวต์

 div[title="dna"]

ด้านบนจะเลือก div ทั้งหมดที่มีชื่อ "dna" ที่แน่นอน ชื่อของ “dna is awesome” หรือ “dnamutation” จะไม่ถูกเลือก แม้ว่าจะมีอัลกอริธึมของตัวเลือกที่จัดการแต่ละกรณีเหล่านั้น (และอื่นๆ) เราจะไปถึงที่นั่นในไม่ช้า

หมายเหตุ : เครื่องหมายอัญประกาศไม่จำเป็นในตัวเลือกแอตทริบิวต์ในกรณีส่วนใหญ่ แต่ฉันจะใช้เครื่องหมายเหล่านี้เพราะฉันเชื่อว่าจะเพิ่มความชัดเจนและช่วยให้กรณีขอบทำงานอย่างเหมาะสม

หากคุณต้องการเลือก “dna” จากรายการที่คั่นด้วยช่องว่าง เช่น “my beautiful dna” หรือ “mutating dna is fun!” คุณสามารถเพิ่มตัวหนอนหรือ "ตัวหยัก" ตามที่ฉันชอบเรียกมันว่าข้างหน้าเครื่องหมายเท่ากับ

 div[title~="dna"]

คุณสามารถเลือกชื่อเช่น “dontblamemeblamemydna” หรือ “his-stupidity-is-from-upbringing-not-dna” จากนั้นคุณสามารถใช้เครื่องหมายดอลลาร์ $ เพื่อให้ตรงกับส่วนท้ายของชื่อ

 [title$="dna"]

เพื่อให้ตรงกับด้านหน้าของค่าแอตทริบิวต์ เช่น ชื่อของ "dnamutants" หรือ "dna-splicing-for-all" ให้ใช้เครื่องหมายคาเร็ต

 [title^="dna"]

แม้ว่าการจับคู่แบบตรงทั้งหมดจะเป็นประโยชน์ แต่อาจมีการเลือกที่แคบเกินไป และการจับคู่แบบคาเร็ตด้านหน้าอาจกว้างเกินไปสำหรับความต้องการของคุณ ตัวอย่างเช่น คุณอาจไม่ต้องการเลือกชื่อ "ลำดับวงศ์ตระกูล" แต่ยังคงเลือกทั้ง "ยีน" และ "ข้อมูลยีน" อักขระไปป์ (หรือแถบแนวตั้ง) เป็นเช่นนั้น มันทำการจับคู่แบบตรงทั้งหมด แต่รวมถึงเมื่อการจับคู่แบบตรงทั้งหมดตามด้วยเครื่องหมายขีดกลาง

 [title|="gene"]

สุดท้าย มีโอเปอเรเตอร์แอตทริบิวต์การค้นหาแบบเต็มที่จะจับคู่สตริงย่อยใดๆ

 [title*="dna"]

แต่จงใช้อย่างชาญฉลาดเพราะด้านบนจะจับคู่กับ "I-like-my-dna-like-my-meat-rare" เช่นเดียวกับ "edna", "การลักพาตัว" และ "ตัวตุ่น" (สิ่งที่ Edna ไม่ควรทำจริงๆ )

สิ่งที่ทำให้ตัวเลือกแอตทริบิวต์เหล่านี้มีประสิทธิภาพมากยิ่งขึ้นก็คือสามารถวางซ้อนกันได้ ซึ่งช่วยให้คุณสามารถเลือกองค์ประกอบที่มีปัจจัยที่ตรงกันได้หลายแบบ

แต่คุณจำเป็นต้องค้นหาแท็ a ที่มีชื่อและมีคลาสที่ลงท้ายด้วย "ยีน" หรือไม่? โดยใช้วิธีดังนี้:

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

ไม่เพียงแต่คุณสามารถเลือกแอตทริบิวต์ขององค์ประกอบ HTML เท่านั้น คุณยังสามารถพิมพ์ยีนที่กลายพันธุ์โดยใช้ "วิทยาศาสตร์" หลอก (หมายถึงองค์ประกอบเทียมและการประกาศเนื้อหา)

 <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; }

รหัสด้านบนจะแสดงคำตอบของมุขตลกที่เลวร้ายที่สุดเรื่องหนึ่งที่เคยเขียนไว้บนโฮเวอร์ (ใช่ ฉันเขียนมันเอง และใช่ การเรียกมันว่า "เรื่องตลก" คือการเป็นคนใจกว้าง)

สิ่งสุดท้ายที่ควรทราบคือ คุณสามารถเพิ่มแฟล็กเพื่อทำให้การค้นหาแอตทริบิวต์ไม่คำนึงถึงขนาดตัวพิมพ์ คุณเพิ่ม i ก่อนวงเล็บเหลี่ยมปิด

 [title*="DNA" i]

ดังนั้นจึงจับคู่ "dna", "DNA", "dnA" และรูปแบบอื่นๆ

ข้อเสียเพียงอย่างเดียวของสิ่งนี้คือ i ใช้งานได้ใน Firefox, Chrome, Safari, Opera และเบราว์เซอร์มือถือเพียงเล็กน้อย

ตอนนี้เราได้เห็นวิธีการเลือกด้วยตัวเลือกแอตทริบิวต์แล้ว มาดูกรณีการใช้งานกันบ้าง ฉันได้แบ่งพวกเขาออกเป็นสองประเภท: การใช้งานทั่วไป และ การ วินิจฉัย

การใช้งานทั่วไป

สไตล์ตามประเภทอินพุต

คุณสามารถจัดรูปแบบการป้อนข้อมูลได้แตกต่างกัน เช่น อีเมลกับโทรศัพท์

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

แสดงลิงค์โทรศัพท์

คุณสามารถซ่อนหมายเลขโทรศัพท์ในบางขนาดและแสดงลิงก์โทรศัพท์แทนเพื่อให้โทรได้ง่ายขึ้นบนโทรศัพท์

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

ลิงค์ภายในกับลิงค์ภายนอก ปลอดภัยกับไม่ปลอดภัย

คุณสามารถจัดการลิงก์ภายในและภายนอกได้แตกต่างกัน และจัดรูปแบบลิงก์ที่ปลอดภัยให้แตกต่างจากลิงก์ที่ไม่ปลอดภัย

 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); }

ดาวน์โหลดไอคอน

คุณลักษณะหนึ่งที่ HTML5 ให้เราคือ "ดาวน์โหลด" ซึ่งบอกให้เบราว์เซอร์ทราบว่าดาวน์โหลดไฟล์นั้นแทนที่จะพยายามเปิด สิ่งนี้มีประโยชน์สำหรับ PDF และ DOC ที่คุณต้องการให้ผู้อื่นเข้าถึงแต่ไม่ต้องการให้เปิดในตอนนี้ นอกจากนี้ยังทำให้เวิร์กโฟลว์สำหรับการดาวน์โหลดไฟล์จำนวนมากติดต่อกันได้ง่ายขึ้น ข้อเสียของแอตทริบิวต์ download คือไม่มีภาพเริ่มต้นที่แยกความแตกต่างจากลิงก์แบบเดิม บ่อยครั้งนี่คือสิ่งที่คุณต้องการ แต่เมื่อไม่ใช่ คุณสามารถทำสิ่งที่ชอบด้านล่าง

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

คุณยังสามารถสื่อสารประเภทไฟล์ด้วยไอคอนต่างๆ เช่น PDF กับ DOCX กับ ODF เป็นต้น

 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); }

คุณยังตรวจสอบได้ด้วยว่าไอคอนเหล่านั้นอยู่ในลิงก์ที่ดาวน์โหลดได้เท่านั้นโดยซ้อนตัวเลือกแอตทริบิวต์

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

แทนที่หรือใช้รหัสที่ล้าสมัย/เลิกใช้ใหม่อีกครั้ง

เราเคยเจอไซต์เก่าที่มีโค้ดที่ล้าสมัย แต่บางครั้งการอัปเดตโค้ดไม่คุ้มกับเวลาที่ใช้ในการดำเนินการในหน้าเว็บหกพันหน้า คุณอาจต้องลบล้างหรือนำสไตล์ที่ใช้เป็นแอตทริบิวต์มาใช้ใหม่ก่อน HTML5

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

แทนที่สไตล์อินไลน์เฉพาะ

บางครั้งคุณจะพบสไตล์อินไลน์ที่รวบรวมผลงาน แต่มาจากโค้ดที่อยู่นอกเหนือการควบคุมของคุณ ควรจะพูดว่าถ้าคุณสามารถเปลี่ยนได้ซึ่งจะเป็นอุดมคติ แต่ถ้าคุณทำไม่ได้ นี่คือวิธีแก้ปัญหาชั่วคราว

หมายเหตุ : วิธีนี้จะได้ผลดีที่สุดหากคุณทราบคุณสมบัติและค่าที่แน่นอนที่คุณต้องการแทนที่ และหากคุณต้องการให้แทนที่ไม่ว่าจะปรากฏอยู่ที่ใด

สำหรับตัวอย่างนี้ ระยะขอบขององค์ประกอบถูกกำหนดเป็นพิกเซล แต่จำเป็นต้องขยายและตั้งค่าเป็น em เพื่อให้องค์ประกอบสามารถปรับใหม่ได้อย่างเหมาะสมหากผู้ใช้เปลี่ยนขนาดฟอนต์เริ่มต้น

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

หมายเหตุ : แนวทางนี้ควรใช้ด้วยความระมัดระวังอย่างยิ่ง ราวกับว่าคุณจำเป็นต้องแทนที่รูปแบบนี้ คุณจะตกอยู่ใน !important สงครามที่สำคัญ และลูกแมวจะตาย

กำลังแสดงประเภทไฟล์

รายการไฟล์ที่ยอมรับได้สำหรับอินพุตไฟล์จะไม่ปรากฏตามค่าเริ่มต้น โดยปกติ เราจะใช้องค์ประกอบหลอกเพื่อเปิดเผย และแม้ว่าคุณจะไม่สามารถสร้างองค์ประกอบหลอกบนแท็ก input ส่วนใหญ่ (หรือใน Firefox หรือ Edge) คุณก็สามารถใช้องค์ประกอบเหล่านี้กับอินพุตไฟล์ได้

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

เมนูหีบเพลง HTML

details และแท็ก summary ที่ไม่ได้รับการเผยแพร่อย่างดีเป็นวิธีการทำเมนูที่ขยายได้/หีบเพลงด้วย HTML เพียงอย่างเดียว รายละเอียดครอบคลุมทั้งแท็ก summary และเนื้อหาที่คุณต้องการแสดงเมื่อเปิดหีบเพลง การคลิกที่สรุปจะขยายแท็ก detail และเพิ่มแอตทริบิวต์เปิด แอตทริบิวต์เปิดทำให้ง่ายต่อการจัดรูปแบบแท็ก details ที่เปิดแตกต่างจากแท็ก details แบบปิด

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

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

พิมพ์ลิงค์

การแสดง URL ในรูปแบบการพิมพ์ทำให้ฉันเข้าใจตัวเลือกแอตทริบิวต์ คุณควรรู้วิธีสร้างมันขึ้นมาเองตอนนี้ คุณเพียงแค่เลือกแท็กทั้งหมด a มี href เพิ่มองค์ประกอบหลอก และพิมพ์โดยใช้ attr() และ content

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

เคล็ดลับเครื่องมือที่กำหนดเอง

การสร้างคำแนะนำเครื่องมือที่กำหนดเองนั้นสนุกและง่ายดายด้วยตัวเลือกแอตทริบิวต์ (ใช่ สนุกถ้าคุณเป็นคนโง่อย่างฉัน แต่ไม่ว่าจะด้วยวิธีใดก็ง่าย)

หมายเหตุ : รหัสนี้ควรนำคุณไปยังพื้นที่ใกล้เคียงทั่วไป แต่อาจจำเป็นต้องปรับเปลี่ยนการเว้นวรรค การเติม และรูปแบบสี ทั้งนี้ขึ้นอยู่กับสภาพแวดล้อมของไซต์ของคุณ และไม่ว่าคุณจะมีรสนิยมที่ดีกว่าฉันหรือไม่

 [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

ข้อดีอย่างหนึ่งของเว็บคือมีตัวเลือกมากมายในการเข้าถึงข้อมูล คุณลักษณะหนึ่งที่ไม่ค่อยได้ใช้คือความสามารถในการตั้งค่า accesskey เพื่อให้สามารถเข้าถึงรายการนั้นได้โดยตรงผ่านชุดคีย์ผสมและตัวอักษรที่กำหนดโดย accesskey (ชุดคีย์ที่แน่นอนขึ้นอยู่กับเบราว์เซอร์) แต่ไม่มีวิธีง่ายๆ ที่จะทราบว่าคีย์ใดบ้างที่ตั้งค่าไว้บนเว็บไซต์

รหัสต่อไปนี้จะแสดงคีย์เหล่านั้นบน :focus ฉันไม่ได้ใช้ hover เพราะคนส่วนใหญ่ที่ต้องการ accesskey การเข้าถึงคือผู้ที่มีปัญหาในการใช้เมาส์ คุณสามารถเพิ่มเป็นตัวเลือกที่สองได้ แต่ต้องแน่ใจว่าไม่ใช่ตัวเลือกเดียว

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

การวินิจฉัย

ตัวเลือกเหล่านี้มีไว้เพื่อช่วยคุณระบุปัญหาระหว่างกระบวนการสร้างหรือในเครื่องขณะพยายามแก้ไขปัญหา การวางสิ่งเหล่านี้บนไซต์การผลิตของคุณจะสร้างข้อผิดพลาดให้กับผู้ใช้ของคุณ

เสียงที่ไม่มีการควบคุม

ฉันไม่ได้ใช้แท็ก audio บ่อยเกินไป แต่เมื่อฉันใช้มัน ฉันมักจะลืมใส่แอตทริบิวต์ controls ผลลัพธ์: ไม่มีอะไรปรากฏ หากคุณกำลังทำงานใน Firefox รหัสนี้สามารถช่วยให้คุณสงสัยว่าคุณมีองค์ประกอบเสียงซ่อนอยู่หรือหากไวยากรณ์หรือปัญหาอื่น ๆ ทำให้ไม่ปรากฏ (ใช้งานได้เฉพาะใน Firefox)

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

ไม่มีข้อความแสดงแทน

รูปภาพที่ไม่มีข้อความแสดงแทนเป็นฝันร้ายของการขนส่งและการเข้าถึง พวกมันหายากเพียงแค่ดูที่หน้าเพจ แต่ถ้าคุณเพิ่มสิ่งนี้ พวกมันจะโผล่ออกมาทันที

หมายเหตุ : ฉันใช้ outline แทน border เพราะเส้นขอบสามารถเพิ่มความกว้างขององค์ประกอบและทำให้เค้าโครงเลอะเทอะได้ outline ไม่ได้เพิ่มความกว้าง

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

ไฟล์ Javascript แบบอะซิงโครนัส

หน้าเว็บอาจเป็นกลุ่มของระบบการจัดการเนื้อหา ปลั๊กอิน เฟรมเวิร์ก และโค้ดที่เท็ด (นั่งอยู่สามห้อง) เขียนในช่วงพักร้อนเพราะเว็บไซต์หยุดทำงานและเขาเกรงใจเจ้านายของคุณ การหาว่า JavaScript โหลดอะไรแบบอะซิงโครนัสและอะไรที่ไม่สามารถช่วยให้คุณมุ่งเน้นไปที่ตำแหน่งที่จะปรับปรุงประสิทธิภาพของเพจ

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

องค์ประกอบเหตุการณ์ Javascript

คุณยังสามารถเน้นองค์ประกอบที่มีแอตทริบิวต์เหตุการณ์ JavaScript เพื่อจัดองค์ประกอบใหม่ในไฟล์ JavaScript ของคุณ ฉันได้เน้นที่แอตทริบิวต์ OnMouseOver ที่นี่ แต่ใช้ได้กับแอตทริบิวต์เหตุการณ์ JavaScript ใดๆ

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

ไอเทมที่ซ่อนอยู่

หากคุณต้องการดูว่าองค์ประกอบที่ซ่อนอยู่หรืออินพุตที่ซ่อนอยู่ของคุณอยู่ที่ไหน คุณสามารถแสดงด้วย:

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

แต่ด้วยความสามารถอันน่าทึ่งเหล่านี้ คุณคิดว่าต้องมีสิ่งที่จับได้ แน่นอนว่าตัวเลือกแอตทริบิวต์จะต้องทำงานในขณะที่ตั้งค่าสถานะใน Chrome หรือในรุ่น Fiery Foxes บนขอบของ Safari ทุกคืน นี้เป็นเพียงดีเกินกว่าที่จะเป็นจริง และน่าเสียดายที่มีการจับ

หากคุณต้องการทำงานกับตัวเลือกแอตทริบิวต์ในเบราว์เซอร์อันเป็นที่รักมากที่สุด นั่นคือ IE6 คุณจะไม่สามารถทำได้ (ไม่เป็นไร ปล่อยให้น้ำตาร่วง ไม่มีการตัดสิน) แทบทุกที่ที่คุณไปได้ดี ตัวเลือกแอตทริบิวต์เป็นส่วนหนึ่งของข้อกำหนด CSS 2.1 และอยู่ในเบราว์เซอร์มาเป็นเวลากว่าทศวรรษ

ดังนั้นตัวเลือกเหล่านี้จึงไม่ควรเป็นสิ่งมหัศจรรย์สำหรับคุณอีกต่อไป แต่เป็นเทคโนโลยีขั้นสูงที่เพียงพอ พวกเขาเป็นวิทยาศาสตร์มากกว่าเวทมนตร์ และเมื่อคุณรู้ความลับที่ลึกที่สุดแล้ว ก็ขึ้นอยู่กับคุณ ออกไปทำงานเกี่ยวกับความมหัศจรรย์ของวิทยาศาสตร์บนเว็บ