Safari 27.2’de Neler Yeni? ::field-content, fit-tolerance ve 20 Düzeltme

Safari 27.2, 26 Ekim 2026’da yayınlandı ve web tarafında üç şey getiriyor: Customizable Select için yeni ::field-content sözde-elementi ve varsayılan stil düzeltmeleri, Grid Lanes’teki flow-tolerance özelliğinin fit-tolerance olarak yeniden adlandırılması ve 20 hata düzeltmesi. Masonry düzeninde eski adı kullanıyorsanız kodunuz şimdilik çalışıyor, ama güncelleme zamanı geldi (WebKit).

Bu sürüm büyük bir özellik paketi değil, bir rötuş sürümü. Yine de form ve düzen tarafında çalışan herkesin bilmesi gereken iki ayrıntı var: seçili seçeneğin metnini artık ek HTML yazmadan biçimlendirebiliyorsunuz ve masonry düzeninde kullandığınız bir CSS özelliğinin adı değişti.

Safari 27.2’de neler değişti?

WebKit ekibinden Jen Simmons’ın duyurusundaki değişiklikler üç başlıkta toplanıyor:

FORMLAR

Customizable Select inceltildi

::field-content ile seçili seçeneğin metni, <selectedcontent> olmadan biçimlendirilebiliyor. Varsayılan stiller ve açılır listenin konumu düzeltildi.

CSS

flow-tolerance → fit-tolerance

CSS Çalışma Grubu kararıyla Grid Lanes özelliğinin adı değişti. Eski ad şimdilik kullanımdan kaldırılmış (deprecated) takma ad olarak çalışıyor.

KALİTE

20 hata düzeltmesi

Erişilebilirlik, medya, CSS, formlar, WebGPU ve WebRTC dahil 14 alanda düzeltme.

Customizable Select’te ne değişti?

Customizable Select, Safari’ye 27.0 sürümüyle geldi. CSS’te appearance: base-select yazdığınızda gerçek <select> elemanı tamamen biçimlendirilebilir hale geliyor; klavye gezinmesi, ekran okuyucu desteği, form gönderimi ve doğrulama gibi davranışlar yerinde kalıyor. Standart süreç devam ettiği için tarayıcılar ayrıntıları hâlâ birbirine yaklaştırıyor; 27.2 bu cilanın bir parçası.

select,
select::picker(select) {
  appearance: base-select;
}

::field-content nedir?

::field-content, sayfada görünen “düğme” kısmındaki seçili seçeneğin metnini biçimlendirmenizi sağlayan yeni bir sözde-element. Bugüne kadar bu metne stil vermenin yolu, <select> içine bir <button> ve onun içine <selectedcontent> eklemekti:

<select id="status">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option>Processing</option>
  <option>Shipped</option>
  <option>Delivered</option>
  <option>Canceled</option>
</select>

Safari 27.2 ile bu ek işaretlemeye gerek kalmadan, yalnızca <option> listesinden oluşan klasik bir <select> üzerinde de seçili metne stil verebiliyorsunuz. WebKit’in duyurusu bu sözde-element için örnek kod paylaşmıyor; aşağıdaki kullanım, sözde-elementin select elemanına bağlandığı varsayımına dayanıyor. Canlıya almadan önce Safari 27.2’de test edin.

select {
  appearance: base-select;
}

/* Seçili seçeneğin sayfada görünen metni */
select::field-content {
  font-weight: 600;
  letter-spacing: .01em;
}

base-select varsayılan stillerinde düzeltilenler

Hiç özel CSS yazmasanız da appearance: base-select kullanan bir seçim kutusu 27.2’de biraz farklı görünecek. WebKit dört düzeltme sayıyor:

• Dikey ortalama: Düğmenin içeriği artık daha güvenilir biçimde dikeyde ortalanıyor.
• Taşan metin: Seçili seçeneğin metni, text-overflow değerini <select> elemanından miras alıyor. Uzun seçeneklerde üç noktayla kesmek için tek yere yazmanız yetiyor.
• Ok ikonu: ::picker-icon daha sade bir düzenle çiziliyor, hizalamak için negatif kenar boşluğu gerekmiyor.
• Boşluk yönetimi: Düğme, ::picker-icon üzerindeki margin-inline-start: auto yerine flex: 1 kullanıyor. Böylece ok ikonu <selectedcontent> olmadan da her zaman görünüyor.

