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

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

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

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

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

โดยค่าเริ่มต้น เพลย์ลิสต์ :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 วิธีจัดการความจำเพาะ ขอบเขตที่ไม่มีการกำหนดล่วงหน้า และผลจาก Cascade ของ @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 อย่างร่วมกันได้ อย่างเช่นในการสาธิตต่อไปนี้

ภาพหน้าจอจดหมายเริ่มต้น

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

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

การตัดข้อความ: สร้างสมดุลและดูดี

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับสี 4 และช่องว่างสี

ฟังก์ชันมิกซ์สี

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

ให้ลองคิดว่า 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()

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

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

:has() การสาธิตแบบสด

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

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

อัปเดตคำค้นหาสื่อ

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

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

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

การค้นหาสื่อการเขียน

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

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

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

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

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

ภาพเคลื่อนไหวแบบเลื่อน

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

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

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

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

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

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

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

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

วันที่

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

ภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง

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

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

@starting-style

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

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

โฆษณาซ้อนทับ

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

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

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