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

Chrome 90'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

CSS overflow özelliğine yeni bir değer eklendi.
Feature Policy API, İzin Politikası olarak yeniden adlandırıldı.
Gölge DOM'u doğrudan HTML'de uygulamanın ve kullanmanın yeni bir yolu daha var.
1990'larda hemen hemen aynı şekilde birkaç ceketim vardı.
Ve çok daha fazlası da var.

Ben Pete LePage. Chrome 90'daki geliştiriciler için 411'i, 1990'ların tarzında yapıyorum!

`overflow: clip` ile taşmayı önleyin

CSS MUHTEŞEM

CSS hepsi bu kadar. Ama bence her web geliştiricisi, bir noktada tuhaf olarak taşan bir şey görmüş ve yaşamıştır. CSS Püf Noktaları'nda, overflow: hidden veya auto gibi taşma sorununu çözmenin farklı yolları ile ilgili harika bir yayın bulunmaktadır.

CSS Taşma Spesifikasyonu'nda, hidden ile benzer şekilde çalışan yeni bir clip özelliği bulunmaktadır.

.overflow-clip {
  overflow: clip;
}

Kutudan taşan mükemmel kutucuklar için CSS metin içeren kare kutu

overflow: clip kullanıldığında, programlı kaydırma da dahil olmak üzere kutu için her türlü kaydırmayı önlemeniz mümkün olur. Bu, kutunun bir kaydırma kapsayıcısı olarak kabul edilmediği anlamına gelir; yeni bir biçimlendirme bağlamı başlatmaz. Gerekirse overflow-x ve overflow-y aracılığıyla tek bir eksene kırpma uygulayabilirsiniz.

Ayrıca, klip kenarlığını genişletmenizi sağlayan overflow-clip-margin seçeneği de vardır. Bu, görünür olması gereken mürekkep taşması durumlarında faydalıdır.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

https://petele-css-is-awesome.glitch.me/ adresinde overflow: clip uygulamasının nasıl çalıştığını görün

Özellik Politikası, İzin Politikası olarak değiştirilmiştir

Chrome 74'te, tarayıcıdaki belirli API'lerin ve web özelliklerinin davranışını seçerek etkinleştirmenize, devre dışı bırakmanıza ve değiştirmenize olanak tanıyan Feature Policy API'yi kullanıma sunmuştuk. Bu politikalar, sizinle tarayıcı arasındaki bir sözleşmedir. Tarayıcıyı amacınızın ne olduğu konusunda bilgilendirir.

Kodunuz veya kullandığınız üçüncü taraf kitaplıklarından herhangi biri önceden seçilmiş kurallarınızı ihlal ederse tarayıcı bu davranışı daha iyi bir kullanıcı deneyimiyle geçersiz kılar ya da sadece "söz gelimi" diyerek API'yi tamamen engeller.

Chrome 90'dan itibaren Feature Policy API'nin adı İzin Politikası ve HTTP üstbilgisiyle birlikte yeniden adlandırıldı. Aynı zamanda topluluk, HTTP için Yapılandırılmış Alan Değerlerine dayalı yeni bir söz diziminde alıştı.

Chrome 90 ve sonraki sürümler

Permissions-Policy: geolocation=()

Chrome 89 ve önceki sürümler

Feature-Policy: geolocation 'none'

Sitenizde bunu nasıl kullanacağınızı öğrenmek istiyorsanız Özellik Politikasına Giriş sayfasına göz atın.

Bildirim Temelli Gölge DOM

Web Bileşenleri standardının bir parçası olan gölge DOM, CSS stillerini belirli bir DOM alt ağacına dahil etmek ve bu alt ağacı belgenin geri kalanından izole etmek için bir yol sunar. Şimdiye kadar Gölge DOM'u kullanmanın tek yolu JavaScript kullanarak bir gölge kökü oluşturmaktı.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Bu, istemci tarafı oluşturmada işe yarar, ancak sunucu tarafından oluşturulan HTML'de Gölge Kökleri ifade etmek için yerleşik bir yöntemin bulunmadığı sunucu tarafı oluşturmada pek iyi sonuç vermez. Ancak, Bildirimli Gölge DOM ile Chrome 90'dan itibaren hazırsınızdır. Gölge kökleri oluşturmak için yalnızca HTML kullanabilirsiniz.

Bildirim Temelli Gölge Kökü, shadowroot özelliğine sahip bir <template> öğesidir. HTML ayrıştırıcı tarafından tespit edilir ve hemen üst öğesinin gölge kökü olarak uygulanır.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Sadece HTML işaretlemesi yüklendiğinde bu DOM ağacında sonuçlar:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Bu, Shadow DOM'un statik HTML içinde kapsülleme ve alan projeksiyonu avantajlarının avantajlarını sağlar. Gölge Kökü de dahil olmak üzere, ağacın tamamını üretmek için JavaScript'e gerek yoktur.

Daha fazla ayrıntı için web.dev'de Declarative Shadow DOM (Declartif Gölge DOM) sayfasına göz atın.

Daha birçok avantaj

Elbette dahası da var.

Chrome'un adres çubuğu, HTTPS'yi destekleyen siteleri ziyaret eden kullanıcılar için gizliliğin yanı sıra yükleme hızlarını iyileştirmeye yardımcı olmak için varsayılan olarak https:// kullanır. HTTP'den HTTPS'ye otomatik yönlendirme ayarlamadıysanız şimdi bunu yapmanın tam zamanı.

WebRTC entegrasyonuyla video konferans için özel olarak optimize edilmiş Chrome masaüstünde AV1 kodlayıcı da kullanıma sunuluyor.

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 90'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Videolarımızla ilgili güncel bilgileri almak isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

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

Özel anma

New in Chrome'un 1990'lar temalı bu bölümünü çekerken çok eğlendim. Fikir ve 1990'a kadar zaman atlamasının açılmasına yardımcı olan harika insanları bir araya getirdiği için Sean Meehan'a çok teşekkür ederiz.

GDS Tasarımı

Fola Akinola Dili
Derek Bas
Christopher Bodel
Nick Krusick
Can Gezgin

Ses Tasarımı ve Ek Müzik

Burçin Bilgili

Tabii ki tüm Chrome'daki Yeni videolarımda çalışan Lören Borja, Lee Carruthers ve Lukas Holcek, beni olduğumdan çok daha iyi bir görünüme kavuşturuyor. TEŞEKKÜRLER!