ใหม่ใน Chrome 106

Pete LePage
Adriana Jara

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

  • มี Intl API ใหม่ที่ช่วยให้คุณควบคุมการจัดรูปแบบตัวเลขได้มากขึ้น
  • เรามีช่วงทดลองใช้รุ่นต้นทางสําหรับ Pop-up API เพื่อให้แสดงเนื้อหาที่สําคัญต่อผู้ใช้ได้ง่าย
  • เราจะเพิ่มฟีเจอร์ CSS บางอย่างเพื่อปรับปรุงการทำงานร่วมกัน
  • และยังมีอีกมากมาย

และ Adriana Jara จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 106 กัน

New Intl API

Intl API จะช่วยแสดงเนื้อหาในรูปแบบที่แปลแล้ว

เช่นเดียวกับ Intl API อื่นๆ การดำเนินการนี้จะเปลี่ยนภาระไปยังระบบ คุณจึงไม่ต้องจัดส่งหรือดูแลรักษาโค้ดการแปลที่ซับซ้อนให้กับผู้ใช้ทุกคน

API จะรู้ว่าสัญลักษณ์สกุลเงินควรอยู่ตรงไหน วิธีจัดรูปแบบวันที่และเวลา หรือวิธีรวบรวมรายการ

Chrome 106 เพิ่มฟังก์ชันการทำงานใหม่มากมายสำหรับรูปแบบตัวเลข

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

หากต้องการแสดงช่วงราคา formatRange ช่วยคุณได้

สร้างออบเจ็กต์ numberFormat ใหม่ ระบุ style และตัวเลือกอื่นๆ รวมถึงจำนวนตัวเลขที่จะแสดง

จากนั้นเรียกใช้ formatRange() เพื่อรับสตริงที่จัดรูปแบบ

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

หากต้องการปัดเศษจำนวนเป็นจำนวนที่เพิ่มขึ้น 5 หน่วยที่ใกล้เคียงที่สุดด้วยความแม่นยำ 2 ตำแหน่งทศนิยม ไม่มีปัญหา

ระบุ minimumFractionDigits และ roundingIncrement แล้วเรียกใช้ format()

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

คุณยังบอกให้เบราว์เซอร์ใส่ค่า 0 นําท้ายได้ด้วย trailingZeroDisplay ซึ่งมีประโยชน์อย่างยิ่งสําหรับราคา

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

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

Pop-Up API ช่วยให้การสร้าง UI ง่ายขึ้นมากเมื่อคุณต้องการแสดงข้อมูลต่อผู้ใช้

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

เพียงใช้ข้อมูลโค้ดต่อไปนี้ API จะจัดการการแสดงผลองค์ประกอบบนเนื้อหาอื่นๆ ทั้งหมด รวมถึงจัดการอินพุตของผู้ใช้และการจัดการโฟกัส

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

โดยค่าเริ่มต้น ผู้ใช้สามารถปิดป๊อปอัปด้วยท่าทางสัมผัส เช่น แป้น ESC หรือคลิกองค์ประกอบอื่นๆ

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

ดูตัวอย่างและตัวเลือก API เพิ่มเติมได้ในบทความของ Jhey

ลงชื่อสมัครใช้ช่วงทดลองใช้ต้นทางเพื่อให้ข้อมูลแก่ผู้ใช้ได้อย่างทันท่วงที บอกให้เรารู้ว่าคุณคิดอย่างไร

ฟีเจอร์ CSS ใหม่

ฟีเจอร์ CSS ใหม่ 2 รายการจะช่วยปรับปรุงการทำงานร่วมกันและหวังว่าจะช่วยให้ชีวิตคุณง่ายขึ้น

เรามีหน่วยวัดความยาวใหม่มาแนะนำ นั่นคือ ic ic คล้ายกับ ch แต่ ic ใช้สำหรับข้อความที่เขียนในภาษาที่ใช้อักษรภาพโดยเฉพาะ ซึ่งโดยทั่วไปจะวัดความยาวตามความกว้างหรือความสูงของอักขระนี้ [ชี้ไปที่จุดหนึ่ง] ซึ่งหมายถึงน้ำ

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

เช่น หากคุณตั้งค่า max-width ของคอนเทนเนอร์เป็น 10ic คุณจะทราบว่าคอนเทนเนอร์จะมีอักขระแบบเต็มความกว้างไม่เกิน 10 ตัว ไม่ว่าขนาดแบบอักษรจะเป็นอย่างไรก็ตาม โปรดดูตัวอย่างต่อไปนี้

การรองรับตาราง CSS สำหรับการประมาณค่า grid-template-columns และ grid-template-rows กำลังจะเปิดตัวตามกำหนดการเดิมสำหรับเวอร์ชัน 106 แต่ล่าช้าออกไปและจะเปิดตัวใน Chrome เวอร์ชัน 107 คุณยังลองใช้ได้ใน Chrome เบต้า ตัวอย่างโค้ดของ Bramus มีดังนี้

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

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

  • เรากําลังจะเริ่มระยะที่ 5 ของแผนการลด User Agent
  • เราจะเลิกใช้งานการรองรับ Push ของ HTTP2 และประเภทโควต้าถาวร
  • และพร็อพเพอร์ตี้ CSS hyphenate-character พร้อมใช้งานโดยไม่มีคำนำหน้าแล้ว

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

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

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

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

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