Web sitelerinin büyük kısmı aynı şekli kullanıyor: köşeleri yuvarlatılmış dikdörtgen. Kartlar, butonlar, form alanları hep aynı. Google’ın 16 Eylül’de beta olarak yayımladığı Chrome 155, CSS köşe tasarımındaki bu tekdüzeliği kırmaya yarayan corner-shape özelliğine yeni kısayollar ekledi. Bu yazıda özelliğin ne yaptığını, nerede işe yaradığını ve sitenizde nasıl güvenle denenebileceğini anlatıyoruz.
CSS köşe tasarımında corner-shape ne yapıyor?
Bugüne kadar köşeler için tek bir araç vardı: border-radius. Bu özellik köşenin ne kadar yuvarlanacağını belirliyor, ama eğrinin şekli hep aynı kalıyordu, yani bir çeyrek daire.
corner-shape bu eğrinin şeklini değiştiriyor. Smashing Magazine’deki ayrıntılı yazıda belirtildiği gibi, özellik border-radius’un yerini almıyor, onun çizdiği eğriyi biçimlendiriyor. Kısacası CSS köşe ayarı artık iki parçalı: ne kadar yuvarlak olacağı ve hangi şekilde kıvrılacağı. Kullanılabilen değerler şunlar:
- round: Bildiğimiz yuvarlak köşe, varsayılan değer.
- squircle: Telefon uygulama simgelerinde gördüğünüz yumuşak, kare ile daire arası köşe.
- bevel: Köşeyi düz bir çizgiyle eğimli keser.
- scoop: Köşeyi içe doğru oyar.
- notch: Köşede keskin bir çentik açar.
- square: Yuvarlamayı tamamen kaldırır.
Ayrıca superellipse() fonksiyonuyla eğri sayısal olarak da ayarlanabiliyor. Her köşeye ayrı bir değer vermek de mümkün. Yani bir kartın sol üst köşesi yuvarlak, sağ alt köşesi çentikli olabilir.
Chrome 155 ile CSS köşe kodu nasıl kısaldı?
Chrome 155 beta duyurusuna göre artık corner ve corner-top-left gibi kısayol özellikleri var. Bunlar bir köşenin hem yuvarlanma miktarını hem de şeklini tek satırda tanımlamayı sağlıyor. Eskiden iki ayrı özellik yazmak gerekiyordu, şimdi tek tanım yetiyor. CSS köşe kodu kısalıyor, okunması ve bakımı kolaylaşıyor. Bu da tasarım sistemine yeni bir köşe stili eklemeyi daha az zahmetli hâle getiriyor.
Chrome 155 beta ile gelen diğer tasarım yenilikleri
Aynı sürümde arayüz tarafını ilgilendiren başka yenilikler de var:
- margin-trim: Bir kutunun içindeki ilk ve son öğenin gereksiz boşluklarını otomatik kırpıyor. Kartların içinde alt ve üstte oluşan fazla boşluk sorunu kod eklemeden çözülüyor.
- text-decoration-skip-spaces: Alt çizginin kelimeler arasındaki boşlukların altına çizilip çizilmeyeceğini ayarlıyor.
- symbols(): Liste işaretlerini ayrı bir tanım yazmadan, satır içinde özelleştirmeye izin veriyor.
- JPEG XL desteği: Chrome bu yeni görsel formatını güvenli bir çözücüyle açabiliyor. Geniş renk aralığı ve HDR destekleyen bu format, ileride görsel ağırlıklı sitelerde yeni bir seçenek olabilir.
Bu yeniliklerin ortak noktası, tasarımcıların yıllardır ek kod ya da görsel hilelerle çözdüğü küçük sorunları doğrudan tarayıcıya taşıması. Daha az kod, daha hızlı açılan sayfa demek.
Sitenizin tasarımına ne katar?
Bir mağazada bütün ürünler aynı kutuda dursa, gözünüz hiçbirinde durmaz. Web sitesinde de durum aynı. CSS köşe şekli küçük bir detay gibi görünüyor, ama bir markanın görsel dilini taşıyan en ucuz araçlardan biri.
Örnek kullanımlar:
- Butonlar: Eğimli köşeli bir “Teklif alın” butonu, sayfadaki diğer yuvarlak öğeler arasında hemen fark edilir.
- Rozetler ve etiketler: “Yeni” ya da “İndirim” rozetlerinde çentikli köşe, bilet ya da etiket hissi verir.
- Kartlar: Hizmet ya da ürün kartlarında tek bir köşeyi farklılaştırmak, markanıza özgü bir imza yaratır.
- Sekmeler: İçe oyuk köşeler, sekmenin altındaki panelle bütünleşmesini sağlar.
Bunu yaparken amaç süs değil, dikkat yönetimi olmalı. Her öğeyi farklı yaparsanız hiçbiri öne çıkmaz. İyi bir kural: sayfada en önemli eylemi taşıyan tek bir öğeye farklı köşe verin, geri kalanını sade bırakın.
CSS köşe şekillerini kullanırken dikkat edilecekler
En önemli nokta tarayıcı desteği. corner-shape şu an Chrome 139 ve sonrası ile Chromium tabanlı tarayıcılarda çalışıyor, Firefox ve Safari henüz desteklemiyor. Bu yüzden doğru yöntem kademeli iyileştirme:
- Önce tasarımı klasik yuvarlak köşelerle eksiksiz kurun.
- Sonra yalnızca destekleyen tarayıcılarda devreye giren ek bir katmanla yeni köşe şekillerini ekleyin.
- Safari kullanan bir ziyaretçi düzgün, sade bir site görür; Chrome kullanan ise bir adım daha zengin bir tasarım.
Bu yaklaşımda hiçbir ziyaretçi bozuk bir sayfa görmez.
Bir uyarı daha: yeni CSS köşe şekilleri gölge, kenarlık ve odak çerçevesiyle birlikte test edilmeli. Klavyeyle gezinen bir ziyaretçi butona geldiğinde beliren odak çizgisi köşe şekline uymuyorsa tasarım yarım kalmış görünür. Ayrıca köşe şekli renk ve kontrastın yerini tutmaz. Butonun okunur olması, dokunma alanının mobilde yeterince büyük olması ve metnin net olması hâlâ önceliklidir. Şekil, bu temel doğru kurulduktan sonra eklenecek son dokunuştur.
Uygulamada ilk adım olarak sitenizdeki tek bir öğeyi seçin, örneğin iletişim butonunu. Yeni köşe şeklini yalnızca ona uygulayın ve birkaç hafta tıklanma oranını izleyin. Fark varsa yaygınlaştırın, yoksa sade hâline dönün. Bu tür detayları markanızın genel görünümüyle uyumlu kurmak için kurumsal web sitesi hizmetimize bakabilirsiniz. Ürün kartlarının satışa etkisini önemsiyorsanız e-ticaret sayfamızda da yaklaşımımızı anlatıyoruz.
Sonuç: küçük detay, büyük fark
corner-shape, sitenizi baştan tasarlamadan ona karakter katmanın yollarından biri. Chrome 155 ile gelen kısayollar CSS köşe tanımını daha pratik hâle getiriyor. Tek şart, desteklemeyen tarayıcıları unutmamak ve yeniliği bir katman olarak eklemek.
