Chrome 133'teki yenilikler

Rachel Andrew

Şunları bilmeniz gerekir:

CSS gelişmiş attr() işlevi

Bu özellik, CSS 5. Seviye'de belirtilen mevcut attr() işlevine yeni özellikler ekler. Bu, <string> dışındaki türlerin kullanılmasına ve tüm CSS özelliklerinde (sözde öğe içeriği için mevcut desteğin yanı sıra) kullanılmasına olanak tanır.

Aşağıdaki örnekte, div için color mülkünün değeri data-color özelliğindeki değeri kullanır. Bu özellik değeri, attr() ve type() kullanılarak <color> olarak ayrıştırılır. Yedek değer red olarak ayarlanmıştır.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

CSS attr() yükseltildi başlıklı makalede daha fazla bilgi edinin.

CSS kaydırma durumu kapsayıcı sorguları

Kapsayıcıların alt öğelerine kaydırma durumlarına göre stil uygulamak için kapsayıcı sorgularını kullanın.

Sorgu kapsayıcısı, bir kaydırma kapsayıcısı veya bir kaydırma kapsayıcının kaydırma konumundan etkilenen bir öğedir. Aşağıdaki eyaletler sorgulanabilir:

  • stuck: Yapışkan konumlandırılmış bir kapsayıcı, kaydırma kutusunun kenarlarından birine yapışmış.
  • snapped: Kaydırma sabitlemesi ile hizalanmış bir kapsayıcı şu anda yatay veya dikey olarak sabitlenmiştir.
  • scrollable: Bir kaydırma kapsayıcısının sorgulanan bir yönde kaydırılıp kaydırılamayacağı.

Yeni bir kapsayıcı türü: scroll-state, kapsayıcıların sorgulanması için kullanılır. Örneğin:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

CSS kaydırma durumu sorguları bölümünde daha fazla bilgi edinebilir ve bazı örnekleri görebilirsiniz.

CSS text-box, text-box-trim ve text-box-edge

text-box-trim mülkü, üst veya alt kısımların kırpılacağı tarafları belirtir. text-box-edge mülkü ise kenarların nasıl kırpılacağını belirtir.

Bu özellikler, yazı tipi metriklerini kullanarak dikey aralığı hassas bir şekilde kontrol etmenize olanak tanır.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Bu yeni özellikleri CSS text-box-trim'de nasıl kullanacağınızı öğrenin.

Diğer özellikler

Elbette daha birçok özellik var.

  • Animation.overallProgress, bir animasyonun iterasyonlarında ne kadar ilerlediğini ve zaman çizelgesinin yapısına bakılmaksızın size kullanışlı ve tutarlı bir temsil sunar.
  • Node.prototype.moveBefore, öğenin durumunu sıfırlamadan öğeleri bir DOM ağacında taşımanıza olanak tanır.
  • FileSystemObserver arayüzü, web sitelerini dosya sistemindeki değişikliklerden haberdar eder.
  • PublicKeyCredential getClientCapabilities() yöntemi, kullanıcının istemcisi tarafından hangi WebAuthn özelliklerinin desteklendiğini belirlemenize olanak tanır.

Bu ve Chrome'daki diğer yeni özelliklerin ayrıntıları için Chrome 133 sürüm notlarının tamamını inceleyin.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 133'teki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Chrome 133 yayınlanır yayınlanmaz Chrome'daki yenilikleri buradan duyuracağız.