ใหม่ใน Chrome 118

Adriana Jara

สิ่งที่จำเป็นต้องทราบมีดังนี้

ฉันชื่อ Adriana Jara เรามาเจาะลึกและดูว่ามีอะไรใหม่ใน Chrome 118 กันบ้าง

กฎ CSS @scope

โดยกฎ @scope จะช่วยให้นักพัฒนาแอปกำหนดขอบเขตกฎรูปแบบไปยังรูทที่กำหนดขอบเขตที่ระบุ และองค์ประกอบรูปแบบตามระยะห่างของรากที่กำหนดขอบเขตนั้นได้

คุณสามารถใช้ @scope เพื่อลบล้างรูปแบบตามความใกล้เคียงกัน ซึ่งต่างจากรูปแบบ CSS ทั่วไปที่ใช้เฉพาะลำดับแหล่งที่มาและความจำเพาะเท่านั้น ในตัวอย่างต่อไปนี้ มี 2 ธีม ได้แก่

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

ไม่มีขอบเขต สไตล์ที่ใช้จะเป็นแบบที่ประกาศล่าสุด

ไม่มี @scope
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

ลิงก์สองลิงก์ ลิงก์แรกระบุว่า &#39; ฉันคือชมพูอ่อน! ลิงก์ที่สองเขียนว่า &#39;สีชมพูที่แตกต่างกัน&#39; จริงๆ แล้วลิงก์ทั้งสองเป็นสีชมพูอ่อน ภายใต้ข้อความลิงก์จะอ่านรูปแบบการประกาศลำดับแหล่งที่มา

เมื่อใช้ขอบเขต คุณสามารถมีองค์ประกอบที่ซ้อนกัน และรูปแบบที่ใช้ได้คือองค์ประกอบระดับบนที่อยู่ใกล้ที่สุด

พร้อม @scope
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

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

ลิงก์ 2 รายการ ลิงก์แรกเขียนว่า &#39;&#39;ฉันคือชมพู!&#39;&#39; ลิงก์ที่สองเขียนว่า &#39;สีชมพูที่แตกต่างกัน&#39; ลิงก์ที่สองเป็นสีชมพูเข้ม ภายใต้ข้อความลิงก์ในรูปแบบบรรพบุรุษที่อยู่ใกล้ที่สุด และมีเครื่องหมายถูกสีเขียวอยู่ข้างๆ

นอกจากนี้ ขอบเขตยังช่วยให้คุณไม่ต้องเขียนชื่อชั้นเรียนที่ยาวและซับซ้อน รวมถึงช่วยให้จัดการโปรเจ็กต์ขนาดใหญ่ได้อย่างง่ายดายและหลีกเลี่ยงการตั้งชื่อขัดแย้งกัน

ไม่มี @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;
}
พร้อม @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;
  }
}

เมื่อใช้ขอบเขต คุณยังจัดรูปแบบคอมโพเนนต์ได้โดยไม่ต้องจัดรูปแบบสิ่งที่ฝังอยู่ภายใน ซึ่งคุณอาจมี "ช่องว่าง" เมื่อไม่มีรูปแบบที่กำหนดขอบเขต

เช่นเดียวกับในตัวอย่างต่อไปนี้ เราสามารถใช้รูปแบบกับข้อความและยกเว้นตัวควบคุม หรือในทางกลับกันก็ได้

การแสดง HTML ด้านบน โดยมีคำที่อยู่ในขอบเขตถัดจาก div ที่ 1 และ 3 และมีคำว่า ยกเว้น ไว้ถัดจาก div ที่ 2 และ 4

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

ดูข้อมูลเพิ่มเติมได้ที่บทความจำกัดการเข้าถึงของตัวเลือกด้วย CSS @scope at-rule

ฟีเจอร์สื่อ prefers-reduced-transparency

เราใช้คำค้นหาสื่อเพื่อมอบประสบการณ์ของผู้ใช้ซึ่งปรับให้เข้ากับค่ากำหนดของผู้ใช้และเงื่อนไขในอุปกรณ์ Chrome เวอร์ชันนี้เพิ่มค่าใหม่ที่สามารถใช้ในการปรับเปลี่ยนประสบการณ์ของผู้ใช้ได้: prefers-reduced-transparency

