Kaan Gedikli

Serinin ikinci yazısında CSS ile beraberiz, ilk yazı HTML’in kısa tarihi hakkındaydı. Okumak için bu linki ziyaret edebilirsiniz.

wikipedia:

Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.

CSS, web tasarımının temel bir bileşeni olarak kabul edilen bir teknolojidir. Web sayfalarının estetik ve düzenini düzenlemek için kullanılır ve HTML ile birlikte web geliştirme dünyasının ayrılmaz bir parçasıdır. CSS ile web sayfalarının renkler, fontlar, boyutlar ve düzen gibi stil özelliklerini değiştirebiliriz.

CSS’in Doğuşu

İnternetin ilk zamanlarında web sayfaları HTML ile hem içeriği hem de stil tanımlamalarını içeriyordu. Bu durum web geliştiricilerin sayfa tasarımını kontrol etmekte sınırlı ve karmaşık bir düzen içerisinde olmasına sebep oluyordu. Web sayfalarının stilini kontrol etmek için ayrı bir teknolojiye ihtiyaç duyuldu ve CSS de tıpkı HTML’in doğumunda olduğu gibi, CERN’de hayat buldu.

Håkon Wium Lie, CERN’de Tim Berners-Lee ile çalışan insanlardan biri. CSS’i ilk olarak öneren de kendisi, hatta daha sonrasında W3C ile birlikte CSS1’in şartlarını belirleyen de aynı isim. 1996 yılında, CSS’in doğuşu da bu şekilde gerçekleşmiş oluyordu.

1990’ların sonlarında, CSS’nin temelleri atılmıştı, ancak bu dönemde tarayıcılar arasında uyumsuzluklar ve eksiklikler vardı. İlk CSS özellikleri Netscape Navigator ve Internet Explorer gibi erken tarayıcılarda deneysel olarak uygulandı. Yani, CSS ile yapılan işlemler her tarayıcı için aynı uygunluğu göstermiyordu ve bu da web’de görsel sorunlar yaratmaktaydı.

Daha sonra, The CSS Working Group isimli bir grup, CSS seviye 1 ile ele alınmayan sorunları ele almaya başladı ve 4 Kasım 1997’de CSS seviye 2’nin oluşturulmasıyla sonuçlandı. Bu seviye 12 Mayıs 1998’de W3C Tavsiyesi olarak yayımlanmıştır. Tabii bu, CSS’in sorunsuz bir şekilde hayatımıza dahil olması ile sonuçlanmadı…

Web Tarayıcılarının CSS’e Etkileri

CSS1 1996’dan beri hayattaydı fakat Internet Explorer 3 yayınlandığında henüz tam anlamıyla CSS’i destekleyemiyordu. IE 4 ve Netscape 4 ile daha fazla CSS desteği gelmişti fakat sorunların da ardı kesilmemekteydi.

Herhangi bir web tarayıcısının tam anlamıyla CSS’i uygulamasına henüz üç yıldan fazla bir süre vardı. Mart 2000’de piyasaya sürülen Internet Explorer 5.0, CSS 1 desteğini tam olarak (yüzde 99’dan daha iyi) sunan ilk tarayıcı oldu ve on beş ay önce CSS desteğini sunmasından bu yana lider olan Opera’yı geride bıraktı.

CSS Sürümleri

CSS 1 (Cascading Style Sheets Level 1)

CSS 1, web tasarımının temellerini atmada önemli bir adımdı ve aşağıdaki temel özellikleri içeriyordu:

