Chrome 90'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • CSS overflow özelliği için yeni bir değer eklendi.
  • Feature Policy API, İzinler Politikası olarak yeniden adlandırıldı.
  • Ayrıca gölge DOM'u doğrudan HTML'de uygulamanın ve kullanmanın yeni bir yolu var.
  • 1990'larda neredeyse bunun gibi birkaç ceketim vardı.
  • Daha birçok özellik de var.

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

overflow: clip ile taşmayı önleme

CSS IS AWESOME

CSS neymiş böyle! Ancak her web geliştiricisinin bir noktada taşkınlık yapan bir şey gördüğünü ve yaşadığını düşünüyorum. CSS Tricks'te, overflow: hidden veya auto gibi taşmayı yönetmenin farklı yolları hakkında harika bir makale var.

CSS Overflow Spec'te, hidden'a benzer şekilde çalışan yeni bir clip mülkü vardır.

.overflow-clip {
  overflow: clip;
}
Kalıpların dışına taştığı için CSS metinli kare kutu çok güzel bir şey

overflow: clip kullanarak kutunun programlı kaydırma dahil her türlü kaydırmasını engelleyebilirsiniz. Yani kutu, kaydırma kapsayıcısı olarak kabul edilmez ve 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 var. Bu, görünür olması gereken mürekkep taşması olduğunda yararlıdır.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Metin içeren kare kutu CSS'si harika.

overflow: clip'ü https://petele-css-is-awesome.glitch.me/ adresinde görebilirsiniz.

Özellik Politikası artık İzin Politikası olarak adlandırılıyor

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 sunduk. Bu politikalar, siz ve tarayıcı arasında bir sözleşmedir. Tarayıcıya amacınızı bildirirler.

Kodunuz veya kullandığınız üçüncü taraf kitaplıklardan herhangi biri önceden seçilmiş kurallarınızı ihlal ederse tarayıcı, davranışı daha iyi bir kullanıcı deneyimiyle geçersiz kılar ya da API'yi tamamen engelleyerek "kendinle konuş" der.

Chrome 90'dan itibaren Özellik Politikası API'sinin adı İzinler Politikası ve HTTP başlığıyla birlikte yeniden adlandırılacak. Aynı zamanda, topluluk HTTP için Yapılandırılmış Alan Değerlerine dayalı yeni bir söz dizimi üzerinde karar kıldı.

Chrome 90 ve sonraki sürümler

Permissions-Policy: geolocation=()

Chrome 89 ve önceki sürümler

Feature-Policy: geolocation 'none'

Bunu sitenizde nasıl kullanacağınızla ilgileniyorsanız Özellik Politikasına Giriş bölümüne göz atın.

Bildirimsel Gölge DOM

Web Bileşenleri standardının bir parçası olan gölge DOM, CSS stillerini belirli bir DOM alt ağacı için kapsama alma ve bu alt ağacı dokümanın geri kalanından izole etme olanağı sunar. 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 iyi sonuç verir ancak sunucu tarafından oluşturulan HTML'de Gölge Kökleri ifade edecek yerleşik bir yöntemin olmadığı sunucu tarafı oluşturmada pek iyi sonuç vermez. Ancak Chrome 90'dan itibaren Bildirimsel Gölge DOM'yi kullanabilirsiniz. Gölge kökleri oluşturmak için yalnızca HTML kullanabilirsiniz.

Açıklayıcı Gölge Kök, shadowroot özelliğine sahip bir <template> öğesidir. HTML ayrıştırıcısı tarafından algılanır 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>

Saf HTML işaretlemesini yüklemek, aşağıdaki DOM ağacıyla sonuçlanır:

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

Bu sayede, statik HTML'de gölge DOM'un kapsayıcı özelliğinden ve slot projeksiyonundan yararlanabiliriz. Gölge kökü dahil olmak üzere ağacın tamamını oluşturmak için JavaScript gerekmez.

Daha fazla bilgi için web.dev'deki Declarative Shadow DOM (Bildirimsel Gölge DOM) başlıklı makaleyi inceleyin.

Başka pek çok bilgi

Elbette daha birçok özellik var.

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

Ayrıca, Chrome masaüstünde WebRTC entegrasyonuyla video konferans için özel olarak optimize edilmiş bir AV1 kodlayıcı kullanıma sunulmuştur.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 90'daki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

Abone ol

En son videolarımızı kaçırmamak için Chrome Geliştiricileri YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

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

Özel bir teşekkür

Chrome'da Yeni'nin 1990'lar temalı bu bölümünü çekerken çok eğlendim. Fikir için ve 1990'a zaman yolculuğu yapmamıza yardımcı olan muhteşem kişileri bir araya getiren Sean Meehan'a çok teşekkür ederiz.

GDS Design

  • Fola Akinola
  • Derek Bass
  • Christopher Bodel
  • Kişi adı 1
  • Chris Gezgin

Ses Tasarımı ve Ek Müzik

  • Bryan Gordon

Tabii ki Chrome'daki Yenilikler videolarımın tamamında çalışan ve beni olduğundan çok daha iyi gösteren Loren Borja, Lee Carruthers ve Lukas Holcek'e de teşekkürler.