Baru di Chrome 118

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari kita lihat apa saja yang baru untuk developer di Chrome 118.

Aturan @scope CSS.

Aturan at @scope memungkinkan developer menentukan cakupan aturan gaya ke root cakupan tertentu, dan menata gaya elemen sesuai dengan kedekatan root cakupan tersebut.

Dengan @scope, Anda dapat mengganti gaya berdasarkan kedekatan, yang berbeda dengan gaya CSS biasa yang diterapkan hanya dengan mengandalkan urutan dan kekhususan sumber. Dalam contoh berikut, ada dua tema.

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

tanpa cakupan, gaya yang diterapkan adalah gaya terakhir yang dideklarasikan.

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

Dua link, yang pertama bertuliskan &#39;Aku merah muda!&#39; yang kedua bertuliskan &#39;Merah muda berbeda&#39;, kedua link sebenarnya merah muda muda, di bawah teks link bertuliskan gaya deklarasi sumber.

Dengan cakupan, Anda dapat memiliki elemen bertingkat dan gaya yang diterapkan adalah gaya untuk ancestor terdekat.

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

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

Dua link, yang pertama bertuliskan &#39;&#39;I&#39;&#39;m lightpink!&#39;&#39;, yang kedua bertuliskan &#39;Different pink&#39;, link kedua berwarna merah muda lebih gelap, di bawah teks link gaya ancestor terdekat dan memiliki tanda centang hijau di sampingnya.

Cakupan juga menghemat Anda dari menulis nama class yang panjang dan berbelit-belit, serta memudahkan pengelolaan project yang lebih besar dan menghindari konflik penamaan.

Tanpa @scope
<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;
}
Dengan @scope
<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;
  }
}

Dengan cakupan, Anda juga dapat menata gaya komponen tanpa menata gaya hal-hal tertentu yang bertingkat di dalamnya. Dengan cara ini, Anda dapat memiliki “lubang” tempat gaya cakupan tidak berlaku.

Seperti pada contoh berikut, kita dapat menerapkan gaya ke teks dan mengecualikan kontrol atau sebaliknya.

representasi html di atas, dengan kata dalam cakupan di samping div pertama dan ketiga serta kata yang dikecualikan di samping div kedua dan keempat.

<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;
  }
}

Lihat artikel Membatasi jangkauan pemilih dengan aturan @scope CSS untuk mengetahui informasi selengkapnya.

prefers-reduced-transparency fitur media

Kami menggunakan kueri media untuk memberikan pengalaman pengguna yang beradaptasi dengan preferensi pengguna dan kondisi perangkat. Versi Chrome ini menambahkan nilai baru yang dapat digunakan untuk menyesuaikan pengalaman pengguna: prefers-reduced-transparency.

Nilai baru yang dapat Anda uji dengan kueri media adalah prefers-reduced-transparency yang memungkinkan developer menyesuaikan konten web dengan preferensi yang dipilih pengguna untuk mengurangi transparansi di OS, seperti setelan Kurangi transparansi di macOS. Opsi yang valid adalah reduce atau no-preference.

.translucent {
  opacity: 0.4;
}

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

Dan, Anda dapat memeriksa tampilannya dengan DevTools:

Untuk informasi selengkapnya, lihat dokumentasi prefers-reduced-transparency.

Koreksi: Versi sebelumnya dari artikel ini merujuk pada fitur media scripting baru yang ada dalam rilis ini. Fitur ini sebenarnya akan tersedia di versi 120.

Peningkatan panel Sumber di DevTools

DevTools memiliki peningkatan berikut di panel Sources: fitur workspace meningkatkan konsistensi, terutama, dengan mengganti nama panel Sources > Filesystem menjadi Workspace bersama dengan teks UI lainnya, Sources > Workspace juga memungkinkan Anda menyinkronkan perubahan yang dibuat di DevTools langsung ke file sumber.

Selain itu, Anda kini dapat mengurutkan ulang panel di sisi kiri panel Sumber dengan menarik lalu melepas, dan panel Sumber kini dapat mencetak JavaScript inline dengan rapi dalam jenis skrip berikut: module, importmap, speculationrules dan menandai sintaksis jenis skrip importmap dan speculationrules, yang keduanya menyimpan JSON.

Sebelum dan sesudah pencetakan yang rapi dan penyorotan sintaksis jenis skrip aturan spekulasi.

Lihat Yang Baru di DevTools untuk mengetahui informasi selengkapnya tentang update DevTools Chrome 118.

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 118.

Langganan

Untuk terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Yo soy Adriana Jara, dan segera setelah Chrome 119 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.