Chrome 133'teki yenilikler

Rachel Andrew

Şunları bilmeniz gerekir:

CSS gelişmiş attr() işlevi

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

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

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

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

Daha fazla bilgiyi CSS attr() yükseltiliyor başlıklı makalede bulabilirsiniz.

CSS kaydırma durumu kapsayıcı sorguları

Kapsayıcı sorgularını kullanarak kapsayıcıların alt öğelerini kaydırma durumlarına göre stilize edin.

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

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

Yeni bir kapsayıcı türü: scroll-state kapsayıcıların sorgulanmasına olanak tanır. Örneğin:

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

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

Daha fazla bilgi edinin ve CSS kaydırma durumu sorguları bölümünde bazı demoları inceleyin.

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

text-box-trim özelliği, yukarıda veya aşağıda kırpılacak kenarları, text-box-edge özelliği ise kenarın nasıl kırpılacağını belirtir.

Bu özellikler, yazı tipi metriklerini kullanarak dikey aralığı hassas bir şekilde kontrol etmenizi sağlar.

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'de text-box-trim nasıl kullanacağınızı öğrenin.

Diğer özellikler

Elbette daha pek çok özellik var.

  • Animation.overallProgress, bir animasyonun yinelemeleri boyunca ve zaman çizelgesinin yapısından bağımsız olarak ne kadar ilerlediğini kolay ve tutarlı bir şekilde gösterir.
  • Node.prototype.moveBefore, öğenin durumunu sıfırlamadan öğeleri bir DOM ağacında taşımanıza olanak tanır.
  • FileSystemObserver arayüzü, dosya sisteminde yapılan değişiklikleri web sitelerine bildirir.
  • PublicKeyCredential getClientCapabilities() yöntemi, kullanıcının istemcisi tarafından hangi WebAuthn özelliklerinin desteklendiğini belirlemenize olanak tanır.

Chrome'daki bu ve diğer birçok yeni özellik hakkında ayrıntılı bilgi edinmek için Chrome 133 sürüm notlarının tamamını inceleyin.

Daha fazla bilgi

Bu özet yalnızca bazı önemli noktaları kapsar. Chrome 133'teki ek 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 size bildirmek için buradayız.