สิ่งที่จำเป็นต้องทราบมีดังนี้
- มี API นานาชาติใหม่ที่จะช่วยให้คุณควบคุมการจัดรูปแบบตัวเลขได้มากขึ้น
- API ป๊อปอัปมีช่วงทดลองใช้จากต้นทาง เพื่อช่วยให้คุณแสดงเนื้อหาที่สำคัญแก่ผู้ใช้ได้อย่างง่ายดาย
- เราจะเพิ่มฟีเจอร์ CSS บางอย่างเพื่อปรับปรุงการทำงานร่วมกัน
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage และ Adriana Jara มาเจาะลึกกันเลยและดูว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 106
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 ป๊อปอัป
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 ใหม่
มี 2 ฟีเจอร์ใหม่ของ CSS ที่ช่วยปรับปรุงการทำงานร่วมกันและหวังว่าจะทำให้ชีวิตคุณง่ายขึ้น
มีหน่วยความยาวใหม่ในเมือง: ic
กำลังเข้าร่วมปาร์ตี้ ic
คล้ายกับ ch
แต่ ic
ใช้สำหรับข้อความที่เขียนในภาษาที่ใช้ตัวอักษรแสดงความหมาย "โดยหลักแล้ว" จะใช้วัดความยาวตามความกว้างหรือความสูงของอักขระนี้ [จุดบางจุด] ซึ่งหมายถึงน้ำ
โดยเป็นหน่วยที่ออกแบบมาเพื่อปรับขนาดข้อความ ซึ่งช่วยให้คุณจำกัดความกว้างเพื่อปรับปรุงให้อ่านง่ายขึ้น และทำให้ควบคุมได้แบบคาดเดาได้ไม่ว่าข้อความจะมีขนาดเท่าใดก็ตาม
ตัวอย่างเช่น หากคุณตั้งค่า max-width
ของคอนเทนเนอร์ สมมติว่าเป็น 10ic คุณทราบว่าคอนเทนเนอร์จะมีอักขระความกว้างเต็มไม่เกิน 10 ตัวไม่ว่าจะมีขนาดเท่าแบบอักษรขนาดใดก็ตาม โปรดดูตัวอย่างต่อไปนี้
เรากำลังจะรองรับตารางกริดของ CSS สำหรับการประมาณค่าในช่วง grid-template-columns
และ grid-template-rows
โดยวางแผนไว้สำหรับเวอร์ชัน 106 แต่เกิดความล่าช้าและจะเปิดตัวใน Chrome 107 คุณจะยังลองใช้ได้ใน Chrome เบต้า นี่คือตัวอย่างของ Bramus
และอีกมากมาย
แน่นอนว่ายังมีอีกมากมาย
- เรากำลังเริ่มแผนการลด User Agent เฟสที่ 5
- เรากำลังจะเลิกรองรับการพุช HTTP2 และประเภทโควต้าถาวร
- และพร็อพเพอร์ตี้ CSS
hyphenate-character
พร้อมใช้งานแล้วโดยไม่มีคำนำหน้า
อ่านเพิ่มเติม
ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างเพื่อดูวิธี การเปลี่ยนแปลงเพิ่มเติมใน Chrome 106
- มีอะไรใหม่ใน Chrome DevTools (106)
- การเลิกใช้งานและการนำ Chrome 106 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 106
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Adriana Jara และทันทีที่เปิดตัว Chrome 107 เราก็จะแจ้งให้คุณทราบถึงสิ่งใหม่ๆ ใน Chrome!