Web: Safari 15'te Tasarım
Web sitenizi Safari’nin en son sürümü olan Safari 15 için optimize edin!
Merhaba geliştiriciler!👋 Bu yazımızda, macOS Monterey, iOS ve iPadOS 15 ile gelen Safari 15'te tasarım alanında dikkat edilmesi gereken önemli değişiklikleri paylaşacağım.
Bu konuda Apple’ın yayınladığı 34 dakikalık “session”ı da aşağıdaki linkten izleyebilirsiniz:
Daha fazla vakit kaybetmeden Safari 15'i incelemeye başlayalım. 🔎
Tab Bar
Safari’nin bu sürümünde gelen en önemli değişikliklerden biri, ekranın üstünde bulunan “bar”ın tasarımı. Buranın arkaplan rengi siteden siteye değişiklik gösterebiliyor. Böylece diğer tarayıcıların aksine siteler tam ekran hissi verebiliyor.
Örneğin WebKit’in sitesinde mavi renk yukarıya da yansıtılarak tam ekran deneyimi yaşatılıyor.
CSS Tricks’te ise bu renk, sitenin aksan rengi olarak tercih edilmiş.
Şimdi, bu özelliği denemek için basit bir site oluşturalım.
Şu anki sitemizde sadece bir yazı bulunuyor. Üst taraftaki “bar”da ise Safari’nin belirlediği bir renk bulunuyor.
Şimdi sitemize biraz renk katalım. Bunu body’nin arkaplan rengini ve yazının rengini değiştirerek yapacağız.
Safari, “bar”ın rengini otomatik olarak sitenin arkaplan rengi ile değiştirdi. Şimdi, siteye bir header ekleyelim.
Sitenin en üst kısmının rengi artık açık mavi ancak üstteki “bar”, hâlâ koyu mavi ile gösteriliyor. Bu durumda, renge müdahale etmemiz gerekiyor.
Bu rengi theme-color adındaki meta “tag”i aracılığıyla değiştirebiliyoruz. Sitedeki head kısmına aşağıdaki kodu ekleyelim.
<meta name="theme-color" content="#1f55e9">
Artık “bar”, olması gereken renkte gösteriliyor. Şimdi, siteye açık/koyu mod desteği ekleyelim. Bu konu hakkında daha fazla bilgiyi aşağıdaki makalede bulabilirsiniz:
Sitemiz artık açık modda buradaki gibi daha açık renklerle gözükecek. Ancak bu sefer üstteki “bar”ın rengini tekrar değiştirmemiz gerekecek.
Bunun için az önce eklediğimiz meta “tag”ine media adında yeni bir “attribute” eklememiz gerekiyor.
<meta name="theme-color" content="#1f55e9" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#5498fd" media="(prefers-color-scheme: light)">Artık koyu modda üstteki renk tercih edilirken açık modda aşağıdaki renk tercih ediliyor.
Eğer ziyaretçi eski bir tarayıcıyı kullanıyorsa ve tarayıcı bu özelliği desteklemiyorsa ilk deklare edilen renk kullanılır. Burada “fallback”in sırası CSS’in tersi olduğu için dikkatli olmamız gerekiyor.
Unutmadan söyleyeyim, şu ana kadar yaptığımız her şey iOS için de geçerli. Tek fark, rengin “Tab Bar” yerine “Status Bar” ve aşağıdaki “Tab Switcher”da gözükmesi.
Safari, “bar”ın renginin kullanıcının tercih ettiği temada kötü durduğunu algılarsa (örneğin koyu temada fazla açık veye açık temada fazla koyu), bu rengi değiştirebilir. Böyle bir durumun önüne geçmek için site birden fazla temayı desteklemese de “bar”ın rengini birden fazla tema ile uyumlu hale getirmekte fayda var.
Üstteki her şey macOS, iOS ve iPadOS için geçerli olsa da, macOS’de dikkat etmek gereken bir nokta daha bulunuyor. Eğer “bar”ın rengi kullanıcı deneyimini engelleyecek bir duruma sebep oluyorsa Safari bu rengi uygulamayabilir.
Bunların dışında, sitenizde her sayfada farklı bir renk gösterebilir veya sayfanın içinde de rengi JavaScript ile değiştirebilirsiniz. Bunun için az önce eklediğimiz meta “tag”inin içeriğini değiştirmeniz yeterli.
iOS
iOS 15'deki Safari’de tasarım biraz farklı. Tek el ile kullanım için optimize edilen yeni tasarımda bir “Tab Switcher” bulunuyor. Bu elemanı sağa ve sola sürükleyerek sekmeleri değiştirebiliyor, yukarı sürükleyerek de açık olan bütün sekmeleri görüntüleyebiliyorsunuz.
Bahsettiğim “Tab Switcher”, normalde büyük bir şekilde ve arayüz elemanlarının üstünde gözükürken site aşağı kaydırıldığında küçülerek viewport‘un yüksekliğini azaltıyor ve ekranın en altına geliyor.
Ancak, sitenin en altında önemli bir buton varsa bu sorun çıkarabilir. Böyle bir durumdan kaçınmak için “Environment Variable”ları kullanmamız gerekiyor.
Sitenin en altına bir buton ekleyelim.
Şu an butona basmak mümkün değil. Hatta kullanıcılar butonun orada olduğunu bile fark edemeyebilir.
Butonu aşağıdaki kod ile en aşağı sabitlemiştim:
position: absolute;
bottom: 0;Şimdi ise bu kodu ekleyerek aşağıdan “safe area” kadar boşluk bırakalım:
margin-bottom: env(safe-area-inset-bottom);
Artık buton, “Tab Switcher” ile çakışmıyor.
Anlattığımın dışında da kullanılabilecek bir çok değişken bulunuyor.
Safari, normalde içerik kaybı olmaması için telefon yatay pozisyonda tutulduğunda sitenin sol ve sağına boşluk ekliyor. Bu sorunu çözmek için de üstteki değişkenler kullanılabiliyor. Ancak bunun yanında “viewport” meta “tag”ine aşağıdaki “attribute”u eklemek gerekiyor.
Konu hakkında daha detaylı bilgi için aşağıdaki makaleyi inceleyebilirsiniz:
Yeni Form Elementleri
iOS ve iPadOS’te çok uzun -gerçekten uzun- süredir aynı olan form elementleri, UIKit ve SwiftUI’ın modern tasarımına benzeyecek şekilde yeniden tasarlandı. Ancak bunlar, tabii ki de CSS ile eskisi gibi manipüle edilebiliyor.
Safari 15 ile gelen ve geliştiricileri ilgilendiren en önemli değişiklikler bunlardı. Umarım web sitenizi/web uygulamanızı bu yeni özelliklerle uyumlu hale getirmek için hazırsınızdır.
Bir sonraki yazıda görüşmek üzere. 👋