Uzun seçim listeleri artık ekrandan taşmıyor

Önceden çok seçenekli bir liste kısmen görüş alanının dışında açılabiliyordu. 27.2 bunu safe hizalamayla çözüyor: mutlak ve sabit konumlu kutularda safe anahtar kelimesi artık kutuyu kendi içeren bloğu (containing block) içinde tutuyor. Ayrıca safe ve unsafe artık normal hizalamayla birlikte de yazılabiliyor. Bu değişiklik yalnızca seçim listelerini değil, kendi konumlandırdığınız açılır pencereleri de etkileyebilir.

flow-tolerance neden fit-tolerance oldu?

Grid Lanes, CSS’in yerel masonry (Pinterest tarzı şelale) düzeni. Safari’ye 26.4 ile Mart 2026’da geldi ve display: grid-lanes ile açılıyor. CSS Çalışma Grubu, düzenin bir sonraki öğeyi nereye koyacağını belirleyen özelliğin adını flow-tolerance yerine fit-tolerance yapmaya karar verdi; gerekçe yeni adın özelliğin amacını daha iyi anlatması. Safari 27.2 yeni adı kullanıyor (WebKit).

1. AD

item-tolerance

Özelliğin ilk önerilen adı.

2. AD

flow-tolerance

Safari 26.4’teki Grid Lanes ile gelen ad. 27.2’de kullanımdan kaldırılmış takma ad olarak hâlâ çalışıyor.

GÜNCEL AD

fit-tolerance

CSS Çalışma Grubu’nun son kararı. Safari 27.2 bu adı kullanıyor; varsayılan değer 1em.

fit-tolerance ne işe yarar?

Tarayıcı yeni bir öğeyi, içeriği sayfada en yukarıda biten sütuna yerleştirir. Tolerans yoksa birkaç piksellik farklar bile kazananı belirler ve öğeler sayfanın bir ucundan öbürüne sıçrar. fit-tolerance ile “bu kadar farkı eşit say” dersiniz: aradaki fark bu değerin altındaysa tarayıcı sütunları berabere kabul edip ilkini seçer. Varsayılan değer 1em.

Asıl kazanç erişilebilirlikte. Ardışık öğeler komşu sütunlarda kaldığında, klavyeyle Tab tuşuyla gezen ve odağın hareketini gözüyle takip eden kullanıcı sayfada savrulmuyor. WebKit’in önerisi net: çoğu durumda bu değeri belirgin biçimde artırın; ne kadar artıracağınız içerik boyutlarına ve aralarındaki farka bağlı. Çok yüksek bir değerin de klavye ve ekran okuyucu gezinmesini tuhaflaştırabileceğini Grid Lanes tanıtım yazısı ayrıca belirtiyor.

flow-tolerance kodunuzda nasıl güncellenir?

1. Arayın: Proje genelinde flow-tolerance geçen yerleri bulun. Safari Web Inspector da değiştirilmesi gereken kullanımları işaretliyor.
2. Yeniden adlandırın: Her birini fit-tolerance yapın. Değer söz dizimi aynı kalıyor.
3. Değeri gözden geçirin: Varsayılan 1em ile yetindiyseniz, kartlarınızın yükseklik farkına göre daha büyük bir değer deneyin.
4. Klavyeyle test edin: Sayfada Tab ile gezinin; odak sütunlar arasında zıplamadan komşu öğelere ilerliyorsa değer iş görüyor. Denemek için WebKit’in Field Guide to Grid Lanes sayfasını kullanabilirsiniz.

.galeri {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  fit-tolerance: 4em; /* örnek değer; varsayılan 1em */
}

Not: Eski ad “şimdilik” çalışıyor; WebKit ne zaman kaldırılacağına dair tarih vermedi. Ad değişikliğini ertelemeyin.

20 hata düzeltmesinden tasarımcıyı ilgilendirenler

Düzeltmelerin dörtte biri medya tarafında. Arayüz ve erişilebilirlik çalışan biri için en dikkat çekici olanlar aşağıda.

Diğer 12 alan (birer düzeltme)12

Medya5

Erişilebilirlik3

