ฟังก์ชันตรีโกณมิติ

Chrome 111 เพิ่มการรองรับฟังก์ชันตรีโกณมิติ sin(), cos(), tan(), asin(), acos(), atan() และ atan2() ทำให้ฟังก์ชันเหล่านี้พร้อมใช้งานในเครื่องมือหลักๆ ทั้งหมด ฟังก์ชันเหล่านี้มีประโยชน์มากสำหรับวัตถุประสงค์ของภาพเคลื่อนไหวและเลย์เอาต์ ตัวอย่างเช่น ตอนนี้คุณสามารถจัดองค์ประกอบในวงกลมรอบจุดศูนย์กลางที่เลือกได้ง่ายขึ้นมาก

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันตรีโกณมิติใน CSS

การเลือก n-* ที่ซับซ้อน

ตัวเลือกคลาส Pseudo ของ :nth-child() ช่วยให้คุณเลือกองค์ประกอบใน DOM ตามดัชนีได้ การใช้An+B ไวยากรณ์สั้นๆ ช่วยให้คุณควบคุมองค์ประกอบที่คุณต้องการเลือกอย่างละเอียดได้

โดยค่าเริ่มต้น การกด :nth-*() จะนำองค์ประกอบย่อยทั้งหมดมาพิจารณา สำหรับ Chrome 111 คุณจะเลือกส่งรายการตัวเลือกไปยัง :nth-child() และ :nth-last-child() หรือไม่ก็ได้ วิธีนี้ช่วยให้คุณกรองรายการย่อยไว้ล่วงหน้าได้ก่อนที่ An+B จะดำเนินการดังกล่าว

ในการสาธิตต่อไปนี้ ตรรกะ 3n+1 จะใช้กับตุ๊กตาขนาดเล็กเท่านั้นโดยการกรองออกล่วงหน้าโดยใช้ of .small ใช้เมนูแบบเลื่อนลงเพื่อเปลี่ยนตัวเลือกที่ใช้แบบไดนามิก

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเลือก nth-* ที่ซับซ้อน

ขอบเขต

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

แผนผังย่อยที่กำหนดขอบเขตจะกำหนดโดยรากที่กำหนดขอบเขต (ขอบเขตบน) และขีดจำกัดขอบเขตที่ไม่บังคับ (ขอบเขตล่าง)

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

กฎรูปแบบที่วางไว้ในบล็อกขอบเขตจะกำหนดเป้าหมายเฉพาะองค์ประกอบภายในแผนผังย่อยที่ตัดออก ตัวอย่างเช่น กฎรูปแบบที่กำหนดขอบเขตต่อไปนี้จะกำหนดเป้าหมายเฉพาะองค์ประกอบ <img> ที่อยู่ระหว่างองค์ประกอบ .card และคอมโพเนนต์ที่ซ้อนกันซึ่งจับคู่โดยตัวเลือก [data-component]

@scope (.card) to ([data-component]) {
  img { … }
}

ในการสาธิตต่อไปนี้ องค์ประกอบ <img> ในคอมโพเนนต์ภาพสไลด์ไม่ตรงกันเนื่องจากขีดจำกัดขอบเขตที่ใช้

ภาพหน้าจอสาธิตขอบเขต

การสาธิตขอบเขตแบบสด

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @scope ได้ในบทความ "วิธีใช้ @scope เพื่อจำกัดการเข้าถึงของตัวเลือก" ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับตัวเลือก :scope, วิธีจัดการความเฉพาะเจาะจง ขอบเขตแบบไม่ใช้ล่วงหน้า และผลของการเรียงลำดับแบบซ้อนจาก @scope

การซ้อน

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

การซ้อนสามารถลดน้ำหนักของสไตล์ชีต ลดค่าใช้จ่ายของตัวเลือกที่เกิดซ้ำ และรวมสไตล์ของคอมโพเนนต์ไว้ในที่เดียว ไวยากรณ์เปิดตัวครั้งแรกโดยมีข้อจำกัดการใช้งาน & ในที่ต่างๆ แต่ถูกยกเลิกด้วยการอัปเดตไวยากรณ์ที่ผ่อนคลายที่ซ้อนกัน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการซ้อน

