Ş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 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; }
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.
- Chrome Geliştirici Araçları'ndaki yenilikler (90)
- Chrome 90 için desteğin sonlandırılması ve kaldırılması
- Chrome 90 için ChromeStatus.com güncellemeleri
- Chrome 90'da JavaScript'teki yenilikler
- Chromium kaynak deposu değişiklik listesi
Abone ol
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!