Şunları bilmeniz gerekir:
- Container sorguları ve :has(), duyarlı bir şekilde oluşturulmuş bir eşleşmedir.
- Yeni Sanitizer API, siteler arası komut dosyası güvenlik açıklarını azaltmaya yardımcı olmak amacıyla rastgele dizeler için güçlü bir işlemci sağlar.
- Web SQL'i kullanımdan kaldırma yolunda bir adım daha atıyoruz.
- Daha fazlası da var.
Ben Pete LePage. Şimdi Chrome 105'te geliştiricilere yönelik yenilikleri görelim.
Kapsayıcı sorguları ve :has() CSS özelliği
En çok talep edilen özelliklerden biri olan kapsayıcı sorguları Chrome 105 sürümünde kullanıma sunuluyor. Geliştiricilerin, boyut ve stil bilgileri için bir üst seçiciyi sorgulayabilmelerini sağlayarak bir alt öğenin, sayfanın neresinde olursa olsun duyarlı stil mantığına sahip olmasını mümkün kılar.
Değerlendirmelerde görüntü alanının boyutu yerine kapsayıcının boyutu dikkate alınması dışında @media sorgusuna benzerler.
Kapsayıcı sorgularını kullanmak için bir üst öğede kapsamayı ayarlamanız gerekir. Örneğin, resim ve metin içeren bir kartınız olabilir.
Kapsayıcı sorgusu oluşturmak için kart kapsayıcıda container-type değerini ayarlayın.
container-type öğesinin inline-size olarak ayarlanması, üst öğenin inline-direction boyutunu sorgular.
.card-container {
container-type: inline-size;
}
Şimdi, bu kapsayıcıyı kullanarak @container kullanan alt öğelerine stil uygulayabiliriz.
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Bu durumda, kapsayıcı 400 pikselden küçük olduğunda tek bir sütun düzenine geçer.
CSS :has() sözde sınıfı
CSS :has() sözde sınıfıyla bunu bir adım öteye taşıyabilir. Bu özellik, bir üst öğenin belirli parametrelere sahip alt öğeler içerip içermediğini kontrol etmenize olanak tanır.
Örneğin p:has(span), içinde aralık bulunan bir paragraf seçiciyi gösterir. Bunu, üst paragrafın kendisini veya içindeki herhangi bir şeyi biçimlendirmek için kullanabilirsiniz. Alternatif olarak, başlık içeren bir figür öğesinin stilini belirlemek için figure:has(figcaption) kullanabilirsiniz.
p:has(span) {
/* magic styles */
}
figure:has(figcaption) {
/* this figure has a figcaption */
}
Daha ayrıntılı bir açıklama ve bazı eğlenceli demolar için Una'nın @container ve :has(): iki güçlü ve yeni duyarlı API makalesine göz atın.
Dezenfektan API'sı
Çoğu web uygulaması genellikle güvenilmeyen dizelerle ilgilenir, ancak bu içeriği güvenli bir şekilde oluşturmak zor olabilir. Yeterli dikkat olmazsa, yanlışlıkla siteler arası komut dosyası çalıştırma güvenlik açıkları için fırsatlar oluşturulabilir.
DomPurify gibi kitaplıklar yardımcı olmakla birlikte küçük bir bakım yükü de beraberinde getirir. HTML Sanitizer API, platforma temizleme işlemi oluşturarak siteler arası komut dosyası güvenlik açıklarının sayısını azaltmaya yardımcı olur.
Bunu kullanmak için yeni bir Sanitizer örneği oluşturun. Ardından, arındırılmış içeriği eklemek istediğiniz öğede setHTML() çağrısı yapın.
const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });
Sanitizer API, varsayılan olarak güvenli ve özelleştirilebilir olacak şekilde tasarlanmıştır. Bu sayede belirli öğeleri bırakmak veya diğerlerine izin vermek gibi farklı yapılandırma seçenekleri belirleyebilirsiniz.
const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);
Daha fazla ayrıntı için Sanitizer API ile Güvenli DOM işleme sayfasına göz atın.
Güvenli olmayan bağlamlar için Web SQL desteği sonlandırılıyor
Bir süre önce, Web SQL'i kullanımdan kaldırma planlarımızı duyurmuştuk. Chrome 105'ten itibaren güvenli olmayan bağlamlarda Web SQL desteği sonlandırılacaktır.
Güvenli olmayan bağlamlarda Web SQL kullanıyorsanız en kısa sürede IndexDB'ye veya başka bir yerel depolama alanı container'ına geçmelisiniz.
Diğer ölçütler
Elbette dahası var.
- Artık web uygulaması manifestini güncelleyerek hem masaüstünde hem de mobilde yüklü bir PWA'nın adını güncelleyebilirsiniz.
- Birden çok ekran penceresi yerleşimi API'si doğru ekran adı etiketleri alır.
- Pencere denetimleri yer paylaşımı API'sı artık kullanılabilir. Mevcut tam genişlikli başlık çubuğunu küçük bir yer paylaşımıyla değiştirerek PWA'ların daha fazla uygulama benzeri bir görünüm sunmasına olanak tanır. Bu, başlık çubuğu alanına özel içerik yerleştirmenize olanak tanır.
Daha fazla bilgi
Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 105'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.
- Chrome Geliştirici Araçları'ndaki yenilikler (105)
- Chrome 105 için kullanımdan kaldırma ve kaldırma işlemleri
- Chrome 105 için ChromeStatus.com güncellemeleri
- Chromium kaynak deposu değişiklik listesi
- Chrome sürüm takvimi
Abone ol
Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Ben Pete LePage. Chrome 106 yayınlanır yayınlanmaz size Chrome'daki yenilikleri duyurmak için burada olacağız!