ตารางย่อย

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับตารางย่อย

ตัวอักษรเบื้องต้น

ตั้งแต่ช่วงต้นปีใน Chrome 110 พร็อพเพอร์ตี้ initial-letter เป็นฟีเจอร์ CSS ขนาดเล็กแต่ทรงพลังซึ่งจะกำหนดการจัดรูปแบบตำแหน่งของตัวอักษรเริ่มต้น คุณจัดตำแหน่งตัวอักษรในสถานะยกขึ้นได้ พร็อพเพอร์ตี้ยอมรับอาร์กิวเมนต์ 2 รายการ ได้แก่ อาร์กิวเมนต์แรกสำหรับวางตัวอักษรในย่อหน้าที่เกี่ยวข้องในระดับลึกเท่าใด และอาร์กิวเมนต์ที่ 2 คือการเพิ่มตัวอักษรไว้เหนือย่อหน้า คุณยังสามารถทำทั้ง 2 อย่างพร้อมกันได้ ดังเช่นในการสาธิตต่อไปนี้

ภาพหน้าจอตัวอักษรเริ่มต้น

การสาธิตแบบตัวอักษรเริ่มต้น

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอักษรแรกเริ่ม

text-wrap: สมดุลและน่ารัก

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ text-wrap: balance

พื้นที่สี HD (ระดับสี 4)

ตั้งแต่ฮาร์ดแวร์ไปจนถึงซอฟต์แวร์ CSS ไปจนถึงแสงไฟกะพริบ เป็นงานที่ต้องอาศัยการทำงานอย่างหนักเพื่อให้คอมพิวเตอร์ของเราสามารถแสดงสีต่างๆ ได้สวยงามดังที่สายตามนุษย์ของเรามองเห็นได้ ในปี 2023 เรามีสีใหม่ๆ รวมถึงสีที่มากขึ้น พื้นที่สีใหม่ ฟังก์ชันสี และความสามารถใหม่ๆ

CSS และสีทำสิ่งต่อไปนี้ได้แล้ว - ตรวจสอบว่าฮาร์ดแวร์หน้าจอของผู้ใช้ใช้สี HDR แบบขอบเขตกว้างได้หรือไม่ - ตรวจสอบว่าเบราว์เซอร์ของผู้ใช้เข้าใจไวยากรณ์สี เช่น Oklch หรือ Display P3 หรือไม่ - ระบุสี HDR ใน Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ และอื่นๆ - สร้างการไล่ระดับสีด้วยสี HDR - แทรกการไล่ระดับสีในพื้นที่สีสำรอง - ผสมสีด้วย color-mix() - สร้างตัวแปรสีด้วยไวยากรณ์สีที่เกี่ยวข้อง

เรียนรู้เพิ่มเติมเกี่ยวกับสี 4 และพื้นที่สี

ฟังก์ชันผสมสี

การผสมสีเป็นงานที่คลาสสิกและ CSS ก็ทำได้เช่นกันในปี 2023 คุณไม่เพียงสามารถผสมสีขาวหรือดำให้เป็นสีเดียวกันแต่ยังต้องโปร่งใส และทั้งหมดนี้จะทำในพื้นที่สีใดก็ได้ที่คุณเลือก ซึ่งเป็นคุณลักษณะสีพื้นฐานและคุณลักษณะสีขั้นสูง

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ color-mix()

ไวยากรณ์สีสัมพัทธ์

ไวยากรณ์สีสัมพัทธ์ (RCS) เป็นวิธีการเสริมของ color-mix() ในการสร้างรายละเอียดปลีกย่อยของสี วิธีนี้มีประสิทธิภาพมากกว่า color-mix() เล็กน้อยแต่เป็นกลยุทธ์ที่ต่างกันในการทำงานกับสี color-mix() อาจผสมสีขาวเพื่อสร้างสีอ่อน โดย RCS จะให้สิทธิ์เข้าถึงช่องทางความสว่างอย่างแม่นยำ และใช้ calc() ในช่องเพื่อลดหรือเพิ่มความสว่างแบบเป็นโปรแกรม

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์สีสัมพัทธ์

