CSS'in yeni `corner-shape` özelliği, `border-radius` kuralının tekdüze yuvarlatılmış köşe sınırlarını ortadan kaldırarak; squircle, bevel (pahlı), scoop (içe kavisli), notch ve square gibi farklı geometrik şekillerin doğrudan tanımlanmasını sağlayan yeni bir CSS özelliğidir. `border-radius` ile birlikte çalışan bu özellik, geçmişte karmaşık SVG maskeleri, `clip-path` kullanımları veya çoklu arka plan görselleri gerektiren arayüz hilelerini saf kodla çözmeyi hedefler.
Desteklenen Değerler ve Kullanım Biçimleri
`corner-shape` özelliği tek başına bir şey ifade etmez; `border-radius` tarafından oluşturulan eğrinin şeklini değiştirmek için bir tamamlayıcı olarak çalışır. Özelliğin kabul ettiği temel değerler şunlardır:
- `round`: Standart `border-radius` görünümünü korur (varsayılan değer).
- `squircle`: Apple ekosisteminde sıkça görülen, süper elips formundaki yumuşak köşeli kareler oluşturur.
- `bevel`: Köşeleri keskin bir düz çizgiyle birleştirerek pahlı bir görünüm verir.
- `scoop`: İçe doğru kavisli (konkav) köşeler yaratır.
- `notch`: İçeriye doğru keskin çentikler açar.
- `square`: Yuvarlatılmış köşeleri tamamen düzleştirerek geçersiz kılar.
Ayrıca `border-radius` kullanımında olduğu gibi, her köşe için ayrı değerler (`corner-shape: bevel round scoop squircle;`) atanabilir veya `superellipse()` fonksiyonu ile hassas matematiksel kontrol sağlanabilir.
Tasarım ve Performans Açısından Avantajları
Geçmiş yıllarda web arayüzlerinde farklı köşe biçimleri elde etmek için `clip-path` veya SVG maskeleri kullanmak zorunluydu. Ancak bu eski yöntemler; gölgelerin kesilmesi, kenarlıkların (borders) maskeleri takip etmemesi ve padding değerleri değiştirildiğinde kodun kolayca bozulması gibi dezavantajlar barındırıyordu.
`corner-shape` özelliği yalnızca kenarlıkları değil; aynı zamanda dış gölgeleri (box-shadow), arkaplanları ve outline yapılarını da doğrudan hedefleyebildiği için bu teknik borçları ortadan kaldırır. Özellik, Chrome 139 ve sonraki Chromium tabanlı tarayıcılarda desteklenmektedir. Tarayıcı desteği yaygınlaşana kadar, standart `border-radius` ve degrade maskeleri taban alıp `corner-shape` desteği olan tarayıcılarda gelişmiş deneyim sunan kademeli iyileştirme (progressive enhancement) yaklaşımıyla güvenle kullanılabilir.
Sıkça Sorulan Sorular
corner-shape kullanmak mevcut border-radius kodlarımızı bozar mı?
Hayır, bozmaz. `corner-shape` mevcut `border-radius` değerlerinin yerini almaz, onları tamamlar ve şekillendirir. Eğer tarayıcı özelliği desteklemiyorsa, element standart `border-radius` görünümüyle çalışmaya devam eder.
Eski tarayıcılar için projelerde corner-shape nasıl yedeklenmelidir (fallback)?
Tarayıcı desteği olmayan ortamlar için temel stil olarak standart `border-radius` veya geleneksel `clip-path` yöntemleri taban alınmalı, `corner-shape` ise kod tabanına ilerici bir katman (progressive enhancement) olarak eklenmelidir.
*Bu haber Smashing Magazine tarafından yayınlanan verilere dayanarak hazırlanmıştır.
💬 Yorumlar
Henüz yorum yok. İlk yorumu sen yap!
Yorum yapmak için giriş yapmalısınız.
🔑 Giriş Yap