Chrome'da 2025'in 1. çeyreğinde kullanıma sunulan yenilikler: CSS metin kutusu, Android için dosya sistemi erişimi, temel güncellemeler ve daha fazlası!

Mariko Kosaka
X

Uzun zaman oldu. Chrome'daki Yenilikler videosu, aşağıdakiler hakkında bilgi vererek geri döndü:

Adım Mariko. Son üç sürümde Chrome'da neler değiştiğine göz atalım.

CSS metin kutusu

CSS text-box mülkü, yazı tipi metriklerini kullanarak dikey aralığı hassas bir şekilde kontrol etmenizi sağlar.

Her yazı tipi, karakterlerin üstünde ve altında farklı miktarda boşluk bırakır. Bu boşluklar, öğenin boyutunu belirler.

Bu alanların boyutunu şimdiye kadar kontrol etmek mümkün değildi.

Makasla kesilmiş ve kaldırılmış gibi görünen fazla alan bulunan bir başlık gösteriliyor.

Yeni text-box-trim mülkü, kırpılacak kenarları (üst veya alt) belirtir ve text-box-edge mülkü, kırpmanın nasıl yapılacağını belirtir. Örneğin, büyük harflerin üst kısmı olan büyük harf yüksekliğinde kırpma yapın.

Bunu kısa text-box mülkü kullanarak da yazabilirsiniz.

Bu yeni özelliklerin nasıl kullanılacağı hakkında daha fazla bilgiyi CSS text-box-trim makalesinde bulabilirsiniz.

File System Access API

Chrome 133'te eklenen DOM ilkel Node.prototype.moveBefore, öğenin durumunu sıfırlamadan öğeleri bir DOM ağacında taşımanıza olanak tanır.

Bir DOM öğesini taşımak için öğeyi kaldırıp yeniden eklediğinizde, söz konusu öğenin durumu sıfırlanır. Bu yeni ilkel kullanılarak düğümün durumu korunur.

Böylece iframe'ler yüklü kalır, etkin öğeler odakta kalır, pop-up'lar ve iletişim kutuları gibi öğeler açık kalır ve CSS geçişleri veya animasyonları devam eder.

DOM öğesini taşımanın durumu koruyan yolu

Dosya Sistemi Erişimi API'si, Chrome masaüstünde bir süredir kullanılabiliyor. Bu API, web uygulamalarının kullanıcının yerel dosya sistemindeki dosyalarla etkileşim kurmasına olanak tanır. Chrome 132'den itibaren API, Android'de ve WebView'lerde de kullanılabilir.

Dosya okumak için showOpenFilePicker() işlevini çağırın. Bu yöntem, bir dosya seçici gösterir ve ardından dosyayı okumak için kullanabileceğiniz bir dosya tutamacını döndürür.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Bir dosyayı diske kaydetmek için daha önce aldığınız dosya adını kullanabilir veya yeni bir dosya adı almak için showSaveFilePicker() işlevini çağırabilirsiniz.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

<dialog> öğesine hafif kapatma gelir

Popover oluşturmak için Popover API'yi kullandıysanız Popover API'nin güzel özelliklerinden birinin hafif kapatma davranışı olduğunu bilirsiniz. Kullanıcılar arka planı tıklayabilir ve pop-up öğesi, kapat düğmesine basmadan kapatılır.

Bu hafif kapatma özelliği artık <dialog> öğesinde de destekleniyor.

closedby özelliğini any olarak ayarladığınızda iletişim kutusu, iletişim kutusunun dışındaki bir yer tıklanarak veya Escape tuşlarına basılarak kapatılabilir.


<dialog closedby="any">...</dialog>

Bu davranış, pop-up'ın otomatik olarak ayarlandığı durumla aynıdır.

Referans değerde güncellemeler

Baseline ile ilgili haberler şöyle

Referans Yakın zamanda listelendi

İlk olarak, Temel Özellikler. Yakın zamanda kullanıma sunulan bu özellikler, dört büyük tarayıcıda da kullanıma sunuldu.

scrollbar-gutter ve scrollbar-width

scrollbar-gutter CSS mülkü ile, kaydırma çubuğu göründüğünde veya kaybolduğunda istenmeyen düzen değişikliklerini önlemek için kaydırma çubuğu için bir yer ayırabilirsiniz. scrollbar-width ile daha dar bir kaydırma çubuğu oluşturabilir veya kaydırma özelliğini etkilemeden kaydırma çubuğunu tamamen gizleyebilirsiniz.

ruby-align

ruby-align CSS mülkü ile ruby temel metninin ve ruby ek açıklama metninin hizalamasını belirtebilirsiniz.

Promise.try

Promise.try, senkronize istekler için hata işleme özelliğini kolaylaştıran bir yöntemdir. Bu yöntemi kullanarak Promise.resolve ile istek göndermeye çalışırken geri çağırma işlevlerini ortadan kaldırabilirsiniz.

Wasm çöp toplama ve son çağrı optimizasyonları

WebAssembly artık çöp toplama ve son çağrı optimizasyonlarını destekliyor.

Referans Geniş kapsamlı kullanım

findLast() ve findLastIndex() dizisi

Dizi findLast() ve findLastIndex(), bir dizinin sonundaki öğeleri almak için çok kullanışlı yöntemlerdir. Bu özellik, 30 aydır tüm büyük tarayıcılar tarafından destekleniyor. Bu da artık Baseline'ın yaygın olarak kullanılabildiği anlamına geliyor.

Bağımsız dönüşüm özellikleri

CSS dönüştürme işlemleri üzerinde daha ayrıntılı kontrol sahibi olmanızı sağlayan bağımsız dönüştürme özellikleri artık Temel Geniş olarak da kullanılabilir .

Referans değeri hakkında daha fazla bilgi

Referans değer ve Yeni ile Geniş kapsamlı olarak kullanıma sunuldu arasındaki fark hakkında daha fazla bilgi edinmek isterseniz hazırladığım kısa videoya göz atın.

Bir özelliğin referans durumu hakkında daha fazla bilgiyi Web Platform Status kontrol panelinde de bulabilirsiniz.

Birlikte çalışabilirlik projesi 2025'te geri döndü

Son olarak, Interop projesi 2025'te görünüm geçişleri, CSS ankrajı konumlandırması ve Navigation API gibi odak alanlarının listesini sunarak geri dönüyor. Proje duyurusuna göz atın.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Mariko Kosaka. Chrome'daki yenilikler hakkında daha fazla bilgi vermek için üç ay sonra tekrar sizinle olacağım.