กำหนดขนาดคำค้นหาคอนเทนเนอร์

แทนที่จะใช้ข้อมูลขนาดส่วนกลางของวิวพอร์ตเพื่อนำรูปแบบ CSS ไปใช้ การค้นหาคอนเทนเนอร์จะรองรับการค้นหาขององค์ประกอบระดับบนสุดภายในหน้าเว็บ ซึ่งหมายความว่าคอมโพเนนต์สามารถจัดรูปแบบแบบไดนามิกในการออกแบบหลายเลย์เอาต์และในหลายมุมมอง การค้นหาคอนเทนเนอร์สำหรับขนาดเริ่มคงที่ในเบราว์เซอร์สมัยใหม่ทั้งหมดในวันวาเลนไทน์ของปีนี้ (14 กุมภาพันธ์)

หากต้องการใช้ฟีเจอร์นี้ ให้ตั้งค่าการควบคุมองค์ประกอบที่คุณค้นหาก่อน จากนั้นใช้ @container ที่มีพารามิเตอร์ขนาดเพื่อใช้รูปแบบในลักษณะเดียวกับคำค้นหาสื่อ คุณจะได้รับขนาดการค้นหาคอนเทนเนอร์ควบคู่ไปกับการค้นหาคอนเทนเนอร์ ในการสาธิตต่อไปนี้ มีการใช้ขนาดการค้นหาคอนเทนเนอร์ cqi (แสดงขนาดของคอนเทนเนอร์แบบอินไลน์) เพื่อกำหนดขนาดส่วนหัวของการ์ด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การค้นหาคอนเทนเนอร์

จัดรูปแบบการค้นหาคอนเทนเนอร์

พบการใช้งานการค้นหารูปแบบบางส่วนใน Chrome 111 การค้นหารูปแบบช่วยให้คุณค้นหาค่าของคุณสมบัติที่กำหนดเองในองค์ประกอบระดับบนสุดได้เมื่อใช้ @container style() เช่น ค้นหาหากมีค่าของพร็อพเพอร์ตี้ที่กำหนดเอง หรือตั้งเป็นค่าที่เจาะจง เช่น @container style(--rain: true)

ภาพหน้าจอการค้นหารูปแบบ

การสาธิตการค้นหารูปแบบ

แม้ว่าสิ่งนี้จะฟังดูคล้ายกับการใช้ชื่อคลาสใน CSS แต่การค้นหารูปแบบก็มีข้อดีบางอย่าง อย่างแรกคือเมื่อใช้การค้นหารูปแบบ คุณสามารถอัปเดตค่าใน CSS ตามความจำเป็นสำหรับสถานะจำลอง นอกจากนี้ เมื่อใช้งานเวอร์ชันต่อๆ ไป คุณจะค้นหาช่วงของค่าได้เพื่อกําหนดรูปแบบที่ใช้ เช่น style(60 <= --weather <= 70) และสไตล์ตามคู่พร็อพเพอร์ตี้-ค่า เช่น style(font-style: italic)

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้การค้นหารูปแบบ

:has() option

นักพัฒนาซอฟต์แวร์ขอ "ตัวเลือกหลัก" ใน CSS มาเกือบ 20 ปีแล้ว ด้วยตัวเลือก :has() ที่จัดส่งใน Chrome 105 ก็ทำให้พร้อมใช้งานแล้ว เช่น การใช้ .card:has(img.hero) จะเลือกองค์ประกอบ .card ที่มีรูปภาพหลักเป็นเด็ก

ภาพหน้าจอสาธิต :has()

การสาธิตการใช้งาน :has() แบบสด

