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.