ใหม่ใน Chrome 104

Pete LePage

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

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

ระบุพื้นที่ครอบตัดที่มีการจับภาพภูมิภาค

getDisplayMedia() ช่วยให้คุณสร้างสตรีมวิดีโอจากแท็บปัจจุบันได้ แต่บางครั้งคุณก็ไม่ต้องการเห็นทั้งแท็บ แต่กลับมีเพียงบางส่วน ที่ผ่านมา วิธีเดียวที่จะทำเช่นนั้นได้คือต้องครอบตัดเฟรมวิดีโอแต่ละเฟรมด้วยตนเอง

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

ภาพหน้าจอของหน้าต่างเบราว์เซอร์ที่มีเว็บแอปซึ่งไฮไลต์พื้นที่เนื้อหาหลักและ iframe แบบข้ามต้นทาง
พื้นที่เนื้อหาหลักเป็นสีน้ำเงินและ iframe แบบข้ามต้นทางเป็นสีแดง

หากต้องการใช้ฟีเจอร์นี้ ให้เลือกองค์ประกอบที่จะแชร์ แล้วสร้าง CropTarget ใหม่โดยอิงตามองค์ประกอบนั้น ถัดไป ให้เริ่มแชร์หน้าจอโดยโทรไปที่ getDisplayMedia() ซึ่งเป็นการแจ้งให้ผู้ใช้ขออนุญาตแชร์หน้าจอ จากนั้นเรียกใช้ track.cropTo() และส่ง cropTarget ที่สร้างขึ้นก่อนหน้านี้

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

ดูรายละเอียดเพิ่มเติมได้ที่การแชร์แท็บที่ดีขึ้นด้วยฟีเจอร์การจับภาพพื้นที่

คำค้นหาสื่อที่ง่ายขึ้นด้วยไวยากรณ์และการประเมินระดับ 4

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

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

ดังนั้นแทนที่จะใช้ค่าประมาณนี้เพื่อระบุวิวพอร์ตระหว่าง 400 ถึง 600 พิกเซล

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

ซึ่งเขียนได้ดังนี้

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

นอกจากจะทำให้การค้นหาสื่อสั้นลงแล้ว รูปแบบคำสั่งใหม่ยังแม่นยำมากขึ้นด้วย การค้นหา min- และ max- จะรวมเงื่อนไขต่างๆ ไว้ด้วย เช่น min-width: 400px การทดสอบความกว้าง 400 พิกเซลขึ้นไป รูปแบบคำสั่งใหม่ช่วยให้คุณระบุสิ่งที่ต้องการได้ชัดเจนยิ่งขึ้น

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

เนื่องจากรองรับใน Firefox แล้ว และยังมีปลั๊กอิน PostCSS ที่จะเขียนไวยากรณ์ใหม่ให้เป็นไวยากรณ์แบบเก่าเพื่อให้มั่นใจว่าเบราว์เซอร์จะใช้งานร่วมกันได้

อ่านรายละเอียดเพิ่มเติมได้ในบทความของ Rachel เรื่องไวยากรณ์ใหม่สําหรับคําค้นหาสื่อแบบช่วงใน Chrome 104

องค์ประกอบแบบใช้ร่วมกันในการเปลี่ยนภาพเริ่มช่วงทดลองใช้ใหม่

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

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

ต่อไปนี้เป็นตัวอย่างคร่าวๆ ของวิธีการทำงานของทรานซิชันสําหรับแอปหน้าเดียว ในฟังก์ชันการนําทาง ให้รับเนื้อหาหน้าใหม่ จากนั้นตรวจสอบว่าระบบรองรับทรานซิชันหรือไม่ หากไม่ ให้อัปเดตหน้าเว็บโดยไม่มีทรานซิชัน หากใช่ ให้สร้าง transition() และเรียกใช้ start() ใน transition() เพื่อแจ้งให้ API ทราบเมื่อการเปลี่ยนแปลง DOM เสร็จสมบูรณ์

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

การเปลี่ยนองค์ประกอบที่แชร์ใช้ภาพเคลื่อนไหว CSS อยู่เบื้องหลัง คุณจึงเปลี่ยนจากเอฟเฟกต์การค่อยๆ ปรากฏเป็นภาพเคลื่อนไหวแบบเลื่อนเข้า หรืออะไรก็ได้ที่ต้องการ

เราเพิ่งสร้างเสร็จ ลองรับชมวิดีโอของ Jake Bringing Page Transitions to the Web หรือเจาะลึกลงไปในวิดีโออธิบาย

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

แถมยังมีอีกมากมาย

  • เมื่อตั้งค่าคุกกี้ด้วยแอตทริบิวต์ Expires หรือ Max-Age ที่ชัดแจ้ง ระบบจะจำกัดค่าไม่ให้เกิน 400 วัน
  • มีการเพิ่มประสิทธิภาพ API ตำแหน่งหน้าต่างหลายหน้าจอ
  • และพร็อพเพอร์ตี้ CSS overflow-clip-margin จะระบุระยะทางที่อนุญาตให้เนื้อหาขององค์ประกอบแสดงก่อนที่จะถูกตัด

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

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

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

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

ผมชื่อ Pete LePage และทันทีที่ Chrome 105 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome