CSS3 Hakkında

23 Ağustos 2013

Css3 tek kelime ile heyecan verici. CSS web sitelerinin görünümünü düzenlemek ve yönetmek için kullanılan bir standarttır. CSS3 ile birlikte site görünümünü tek başına idare etme konusunda çok büyük bir gelişme gösterdi. CSS sadece yazı tipini ayarlayan ve sayfa planını oluşturduğumuz yapının üstüne tasarım araçlarına özel özellikleri(animasyon ve geçiş efektleri) olan bir standart haline geldi. CSS3 sayesinde web sitelerinin görsel işleri daha hızlı ve esnek şekilde halledilebiliyor. Photoshop’a daha az ihtiyacımız olacak.

Daha önce javascript ile yaptığımız görsel işlevselliği css3 ile yapıyoruz. Örneğin animasyon işleri artık css3 ile daha performanslı bir şekilde yapılıyor.

Kullanıcının gördüğü alanına ait tüm görsel ayarlar CSS tarafından yapılmalı. Animasyon, renk geçişleri, gölgeler vs.

CSS3 Modülleri

CSS3 geliştirilirken 40’ın üzerinde modüle ayrılarak geliştirmeye başlandı. Bu modüller önem durumuna göre sıralanarak çalışmaya başlandı. CSS3 gelişimi hala devam etmektedir. Modüller daha geliştirilme aşamasında tarayıcılar tarafından önek(prefix) yardımı ile kullanılmaya başlandı. Tüm modülleri ve durumlarını görmek için w3c’nin sitesine bakabilirsiniz.

Daha Dinamik CSS

:checked sözde sınıfı veya :target sözde sınıfı yardımı ile kullanıcının tıklama durumunu kontrol edebilmek artık CSS ile mümkün. Bu sayede daha önce javascript ile yaptığımız bir çok görsel hareketleri artık CSS ile yapabileceğiz. Akordiyon uygulaması, sekmeler, slider, lightbox vb tüm yapıları artık CSS3 ile yapabiliyoruz.

Ayrıca calc() değeri, @support kuralı, media sorguları gibi özellikler ile birlikte CSS3 daha dinamik bir hale geldi.

Tepkisel Tasarım(Responsive Design)

CSS3 ile kapsamı geliştirilen medya sorguları sayesinde gelişmekte olan ve yeni bir akım haline gelen tepkisel tasarım(responsive) web mecrasında büyük öneme sahip.

Sitemize farklı platformlar için farklı uygulamalar yapmamıza gerek kalmadan Sadece CSS yardımı ile tüm platformlar için tek merkezden kontrol edilebilen siteler oluşturma olanağı çok büyük avantaj.

Daha Az Resim

CSS3 ile gelen yeni özellikler sayesinde projelerimizde daha az resim kullanıyoruz. Renk geçişi, metinlere gölge vermek, kutulara gölge vermek, kenarları yuvarlatma özellikleri sayesinde resim kullanımı azaldı. Tabi böylece resim işleme programlarına(Adobe Phoshop) olan ihtiyaçta azaldı.

Daha önce her resim işlemi için resim işleme programı açmak sonra değişen resimleri alıp ilgili klasöre atmak gibi iş yükünden de kurtarıyor CSS3 bizi. Daha esnek bir kullanım sağlıyor.

İnteraktif Uygulama Geliştirme

Animasyon, geçiş efektleri ve dönüştürme özellikleri le artık CSS ile animasyon yapma imkanımız var. Daha önceleri flash ve javascript ile yaptığımız bir çok interaktif hareketleri CSS ile yapıyoruz. Daha performanslı, öğrenimi daha kolay ve HTML elemanları üzerinde animasyon yapma avantajları var.

Önek Sıkıntısı

Bu sorunun nedeni CSS3 özelliklerinin hala geliştirilmekte olması ve tarayıcıların geliştirme aşamasında bu özellikleri daha standartlaşmadan kullanmaya ve kullanıcılara kullandırtmaya başlamasından kaynaklanmaktadır. Bu durumu başlangıçta(belki hala) sorun olarak tanımlamasak da çok yoğun kullanımında bir sorun olarak karşımıza çıktığı kesin.

Tarayıcı Desteği

Yeni nesil bütün tarayıcılar(Firefox, Chrome, Opera, Safari ve internet Explorer 10) CSS3’ü desteklerken, kullanımda olan tarayıcı listesinde gördüğümüz iki İnternet Explorer sürümü 8 ve 9’un CSS3 desteği sırası ile %15 ve %54. Bu durum CSS3 özelliklerini kullanırken bizi çekimserliğe itmekte. Buradaki mantığımız destekleyen tarayıcılar için CSS3 kullanmak, desteklemeyenler için javascript yardımı almak yönünde olmalıdır.

Geliştirilmekte olan bazı modüllerin tarayıcı desteği bulunmamaktadır. Ancak otomatik güncelleme sayesinde yenilikler Firefox, Chome ve Opera’ya kullanıcının güncellemesine gerek kalmadan eklenmektedir.

CSS3 Özellik Araçları

Bazı özellikleri kullanırken çevrimiçi veya editör yardımı bizi hızlandırmaktadır. Renk geçişi, farklı gölgeleme teknikleri, animasyon, geçiş efektleri vb. yeni özellikleri bir araç yardımı ile kullanmak bize hız sağlıyor. Bir çok çevirimiçi site bu özellikleri kullanmamızı sağlaması bir avantaj.

Geliştirme Devam Ediyor

CSS3 henüz gelişmesi devam eden bir standart. Halen üzerinde çalışılan modüller bulunmakta.

Tüm listeyi görmek için w3c’nin sitesine bakabilirsiniz.

Kaynaklar

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.