CSS'deki alt özelliği hedeflemede yanlış bir şey var mı?

11

Css alt özniteliğini hedeflemeye çalıştım. Çözümüm Firefox / Mozilla'da çalıştı, ancak Safari-Chrome / Webkit'te başarısız oldu. Bir alt etiketi biçimlendirmeyle ilgili bir sorun mu var? Değilse, Webkit için nasıl sorun giderdiğimi varsayalım.

İşte bir örnek:

CSS

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

HTML

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

5

Denedim ve benim için mükemmel çalışıyor. Metin görüntülenmediğinden , colorve font-sizeözelliklerinin Chrome'da herhangi bir etkisi olmayacağını unutmayın. (Görüntü bulunamazsa Firefox alternatif metni görüntüler.) Örneğin, width özelliğini kullanmak düzgün çalıştığını gösterir. Görmeniz için kodumu aşağıya yazacağım.

Bununla birlikte, orijinal sorunuza göre, CSS'deki "serbest metin" alanını temel olarak hedeflemek yanlış anlamaya meyillidir. CSS'deki yansımaları düşünmeden bir alt niteliği değiştirmek çok kolaydır (açık olması gereken bir sınıf adını değiştirmenin aksine).

Ayrıca, zaten bir kimliği hedeflediğiniz için yalnızca bu seçiciyi kullanmanız gerekir; bir kimlik sayfa başına yalnızca bir kez kullanılabilir.

<!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
kaynak

CSS seçicinizin bir parçası olarak serbest metin kullanma konusunda iyi bir nokta.

— Lèse majesté

1

Html5'teki yeni veri özelliklerine bir göz atın, sadece ihtiyacınız olan şey olabilir.

— Thomas

2

Özellik seçici W3C CSS spesifikasyonunda tanımlandığından, onu kullanabilmeniz gerekir. Ancak tarayıcı uygulamaları farklıdır ve az çok güvenilirdir.

CSS özellik seçici için SitePoint Başvurusu desteğinde görebileceğiniz gibi, Webkit'in desteği hatalı. IE'nin css öznitelik seçici desteğinin bir sürümden diğerine değiştiğini de görebilirsiniz .

Bu nedenle, bu seçici henüz tüm tarayıcılar tarafından desteklenmemektedir.

Daha güvenilir bir yol olarak, tüm tarayıcılar tarafından desteklenen Kimlik seçiciyi kullanmanız gerekir:

#logo {renk: # 999; yazı tipi boyutu: 2em; }

— Matthieu FAURE
kaynak

1

Bazı testler yaptıktan sonra webkit ile çalışan tarayıcılar alt özellik metnini şekillendirmeyi desteklemiyor gibi görünüyor. Dolayısıyla gözlemleriniz doğru ve kaçınılmaz görünüyor.

— John Conde
kaynak

Bir örneğiniz var mı, çünkü benim için iyi çalıştı.

— DisgruntledGoat

Chrome'da işinize yaradı mı?

— John Conde

Evet, nitelik seçiciyi kullanarak stilleri uygulamak iyi çalıştı. Chrome, AFAIK hiçbir koşulda resimler için alternatif metni göstermez, bu nedenle metin stilinde bir şey yoktur.

— DisgruntledGoat

@Goat: Ben çağırabilir Eğer keçi Chrome bu dün gece test edildiğinde .. düşündüm yaptığımız hiçbir stil resme uygulanan zaman alt metni görüntüler. İşten sonra onunla tekrar oynamak ve hafızamın iyi olup olmadığını görmek zorundayım.

— John Conde

Ben sadece oraya koyacağım, ama orada boşluk karakteri ile ilgili bir sorun olabilir ...

— Gup3rSuR4c

0

CSS seçici etiketi seçiyor, bu nedenle etiketin görüntülenme şeklini etkiliyor. Resimlerinizi kapatırsanız ve o yerde görüntülenen alternatif metne baktığınızda, css'nizde yazıldığı gibi görünür.

Firekit'in davranışlarının orada yapmak istedikleri şey olduğunu düşünüyorlarsa, webkit projesi için düzeltmeleri için bir hata açmak isteyebilirsiniz.

— Evgeny
kaynak

Özellik seçici CSS3 değil CSS2'dir.

— DisgruntledGoat

Haklısın, daha önce yaptığım aptal yanıtı kaldırdı ...

— Evgeny