Baru di Chrome 118

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat hal-hal baru untuk developer di Chrome 118.

Aturan @scope CSS.

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

Dengan @scope, Anda dapat mengganti gaya berdasarkan kedekatan, yang berbeda dari gaya CSS biasa yang diterapkan hanya dengan mengandalkan urutan sumber dan kekhususan. Pada 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 yang terakhir dideklarasikan.

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

Dua tautan, yang pertama bertuliskan &#39;Saya merah muda!&#39; yang kedua bertuliskan &#39;Merah muda berbeda&#39;, kedua tautan sebenarnya berwarna merah muda muda, di bawah teks tautan membaca gaya pernyataan urutan sumber.

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

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

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

Dua link, yang pertama bertuliskan &#39;&#39;Saya merah muda!&#39;&#39; yang kedua bertuliskan &#39;Merah muda berbeda&#39;, link kedua berwarna merah muda lebih gelap di bawah gaya teks link ancestor terdekat dan memiliki tanda centang hijau di sampingnya.

Cakupan juga menghindarkan Anda dari menulis nama class yang panjang dan rumit, 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 @cakupan
<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 berada di dalamnya. Anda dapat memiliki "lubang" dengan gaya cakupan tidak berlaku.

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

dari html di atas, dengan kata-kata yang berada dalam ruang lingkup di samping div pertama dan ketiga dan kata dikecualikan di sebelah 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;
  }
}

Baca artikel Membatasi jangkauan pemilih Anda dengan @scope at-rule 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;
  }
}

Anda juga dapat memeriksa tampilannya dengan DevTools:

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

Koreksi: Versi sebelumnya dari artikel ini merujuk ke fitur media scripting baru yang ada dalam rilis ini. Aplikasi tersebut akan menggunakan 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 teks UI lainnya, Sources > Workspace juga memungkinkan Anda menyinkronkan perubahan yang Anda buat di DevTools langsung ke file sumber.

Selain itu, kini Anda dapat menyusun ulang panel di sisi kiri panel Sources dengan menarik lalu melepas, dan panel Sources kini dapat mencetak cukup JavaScript inline dalam jenis skrip berikut: module, importmap, speculationrules serta menyoroti sintaksis jenis skrip importmap dan speculationrules, yang keduanya menyimpan JSON.

Sebelum dan sesudah {i>pre-printing<i} dan penyorotan sintaksis pada jenis skrip aturan spekulasi.

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 118.

Langganan

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

Halo Adriana Jara, dan segera setelah Chrome 119 dirilis, saya akan langsung memberi tahu Anda apa yang baru di Chrome!