มีอะไรผิดปกติกับการกำหนดเป้าหมายแอตทริบิวต์ alt ใน css หรือไม่

11

ฉันพยายามกำหนดเป้าหมายแอตทริบิวต์ alt เป็น css โซลูชันของฉันทำงานใน Firefox / Mozilla แต่ล้มเหลวใน Safari-Chrome / Webkit มีอะไรผิดปกติในการใส่สไตล์แท็ก alt หรือไม่ ถ้าไม่คุณคิดว่าฉันแก้ไขปัญหาสำหรับ Webkit ได้อย่างไร

นี่คือตัวอย่าง:

CSS

img#logo[alt="Site Title"] { color: #999; font-size: 2em; }

HTML

<img id="logo" src="" alt="Site Title" width="" height="" />

5

ฉันลองแล้วมันใช้งานได้อย่างสมบูรณ์แบบสำหรับฉัน โปรดทราบว่าcolorและfont-sizeคุณสมบัติจะไม่มีผลใด ๆ ใน Chrome เนื่องจากไม่มีข้อความปรากฏขึ้น (Firefox แสดงข้อความ alt หากไม่พบรูปภาพ) การใช้คุณสมบัติความกว้างเช่นแสดงให้เห็นว่าทำงานได้ดี ฉันจะโพสต์รหัสของฉันด้านล่างเพื่อให้คุณเห็น

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

นอกจากนี้เนื่องจากคุณกำหนดเป้าหมาย ID แล้วคุณจะต้องใช้ตัวเลือกนั้นเท่านั้นจึงจะสามารถใช้ ID ได้หนึ่งครั้งต่อหน้า

<!DOCTYPE html>
<html>
<head>
  <style>img#logo[alt="Site Title"] { width:200px }</style>
</head>
<body>
  <img alt="Site Title" src="bullet.png" id="logo" />
</body>
</html>

— DisgruntledGoat
แหล่งที่มา

ข้อดีของการใช้ข้อความอิสระเป็นส่วนหนึ่งของตัวเลือก CSS ของคุณ

— Lèsemajesté

1

ลองดูที่ data-attributes ใหม่ใน html5 ซึ่งอาจเป็นสิ่งที่คุณต้องการ

— โทมัส

2

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

อย่างที่คุณเห็นในการสนับสนุน SitePoint Reference สำหรับ CSS attribute selectorการสนับสนุนของ Webkit นั้นค่อนข้างจะลำบาก คุณจะเห็นได้ว่าการสนับสนุนตัวเลือกแอตทริบิวต์ css ของ IE นั้นแตกต่างกันไปในแต่ละรุ่น

ดังนั้นตัวเลือกนี้จึงยังไม่รองรับเบราว์เซอร์ทั้งหมด

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

#logo {color: # 999; ขนาดตัวอักษร: 2em; }

— Matthieu FAURE
แหล่งที่มา

1

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

— John Conde
แหล่งที่มา

คุณมีตัวอย่างหรือเปล่าเพราะมันใช้ได้ดีสำหรับฉัน

— DisgruntledGoat

มันทำงานได้ดีสำหรับคุณใน Chrome?

— John Conde

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

— DisgruntledGoat

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

— John Conde

ฉันแค่จะเอามันออกไป แต่มันอาจเป็นปัญหากับตัวละครในอวกาศที่คุณมีอยู่ในนั้น

— Gup3rSuR4c

0

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

คุณอาจต้องการเปิดบั๊กสำหรับโครงการ webkit สำหรับพวกเขาเพื่อแก้ไขมัน - หากพวกเขารู้สึกว่าพฤติกรรมของ firefox เป็นสิ่งที่พวกเขาต้องการทำ

— Evgeny
แหล่งที่มา

ตัวเลือกคุณลักษณะคือ CSS2 ไม่ใช่ CSS3

— DisgruntledGoat

คุณพูดถูกเอาคำตอบโง่ที่ฉันทำไปก่อนหน้านี้ ...

— Evgeny