เนื่องจาก :has() ยอมรับรายการตัวเลือกแบบสัมพัทธ์เป็นอาร์กิวเมนต์ คุณจึงเลือกได้มากกว่าองค์ประกอบระดับบนสุด เมื่อใช้ combinator ต่างๆ ของ CSS ไม่เพียงแต่จะขึ้นไปถึงแผนผัง DOM เท่านั้น แต่ยังทำการเลือกแบบไซด์ทางได้อีกด้วย ตัวอย่างเช่น li:has(+ li:hover) จะเลือกองค์ประกอบ <li> ที่อยู่ก่อนองค์ประกอบ <li> ที่วางเมาส์เหนือองค์ประกอบอยู่

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก CSS :has()

อัปเดตคิวรี่สื่อ

คำค้นหาสื่อ update ให้คุณปรับ UI ตามอัตราการรีเฟรชของอุปกรณ์ได้ ฟีเจอร์นี้สามารถรายงานค่า fast, slow หรือ none ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ต่างๆ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (อัปเดต)

คิวรี่สื่อสคริปต์

คุณสามารถใช้คิวรี่สื่อของสคริปต์เพื่อตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่ การทำเช่นนี้มีประโยชน์มากสำหรับการปรับปรุงแบบก้าวหน้า ก่อนการค้นหาสื่อนี้ กลยุทธ์ในการตรวจสอบว่า JavaScript พร้อมใช้งานหรือไม่คือการวางคลาส nojs ใน HTML และนำออกด้วย JavaScript คุณนำสคริปต์เหล่านี้ออกเนื่องจาก CSS มีวิธีตรวจหา JavaScript และปรับให้เหมาะสมได้แล้ว

ดูวิธีเปิดและปิดใช้ JavaScript ในหน้าเว็บสำหรับการทดสอบผ่าน Chrome DevTools ที่นี่

ลองพิจารณาการเปลี่ยนธีมบนเว็บไซต์ คำค้นหาสื่อที่ใช้สคริปต์สามารถช่วยให้การเปลี่ยนทำงานได้ตามความต้องการของระบบเนื่องจากไม่มี JavaScript ให้ใช้งาน หรือพิจารณาใช้คอมโพเนนต์สวิตช์ หากมี JavaScript อยู่แล้วก็สามารถปัดสวิตช์ด้วยท่าทางสัมผัสแทนการเปิดหรือปิดเพียงอย่างเดียว มีโอกาสมากมายในการอัปเกรด UX หากมีการใช้สคริปต์ พร้อมทั้งให้ประสบการณ์ขั้นพื้นฐานที่สำคัญหากปิดใช้การเขียนสคริปต์

ดูข้อมูลเพิ่มเติมเกี่ยวกับ script

การค้นหาสื่อที่มีความโปร่งใสน้อยลง

อินเทอร์เฟซที่ไม่ทึบแสงอาจทำให้เกิดอาการปวดศีรษะหรือมีปัญหาในการมองเห็นจากความบกพร่องทางการมองเห็นประเภทต่างๆ ด้วยเหตุนี้ Windows, macOS และ iOS จึงมีค่ากำหนดของระบบที่สามารถลดหรือนำความโปร่งใสออกจาก UI คิวรี่สื่อสำหรับ prefers-reduced-transparency นี้เข้ากันได้ดีกับคำค้นหาสื่ออื่นๆ ที่ต้องการซึ่งทำให้คุณใช้ความคิดสร้างสรรค์ได้ในขณะที่ปรับเปลี่ยนให้เหมาะกับผู้ใช้

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @media (prefers-reduced-transparency)

ดูการเปลี่ยน

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

หัวใจสำคัญของ View Transitions API คือฟังก์ชัน document.startViewTranstion ส่งฟังก์ชันที่อัปเดต DOM เป็นสถานะใหม่ และ API จะดูแลทุกอย่างให้คุณ ซึ่งทำได้โดยถ่ายสแนปชอตก่อนและหลัง จากนั้นสลับไปมาระหว่าง 2 อย่าง การใช้ CSS ช่วยให้คุณควบคุมสิ่งที่จะจับภาพและปรับแต่งว่าจะให้สแนปชอตเหล่านี้เคลื่อนไหวอย่างไร

