- Yeni CSS Yazılı Model Nesnesi ile CSS değiştirme işlemi kolaylaşıyor.
- Panoya erişim artık eşzamansız.
- Tuval öğeleri için yeni bir oluşturma bağlamı vardır.
Üstelik çok daha fazlası da var!
Ben Pete LePage. Şimdi Chrome 66'daki geliştiricilere yönelik yenilikleri görelim!
Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.
CSS Türünde Nesne Modeli
Daha önce bir CSS özelliğini JavaScript aracılığıyla güncellediyseniz CSS nesne modelini kullanmışsınızdır. Ancak her şeyi bir dize olarak döndürür.
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
opacity
özelliğini canlandırmak için dizeyi bir sayıya dönüştürmem, ardından değeri artırıp değişikliklerimi uygulamam gerekir. İdeal değildir.
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
Yeni CSS Türü Nesne Modeli sayesinde CSS değerleri, yazılan JavaScript nesneleri olarak gösterilir. Böylece, tür manipülasyonunun büyük bir kısmı ortadan kalkar ve CSS ile daha mantıklı bir şekilde çalışılması sağlanır.
element.style
kullanmak yerine stillere .attributeStyleMap
özelliği veya .styleMap
üzerinden erişirsiniz. Bunlar, okunmasını veya güncellenmesini
kolaylaştıran harita benzeri bir nesne döndürür.
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
Eski CSS Nesne Modeli ile karşılaştırıldığında, ilk karşılaştırmalar saniye başına işlem sayısında yaklaşık %30'luk bir artış olduğunu gösteriyor. Bu durum, özellikle JavaScript animasyonları için büyük önem taşıyor.
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
Ayrıca, bir dizedeki değeri sayıya dönüştürmeyi unutmanın neden olduğu hataların ortadan kaldırılmasına yardımcı olur ve değerlerin yuvarlanması ve sınırlanması otomatik olarak halledilir. Ayrıca, birim dönüştürme, aritmetik ve eşitlik ile başa çıkmak için oldukça yeni ve kullanışlı yöntemler var.
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric'in açıklayıcı bölümünde birkaç demo ve örnek içeren harika bir gönderi var.
Async Clipboard API
const successful = document.execCommand('copy');
document.execCommand
kullanarak eşzamanlı kopyalama ve yapıştırma işlemleri, küçük metin parçaları için uygun olabilir ancak başka her şeyde eşzamanlı yapısının sayfayı engelleyerek kullanıcı için kötü bir deneyime neden olma ihtimali yüksektir. Ayrıca, tarayıcılar arasındaki izin modeli
tutarsızdır.
Yeni Async Clipboard API, eşzamansız olarak çalışan ve kullanıcılara daha iyi bir deneyim sunmak için izin API'siyle entegre olan bir alternatiftir.
writeText()
araması yapılarak metin panoya kopyalanabilir.
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
Bu API eşzamansız olduğundan writeText()
işlevi, ilettiğimiz metnin başarıyla kopyalanıp kopyalanmadığına bağlı olarak çözümlenecek veya reddedilecek bir Promise döndürür.
Benzer şekilde, getText()
çağrısı yapılıp döndürülen Promise'in metinle çözümlenmesi beklenerek panodan okunabilir.
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
Jason'ın gönderisine ve açıklamadaki demolara göz atın.
Ayrıca async
işlevlerinin kullanıldığı örnekleriniz var.
Yeni Tuval Bağlamı BitmapRenderer
canvas
öğesi, grafikleri piksel düzeyinde değiştirmenize, grafikler çizmenize, fotoğrafları değiştirmenize ve hatta gerçek zamanlı video işleme yapmanıza olanak tanır.
Ancak boş bir canvas
ile başlamadığınız sürece canvas
üzerinde bir resim oluşturmak için bir yönteme ihtiyacınız vardır.
Geçmişte bu, bir image
etiketi oluşturup ardından içeriğini canvas
'da oluşturmak anlamına geliyordu. Maalesef bu, tarayıcının resmin birden fazla
kopyasını bellekte depolaması gerektiği anlamına gelir.
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
Chrome 66'dan itibaren, ImageBitmap
nesnelerinin görüntülenmesini kolaylaştıran yeni bir eşzamansız oluşturma bağlamı eklendi. Artık eşzamansız olarak çalışıp bellek yinelemesini önleyerek daha verimli bir şekilde ve daha az olumsuzlukla oluşturulurlar.
Bunu kullanmak için:
- Resmi oluşturmak için
createImageBitmap
numaralı telefonu arayın ve ona bir resim blob'u verin. canvas
öğesindenbitmaprenderer
bağlamını alın.- Ardından resmi içe aktarın.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
Bitti, resmi oluşturdum!
AudioWorklet
İş akışları kullanıma sunuldu! PaintWorklet, Chrome 65'te kullanıma sunulmuştur. Chrome 66'da varsayılan olarak AudioWorklet'i etkinleştiriyoruz. Bu yeni İş Akışı türü, ana iş parçacığında çalıştırılan eski ScriptProcessorNode'un yerine özel ses iş parçacığında sesi işlemek için kullanılabilir. Her AudioWorklet kendi küresel kapsamında çalışır. Böylece gecikmeyi azaltır ve işleme hızı kararlılığını artırır.
Google Chrome Labs'de bazı ilginç AudioWorklet örnekleri bulunmaktadır.
Diğer ölçütler
Bunlar, geliştiriciler için Chrome 66'da yapılan değişikliklerden sadece birkaçı, tabii ki çok daha fazlası var.
TextArea
veSelect
artıkautocomplete
özelliğini destekliyor.- Bir
form
öğesindeautocapitalize
ayarlama, tüm alt form alanlarına uygulanır ve Safari'ninautocapitalize
uygulamasıyla uyumluluğu iyileştirir. - Dizelerdeki boşlukları kaldırmanın standartlara dayalı bir yolu olarak artık
trimStart()
vetrimEnd()
kullanılabilir.
Chrome 66'da Geliştirici Araçları'ndaki yenilikleri öğrenmek için Chrome Geliştirici Araçları'ndaki yenilikler sayfasına göz atmayı unutmayın. Progresif Web Uygulamaları ile ilgileniyorsanız yeni PWA Roadshow video serisine göz atın. Ardından YouTube kanalımızdaki abone ol düğmesini tıklayın. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Ben Pete LePage. Chrome 67 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım.