Sakin Adam

Web Yazılım Günlüğü

Css Çakışması Sorunu

Web tasarımla uğraşan bir çok kişi, css dosyalarının çakışması sorunuyla karşılaşılmıştır. Aynı tag’a stil atanmış css dosyalarından dolayı sorun yaşanır. Bu büyük sorunun çok basit bir çözümü var aslında. “Scoped” metodu. Stillerin farklı olmasını istediğiniz divin içerisinde “style type=”text/css” scoped” tagları arasına css kodlarını yazıyorsunuz ya da harici css dosyanızı çağırıyorsunuz. Burda dikkat edilmesi gereken nokta ise şu : bu method ile cağırdığınız stiller içerisinde olduğu tag’da geçerli oluyor. Bu divin dışarısında ise diğer methodlarla yazılan/çağırılan cssler geçerli olacaktır. Örnek kodu aşağıda ekliyorum. Bu örnek kod Html5‘i destekleyen tarayıcılar için. Ardından tüm tarayıcılar için olan örneği de ekleyeceğim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Çakışması Sorunu</title>
<style type="text/css">
  p { color:yellow; }
</style>
</head>

<body>
<div>
<p>Sarı</p>
</div>
<div>
<style type="text/css" scoped>
  p { color:blue; }
</style>
<p>Mavi</p>
</div>
</body>
</html>

Html5 tarayıcılarda sorunumuzu çözdük ama ya desteklemeyenler için. Geliştiriciler bunun için de bir çözüm bulmuşlar. “jQuery Scoped CSS”; jquery üzerine geliştirilmiş javascript kütüphanesi bu sorunu çözüyor. Kütüphaneyi bu adresten indirebilirsiniz. İndirdiğiniz dosyalarda bir örnek mevcut ancak ben yine de örnek kodu aşağıda paylaşıyorum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Çakışması Sorunu</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
  p { color:yellow; }
</style>
</head>

<body>
<div>
<p>Sarı</p>
</div>
<div>
<style type="text/css" scoped>
  p { color:blue; }
</style>
<p>Mavi</p>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.scoped.js"></script>
</body>
</html>

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.