View Transitions API for Single Page Applications ที่จัดส่งใน Chrome 111 ดูข้อมูลเพิ่มเติมเกี่ยวกับดูการเปลี่ยน

ฟังก์ชันการค่อยๆ เปลี่ยนเชิงเส้น

อย่าปล่อยให้ชื่อของฟังก์ชันนี้หลอกคุณ ฟังก์ชัน linear() (อย่าสับสนกับlinearคีย์เวิร์ด) ช่วยให้คุณสร้างฟังก์ชันการค่อยๆ เปลี่ยนที่ซับซ้อนได้อย่างง่ายดาย โดยอาจทำให้ความแม่นยำลดลง

ก่อนวันที่ linear() ซึ่งจัดส่งใน Chrome 113 จะสร้างเอฟเฟกต์การตีกลับหรือสปริงใน CSS ไม่ได้ linear()คุณสามารถประมาณการค่อยๆ เปลี่ยนเหล่านี้ได้โดยทำให้การค่อยๆ เปลี่ยนง่ายขึ้นโดยลดความซับซ้อนของจุดต่างๆ แล้วใส่การประมาณค่าแบบเชิงเส้นระหว่างจุดเหล่านี้

เรียนรู้เพิ่มเติมเกี่ยวกับ linear() หากต้องการสร้างเส้นโค้ง linear() ให้ใช้เครื่องมือสร้างการค่อยๆ เปลี่ยนเชิงเส้น

สิ้นสุดการเลื่อน

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับ scrollend

ภาพเคลื่อนไหวที่ใช้การเลื่อน

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเป็นฟีเจอร์ที่น่าตื่นเต้นใน Chrome 115 ซึ่งช่วยให้คุณนำภาพเคลื่อนไหวของ CSS หรือภาพเคลื่อนไหวที่สร้างด้วย Web Animations API ที่มีอยู่มาจับคู่กับออฟเซ็ตการเลื่อนของตัวเลื่อนได้ ในขณะที่คุณเลื่อนขึ้นและลงหรือเลื่อนซ้ายและขวาในแนวนอน ภาพเคลื่อนไหวที่ลิงก์จะกรอไปข้างหน้าและถอยหลังเพื่อสนองตอบโดยตรง

ScrollTimeline ช่วยให้คุณสามารถติดตามความคืบหน้าโดยรวมของแถบเลื่อนตามที่แสดงในการสาธิตต่อไปนี้ ขณะที่คุณเลื่อนลงจนสุดหน้าเว็บ ข้อความจะแสดงตัวทีละอักขระ

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

เนื่องจากภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนสามารถทำงานร่วมกับภาพเคลื่อนไหว CSS และ Web Animations API คุณจึงได้รับประโยชน์จากข้อดีทั้งหมดของ API เหล่านี้ ซึ่งรวมถึงความสามารถในการทำให้ภาพเคลื่อนไหวเหล่านี้ทำงานออกจากเทรดหลัก ตอนนี้คุณสามารถสร้างภาพเคลื่อนไหวที่ลื่นไหลได้เพราะต้องเลื่อนและเลื่อนออกไปยังชุดข้อความหลักผ่านโค้ดเพิ่มเติมเพียงไม่กี่บรรทัด แล้วตรงไหนไม่ชอบ

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวที่ใช้การเลื่อนได้ โปรดอ่านบทความนี้พร้อมรายละเอียดทั้งหมด หรือ ไปที่ Scroll-driven-animations.style ซึ่งมีการสาธิตมากมาย

ไฟล์แนบไทม์ไลน์ที่เลื่อนเวลาออกไป

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

หากต้องการอนุญาตให้องค์ประกอบที่เคลื่อนไหวค้นหาไทม์ไลน์การเลื่อนที่มีชื่อของบุคคลที่ไม่ใช่ระดับบน ให้ใช้พร็อพเพอร์ตี้ timeline-scope ในระดับบนสุดที่แชร์ การดำเนินการนี้อนุญาตให้แนบ scroll-timeline หรือ view-timeline ที่มีชื่อนั้นด้วย ทำให้เกิดขอบเขตที่กว้างขึ้น เมื่อเรียบร้อยแล้ว บุตรหลานของผู้ปกครองทุกคนที่แชร์จะใช้ไทม์ไลน์ที่มีชื่อนั้นได้