ค่าใหม่ที่คุณทดสอบด้วยคำค้นหาสื่อได้คือ prefers-reduced-transparency ซึ่งช่วยให้นักพัฒนาแอปปรับเนื้อหาเว็บตามค่ากำหนดที่ผู้ใช้เลือกสำหรับความโปร่งใสในระบบปฏิบัติการที่ลดลง เช่น การตั้งค่า "ลดความโปร่งใส" ใน macOS ตัวเลือกที่ใช้ได้คือ reduce หรือ no-preference

.translucent {
  opacity: 0.4;
}

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

และคุณสามารถตรวจสอบลักษณะที่ปรากฏได้ด้วยเครื่องมือสำหรับนักพัฒนาเว็บดังนี้

ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบต้องการลดความโปร่งใส

การแก้ไข: เวอร์ชันก่อนหน้าของบทความนี้กล่าวถึงฟีเจอร์สื่อใหม่ของ scripting ที่อยู่ในรุ่นนี้ โดยจะเป็นเวอร์ชัน 120

การปรับปรุงแผงแหล่งที่มาในเครื่องมือสำหรับนักพัฒนาเว็บ

เครื่องมือสำหรับนักพัฒนาเว็บมีการปรับปรุงในแผงแหล่งที่มาดังต่อไปนี้ ฟีเจอร์ของพื้นที่ทำงานมีการปรับปรุงความสอดคล้องที่ดียิ่งขึ้น โดยการเปลี่ยนชื่อแหล่งที่มา > แผงระบบไฟล์ไปยังพื้นที่ทำงาน พร้อมด้วยข้อความ UI อื่นๆ คอลัมน์แหล่งที่มา > นอกจากนี้ Workspace ยังช่วยให้คุณซิงค์การเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บไปยังไฟล์ต้นฉบับได้โดยตรงอีกด้วย

นอกจากนี้ คุณยังจัดเรียงแผงทางด้านซ้ายของแผงแหล่งที่มาได้ด้วยการลากและวาง จากนั้นแผงแหล่งที่มาจะพิมพ์ JavaScript ในบรรทัดภายในประเภทสคริปต์ต่อไปนี้ module, importmap, speculationrules และไฮไลต์ไวยากรณ์ของสคริปต์ importmap และ speculationrules ประเภทสคริปต์เป็น JSON ได้

ก่อนและหลังการจัดรูปแบบและรูปแบบการไฮไลต์ไวยากรณ์ของประเภทสคริปต์กฎการคาดเดา

ดูมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดต Chrome 118 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

และอีกมากมาย

แถมยังมีอีกมากมาย

  • ขณะนี้ WebUSB API มีการเปิดเผยต่อ Service Worker ที่ลงทะเบียนโดยส่วนขยายเบราว์เซอร์ ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ใช้ API เมื่อตอบกลับกิจกรรมของส่วนขยายได้

  • เราจะนำข้อกำหนดการเปิดใช้งานของผู้ใช้ใน Payment Request และ Secure Payment Confirmation ออก เพื่อช่วยนักพัฒนาแอปลดความติดขัดในขั้นตอนคำขอการชำระเงิน

  • รอบการเผยแพร่ของ Chrome สั้นลง และเวอร์ชันเสถียรจะเผยแพร่ทุก 3 สัปดาห์ โดยเริ่มด้วย Chrome 119 ซึ่งจะพร้อมใช้งานในอีก 3 สัปดาห์

อ่านเพิ่มเติม

เราพูดถึงไฮไลต์สำคัญเพียงบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่าง การเปลี่ยนแปลงเพิ่มเติมใน Chrome 118

สมัครใช้บริการ

หากต้องการติดตามข้อมูลล่าสุด โปรดสมัครรับข้อมูล ช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลเมื่อเราเปิดตัววิดีโอใหม่

อ้าว คุณ Adriana Jara แล้ว ทันทีที่ Chrome 119 เปิดตัว ผมจะมา บอกให้ทราบว่ามีอะไรใหม่ใน Chrome