Web Site İçerik Bölümü

Html Kodları l Webmaster l Web Tasarım l Tr.gg l Css l Photoshop l Siteni Ekle l Web Dersleri

Web sitenizi internet tarayıcılarına optimize edin.

Web dünyasında artık eskiye oranla birçok internet tarayıcısı bulunmakta. Web sitenizde doğal olarak bu tarayıcılarda farklılık göstermektedir. Örneğin sizin siteniz İnternet Explorer tarayıcısında düzgün görünürken, Mozilla Firefox tarayıcısında tasarımda çeşitli kaymalarla görünüyor. Bu sorunu düzeltmek için geliştirilen yöntem Web Sitesi İle İnternet Tarayıcıları Optimizasyonudur.

Web BrowsersWeb sayfalarımızın ya da bloglarımızın farklı tarayıcılarda (Internet Explorer, Mozilla Firefox, Opera, Safari vb.) farklı görünümler alması bizi uğraştırmaya devam ediyor. Ben de bu konuda zaman zaman oldukça sıkıntı çekiyorum ve çarelerini araştırmak zorunda kalıyorum. Değişik görünümleri engellemek için farklı CSS hack yöntemleri kullanmak durumunda kalıyoruz. CSS hack yerine, web tarayıcısına göre değişen css şablonu kullanmak alternatif bir yöntem olabilir. Yeni bulduğum bir yöntemi paylaşmak istiyorum.

Bunun için Rafael Lima ‘nın yazdığı bir Javascripti kullanabiliriz. 1 KB dan daha küçük olan bu javascripti header.php dosyanızdan yükletebilirsiniz.

Detaylı olarak anlatmak gerekirse;

css_browser_selector.js.txt dosyasını farklı kaydedip ismini css_browser_selector.js olarak düzeltin ve sunucunuza gönderin. Kullanacağınız dosyanızı açın ve (index.htm, header.php vs.)

view plaincopy to clipboardprint?
  1. <head> ve </head>  

tagları arasına;

view plaincopy to clipboardprint?
  1. <script src="css_browser_selector.js" type="text/javascript"></script> 

kodunu yerleştirin. Burada javascript dosyası ile javascript dosyasını yüklettiğiniz header.php vs. dosyalarının aynı klasörde olmasına dikkat edin. Farklı klasörlerde iseler src=”..” kısmını buna göre düzenleyin.

Her tarayıcı için görünecek CSS özelliklerini ayarlayın, Örneğin Firefox‘da h1‘in boyutunun 16px ve IE‘da ise 18px olmasını istiyorum. Bunun için yapmam gereken;

view plaincopy to clipboardprint?
  1. .gecko h1 {font-size: 16px;} 
  2. .ie h1 {font-size:18px;} 

Ya da Mac üzerinde Safari kullanan biri baktığında h1 boyutunun 10px olarak görsün istiyorum;

view plaincopy to clipboardprint?
  1. .mac.webkit h1 {font-size:10px;} 

olarak yazarım. Özellikle burada dikkat edilmesi gereken bir şey işletim sistemi adı ile tarayıcı adının arasında boşluk bırakılmamasıdır.

İşletim sistemleri için kullanılabilecek kodlar;

  • win - Microsoft Windows
  • linux - Linux (x11 and linux)
  • mac - Mac OS

Tarayıcılar için kullanılabilecek kodlar

  • ie - Internet Explorer (All versions)
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox, Camino
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira

İlave kodlar

  • js - Javascriptin çalışır duruma veya kapalı olması durumuna göre kullanılabilir.

Örneğin JavaScript kapalı olan bir tarayıcı da bu durumu kullanıcıya bildirmek için aşağıdaki yöntem kullanılabilir:

view plaincopy to clipboardprint?
  1. <html> 
  2.  <head> 
  3.  <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> 
  4.  <script src="css_browser_selector.js" type="text/javascript"></script> 
  5.  <title>JS Kontol</title> 
  6.   <style type="text/css"> 
  7.   .js .kontrol {display: none} 
  8.   </style> 
  9.  </head> 
  10.  <body> 
  11.   <div class="kontrol"> 
  12.     <p>JavaScript desteği kapatılmış.</p> 
  13.   </div> 
  14.  </body> 
  15. </html>

 

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol