CSS – Tarayıcı Uyumluluğu

Günümüzde tarayıcı sayısının artması bir web sitesinin kodlanması ve tasarlanması adına yeni sorunlar ortaya çıkardı. Eskiden yalnıca Internet Explorer için kodlanan sitelerin günümüzde Google Chrome, Opera, Mozilla Firefox, Safari gibi birçok tarayıcı ile uyumlu bir şekilde çalışması gerekmektedir.

Ancak CSS3 ve HTML5 teknolojilerinin halen gelişmekte olan kodlama dilleri olması ve tarayıcıların bu dilleri CSS ve HTML gibi daha stabil ve tamamlanmış olmadan desteklemeye başlaması sebebiyle CSS3’ün yeni özelliklerinin tüm tarayıcılarda çalışabilmesi için her tarayıcı için farklı bir önek ile kullanılması gerekiyor.

CSS3 ile Gelen Yeni Özellikler

Border-Radius

Box-Shadow

Text-Shadow

RGBA

@Font-Face

Multiple-Columns

Box-Resize

Box-Sizing

Outline

Transition

Transform

Flexbox

Gradient

Tarayıcılara Göre Önekler

-webkit- : Google Chrome, Safari
-moz- : Mozilla Firefox
-o- : Opera
-ms- : Microsoft Browser ( Internet Explorer )

Bu kodlar kullanmak istediğimiz yeni CSS3 özelliklerinin başına getirilmelidir. Örneğin “transform” özelliğinin orjinal kullanımı;

transform:scale(5) rotate(5deg);

Buradaki kodumuzda ilgili özelliğin kullanıldığı nesne scale(5) ile 5 kat büyüyecek ve rotate(5deg) ile 5 derece açıya sahip olacaktır. Bu kodun tüm tarayıcılarda çalışması için;

-webkit-transform:scale(5) rotate(5deg);
-moz-transoform:scale(5) rotate(5deg);
-o-transform:scale(5) rotate(5deg);
-ms-transform:scale(5) rotate(5deg);

şeklinde yazmamız gerekmektedir.