1. Font Özellikleri: CSS 1, metinlerin yazı tipi (font), boyut, renk ve ağırlığı gibi özelliklerini tanımlamak için kullanılabiliyordu.
2. Renkler: Sayfanın arka plan rengi ve metin rengi gibi temel renk özelliklerini belirlemek mümkündü.
3. Metin Düzeni: Metin hizalaması, satır aralığı ve girinti gibi metin düzenini kontrol eden özellikler tanımlanabilirdi.
4. Kenarlık ve Dolgu: Kutuların (div, p, vb.) kenarlık (border) ve dolgu (padding) özellikleri ayarlanabilirdi.
5. Bağlantı Stilleri: CSS 1, bağlantıleri (linkler) vurgulamak için özellikler sunuyordu.
6. Z-İndeks: Öğelerin ekran düzlemi üzerindeki sıralamasını (z-indeks) kontrol etmek için kullanılabilirdi.

CSS 2 (Cascading Style Sheets Level 2)

CSS 2, CSS 1’e ek olarak daha fazla özellik ve gelişmiş seçenekler getirdi.

1. Açıklama (Comments): Kod açıklamaları eklemek için /* ... */ şeklinde kullanılabiliyordu.
2. Yardımcı Sınıflar (Pseudo-classes ve Pseudo-elements): Belirli koşullara dayalı seçici sınıflar ve öğe seçimleri ekleyerek daha hassas seçimler mümkündü.
3. Metin Gölgeleri: Metinlerin gölgeleri ile metinlere derinlik katmak için kullanılabilirdi.
4. Float ve Clear: Öğelerin yüzen (float) ve temizlenen (clear) özellikleri ile sayfa düzeni daha fazla kontrol edilebilirdi.
5. Konumlandırma: Öğelerin mutlak veya göreceli konumları kontrol edilebilirdi.

CSS 3 (Cascading Style Sheets Level 3)

CSS 3, daha fazla tasarım seçeneği ve yetenekler getirdi. Bu sürüm modüller halinde geliştirildiğinden farklı özellikler farklı modüllerde tanımlanmıştı.

1. Border-radius: Kutuların köşelerine yuvarlak köşeler eklemek için kullanılır.
2. Box-shadow: Kutuların gölgelerini kontrol etmek için kullanılır.
3. Media Queries: Ekran boyutlarına ve cihaz özelliklerine dayalı olarak stil değişiklikleri yapmak için kullanılır.
4. Gradients: Arka plan renklerini lineer veya radyal olarak doldurmak için kullanılır.
5. Geçişler (Transitions) ve Dönüşümler (Transforms): Öğelerin animasyonlarını ve dönüşümlerini kontrol etmek için kullanılır.
6. Flexbox ve Grid Layout: Sayfa düzenini daha esnek ve karmaşık bir şekilde kontrol etmek için kullanılır.
7. Çoklu Sütunlar: Metin ve içerikleri çoklu sütunlara bölmek için kullanılır.
8. Özelleştirilebilir Yazı Tipleri (Web Fonts): Web geliştiricilerin istedikleri yazı tiplerini sayfalarına eklemelerini sağlar.

Özetle,

CSS web tasarımının vazgeçilmez bir parçasıdır ve internetin evriminde büyük bir rol oynamıştır. Web geliştiricilerine web sitelerini güzel, düzenli ve kullanıcı dostu hale getirme gücü verir. CSS 1, temel stil özelliklerini tanımlarken, CSS 2 daha fazla kontrol ve seçenek sunarak gelişmeyi sürdürmüştü. CSS 3 ise web tasarımını büyük ölçüde zenginleştirdi ve animasyonlardan, dönüşümlere ve özelleştirilebilir yazı tiplerine kadar bir çok yenilik getirdi. Web geliştiricileri için sürekli bir gelişim alanı olan CSS, gelecekte daha fazla yetenek ve uyumluluk sağlama potansiyeline sahiptir. Bu nedenle CSS’in web tasarımındaki önemi ve etkisi her geçen gün daha da artmaktadır. Web sitelerinin estetik ve işlevselliğini iyileştirmek için CSS’i ustalıkla kullanmaya devam etmek, web dünyasının şekillenmesine ve gelişmesine katkıda bulunmaya devam edecektir.