Chrome 86'daki yenilikler

Pete LePage

Chrome 86, kararlı sürüm olarak kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve çekim yapıyorum. Chrome 86'ta geliştiriciler için neler yeni olduğuna göz atalım.

Dosya Sistemi Erişimi

Artık <input type="file"> öğesini kullanarak diskten dosya okuyabilirsiniz. Değişiklikleri kaydetmek için bir ana sayfa etiketine download ekleyin. Bu işlem, dosya seçiciyi gösterir ve dosyayı kaydeder. Açtığınız dosyaya yazmak mümkün değildir. Bu iş akışı can sıkıcı.

İlk deneme sürümünden başarıyla çıkan ve artık kararlı sürümde kullanılabilen File System Access API (eski adıyla Native File System API) ile showOpenFilePicker() işlevini çağırabilirsiniz. Bu işlev, bir dosya seçici gösterir ve ardından dosyayı okumak için kullanabileceğiniz bir dosya tutamacını döndürür.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

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 saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
izin istemi ekran görüntüsü
Kullanıcıdan dosyaya yazma izni isteğinde bulunmasını isteyin.

Chrome, yazma işlemi yapmadan önce kullanıcının yazma izni verip vermediğini kontrol eder. Yazma izni verilmediyse Chrome önce kullanıcıdan izin ister.

showDirectoryPicker() çağrısı yapıldığında bir dizin açılır. Bu dizinde dosya listesini görebilir veya yeni dosya oluşturabilirsiniz. IDE'ler veya çok sayıda dosyayla etkileşime geçen medya oynatıcılar gibi uygulamalar için mükemmeldir. Elbette, herhangi bir şey yazabilmeniz için kullanıcının yazma izni vermesi gerekir.

API'nin çok daha fazla özelliği vardır. Bu nedenle, web.dev'deki Dosya Sistemi Erişimi makalesine göz atın.

Kaynak denemesi: WebHID

Oyun kumandası
Oyun kumandası.

Genellikle HID olarak adlandırılan insan arayüz cihazları, kullanıcılardan giriş alır veya kullanıcılara çıkış sağlar. Sistemlerin cihaz sürücüleri tarafından erişilemeyecek kadar yeni, eski veya yaygın olmayan çok sayıda insan arayüzü cihazı vardır.

Şu anda orijinal deneme olarak kullanılabilen WebHID API, bu cihazlara JavaScript'te erişmenin bir yolunu sağlayarak bu sorunu çözer. WebHID sayesinde web tabanlı oyunlar, tüm düğmeler, kontrol çubukları, sensörler, tetikleyiciler, LED'ler, titreşim paketleri ve daha fazlası dahil olmak üzere gamepad'lerden tam olarak yararlanabilir.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Web tabanlı görüntülü sohbet uygulamaları, arama başlatmak, sonlandırmak, sesi kapatmak ve daha fazlası için özel hoparlörlerdeki telefon düğmelerini kullanabilir.

HID cihaz seçici
HID cihaz seçici.

Elbette bu gibi güçlü API'ler yalnızca kullanıcı açıkça izin verdiğinde cihazlarla etkileşim kurabilir.

Daha fazla bilgi, örnek, nasıl başlayacağınız ve harika bir demo için Yaygın olmayan HID cihazlara bağlanma başlıklı makaleyi inceleyin.


Kaynak denemesi: Çoklu Ekran Pencere Yerleşimi API'si

Günümüzde window.screen() çağrısını yaparak tarayıcı penceresinin bulunduğu ekranın özelliklerini alabilirsiniz. Peki çoklu monitör kurulumunuza ne olacak? Maalesef tarayıcı yalnızca şu anda açık olan ekranla ilgili bilgi verir.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Çoklu Ekran Pencere Yerleşimi API'si, Chrome 86'da bir kaynak deneme sürümü başlatır. Bu API, makinenize bağlı ekranları saymanıza ve pencereleri belirli ekranlara yerleştirmenize olanak tanır. Belirli ekranlara pencere yerleştirebilmek; sunu uygulamaları, finansal hizmet uygulamaları ve daha pek çok şey için kritik öneme sahiptir.

API'yi kullanabilmek için izin isteğinde bulunmanız gerekir. Aksi takdirde, tarayıcıyı ilk kez kullanmaya çalıştığınızda kullanıcıdan izin istenir.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Kullanıcı izin verdikten sonra window.getScreens() çağrısı, Screen nesnesi dizisiyle çözülen bir promise döndürür.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Ardından, requestFullScreen()'ü aradığımda veya yeni pencereler yerleştirirken bu bilgileri kullanabilirim. Tom, web.dev'deki Çoklu Ekran Pencere Yerleşim API'si ile birden fazla ekranı yönetme makalesinde tüm ayrıntıları paylaşmıştır.

Başka pek çok bilgi

Yeni CSS seçici :focus-visible, varsayılan odak göstergesinin gösterilip gösterilmeyeceğine karar verirken tarayıcının kullandığı aynı sezgisel yöntemi etkinleştirmenize olanak tanır.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

CSS ::marker sözde öğesini kullanarak listelerin rengini, boyutunu veya numara ya da madde işareti türünü özelleştirebilirsiniz.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Chrome Dev Summit yakında yakınınızdaki bir ekranda yayınlanacak. Daha fazla bilgi için YouTube kanalımızı takip edin.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 86'da yapılan diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Videolarımızdan haberdar olmak için Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız veya RSS özet akışımızı feed okuyucunuza ekleyebilirsiniz.

Adım Pete LePage. Chrome 87 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.