Yeni bir teknoloji çıktığında her uygulama geliştiricinin aklına gelen/gelmesi gereken sorulardan biri, mevcut altyapılar (işletim sistemleri, tarayıcılar, veya teknoloji ile alakalı uygulamalar, vs.) bu teknolojiyi kullanabiliyor mu ?
HTML5 için de aynı soru herhalde hemen her geliştiricinin aklına gelmiştir. HTML5 eski tarayıcılarda çalışıyor mu ? Tarayıcılar HTML5 taglarını nasıl gösteriyorlar ? Eski tarayıcıları desteklemek için ne yapmak lazım ?
İşte bu sorulara bir miktar çözüm sağlayabileceğimiz iki JavaScript kütüphanesini aktarmaya çalışacağım.
HTML5Shiv
HTML5Shiv (veya HTML5Shim) ana sayfasından da göreceğiniz üzere HTML5'i desteklemeyen Internet Explorer 9 öncesi versiyonlar için HTML5 taglarının desteklenmesini sağlayan küçük boyutlu bir kütüphane. Önceki cümlemde yazdığım üzere, sadece Internet Explorer için çözüm sağlıyor, böylece sayfalarımızda IE tarafından tanınmayan tagları kullandığımız takdirde görsel bozulmalarla karşılaşmıyoruz. Yine bir önceki cümlemde yazdığım üzere kütüphane sadece yeni tagların IE tarafından tanınmasını sağlıyor, işlevsel olarak çalışmalarını sağlamıyor. Örneğin <audio> veya <video> taglarının tanınmasını sağlıyor fakat bu tagların video oynatacağı anlamına gelmiyor. Bir örnek ile konuyu daha açık hale getirmeye çalışalım. Örneğin aşağıdaki HTML sayfasına gözatalım :
HTML5Shiv İçermeyen Sayfa
<!DOCTYPE HTML>
<html lang="tr">
<head>
<title>HTML5 Shiv olmayan sayfa</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
</head>
<body>
<div id="main">
<header id="header">
<div id="logo">
<div id="logo_text">
<h1><a href="#">WebUcu<span class="logo_colour">.org</span></a></h1>
<h2>HTML5 Shiv Olmayan Sayfa</h2>
</div>
</div>
<nav id="menubar">
<ul id="menu">
<li class="selected"><a href="#">ANASAYFA</a></li>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
</ul>
</nav>
</header>
<article id="site_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra dictum risus, vel rhoncus metus aliquet non. Morbi ultricies aliquet pharetra. Nunc auctor pellentesque nulla nec facilisis. In fermentum nunc et neque dignissim faucibus. Pellentesque varius tempor elit, in vulputate arcu ornare ut. Ut libero neque, suscipit non sagittis vel, vestibulum et mi. Maecenas at erat nulla. Mauris mollis pretium elit, ac lacinia sem ornare ac. In libero nulla, tempor et aliquet ut, scelerisque sed enim.
<br><br>
Proin sed nisl risus, quis sodales est. Phasellus dapibus tincidunt mauris, in viverra lacus auctor id. Integer aliquam malesuada ante et sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam mollis porttitor porttitor. Ut gravida congue posuere. Phasellus ornare facilisis diam, non fermentum est semper in. Vivamus gravida convallis ligula non tempus. Proin vel tellus urna. Suspendisse congue iaculis varius. Vestibulum a nulla leo, a ullamcorper nulla. Nunc turpis tellus, scelerisque ac adipiscing eget, pretium sed nunc. Vestibulum id tempus ligula. Quisque varius, lacus sagittis tempus eleifend, nibh elit pretium nibh, tempor hendrerit erat leo sit amet dolor. Curabitur sagittis egestas massa, vitae fermentum neque pretium in.
</article>
<footer id="footer">
Copyright © WebUcu.Org
</footer>
</div>
</body>
</html>
<header>, <article>, <nav> ve <footer> gibi HTML5 tagları içerdiğini görüyoruz. Bu sayfayı HTML5 destekleyen bir tarayıcı (Chrome 18) ile açtığımızda aşağıdaki gibi bir sonuç elde ediyoruz :
Aynı sayfayı HTML5 desteklemeyen bir tarayıcı (Internet Explorer 6.0) ile açtığımızda aşağıdaki gibi bir sonuç elde ediyoruz :
Desteklenmeyen HTML5 taglarından dolayı tasarımın nasıl bozulduğunu görebiliyoruz. Bunun önüne geçebilmek ve sayfamızı çalınmış güzelliğine kavuşturabilmek için yapmamız gereken çok basit, aşağıdaki gibi HTML5Shiv referansını ekliyoruz ve sayfamız IE 6.0 tarafından aşağıdaki gibi taranıyor :
HTML5Shiv İçeren Sayfa
<head>
<title>HTML5 Shiv olan sayfa</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<!--[if lt IE 9]>
<script src="assets/html5.js"></script>
<![endif]-->
</head>
Modernizr
ASP.NET MVC ile uğraşmış olanlar bilir, Visual Studio.NET ile yeni bir ASP.NET MVC projesi açtığınızda Scripts dizini ile içerisinde JQuery ve Modernizr Javascript kütüphanelerini görürüz. Bunu ilk farkettiğimde, HTML5 desteği en düşük tarayıcı olan IE'nin ve Microsoft'un ayıp kapatmaya çalışması gibi yorumlamıştım.
Modernizr, tarayıcıların HTML5 ve CSS3 özelliklerinden hangilerini desteklediğini test edebileceğimiz ve içeriğimizi bu test sonuçlarına göre düzenleyebileceğimiz bir yardımcı kütüphane. Modernizr da aynı HTML5Shiv gibi HTML5 taglarını çalışır hale getirmiyor, sadece bu tagların desteklenip desteklenmediği hakkında bilgi sahibi olmamızı sağlıyor.
Eğer download sayfasına giderseniz, kullanacağınız özellikleri seçerek daha hafif bir kütüphane indirebilmenize olanak sağlayan Modernizr, farkedeceğiniz üzere, HTML5Shiv içeriyor. Yani sayfalarınızda Modernizr kullanıyorsanız, HTML5Shiv referansı vermenize gerek kalmıyor.
Modernizr'ı CSS ve JavaScript ile olmak üzere iki şekilde kullanabiliyoruz.
CSS ile Modernizr kullanımı
Modernizr kullanırken yapmamız gereken öncelikle modernizr kütüphanesine referans vermek :
<head>
<title>CSS ile Modernizr Kullanım Örneği</title>
<script src="modernizr-2.5.3.js"></script>
</head>
Modernizr referansını verdikten sonra html tagına no-js css sınıfını vererek sayfamızda modernizr testlerinin çalışacağını belirtiyoruz :
<!DOCTYPE html>
<html lang="tr" class="no-js">
Şuanda Modernizr sayfamızda çalışıyor halde olmalı. Bunu test etmek için tarayıcımızda sayfamızı açar ve Firebug benzeri bir geliştirici aracı ile (Birçok geliştirici aracının kısa yolu olan F12'ya basın) sayfamızın kaynak koduna bakarsak aşağıdaki gibi bir sonuç görürüz :
Modernizr, html tagına verdiğimiz class değerini, yaptığı test sonuçlarına göre özellik adını içeren sınıflar ile eşitliyor. Örneğin bizim örneklerimizde kullanacağımız HTML5'in SVG özelliğini svg sınıfı olarak görebiliyoruz. Eğer tarayıcımda HTML5 SVG desteklenmiyor olsaydı no-svg diye bir sınıf görüyor olmalıydım. Yani desteklenmeyen özellikler no-özellik_adı şeklinde sınıf olarak ekleniyorlar.
Şimdi test sayfamıza geri dönersek, sayfamızda SVG kullanmak istediğimizi varsayalım, ama SVG desteklemeyen tarayıcılar için de bir çözüm sunmak istediğimizi varsayalım. Bu durumda sayfamıza aşağıdaki gibi 2 adet div elemanı ekleyip birini SVG destekleyen tarayıcılar için hazırlıyoruz, diğerini ise SVG desteklemeyen tarayıcılar için hazırlıyoruz :
<div class="divSvg">
<svg id="mySvg" height="300" width="200">
<polyline points="20,30 20,230 50,60 50,80 100,80 100,100" fill="green" x="20" y="30" />
<text x="15" y="15" style="font-size:20;stroke:blue">HTML5 SVG Örneği</text>
</svg>
</div>
<div class="divNoSvg">
Tarayıcınız SVG desteklemiyor, yerine resim ekliyoruz : <br>
<img src="svg_clone.jpg" />
</div>
Son olarak yukarıda tanımladığımız divlere verdiğin css sınıflarına gözatacak olursak, her iki sınıfında div elemanlarımızı sakladıklarını görüyoruz. Divlerimiz Svg sınıfı içeren bir tag içerisinde kullanılıyorlar ise divSvg, no-svg sınıfına sahip bir tag içerisinde ise divNoSvg sınıfı görünür halde olacak şekilde bir düzenleme yapıldığını görüyoruz. Yani yukarıda html tagının sınıfları içerisinde svg sınıfı var ise divSvg sınıflı div'imiz, no-svg sınıfı var ise divNoSvg sınıflı div'imiz kullanıcıya görünür hale gelecek :
<style type="text/css" media="screen">
div.divSvg { display:none; }
div.divNoSvg { display:none; }
.no-svg div.divNoSvg {
display:block;
}
.svg div.divSvg {
display:block;
}
</style>
CSS kullanımını gösteren tüm kodumuza topluca göz atacak olursak :
CSS ile Modernizr Kullanım Örneği
<!DOCTYPE html>
<html lang="tr" class="no-js">
<head>
<meta charset="windows-1254">
<title>CSS ile Modernizr Kullanım Örneği</title>
<script src="modernizr-2.5.3.js"></script>
<style type="text/css" media="screen">
div.divSvg { display:none; }
div.divNoSvg { display:none; }
.no-svg div.divNoSvg {
display:block;
}
.svg div.divSvg {
display:block;
}
</style>
</head>
<body>
<h3>CSS ile Modernizr Kullanım Örneği</h3>
<div class="divSvg">
<svg id="mySvg" height="300" width="200">
<polyline points="20,30 20,230 50,60 50,80 100,80 100,100" fill="green" x="20" y="30" />
<text x="15" y="15" style="font-size:20;stroke:blue">HTML5 SVG Örneği</text>
</svg>
</div>
<div class="divNoSvg">
Tarayıcınız SVG desteklemiyor, yerine resim ekliyoruz : <br>
<img src="svg_clone.jpg" />
</div>
</body>
</html>
Örneğimizi SVG destekleyen bir tarayıcıda (Chrome 18) çalıştırır isek :
Örneğimizi SVG desteklemeyen bir tarayıcı (Internet Explorer 6.0) ile çalıştırır isek :
JavaScript ile Modernizr kullanımı
Son örnek olarak CSS örneğinde kullandığımız sayfayı JavaScript ile kullanmak istersek divlerimizi aşağıdaki gibi görünmez olarak tanımlıyoruz :
<div id="divSvg" style="display:none;">
<svg id="mySvg" height="300" width="200">
<polyline points="20,30 20,230 50,60 50,80 100,80 100,100" fill="green" x="20" y="30" />
<text x="15" y="15" style="font-size:20;stroke:blue">HTML5 SVG Örneği</text>
</svg>
</div>
<div id="divNoSvg" style="display:none;">
Tarayıcınız SVG desteklemiyor, yerine resim ekliyoruz : <br>
<img src="svg_clone.jpg" />
</div>
Sonrasında aşağıdaki gibi bir JavaScript kodu ile svg'nin aktif olup olmamasına göre ilgili div'imizi görünür hale getiriyoruz :
window.onload = function() {
if (Modernizr.svg) {
document.getElementById("divSvg").style.display = 'block';
} else {
document.getElementById("divNoSvg").style.display = 'block';
}
};
Tüm örneğe göz atarsak :
JavaScript ile Modernizr Kullanım Örneği
<!DOCTYPE html>
<html lang="tr" class="no-js">
<head>
<meta charset="windows-1254">
<title>JavaScript ile Modernizr Kullanım Örneği</title>
<script src="modernizr-2.5.3.js"></script>
<script type="text/javascript">
window.onload = function() {
if (Modernizr.svg) {
document.getElementById("divSvg").style.display = 'block';
} else {
document.getElementById("divNoSvg").style.display = 'block';
}
};
</script>
</head>
<body>
<h3>JavaScript ile Modernizr Kullanım Örneği</h3>
<div id="divSvg" style="display:none;">
<svg id="mySvg" height="300" width="200">
<polyline points="20,30 20,230 50,60 50,80 100,80 100,100" fill="green" x="20" y="30" />
<text x="15" y="15" style="font-size:20;stroke:blue">HTML5 SVG Örneği</text>
</svg>
</div>
<div id="divNoSvg" style="display:none;">
Tarayıcınız SVG desteklemiyor, yerine resim ekliyoruz : <br>
<img src="svg_clone.jpg" />
</div>
</body>
</html>
Sonuç
HTML5 kullanırken işin sıkıcı yanı, HTML5'i desteklemeyen tarayıcılarla nasıl çalışmak gerektiğini incelemeye çalıştık. HTML5Shiv, yeni HTML5 taglarını kullanabilmemizi sağlayan ve kullanımı oldukça basit bir kütüphane. Modernizr ise manuel olarak yapabileceğimiz birçok özellik testini bize hazır olarak sunan başarılı kütüphane. İki kütüphaneyi kullanarak odaklanmamız gereken tek yer, HTML5 desteklenmeyen tarayıcılar'da yeni özelliklere alternatif olarak ne kullanabiliriz sorusuna yanıt aramak.
8589903c-61ab-4a13-b290-a7617e068e38|8|4.9
html5, modernizr, html5shiv