ใหม่ใน 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 ที่จะเขียนไวยากรณ์ใหม่ให้สอดคล้องกับไวยากรณ์เดิมเพื่อให้สอดคล้องกับเบราว์เซอร์

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

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

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

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

นี่คือตัวอย่างคร่าวๆ ของวิธีการทำงานของการเปลี่ยนสำหรับแอปหน้าเดียว ในฟังก์ชันการนำทาง ดูเนื้อหาของหน้าใหม่ จากนั้นตรวจสอบว่ารองรับการเปลี่ยนหรือไม่ หากไม่มี ให้อัปเดตหน้าโดยไม่มีการเปลี่ยน หากใช่ ให้สร้าง transition() และเรียกใช้ start() บนแท็กดังกล่าวเพื่อแจ้งให้ 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 คุณจึงสามารถเปลี่ยนจากการค่อยๆ ดังขึ้น เลื่อนเข้า หรืออะไรก็ตามที่คุณต้องการ

ฉันเพิ่งเข้ามาดูเอง ลองดูวิดีโอของเจค นำการเปลี่ยนหน้าไปสู่เว็บ หรือเจาะลึกในคำอธิบาย

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

แน่นอน ยังมีคำถามอีกมากมาย

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

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

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

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

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

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 105 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!