ใหม่ใน Chrome 118

Adriana Jara

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

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

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

• และยังมีอีกมากมาย

ฉันชื่อ 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>

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

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

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

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

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

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

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

<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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดต DevTools ของ Chrome 118 ได้ที่มีอะไรใหม่ใน DevTools

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

แน่นอนว่ายังมีอีกมากมาย

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

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

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

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

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

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

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

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

ฉันชื่อ Adriana Jara และพร้อมที่จะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 119 เปิดตัว