Chrome 118'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 118'in geliştiricilere yönelik yenilikleri inceleyelim.

CSS @scope kuralı.

@scope kuralı, geliştiricilerin stil kurallarını belirli bir kapsam köküne kapsamasına ve öğeleri bu kapsam kökünün yakınlığına göre biçimlendirmesine olanak tanır.

@scope ile stilleri yakınlığa göre geçersiz kılabilirsiniz. Bu stil, yalnızca kaynak sıralamasına ve belirliliğe bağlı olarak uygulanan olağan CSS stillerinden farklıdır. Aşağıdaki örnekte iki tema bulunmaktadır.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

kapsam dışında kalan son stil, uygulanan stil bildirilen son stildir.

@scope olmadan
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

İki bağlantı. İlki &#39; Ben açık pembeyim!&#39;, ikincisi &#39;Farklı pembe&#39; yazıyor. Her iki bağlantı da aslında açık pembedir, bağlantıların metninin altındaki kaynak sırası bildiri stili okunmaktadır.

Kapsamla, iç içe yerleştirilmiş öğeleriniz olabilir ve geçerli olan stil en yakın üst öğe için geçerli olan stildir.

@scope ile
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

İki bağlantı. Biri &quot;açık pembeyim!&quot;, ikincisi ise &quot;Farklı pembe&quot; yazıyor. İkinci bağlantıda ise en yakın üst stildeki bağlantılar metninin altındaki koyu pembe ve yanında yeşil onay işareti bulunuyor.

Kapsam; sizi uzun, karmaşık sınıf adları yazmaktan kurtarır, daha büyük projeleri yönetmenizi ve adlandırma çakışmalarını önlemenizi kolaylaştırır.

@scope olmadan
<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}
@scope ile
<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

Kapsam sayesinde, iç içe yerleştirilmiş belirli öğelerin stilini belirlemeden bir bileşenin stilini belirleyebilirsiniz. Bir şekilde, kapsama alınan stilin geçerli olmadığı "delikler" oluşturabilirsiniz.

Aşağıdaki örnekte olduğu gibi metne stil uygulayıp denetimleri hariç tutabilir veya bunun tersini yapabiliriz.

kapsamdaki kelimelerin birinci ve üçüncü div&#39;in yanında, ikinci ve dördüncü div&#39;in yanında hariç tutularak yukarıdaki html&#39;nin temsilidir.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

Daha fazla bilgi için Seçicilerinizin erişimini CSS @scope at-rule ile sınırlama makalesine göz atın.

prefers-reduced-transparency medya özelliği

Medya sorgularını, kullanıcı tercihlerine ve cihaz koşullarına uyum sağlayan kullanıcı deneyimleri sunmak için kullanırız. Bu Chrome sürümü, kullanıcı deneyimini uyarlamak için kullanılabilecek yeni bir değer ekliyor: prefers-reduced-transparency.

Medya sorgularıyla test edebileceğiniz yeni bir değer olan prefers-reduced-transparency, geliştiricilerin OS'de daha az şeffaflık sağlamak için web içeriğini kullanıcının seçtiği tercihe göre uyarlamasına olanak tanır (ör. macOS'teki Saydamlığı azalt ayarı). Geçerli seçenekler: reduce veya no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Aracın nasıl göründüğünü Geliştirici Araçları'ndan da kontrol edebilirsiniz:

Daha fazla bilgi için prefers-reduced-transparency dokümanına göz atın.

Düzeltme: Bu makalenin önceki bir sürümünde, bu sürümde kullanıma sunulan yeni bir scripting medya özelliğine atıfta bulunuluyordu. 120 sürümünde olacaktır.

Geliştirici Araçları'nda kaynaklar paneli iyileştirmeleri

Geliştirici Araçları, Kaynaklar panelinde şu iyileştirmelere sahiptir: Çalışma alanı özelliği tutarlılığı iyileştirmiştir. En önemlisi de Kaynaklar > Dosya sistemi bölmesinin Çalışma Alanı olarak yeniden adlandırılması ve diğer kullanıcı arayüzü metinleriyle birlikte Kaynaklar > Çalışma Alanı, Geliştirici Araçları'nda yaptığınız değişiklikleri doğrudan kaynak dosyalarınızla senkronize etmenize de olanak tanır.

Ayrıca, artık Kaynaklar panelinin sol tarafındaki bölmeleri sürükleyip bırakarak yeniden sıralayabilirsiniz. Kaynaklar paneli artık şu komut dosyası türlerinde satır içi JavaScript'i düzgün bir şekilde yazdırabilir: module, importmap, speculationrules ve her ikisi de JSON içeren importmap ve speculationrules komut dosyası türlerinin söz dizimini vurgulayabilir.

Kolay yazdırılmadan önce ve sonra, tahmin kuralları komut dosyası türünün söz dizimi vurgulaması.

Chrome 118 Geliştirici Araçları güncellemeleri hakkında daha fazla bilgi için Geliştirici Araçları'ndaki Yenilikler sayfasına göz atın.

Diğer ölçütler

Elbette dahası var.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 118'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

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.

Merhaba Adriana Jara, Chrome 119 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!