ใหม่ใน Chrome 118

Adriana Jara

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

• ประกาศรูปแบบที่เฉพาะเจาะจงภายในคอมโพเนนต์ด้วยกฎ @scope CSS
• มีฟีเจอร์สื่อใหม่ prefers-reduced-transparency

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

• นอกจากนี้ยังมีอื่นๆ อีกมากมาย

ฉันชื่อ Adriana Jara มาเจาะลึกกันเลยและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 118

กฎ @scope ของ CSS

กฎแอตทริบิวต์ @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; }

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

มี @scope

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

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

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

ไม่มี @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;
  }
}

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

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

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

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

ฟีเจอร์สื่อ 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;
  }
}

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

ดูข้อมูลเพิ่มเติมได้ในเอกสาร prefers-reduced-transparency

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

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

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

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

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

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

แน่นอน ยังมีคำถามอีกมากมาย

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

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

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

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

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

• มีอะไรใหม่ใน Chrome DevTools (118)
• การเลิกใช้งานและการนำ Chrome 118 ออก
• การอัปเดต ChromeStatus.com สำหรับ Chrome 118
• รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
• ปฏิทินการเผยแพร่ Chrome

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

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

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