Modern tarayıcılara göre CSS kodu yazıp IE8 gibi arayıcılarda gerekli düzenlemeleri yapma yaklaşımını benimsediğimden beri HTML elemanlarını dikeyde ortalamak için aşağıdaki kodu kullanıyorum:
top: 50%;
@include transform(translateY(-50%));
Bugün güncel ön yüzünü kodladığım güncel bir projenin fancybox’una baktığımda ileri geri oklarının, fareyi hareket ettirdikçe ya da fare ile okların üzerine gelindiğinde aşağı/yukarı 1pxlik bir kıpırdama yaptığını gördüm. Büyük ihtimalle sebebi, sahne yüksekliğinin tek sayı olması (bende 979px). Ve aklıma iOs cihazlardaki sayfayı scroll ederken kullandığımız fix geldi:
@include transform(translate3d(0,0,0));
Bu kod, translateX ve translateY yerine kullanılabilecek tek satırlık ve daha etkili yeni bir CSS3 özelliği. Aldığı parametreler sırasıyla x, y ve z. Bu nedenle fancybox oklarını dikeyde ortalamak için aşağıdaki kodu kullandım ve kıpırdama ortadan kalktı:
top: 50%;
@include transform(translateY(-50%));
.csstransforms3d & {
@include transform(translate3d(0,-50%,0));
}
Projelerimizde Modernizr kullandığımız için html elemanında hangi CSS3 özelliklerinin kullanılabilir, hangilerinin kullanılamaz olduğuna dair classlar bulunuyor. Son sahnede yine translateY ile elemanı ortaladım fakat tarayıcı 3d CSS transform destekliyorsa transform3d kullanarak ortalamasını söyledim.
Sonuç başarılı görünüyor.
