Etiket arşivi: css

Css Çakışması Sorunu

Css, ,

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>

Css Nedir?

Css, ,

Cascading Style Sheets (basamaklı stil sayfaları) kelimelerinin baş harflerinden oluşur. Web sayfalarının tasarımsal olarak düzenlemeye yarayan bir teknolojidir. Css’e bir dildir denir mi tam emin olamadım, ancak başlı başlına bir hiyerarşiye sahiptir ve geniş bir kapsama sahiptir. İlk kez 1996 yılında ortaya çıkmıştır. Şu an 1999 yılında kullanıma açılan ve 2012 yılında son güncellemeleri yapılan CSS 3 kullanılmaktadır.

Sadece css kullanarak bir web sayfası yapamazsınız, html de bilmeniz gerekir. Zaten css ile yapılan şey, html taglarına stiller atamaktır. Css’in yaygın olan üç farklı kullanım şekli vardır.

Inline Css
Bu kullanım şekli pek önerilmese de ısrarla kullanımakta. Html taglarına ‘style’ özelliği ile stil atanarak yapılır. Bu yöntemde; sayfa içindeki aynı özelliklere sahip taglar için tekrar tekrar style özelliğinin eklenmesi gerekir. Bir değişiklik yapılacağı zaman tüm style özelliklerinin değiştirilmesi gerekmektedir. Bu yöntem seo açısından da sakıncalıdır. Arama motorları sayfalardaki içerik/kod oranı-na bakmaktadır ve bu konullanımda içerik için daha fazla kod yazılmaktadır.

<!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>Untitled Document</title>
</head>

<body>
<h1 style="color:#00F">Başlık</h1>
</body>
</html>

Dahili Css
Bu kullanımda; sayfanın herhangi bir yerinde

taglarının arasına css kodlarının yazılması ile kullanılan bir şekildir. Bu kullanım içerik/kod oranı bakımından avantajlıdır. Ancak bu kullanım şeklindeki handikap ise diğer web sayfalarıyla farklılıklara yol açabilecek olmasıdır. Bir değişiğiklik yapıldığında, değişiklik tüm sayfalara aktarılmak zorundadır.

<!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>Untitled Document</title>
<style>
h1 {
	color:#00F;
}
</style>
</head>

<body>
<h1>Başlık</h1>
</body>
</html>

Harici Css
En çok önerilen kullanım şeklidir. Harici bir css dosyasında tüm css kodlarınızı saklarsınız ve bu sayfayı web sayfanıza çağırırsınız. Bu kullanım sayesinde merkezi bir dosyadan tasarım stillerinizi yönetebilirsiniz. Bir diğer yararı da, tarayıcılar css dosyasını bir kez indirdikten sonra tekrar indirme ihtiyacı duymamalarıdır. Böylece bant genişliğinden de kar etmiş olursunuz.

<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<h1>Başlık</h1>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
h1 {
	color:#00F;
}