Baru di Chrome 118

Adriana Jara

Berikut hal yang perlu Anda ketahui:

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

Aturan @scope CSS.

@scope at-rule 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 dari gaya CSS biasa yang diterapkan hanya dengan mengandalkan urutan sumber dan kekhususan. 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 tautan, yang pertama bertuliskan &#39; Aku berwarna merah muda!&#39; yang kedua bertuliskan &#39;Merah muda berbeda&#39;, kedua tautan sebenarnya merah muda terang, di bawah teks tautan berbunyi gaya deklarasi sumber.

Dengan cakupan, Anda dapat memiliki elemen bertingkat dan gaya yang berlaku 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;m lightpink!&#39;&#39; yang kedua bertuliskan &#39;Merah muda berbeda&#39;, link kedua berwarna merah muda lebih gelap, di bawah teks link gaya ancestor terdekat dan memiliki tanda centang hijau di sampingnya.

Dengan ruang lingkup, Anda tidak perlu lagi menulis nama class yang panjang dan berbelit-belit, serta memudahkan Anda mengelola 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 berada di dalamnya. Dengan cara ini, Anda dapat memiliki "lubang" tempat gaya cakupan tidak berlaku.

Seperti dalam contoh berikut, kita bisa menerapkan gaya ke teks dan mengecualikan kontrol atau sebaliknya.

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

Lihat artikel Membatasi jangkauan pemilih Anda dengan CSS @scope at-rule untuk informasi selengkapnya.

Fitur media prefers-reduced-transparency

Kami menggunakan kueri media untuk memberikan pengalaman pengguna yang beradaptasi dengan preferensi dan kondisi perangkat pengguna. 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 mengetahui informasi selengkapnya, lihat dokumentasi preferensi-reduced-transparency.

Koreksi: Versi sebelumnya dari artikel ini merujuk ke fitur media scripting baru yang ada dalam rilis ini. Versi tersebut sebenarnya adalah 120.

Peningkatan panel sumber di DevTools

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

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

Sebelum dan setelah pencetakan normal dan penyorotan sintaksis jenis skrip aturan spekulasi.

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

Dan banyak lagi!

Tentu saja masih banyak lagi.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa tautan di bawah untuk perubahan tambahan di Chrome 118.

Langganan

Untuk mendapatkan info terbaru, berlangganan Channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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