จะพบ scroll-timeline ที่ประกาศในแถบเลื่อน

เรียนรู้เพิ่มเติมเกี่ยวกับ timeline-scope

ภาพเคลื่อนไหวของคุณสมบัติที่ไม่ต่อเนื่อง

ความสามารถใหม่อีกอย่างหนึ่งในปี 2023 คือความสามารถในการสร้างภาพเคลื่อนไหวแบบแยกต่างหาก เช่น การสร้างภาพเคลื่อนไหวไปและกลับจาก display: none จาก Chrome 116 คุณจะใช้ display และ content-visibility ในกฎคีย์เฟรมได้ นอกจากนี้ คุณยังเปลี่ยนพร็อพเพอร์ตี้แบบแยกกันได้ที่จุด 50% แทนที่จะเป็นจุด 0% ซึ่งทำได้ด้วยการใช้พร็อพเพอร์ตี้ transition-behavior ที่ใช้คีย์เวิร์ด allow-discrete หรือในพร็อพเพอร์ตี้ transition เป็นชวเลข

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนภาพเคลื่อนไหวแบบแยกกัน

@การเริ่มต้น-สไตล์

กฎ CSS @starting-style สร้างขึ้นจากความสามารถใหม่บนเว็บสำหรับการแสดงภาพเคลื่อนไหวไปยังและจาก display: none กฎนี้ระบุวิธีการสร้างรูปแบบ "ก่อนเปิด" ให้องค์ประกอบซึ่งเบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบดังกล่าวจะเปิดในหน้า ซึ่งมีประโยชน์มากสำหรับการเข้าสู่ภาพเคลื่อนไหว และการสร้างภาพเคลื่อนไหวในองค์ประกอบต่างๆ เช่น การเปิดปิดหรือกล่องโต้ตอบ นอกจากนี้ยังมีประโยชน์สำหรับเวลาใดก็ตามที่คุณกำลังสร้างองค์ประกอบ และต้องการให้องค์ประกอบนั้นสามารถสร้างภาพเคลื่อนไหวเข้ามาได้ ลองดูตัวอย่างต่อไปนี้ซึ่งจะทำให้แอตทริบิวต์ popover เคลื่อนไหว (ดูส่วนถัดไป) ในมุมมองและไปยังเลเยอร์บนสุดอย่างราบรื่นจากภายนอกวิวพอร์ต

ดูข้อมูลเพิ่มเติมเกี่ยวกับ @starting-style และภาพเคลื่อนไหวอื่นๆ ในรายการ

ซ้อนทับ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการวางซ้อนและภาพเคลื่อนไหวการออกอื่นๆ

ป๊อปอัป

Popover API ช่วยคุณสร้างองค์ประกอบที่วางซ้อนอยู่บนหน้าอื่นๆ ที่เหลือของหน้า โดยอาจรวมถึงเมนู การเลือก และเคล็ดลับเครื่องมือ คุณสร้างป๊อปอัปอย่างง่ายได้โดยการเพิ่มแอตทริบิวต์ popover และ id ลงในองค์ประกอบที่ปรากฏขึ้น แล้วเชื่อมต่อแอตทริบิวต์ id ขององค์ประกอบกับปุ่มเรียกใช้โดยใช้ popovertarget="my-popover" Popover API รองรับรายการต่อไปนี้

