ฉันพบตัวเลือก CSS ต่อไปนี้ในสไตล์ชีตตัวแทนผู้ใช้ของ Google Chrome:

[type="checkbox" i]

อะไรiหมายถึง?

ดังที่ได้กล่าวไว้ในความคิดเห็นสำหรับการจับคู่แอตทริบิวต์ที่ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่ นี่เป็นคุณสมบัติใหม่ใน CSS Selectors ระดับ 4

ปัจจุบันมีให้บริการใน Chrome 49+, Firefox 47+, Safari 9+ และ Opera 37 + * ก่อนหน้านี้มีให้บริการเฉพาะในรูปแบบ User-agent ของ Chrome ที่เริ่มต้นจาก Chrome 39 แต่สามารถเปิดใช้งานสำหรับเนื้อหาเว็บได้โดยตั้งค่าสถานะคุณลักษณะทดลอง

* Opera เวอร์ชันก่อนหน้านี้อาจรองรับด้วย

ตัวอย่างการทำงาน / การทดสอบเบราว์เซอร์:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

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

นั่นคือธงกรณีตายสำหรับแอตทริบิวต์เตอร์แนะนำในSelectors 4 เห็นได้ชัดว่าพวกเขาแอบนำคุณลักษณะนี้ไปใช้ใน Chrome ตั้งแต่ต้นเดือนสิงหาคม 2014

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

นี่คือการกระทำที่เกี่ยวข้อง:

• 179370 - การนำไปใช้
• 179401 - การเปลี่ยนแปลงสไตล์ชีท UA ดังที่แสดงในภาพหน้าจอในคำถาม

โปรดทราบว่าปัจจุบันซ่อนอยู่ในแฟล็ก "เปิดใช้คุณลักษณะแพลตฟอร์มเว็บรุ่นทดลอง" ซึ่งคุณสามารถเข้าถึงได้ที่ chrome: // flags / # enable-experiment-web-platform-features สิ่งนี้อาจอธิบายได้ว่าเหตุใดคุณลักษณะนี้จึงไม่มีใครสังเกตเห็นโดยส่วนใหญ่คุณลักษณะที่ซ่อนอยู่หลังแฟล็กนั้นสามารถใช้ได้เฉพาะภายในและไม่สามารถใช้ได้ในโค้ดที่เปิดเผยต่อสาธารณะ (เช่นสไตล์ชีตของผู้เขียน) เว้นแต่จะเปิดใช้งานเนื่องจากเป็นช่วงทดลองและดังนั้นจึงไม่พร้อมสำหรับการใช้งานจริง

นี่คือกรณีทดสอบที่คุณสามารถใช้ได้ - เปรียบเทียบผลลัพธ์เมื่อเปิดใช้งานและปิดใช้งานแฟล็ก:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

โปรดทราบว่าฉันใช้แอตทริบิวต์ข้อมูลที่กำหนดเองแทนtypeเพื่อแสดงว่าสามารถใช้กับแอตทริบิวต์ใดก็ได้

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