IE'de Lightbox Arkaplan Sorunları

Bir web sitesine soluk bir arka plan efekti vermek için yarı saydam bir arka plana sahip ekranın ortasında ışık kutuları açılır. Farklı tipteki lightbox'lar değişik kodlama kullanırken, tümü lightbox efektinin görsel yönünü oluşturmak için basamaklı stil sayfaları kullanır. Ancak Internet Explorer CSS'yi tanımıyor.

Lightbox Kuruyor

Çoğu lightbox, lightbox efekti için bir çeşit Javascript kullanır. Örneğin Thickbox, jQuery kullanımıyla Javascript'e büyük ölçüde dayanır. Buna karşılık, "Think Vitamin" web sitesinde yalnızca CSS ve XHTML kullanılarak tasarlanmış bir ışık kutusu bulunur. Alexander Dawson'un Semantik CSS3 lightbox'ı da IE uyumludur. Dawson, IE 9'dan önceki herhangi bir IE sürümünü algılamak için koda bir miktar Javascript ekledi; Bir IE sürümü tespit edildiğinde, genellikle şeffaf arka plan için kullanılan CSS yerine şeffaf bir PNG görüntüsü kullanır. ColorBox'ı ayrıca IE 6 ile 9 arasında çalışan Jack Moore tarafından da deneyebilirsiniz.

Lightbox'larda ve IE'de Arkaplan Opaklığı

Internet Explorer 8 ve önceki sürümleri, yayımlandığı gibi geçerli CSS standartlarıyla uyumlu değildir. Uyumluluk eksikliği, lightboxlar için, özellikle lightbox arka planları için bir sorun yaratır, çünkü CSS, diğer tüm modern Web tarayıcılarında görüntülenen şekilde opaklık yaratır. CSS3'ten önce, Web tasarımcıları stil sayfasındaki "opacity" öznitelik etiketini veya sınıfını kullanarak yarı saydam bir öğe yaptılar:

.background {background: # 000000; yükseklik:% 100 genişlik:% 100; opaklık: 0.5;}

Yukarıdaki, yüzde 50 saydam ve sayfayı dolduran siyah bir arka plan oluşturur.

IE ile Çalışmak için Opaklığı Değiştirme

Neyse ki, lightbox arka plan öğenizin şeffaflığını Internet Explorer’da ayarlama konusunda her şey kaybolmaz. "Opaklık" özelliği çalışmadığı halde, "filtre" olanı çalışır. "Opacity" kullanan herhangi bir öğede, bu öğeyi Internet Explorer'da yarı saydam yapmak için filter niteliğini ekleyin:

.background {background: # 000000; yükseklik:% 100 genişlik:% 100; opaklık: 0.5; filtre: alpha (opacity = 50);}

Bu düzeltme Internet Explorer 6 ve üstü ile çalışır ve diğer tarayıcılarda ekran sorunlarına neden olmaz.

CSS3

CSS3 daha yaygın olarak desteklendikçe, daha fazla lightbox gelişmiş tasarım özelliklerinden yararlanmaktadır. CSS3, rengin RGB değerlerinde tanımlanmasıyla opaklığın 0 ile 1 arasında tanımlandığı ek bir "alfa" ayarını tanımlayarak, bir öğedeki tek bir rengi şeffaf olarak ayarlamanıza olanak tanır. bunun gibi:

arkaplan: rgba (0, 0, 255, 0, 5);

Internet Explorer 8 ve önceki sürümleri bu işlevi desteklememektedir, bu nedenle bu işlevi kullanan herhangi bir lightbox arka planı tamamen şeffaf olarak görüntülenir.