CSS3’e Giriş
CSS3 dersleri verdiğimize göre css nedir olayına detaylı girmeye gerek yok diye düşünüyorum. CSS sayfamızdaki görünümü, sayfanızda yaptığınız tasarımların birbirleri ile olan bağlantısı, uyumluluğu gibi standartlarıbir araya getiren W3C tarafından 1995 yılında türetilen bir çeşit dildir.
CSS3 ise CSS’in günümüzdeki son versiyonudur ve HTML 5’in ortaya çıkmasının getirdiği zorunlulukla ortaya çıkmıştır. CSS3 ile her zamanki gibi yapılan rutin güncellemenin dışında daha köklü değişiklikler ortaya çıktı. Bunlar, color özellikleri, background özellikleri, border özellikleri ve yazı tipi özellikleri gibi detaylarda yenilikler ortaya çıkardı.
CSS3 ile özellikleri chrome dışındaki tarayıcılar pek desteklemiyordu en azından bir kısmını demeliyim ama 2017 itibari ile bu oran çok azaldı şimdilik internet explorer ın önceki versiyonlarında sorunlar yaşanıyor sadece.şu an çok fazla desteklememe durumu yok fakat açıklamaları yaptıkça hangi özelliğin hangi browser sürümü tarafından desteklendiğini ve desteklenmeyen özellikler için oluşturulan cross browser yöntemini de açıklayacağım.
Cross Browser nedir? : Dediğim gibi bazı browserlar bazı özellikleri henüz desteklemiyor olabilirler, en azında n bir önceki versiyonlarında sorunlar çıkarıyor da olabilirler işte bu gibi durumlar için browserlara bu özellikleri bir şekilde kabullendirme yoluna cros browser deniliyor. Bunun için çeşitli hazır css dosyalar bulunuyor ve zamanı geldiğinde bunları açıklayacağım.
CSS’i Web Sayfalarına Eklemek
Bilenler biliyorlar ama bilmeyenler için açıklama yapma gereği duydum. CSS dosyaalrını yazdığımız html sayfalarından ayrı bir sayfada css özellikli olarak yazarız (standardı budur en azından) ve bu dosyaları bir şekilde html sayfalarına dahil etmemiz ya da html sayfalarına bak bu css dosyamız ve içeride tanımlanan ID’leri ya da class’ların özelliklerini bu dosyadan çekeceğiz diyebilmeliyiz. Bunun için birkaç yöntem bulunuyor.
Ama öncelikle iki çeşit ana yöntemimiz var birincisi yukarda dediğim gibi ayrı oluşturduğumuz css dosyalarını sayfamıza çağırırız ya da css’i sayfa içerisinde yazarız (inline css).
İnline CSS örneği
<head>
<style type="text/css">
.container {margin: 10px;}
</style>
</head>
Gördüğünüz gibi inline css html içerisinde direk kullanılabilir fakat tavsiye edilmeyen bir kullanım şeklidir. Çünkü bu kullanım sayfanın hızını etkiler ve arama motorları tarafından da istenmeyen bir kullanım şeklidir. Ama illaki kullanacaksanız sayfanın en alt kısmında style etiketi içerisinde kullanmaya özen gösterin çünkü sayfa hızında ve arama motorları tarafından kod okunabilirliğinde olumlu etkisi olacaktır.
Dışarıdan Çağırma (bağlantı yöntemi) yöntemi ile css kullanımı
Bu kullanım şekli kesinlikle standarda uygun olan ve tavsiye edilen kullanım şeklidir. Dışardan bir css dosyasını sayfanıza çağırmak / dahil etmek istiyorsanız aşağıdaki kodu sitenizin head tagları arasına yerleştirmeniz önemlidir. Bu kullanımda birkaç ayrıntıya dikkat etmenizde fayda var.
Öncelikle; birden fazla css dosyası çağıracaksanız sıralama önemli olacaktır. Css kodlarında her zaman iki aynı kullanımda, en son kullanım geçerlidir. Yani; container class’ına css dosyasının birisinde font-size 14px tanımlanmış olsun ve bir başka css dosyasında 16 px tanımlanmış diyelim. Bu dosyalardan hangisi head tagları arasında en üste yazıldıysa ondaki tanımlama geçersiz olacak sonra gelen geçerli olacaktır.
Bunu bir örnekle açıklamak istiyorum
<head>
<link rel="stylesheet" href="onceki.css">
<link rel="stylesheet" href="sonraki.css">
</head>
Yukarıdaki örneğe baktığımızda dışarıdan iki adet css dosyası çağırıyoruz ve iki css dosyasında da .container class’ı mevcut ama önceki.css dosyasında font-size’ına 14pc değer verilirken, sonraki.css class’ında 16px değer verilmiş. Bu durumda sonraki yani 16px olan işlem görecektir.
