ใหม่ใน 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

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 เปิดตัว