• เลื่อนไปยังชั้นบนสุด ป๊อปโอเวอร์จะปรากฏบนเลเยอร์แยกต่างหากเหนือส่วนที่เหลือของหน้าเว็บ คุณจึงไม่ต้องลองเล่นกับดัชนี z
• ฟังก์ชันปิดไฟ การคลิกนอกบริเวณป๊อปอัปจะปิดป๊อปอัปและโฟกัสกลับ
• การจัดการโฟกัสเริ่มต้น การเปิดป็อปโอเวอร์จะทำให้แท็บถัดไปหยุดภายในป๊อปอัป
• แป้นพิมพ์ลัดที่เข้าถึงได้ การกดปุ่ม esc หรือสลับ 2 ครั้งจะเป็นการปิดป๊อปอัปและโฟกัสกลับไปที่
• การเชื่อมโยงคอมโพเนนต์ที่เข้าถึงได้ การเชื่อมต่อองค์ประกอบป๊อปโอเวอร์กับทริกเกอร์ป๊อปโอเวอร์อย่างมีความหมาย

กฎแนวนอนในการเลือก

การเปลี่ยนแปลงเล็กน้อยของ HTML ใน Chrome และ Safari ในปีนี้คือความสามารถในการเพิ่มองค์ประกอบกฎแนวนอน (แท็ก <hr>) ลงในองค์ประกอบ <select> เพื่อช่วยแบ่งเนื้อหา ก่อนหน้านี้ การใส่แท็ก <hr> ลงในส่วน Select จะไม่แสดงผล แต่ปีนี้ทั้ง Safari และ Chrome รองรับฟีเจอร์นี้ ซึ่งทำให้แยกเนื้อหาภายในองค์ประกอบ <select> ได้ดียิ่งขึ้น

เลือกภาพหน้าจอ

เลือกการสาธิตแบบสด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ ชั่วโมงในรายการที่เลือก

:คลาสสมมติที่ใช้ได้ของผู้ใช้และไม่ถูกต้อง

ในปีนี้จะมีความเสถียรในทุกเบราว์เซอร์ โดย :user-valid และ :user-invalid จะทำงานคล้ายกับคลาสซูโดของ :valid และ :invalid แต่จะจับคู่การควบคุมแบบฟอร์มหลังจากที่ผู้ใช้โต้ตอบกับอินพุตอย่างมีนัยสำคัญเท่านั้น ตัวควบคุมแบบฟอร์มที่จำเป็นและว่างเปล่าจะตรงกับ :invalid แม้ว่าผู้ใช้ยังไม่ได้เริ่มโต้ตอบกับหน้าเว็บก็ตาม การควบคุมเดียวกันจะไม่ตรงกับ :user-invalid จนกว่าผู้ใช้จะเปลี่ยนแปลงอินพุตและปล่อยให้อยู่ในสถานะที่ไม่ถูกต้อง

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้องค์ประกอบสมมติสำหรับการตรวจสอบแบบฟอร์ม user-*

แอคคอร์เดียนสุดพิเศษ

รูปแบบ UI ทั่วไปบนเว็บคือคอมโพเนนต์แอคคอร์เดียน หากต้องการใช้รูปแบบนี้ คุณต้องรวมองค์ประกอบ <details> 2-3 รายการเข้าด้วยกัน โดยมักจะจัดกลุ่มองค์ประกอบเหล่านี้ด้วยภาพเพื่อบ่งบอกว่าทั้ง 2 องค์ประกอบอยู่ร่วมกัน

ฟีเจอร์ใหม่ใน Chrome 120 รองรับแอตทริบิวต์ name ในองค์ประกอบ <details> เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details> หลายรายการที่มีค่า name เดียวกันจะสร้างกลุ่มความหมาย องค์ประกอบในกลุ่มจะเปิดพร้อมกันได้สูงสุด 1 องค์ประกอบ โดยเมื่อคุณเปิดองค์ประกอบ <details> รายการหนึ่งจากกลุ่ม องค์ประกอบที่เปิดอยู่ก่อนหน้านี้จะปิดโดยอัตโนมัติ หีบเพลงประเภทนี้เรียกว่าแอกคอร์เดียนพิเศษ

องค์ประกอบ <details> ที่เป็นส่วนหนึ่งของแอคคอร์เดียนพิเศษไม่จำเป็นต้องเป็นรายการข้างเคียง ซึ่งอาจกระจัดกระจายอยู่ทั่วทั้งเอกสาร