ใหม่ใน Chrome 106

Pete LePage
Adriana Jara

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

  • มี 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 แบบป๊อปอัปทำให้การสร้าง 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

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

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

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