• Canlı bölgede tekrar yok: İçeriği eklemek yerine aria-live bölgesini yeniden çizerek akıtan sayfalarda VoiceOver, zaten okuduğu metni tekrar etmiyor. Yapay zekâ sohbet arayüzleri gibi akışlı yanıt veren ekranlar için önemli.
• Erişilebilir ad eksikliği: aria-labelledby veya aria-describedby ile referans verilen bir elemanın içindeki liste, tablo, ağaç ve canvas içeriği artık erişilebilir ada ve açıklamaya dahil ediliyor.
• iOS’ta tarih ve renk alanları: VoiceOver, date, time ve color tipindeki <input> elemanlarını açılır düğme olarak tanıtıyor.
• Dialog içinde çapa konumlandırma: Modal <dialog> içindeki anchor-positioned bir eleman, sayfa kaydırıldığında ekran dışına düşüp görünmez olmuyor.
• Pano izni ilk denemede: Kullanıcı etkileşimi (transient activation) yanlışlıkla düşürülmüyor; Clipboard API gibi etkileşim isteyen API’ler ilk tıklamada çalışıyor.
• SVG foreignObject: <foreignObject> elemanının x ve y değerlerini dinamik olarak değiştirmek artık etkili.

Akışlı içerik ve ARIA tarafında daha fazlası için “Blocked aria-hidden” uyarısı yazımıza; Safari’nin önceki sürümlerindeki değişiklikler için top-level await ve SVG textPath yazılarımıza bakabilirsiniz. Grid ve Flex’te ayraç çizgileri için de Gap Decorations rehberi var.

Safari 27.2’ye nasıl güncellenir?

Safari 27.2; iOS 27.2, iPadOS 27.2, visionOS 27.2, macOS 27.2 Golden Gate, macOS Tahoe ve macOS Sequoia için yayınlandı (WebKit).

1. iPhone, iPad, Vision Pro ve macOS Golden Gate: Safari işletim sistemiyle güncelleniyor. Ayarlar > Genel > Yazılım Güncelleme yolundan 27.2 güncellemesini yükleyin.
2. macOS Tahoe ve Sequoia: Yalnızca Safari’yi güncellemek için Yazılım Güncelleme ekranında “daha fazla” (more) bağlantısına tıklayın ve Safari 27.2’yi seçin.
3. Doğrulayın: macOS’ta Safari menüsünden “Safari Hakkında” penceresini açıp sürüm numarasının 27.2 olduğunu kontrol edin.

iOS 27’nin genel özellikleri için iOS 27 rehberimize bakabilirsiniz.

Sık sorulan sorular

Safari 27.2 ne zaman çıktı?

WebKit ekibi Safari 27.2’nin web özelliklerini 26 Ekim 2026’da duyurdu. Güncelleme iOS 27.2, iPadOS 27.2, visionOS 27.2 ve macOS 27.2 Golden Gate ile birlikte geliyor; macOS Tahoe ve Sequoia kullanıcıları Safari’yi ayrıca güncelleyebiliyor.

flow-tolerance Safari 27.2’de hâlâ çalışıyor mu?

Evet. flow-tolerance kullanımdan kaldırılmış bir takma ad olarak şimdilik çalışıyor, ancak WebKit kodun yakında fit-tolerance olarak güncellenmesini öneriyor. Web Inspector değiştirilmesi gereken yerleri işaretliyor.

::field-content ile <selectedcontent> arasındaki fark ne?

<selectedcontent>, seçili seçeneğin düğmede nasıl görüneceğini HTML düzeyinde kontrol eden bir eleman ve <button> içine eklenmesi gerekiyor. ::field-content ise bir CSS sözde-elementi; ek işaretleme olmadan, seçili seçeneğin sayfada görünen metnine stil vermenizi sağlıyor.

fit-tolerance için hangi değeri kullanmalıyım?

Varsayılan değer 1em. WebKit çoğu durumda bu değerin belirgin şekilde artırılmasını öneriyor; doğru değer kartlarınızın boyutuna ve aralarındaki yükseklik farkına bağlı. En iyi yöntem değeri artırıp sayfada Tab tuşuyla gezinerek odağın sütunlar arasında zıplamadığını kontrol etmek.

Kaynaklar

• WebKit Features for Safari 27.2 — WebKit, 26 Ekim 2026
• WebKit Features for Safari 27.0: Customizable Select — WebKit
• Introducing CSS Grid Lanes — WebKit, 19 Aralık 2025
• Field Guide to Grid Lanes — WebKit