Chrome 105'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

• Kapsayıcı sorguları ve :has(), cennet gibidir.
• Yeni Sanitizer API, kullanıcıların siteler arası komut dosyası çalıştırma güvenlik açıklarını azaltmaya yardımcı olacak rastgele dizeler kullanılır.
• Web SQL'i kullanımdan kaldırmaya yönelik bir adım daha atıyoruz.
• Daha çok seçenek var.

Ben Pete LePage. Şimdi konuya girelim ve Chrome 105'te geliştiriciler için sunulan yeniliklere göz atın.

Kapsayıcı sorguları ve :has() CSS mülkü

En çok talep edilen özelliklerden biri olan kapsayıcı sorguları Chrome 105. Geliştiricilerin, bir üst seçiciyi boyut ve Böylece, bir alt öğenin kendi sayfa üzerinde nerede olursa olsun duyarlı bir stil oluşturma mantığına sahiptir.

Medya sorgusuna göre değerlendirilmeleri dışında, @medya sorgusuna benzerler. görüntü alanının boyutu yerine bir kapsayıcı olarak kabul edilir.

Kapsayıcı sorgularını kullanmak için kapsama alanını bir üst öğede 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ısında container-type değerini ayarlayın. container-type politikası inline-size değerine ayarlanırsa inline-direction sorgusu üst öğe boyutuna göre değişir.

.card-container {
  container-type: inline-size;
}

Artık bu kapsayıcıyı kullanarak alt öğelere stil uygulamak için @container

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Bu durumda, kapsayıcı 400 pikselden az olduğunda tek sütunlu düzen.

CSS :has() sözde sınıfı

CSS :has() sözde sınıfıyla bunu bir adım daha ileri götürebiliriz. Google bir üst öğenin belirli özelliklere sahip alt öğeler içerip içermediğini kontrol etmenizi parametreleridir.

Örneğin, p:has(span), içinde aralık bulunan bir paragraf seçiciyi gösterir öğreneceğiz. Bunu üst paragrafın kendisinin stilini belirlemek için kullanabilirsiniz bir bilgidir. Alternatif olarak, bir şekil öğesinin stilini belirlemek için figure:has(figcaption) kullanabilirsiniz açıklama içerir.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Una'nın makalesine göz atın @container ve :has(): İki güçlü yeni duyarlı API daha ayrıntılı bir açıklama ve bazı eğlenceli demolar var.

Sanitizer API'si

Çoğu web uygulaması genellikle güvenilir olmayan dizelerle çalışır. Ancak bu dizeleri güvenli bir şekilde içeriği karmaşık olabilir. Yeterli bakım olmadan yanlışlıkla siteler arası komut dosyası çalıştırma güvenlik açıkları için fırsatlar oluşturur.

Bu konuda yardımcı olan DomPurify gibi kitaplıklar vardır, ancak daha küçük bir yük olabilir. HTML Sanitizer API, kullanıcılarımızın deneyimini Siteler arası komut dosyası oluşturma ile ilgili güvenlik açıkları için platforma temizlik uygulayın.

Kullanmak için yeni bir Sanitizer örneği oluşturun. Ardından, şu telefondan setHTML() adlı kuruluşu arayın: öğesi için bir alt öğe seçin.

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 olacak ve özelleştirilebilir, yapılandırma seçenekleri belirlemenize olanak tanır. Örneğin, rol oynar hale getirebilirsiniz.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Sanitizer API ile güvenli DOM değiştirme başlıklı makaleye göz atın inceleyebilirsiniz.

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. Başlamak için kalan süre: Chrome 105, güvenli olmayan bağlamlarda Web SQL desteği sonlandırılacak.

Web SQL'i güvenli olmayan bağlamlarda kullanıyorsanız IndexDB'ye geçmeniz ve veya başka bir yerel depolama konteyneri.

Diğer özellikler

Tabii ki çok daha fazlası var.

• Artık hem masaüstü hem de mobil cihazlarda yüklü bir PWA'nın adını güncelleyebilirsiniz web uygulaması manifest dosyasını güncelleyerek.
• Çok ekranlı pencere yerleşimi API'si doğru ekran adı etiketleri alır.
• Pencere denetimleri yer paylaşımı API'si artık kullanılabilir. PWA'ların uygulamaya benzer daha fazla hissi veren bir küçük bir yer paylaşımı. Bu, başlık çubuğu alanına özel içerik yerleştirmenize olanak tanır.

Daha fazla bilgi

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. Aşağıdaki bağlantıları ziyaret ederek Chrome 105'teki ek değişiklikler.

• Chrome Geliştirici Araçları'ndaki yenilikler (105)
• Chrome 105 için desteği sonlandı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 şu yayına abone olun: Chrome Developers YouTube kanalı Yeni bir video yayınladığımızda size e-posta bildirimi göndereceğiz.

Ben Pete LePage. Chrome 106 yayınlanır yayınlanmaz sizlerle Chrome'daki yenilikler neler?