สิ่งที่จำเป็นต้องทราบมีดังนี้
- ประกาศรูปแบบที่เฉพาะเจาะจงภายในคอมโพเนนต์ด้วยกฎ
@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>
โดยไม่มีขอบเขต รูปแบบที่ใช้จะเป็นสไตล์ที่ประกาศล่าสุด
.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 อยู่
ดูมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการอัปเดตเครื่องมือสำหรับนักพัฒนาเว็บใน 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