Chrome 86'daki yenilikler

Chrome 86 şu anda kararlı sürümde kullanıma sunuluyor.

Şunları bilmeniz gerekir:

• File System Access API kararlı sürümde kullanıma sunuldu.
• Web HID ve Multi-screen Window Placement API için yeni kaynak denemeleri mevcuttur.
• CSS'de yeni özellikler ve çok daha fazlası var.

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 86'daki geliştiricilere gelen yenilikleri görelim!

Dosya Sistemi Erişimi

Artık <input type="file"> öğesini kullanarak diskten dosya okuyabilirsiniz. Değişiklikleri kaydetmek için bir bağlantı etiketine download ekleyin. Burada dosya seçici gösterilir ve ardından dosyayı kaydeder. Açtığınız dosyaya yazmanın bir yolu yoktur. Bu iş akışı can sıkıcı.

Kaynak denemesinden çıkan ve artık kararlı sürümde kullanılabilen File System Access API (eski adıyla Native File System API) ile showOpenFilePicker() yöntemini çağırabilirsiniz. Bu API'de dosya seçici gösterilir ve ardından dosyayı okumak için kullanabileceğiniz bir dosya herkese açık kullanıcı adı döndürülü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 edindiğiniz dosya tanıtıcısını kullanabilir veya yeni bir dosya adı almak için showSaveFilePicker() yöntemini çağırabilirsiniz.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

Chrome, yazmadan önce kullanıcının yazma izni verip vermediğini kontrol eder. Yazma izni verilmediyse Chrome ilk olarak kullanıcıdan onay ister.

showDirectoryPicker() araması yapıldığında bir dizin açılır. Bu dizinde dosya listesi alabilir veya ilgili dizinde yeni dosyalar oluşturabilirsiniz. IDE'ler veya çok sayıda dosyayla etkileşimde bulunan medya oynatıcılar gibi uygulamalar için idealdir. Bir şey yazabilmeniz için önce kullanıcının yazma izni vermesi gerekir.

API ile ilgili daha pek çok özellik var. 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 giriş alır veya insanlara çıkış sağlar. İnsan arayüz cihazları çok yeni, çok eski veya sistemlerin cihaz sürücüleri tarafından erişilemeyecek kadar eskidir.

Şu anda kaynak denemesi olarak kullanılabilen WebHID API, bu cihazlara JavaScript kullanarak erişme olanağı sunarak bu sorunu çözmektedir. WebHID sayesinde web tabanlı oyunlar; tüm düğmeler, joystick, sensörler, tetikleyiciler, LED'ler, ses paketleri ve daha fazlası dahil olmak üzere oyun kumandaları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 pek çok işlem için özel hoparlörlerdeki telefon düğmelerini kullanabilir.

Elbette bunun gibi güçlü API'ler, yalnızca kullanıcı açıkça izin verdiğinde cihazlarla etkileşimde bulunabilir.

Daha fazla ayrıntı, örnek, nasıl başlayabileceğiniz ve havalı bir demo için Yaygın olmayan HID cihazlarına bağlanma bölümüne göz atın.

Kaynak Deneme: Multi-Screen Window Placement API

Şu anda window.screen() işlevini çağırarak tarayıcı penceresinin açık olduğu ekranın özelliklerini alabilirsiniz. Peki ya birden fazla monitörlü bir kurulumunuz varsa? Maalesef, tarayıcı size yalnızca şu anda bulunduğu 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
// }

Multi-Screen Window Placement API, Chrome 86'da bir kaynak denemesi başlatır. Bu API, makinenize bağlı ekranları numaralandırmanıza ve belirli ekranlara pencere yerleştirmenize olanak tanır. Belirli ekranlara pencere yerleştirebilmek; sunum uygulamaları, finansal hizmet uygulamaları vb. için çok önemlidir.

API'yi kullanmadan önce izin istemeniz gerekir. Aksi takdirde, tarayıcı ilk kullanmayı denediğinizde kullanıcıyı bilgilendirir.

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 nesne dizisiyle çözümlenen bir söz 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, ...},
// ]

Bu sayede requestFullScreen() yöntemini çağırırken veya yeni pencereler yerleştirirken bu bilgileri kullanabilirim. Tom, tüm ayrıntıları web.dev'deki Çoklu Ekran Penceresi Yerleşim API'si ile birden fazla ekranı yönetme makalesinde bulabilir.

Daha birçok avantaj

Yeni CSS seçici :focus-visible, tarayıcının varsayılan odak göstergesinin görüntülenip görüntülenmeyeceğine karar verirken kullandığı buluşsal yöntemi etkinleştirebilmenizi sağlar.

/* 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 Öğe ile listelerin rengini, boyutunu, sayı veya madde işareti türünü özelleştirebilirsiniz.

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

Chrome Dev Summit yakınınızdaki bir ekranda gerçekleştirilecek. Daha fazla bilgi için YouTube kanalımızı takip etmeye devam edin.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerin yalnızca bazıları anlatılmıştır. Chrome 86'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

• Chrome Geliştirici Araçları'ndaki yenilikler (86)
• Chrome 86'da kullanımdan kaldırma ve kaldırma işlemleri
• Chrome 86 için ChromeStatus.com güncellemeleri
• Chrome 86'da JavaScript'teki yenilikler
• Chromium kaynak deposu değişiklik listesi

Abone ol

Videolarımızdan haberdar olmak, ardından Chrome Developers YouTube kanalımıza abone olmak isterseniz yeni bir video başlattığımızda veya RSS özet akışımızı özet akışı okuyucunuza eklediğimizde e-posta bildirimi alırsınız.

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