Chrome 90'daki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

  • CSS overflow özelliği için yeni bir değer var.
  • Feature Policy API, Permissions Policy (İzin 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 mevcut.

Ben Pete LePage. Chrome 90'daki geliştiriciler için bilgileri paylaşacağım. 1990'ların tarzıyla devam ediyoruz.

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;
}
Metin içeren kare kutu CSS'si harika.

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, klibin kenarlığını genişletmenize olanak tanıyan overflow-clip-margin simgesini de kullanabilirsiniz. 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, sizinle 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 Feature Policy API, Permissions Policy olarak yeniden adlandırılacak ve HTTP başlığı da onunla birlikte yeniden adlandırıldı. 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'

Bu özelliği sitenizde nasıl kullanacağınızı öğrenmek istiyorsanız Özellik Politikası'na Giriş başlıklı makaleyi inceleyin.

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 yöntem, istemci tarafı oluşturma için iyi sonuç verir ancak sunucu tarafından oluşturulan HTML'de Gölge Kökleri'ni ifade etmenin yerleşik bir yolu olmadığından sunucu tarafı oluşturma için pek iyi sonuç vermez. Ancak Chrome 90'dan itibaren, beyansal gölge DOM ile çalışmaya başlayabilirsiniz. Yalnızca HTML kullanarak gölge kökleri oluşturabilirsiniz.

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ı makaleye göz atın.

Başka pek çok bilgi

Elbette daha birçok özellik var.

Chrome'un adres çubuğu, HTTPS'yi destekleyen siteleri ziyaret eden kullanıcıların gizliliğini ve hatta 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 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ılara göz atın.

Abone ol

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.

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

Özel bir teşekkür

Chrome'daki Yenilikler serisinin 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
  • Nick Krusick
  • Chris Walker

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.