Bu sayfa, Cloud Translation API ile çevrilmiştir.

Chrome 86'daki yenilikler

Pete LePage

Chrome 86 şu anda kararlı kanalında kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

File System Access API artık kararlı sürümünde kullanılabilir.
Web HID ve Multi-screen Window Placement API için yeni kaynak denemeleri vardır.
CSS'de bazı yenilikler ve çok daha fazlası var.

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. 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ı.

Kaynak deneme sürümünden sonra mezun olan ve artık kararlı sürümde kullanılabilen File System Access API (eski adıyla Native File System API) ile showOpenFilePicker() öğesini çağırabilirsiniz. Bu işlem, bir dosya seçiciyi gösterir ve ardından dosyayı okumak için kullanabileceğiniz bir dosya herkese açık kullanıcı adı 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.

Yazmadan önce Chrome, kullanıcının yazma izni verip vermediğini kontrol eder. Yazma izni verilmediyse Chrome ilk önce kullanıcıya istem gösterir.

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şimde bulunan medya oynatıcılar gibi şeyler için idealdir. 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

Genellikle HID olarak adlandırılan insan arayüz cihazları, insanlardan girdi alır veya insanlara çı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 ile web tabanlı oyunlar; tüm düğmeler, kontrol çubukları, sensörler, tetikleyiciler, LED'ler, rumble paketleri ve daha pek çok oyun kumandasından tam anlamıyla 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 veya sonlandırmak, sesi kapatmak ve daha fazlasını yapmak için özel hoparlörlerdeki telefon düğmelerini kullanabilir.

Elbette bunun gibi güçlü API'ler yalnızca kullanıcı açıkça izin vermeyi seçtiğinde cihazlarla etkileşime geçebilir.

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 nesneleri 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()'yi aradığımda veya yeni pencereler yerleştirirken bu bilgileri kullanabilirim. Tom, web.dev'deki Çoklu Ekran Pencere Yerleşimi API'si ile birden fazla ekranı yönetme makalesinde tüm ayrıntıları bulabilirsiniz.

Başka pek çok bilgi

Yeni CSS seçici :focus-visible, tarayıcının varsayılan odak göstergesini görüntüleyip görüntülemeyeceğine karar verirken 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 Öğesi ile listelerin rengini, boyutunu, sayı veya madde işaretini ö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

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. Chrome 86'da yapılan diğer değişiklikler için aşağıdaki bağlantılara göz atın.

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.

Ben Pete LePage. Chrome 87 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!