Daha önce Metin Yerine Resim ekleme yöntemini anlatmıştım ve bir çok yerde örnekler ile göstermiştim. Bu yöntemin uygulandığı eleman içindeki metni ekran dışına çıkarmak için text-indent:-9999px değeri atarız.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Burada şöyle bir sorunumuz oluyor eğer bu elemana text-align:right tanımıda atamış isek. Maalesef metin ekran dışına çıkmıyor.

h1 {
	text-indent: -9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:right
}

Bu sorunu gidermek için sola dayalı sistemlerde negatif text-indent değeri veriyoruz, sağa dayalı sistemlerde de pozitif değer vererek bu durumu çözebiliyoruz. Bu çözüm yeni nesil tarayıcılarda sorun çıkarmazken İnternet Explore’da scroll çıkarmak kaydı ile sorun oluşturuyor.

h1 {
	text-indent: 9999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
}

Tüm tarayıcılarda çözüm için ise yapmamız çok kolay bir şey aslında. text-align:left tanımı atamak. Metin yerine resim koyma metodu uygulanan metinlerin hizalaması sola olmalıdır.

h1 {
	text-indent: -999px;
	background:url(selam.gif) no-repeat;
	width: 62px;
	height:19px;
    text-align:left
}

Bu sorun ile genelde metin yerine resim metodu uygulanmış elemanını kapsayan bir elemana text-align:right uygulandığında rastlarız. Kalıtsallık ile bu özellik tüm alt elemanlarınıda etkilediği için biz bu elemana text-align:right değerini atamasak dahi elemanımız bu değeri üst elemanından kalıtsal olarak alır ve böyle bir soruna neden olur.

Kaynak:

Google Chrome Developer Tools ile kullanılmayan CSS kodlarını bulmak

Performans hiç olmadığı kadar önemli bir hale geldi. Google'un arama sonuç sıralamasındaki en büyük etkenlerden birinin site hızı olduğun...… Devamını oku

Web Geliştiriciler İçin Editör Seçimi

13 February 2018 tarihinde yayınlandı.

iOS Simülatör ile Mobil Safari'de Hata Ayıklama

08 February 2018 tarihinde yayınlandı.