Merhabalar, CSS3 ile gelen en güzel yeniliklerden biri media querylerdir. Bu sorgular ile her ekranda (cep telefonu, tablet, bilgisayar, vb) düzgün açılabilecek tasarımlar hazırlamamıza imkan vermektedir. Ancak bunun tek eksisi eski tarayıcılarda düzgün çalışmamasıdır.
Eski tarayıcılarda düzgün çalışmasını sağlamak için kullanabileceğimiz birkaç JavaScript eklentisi mevcut olmakla birlikte, bunlar arasında en çok kullanılanı hiç şüphesiz respond.js eklentisidir. Diğer bir alternatif ise css3-mediaqueries-js eklentisidir.
Bizim için en çok sıkıntı çıkaran tarayıcılar şüphesiz Internet Explorer 9 ve altı tarayıcılardır. IE9; media queries konusunda sorun yaratmaması nedeniyle bu tarayıcıda bunu es geçebiliriz.
Sayfamızın <head> etiketinin içerisine aşağıdaki kodlardan birini eklememiz gerekmektedir.
1. respond.js
<!-- [if lt IE 9]> <script src="js/respond.js"></script> <![endif]-->
ya da
<!-- [if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script> <![endif]-->
2. css3-mediaqueries.js
<!-- [if lt IE 9]> <script src="js/css3-mediaqueries.js"></script> <![endif]-->
<!-- [if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
Burada önemli olan [if lt IE 9] sorgusudur. Bu sorgu ile bu eklentinin sadece Internet Explorer 9 altındaki tarayıcılarda yüklenmesini istiyoruz.
CSS3 Media Query (CSS3 Medya Sorguları) ve Tarayıcı Uyumluluğu – http://t.co/sMjPf04U0E @webfikirleri — webfikirleri (@webfikirleri) October 15, 2014
CSS3 Media Query (CSS3 Medya Sorguları) ve Tarayıcı Uyumluluğu – http://t.co/sMjPf04U0E @webfikirleri
— webfikirleri (@webfikirleri) October 15, 2014
2014 © Web Fikirleri - Her Hakkı Saklıdır.
