สถานะของ CSS 2022

ฟีเจอร์การจัดรูปแบบเว็บในปัจจุบันและอนาคตตามที่เห็นใน Google I/O 2022 รวมถึงฟีเจอร์เพิ่มเติมบางอย่าง

Adam Argyle

ปี 2022 จะเป็นปีที่ยอดเยี่ยมที่สุดปีหนึ่งของ CSS ทั้งในด้านฟีเจอร์และการเปิดตัวฟีเจอร์เบราว์เซอร์ที่ทำงานร่วมกัน โดยมีเป้าหมายร่วมกันในการใช้ฟีเจอร์ 14 รายการ

ภาพรวม

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

สารบัญ

ใช้รายการด้านล่างเพื่อไปยังหัวข้อที่สนใจ

ความเข้ากันได้กับเบราว์เซอร์

สาเหตุหลักที่ฟีเจอร์ CSS จำนวนมากได้รับการตั้งค่าให้เปิดตัวร่วมกันเป็นเพราะความพยายามของ Interop 2022 ก่อนที่จะศึกษาความพยายามด้านการทำงานร่วมกัน คุณควรดูความพยายามของ Compat 2021 ก่อน

Compat 2021

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

1. การวางตำแหน่ง sticky
2. aspect-ratio การปรับขนาด
3. เลย์เอาต์ flex
4. เลย์เอาต์ grid
5. transformการวางตำแหน่งและภาพเคลื่อนไหว

คะแนนการทดสอบเพิ่มขึ้นในทุกด้าน ซึ่งแสดงให้เห็นถึงความเสถียรและความน่าเชื่อถือที่ได้รับการอัปเกรด ขอแสดงความยินดีกับทีมที่ได้รับรางวัล

Interop 2022

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

1. @layer
2. พื้นที่สีและฟังก์ชัน
3. การล้อมองค์ประกอบ
4. <dialog>
5. ความเข้ากันได้ของแบบฟอร์ม
6. กำลังเลื่อน
7. ตารางย่อย
8. การพิมพ์
9. หน่วยวิวพอร์ต
10. ความเข้ากันได้ของเว็บ

นี่เป็นรายการที่น่าตื่นเต้นและมีความทะเยอทะยาน ซึ่งฉันแทบรอไม่ไหวที่จะได้เห็นการพัฒนา

ใหม่ล่าสุดสำหรับปี 2022

ไม่น่าแปลกใจที่สถานะของ CSS ในปี 2022 ได้รับผลกระทบอย่างมากจากงาน Interop 2022

เลเยอร์แบบเรียงซ้อน

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีประโยชน์ในการแสดงภาพว่าสไตล์ใดมาจากเลเยอร์ใด

แหล่งข้อมูล

• ข้อกำหนดของ CSS Cascade 5
• คำอธิบายเลเยอร์แบบเรียงซ้อน
• เลเยอร์ Cascade ใน MDN
• Una Kravets: Cascade Layers
• Ahmad Shadeed: สวัสดี CSS Cascade Layers

ตารางย่อย

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

หลังจาก subgrid แล้ว องค์ประกอบย่อยของกริดจะใช้คอลัมน์หรือแถวขององค์ประกอบหลักเป็นของตัวเอง และจัดแนวตัวเองหรือองค์ประกอบย่อยให้สอดคล้องกับองค์ประกอบหลักได้

ในการสาธิตต่อไปนี้ องค์ประกอบ body จะสร้างตารางกริดคลาสสิก 3 คอลัมน์ คอลัมน์กลางชื่อ main และคอลัมน์ซ้ายและขวาตั้งชื่อ เส้น fullbleed จากนั้นองค์ประกอบแต่ละรายการในเนื้อหา <nav> และ <main> จะใช้บรรทัดที่มีชื่อจากเนื้อหาโดยการตั้งค่า grid-template-columns: subgrid

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

สุดท้ายนี้ บุตรหลานของ <nav> หรือ <main> สามารถจัดแนวหรือปรับขนาดของตนเองได้โดยใช้คอลัมน์และบรรทัด fullbleed และ main

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

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

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

แหล่งข้อมูล

• ข้อกำหนดของตารางย่อย
• Subgrid ใน MDN
• Bramus: วิดีโอสอนการใช้ CSS Subgrid ในทางปฏิบัติ

การค้นหาคอนเทนเนอร์

ก่อน @container องค์ประกอบของหน้าเว็บจะตอบสนองต่อขนาดของ วิวพอร์ตทั้งหมดเท่านั้น ซึ่งเหมาะสำหรับเลย์เอาต์มาโคร แต่สำหรับเลย์เอาต์ไมโครที่คอนเทนเนอร์ด้านนอกไม่ใช่ทั้ง Viewport เลย์เอาต์จะปรับตามนั้นไม่ได้

หลังจาก @container องค์ประกอบจะตอบสนองต่อขนาดหรือสไตล์ของคอนเทนเนอร์ระดับบนสุดได้ ข้อควรระวังเพียงอย่างเดียวคือคอนเทนเนอร์ต้องประกาศตัวเองเป็นเป้าหมายการค้นหาที่เป็นไปได้ ซึ่งเป็นข้อกำหนดเล็กๆ ที่ให้ประโยชน์อย่างมาก

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

รูปแบบเหล่านี้ทำให้คอลัมน์ Mon, Tues, Wed, Thurs และ Fri ในวิดีโอต่อไปนี้สามารถค้นหาได้ตามองค์ประกอบของเหตุการณ์

นี่คือ CSS สำหรับการค้นหาขนาดของคอนเทนเนอร์ calendar-day จากนั้น ปรับเลย์เอาต์และขนาดแบบอักษร

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

อีกตัวอย่างหนึ่งคือคอมโพเนนต์หนังสือจะปรับให้เข้ากับพื้นที่ที่มีอยู่ในคอลัมน์ที่ลากไปวาง

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

แหล่งข้อมูล

• ข้อกำหนดของ Container Queries
• คำอธิบาย Container Queries
• การค้นหาคอนเทนเนอร์ใน MDN
• การออกแบบใหม่ที่ปรับเปลี่ยนตามอุปกรณ์ใน web.dev
• การสาธิตปฏิทินโดย Una
• คอลเล็กชันการค้นหาคอนเทนเนอร์ที่ยอดเยี่ยม
• วิธีที่เราสร้าง Designcember บน web.dev
• Ahmad Shadeed: Say Hello To CSS Container Queries

accent-color

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

หลังจาก accent-color บรรทัด CSS เดียวจะนำสีของแบรนด์มาใช้กับคอมโพเนนต์ในตัว นอกจากสีอ่อนแล้ว เบราว์เซอร์ยังเลือกสีที่ตัดกันอย่างเหมาะสมสำหรับส่วนเสริมของคอมโพเนนต์และปรับให้เข้ากับรูปแบบสีของระบบ (สว่างหรือมืด) ได้อย่างชาญฉลาดอีกด้วย

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับ accent-color ได้ในโพสต์ของฉันบน web.dev ซึ่งฉันได้สำรวจแง่มุมอื่นๆ อีกมากมายเกี่ยวกับพร็อพเพอร์ตี้ CSS ที่มีประโยชน์นี้

แหล่งข้อมูล

• ข้อกำหนดสีเน้น
• accent-color ใน MDN
• accent-color ใน web.dev
• Bramus: Tint User-Interface Controls with CSS accent-color

ระดับสี 4 และ 5

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

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

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

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

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

HWB ย่อมาจาก Hue, Whiteness และ Blackness โดยจะแสดงเป็นวิธีระบุสีที่เข้าใจง่าย เนื่องจากเป็นเพียงเฉดสีและปริมาณสีขาวหรือดำเพื่อทำให้สว่างขึ้นหรือเข้มขึ้น ศิลปินที่ผสมสีกับสีขาวหรือสีดำ อาจชื่นชอบการเพิ่มไวยากรณ์สีนี้

การใช้ฟังก์ชันสีนี้จะทำให้ได้สีจากพื้นที่สี sRGB ซึ่งเหมือนกับ HSL และ RGB ในแง่ของความใหม่สำหรับปี 2022 ฟีเจอร์นี้ไม่ได้ให้สีใหม่แก่คุณ แต่จะช่วยให้แฟนๆ ของไวยากรณ์และโมเดลทางจิตบางอย่างทำงานได้ง่ายขึ้น

แหล่งข้อมูล

• ข้อกำหนด HWB
• HWB ใน MDN
• Stefan Judis: hwb() – รูปแบบสีสำหรับ มนุษย์

พื้นที่สี

การแสดงสีจะทำด้วยพื้นที่สี พื้นที่สีแต่ละรายการ มีฟีเจอร์และข้อดีข้อเสียที่แตกต่างกันสำหรับการทำงานกับสี บางคนอาจจัดเรียงสีสดใสทั้งหมดไว้ด้วยกัน บางคนอาจจัดเรียงตามความสว่างก่อน

CSS ปี 2022 พร้อมนำเสนอพื้นที่สีใหม่ 10 รายการ ซึ่งแต่ละรายการมีฟีเจอร์เฉพาะตัวเพื่อ ช่วยนักออกแบบและนักพัฒนาซอฟต์แวร์ในการแสดง เลือก และผสมสี ก่อนหน้านี้ sRGB เป็นตัวเลือกเดียวสำหรับการทำงานกับสี แต่ตอนนี้ CSS ได้ปลดล็อก ศักยภาพใหม่และพื้นที่สีเริ่มต้นใหม่คือ LCH

color-mix()

ก่อนcolor-mix() นักพัฒนาแอปและนักออกแบบต้องใช้ตัวประมวลผลล่วงหน้า เช่น Sass เพื่อผสมสีก่อนที่เบราว์เซอร์จะเห็น ฟังก์ชันการผสมสีส่วนใหญ่ยังไม่มีตัวเลือกในการระบุว่าควรใช้พื้นที่สีใดในการผสม ซึ่งบางครั้งก็ทำให้ผลลัพธ์ที่ได้สับสน

หลังจาก color-mix() นักพัฒนาแอปและนักออกแบบจะผสมสีในเบราว์เซอร์ได้ พร้อมกับสไตล์อื่นๆ ทั้งหมด โดยไม่ต้องเรียกใช้กระบวนการบิลด์หรือรวม JavaScript นอกจากนี้ ยังระบุพื้นที่สีที่จะใช้ในการผสม หรือใช้พื้นที่สีผสมเริ่มต้นของ LCH ได้ด้วย

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

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

และหากต้องการผสมสีเหล่านั้นในพื้นที่สีอื่น เช่น srgb ให้เปลี่ยนเป็น

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

ต่อไปนี้เป็นเดโมการกำหนดธีมโดยใช้ color-mix() ลองเปลี่ยนสีแบรนด์ แล้วดูว่าธีมมีการอัปเดตหรือไม่

ขอให้สนุกกับการผสมสีในพื้นที่สีต่างๆ ในชีตสไตล์ในปี 2022

แหล่งข้อมูล

• ข้อกำหนด color-mix()
• color-mix() ใน MDN
• การสาธิตการกำหนดธีม
• การสาธิตการกำหนดธีมอีกรายการ
• Fabio Giolito: สร้างธีมสีด้วย ฟีเจอร์ CSS ที่กำลังจะเปิดตัว

color-contrast()

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

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

นี่คือภาพหน้าจอของชุดสี HWB สาธิต ซึ่งเบราว์เซอร์จะเลือกสีข้อความโดยอัตโนมัติ ตามสีตัวอย่าง

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

color: color-contrast(gray);

นอกจากนี้ คุณยังปรับแต่งฟังก์ชันด้วยรายการสีได้ด้วย ซึ่งฟังก์ชันจะเลือกสีที่มีคอนทราสต์สูงสุดจากตัวเลือก

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

สุดท้ายนี้ ในกรณีที่ต้องการไม่เลือกสีที่มีคอนทราสต์สูงสุดจากรายการ คุณสามารถระบุอัตราส่วนคอนทราสต์เป้าหมายได้ และระบบจะเลือกสีแรกที่ผ่าน อัตราส่วนดังกล่าว

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

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

แหล่งข้อมูล

• ข้อกำหนด color-contrast()
• color-contrast() ใน MDN
• สาธิต

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

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

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

ในตัวอย่างไวยากรณ์ต่อไปนี้ มีการระบุเลขฐานสิบหกพื้นฐานและสร้างสีใหม่ 2 สีที่สัมพันธ์กับสีดังกล่าว สีแรก --absolute-change สร้างสีใหม่ ใน LCH จากสีฐาน จากนั้นจะแทนที่ความสว่างของสีฐาน ด้วย 75% โดยคงค่าโครมา (c) และฮิว (h) ไว้ ส่วนสีที่สอง --relative-change จะสร้างสีใหม่ใน LCH จากสีฐาน แต่คราวนี้ จะลดค่าโครมา (c) ลง 20%

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

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

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

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

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

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

แหล่งข้อมูล

• ข้อกำหนด ไวยากรณ์สีสัมพัทธ์
• การสร้างชุดสีด้วยไวยากรณ์สีสัมพัทธ์
• การสร้างสีที่แตกต่างกันด้วยไวยากรณ์สีสัมพัทธ์

พื้นที่สีของการไล่ระดับสี

ก่อนที่จะมีพื้นที่สีแบบไล่ระดับ sRGB เป็นพื้นที่สีเริ่มต้นที่ใช้กันโดยทั่วไป sRGB เชื่อถือได้โดยทั่วไป แต่ก็มีจุดอ่อนบางอย่าง เช่น โซนสีเทา ที่ไม่มีการไล่ระดับสี

หลังจากพื้นที่สีของการไล่ระดับสี ให้บอกเบราว์เซอร์ว่าจะใช้พื้นที่สีใดสำหรับการ ประมาณค่าสี ซึ่งช่วยให้นักพัฒนาแอปและนักออกแบบเลือก การไล่ระดับสีที่ต้องการได้ นอกจากนี้ Color Space เริ่มต้นจะเปลี่ยนเป็น LCH แทน sRGB ด้วย

การเพิ่มไวยากรณ์จะอยู่หลังทิศทางของการไล่ระดับสี ใช้ไวยากรณ์ in ใหม่ และไม่บังคับ

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

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

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

อ่านการเจาะลึก ตัวอย่าง และความคิดเห็นเพิ่มเติมได้ในเธรดนี้บน Twitter

แหล่งข้อมูล

• ข้อกำหนด การประมาณค่าการไล่ระดับสี
• การสาธิตการเปรียบเทียบการไล่ระดับสีในพื้นที่
• Notebook ที่สังเกตได้ซึ่งเปรียบเทียบ การไล่ระดับสี

inert

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

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

ตัวอย่างที่ดีของฟังก์ชันนี้คือฟังก์ชัน alert() ของ JavaScript

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

ต่อไปนี้คือตัวอย่างโค้ดเล็กๆ ที่แสดงให้เห็นวิธีการทำงาน

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

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

แหล่งข้อมูล

• ข้อกำหนด เฉื่อย
• เฉื่อยชาใน MDN
• นักพัฒนาซอฟต์แวร์ Chrome: ขอแนะนำ inert

แบบอักษร COLRv1

ก่อนที่จะมีแบบอักษร COLRv1 เว็บไซต์มีแบบอักษร OT-SVG ซึ่งเป็นรูปแบบเปิดสำหรับแบบอักษรที่มีการไล่ระดับสี รวมถึงสีและเอฟเฟกต์ในตัว แต่ไฟล์เหล่านี้อาจมีขนาดใหญ่มาก และแม้ว่าจะอนุญาตให้แก้ไขข้อความได้ แต่ก็มีขอบเขตการปรับแต่งไม่มากนัก

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

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

แบบอักษรไอคอนสามารถทำสิ่งต่างๆ ที่น่าทึ่งได้ด้วยรูปแบบนี้ โดยมี ชุดสีแบบ 2 สีที่กำหนดเอง และอื่นๆ การโหลดแบบอักษร COLRv1 จะเหมือนกับไฟล์แบบอักษรอื่นๆ

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

การปรับแต่งแบบอักษร COLRv1 ทำได้ด้วย @font-palette-values ซึ่งเป็นกฎ @ พิเศษของ CSS สำหรับการจัดกลุ่มและตั้งชื่อชุดตัวเลือกการปรับแต่งเป็นแพ็กเกจเพื่อ ใช้อ้างอิงในภายหลัง โปรดสังเกตวิธีระบุชื่อที่กำหนดเองเหมือนกับพร็อพเพอร์ตี้ที่กำหนดเอง โดยเริ่มต้นด้วย --

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

เมื่อใช้ --colorized เป็นชื่อแทนสำหรับการปรับแต่ง ขั้นตอนสุดท้ายคือการใช้ จานสีกับองค์ประกอบที่ใช้ชุดแบบอักษรสี

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

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

แหล่งข้อมูล

• ข้อกำหนด Colrv1 ใน Github
• นักพัฒนาซอฟต์แวร์ Chrome: Colrv1 Fonts
• วิดีโออธิบายสำหรับนักพัฒนาแอป BlinkOn

หน่วยวิวพอร์ต

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

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

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

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

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

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

เราหวังว่าสิ่งเหล่านี้จะช่วยให้นักพัฒนาแอปและนักออกแบบมีความยืดหยุ่นที่จำเป็นต่อการ สร้างการออกแบบที่ตอบสนองตามวิวพอร์ต

แหล่งข้อมูล

• ข้อกำหนด หน่วยที่สัมพันธ์กับ Viewport
• Bramus: Large, Small, and Dynamic Viewports

:has()

ก่อน :has() subject ของตัวเลือกจะอยู่ท้ายเสมอ เช่น องค์ประกอบที่เลือกของตัวเลือกนี้คือรายการ ul > li ตัวเลือกเสมือนสามารถเปลี่ยนตัวเลือกได้ แต่จะไม่เปลี่ยนเรื่อง: ul > li:hover หรือ ul > li:not(.selected)

หลังจาก :has() องค์ประกอบที่อยู่สูงกว่าในแผนผังองค์ประกอบจะยังคงเป็นหัวเรื่องได้ ขณะที่ระบุคำค้นหาเกี่ยวกับบุตรหลาน: ul:has(> li) คุณจะเข้าใจได้ง่ายๆ ว่าทำไม :has() จึงมีชื่อเรียกทั่วไปว่า "ตัวเลือกหลัก" เนื่องจากตอนนี้เรื่องของ ตัวเลือกคือองค์ประกอบหลักในกรณีนี้

ต่อไปนี้เป็นตัวอย่างไวยากรณ์พื้นฐานที่คลาส .parent ยังคงเป็นเรื่อง แต่จะเลือกก็ต่อเมื่อองค์ประกอบย่อยมีคลาส .child เท่านั้น

.parent:has(.child) {...}

ตัวอย่างต่อไปนี้แสดงให้เห็นว่าองค์ประกอบ <section> เป็นเรื่อง แต่ตัวเลือกจะตรงกันก็ต่อเมื่อองค์ประกอบย่อยรายการใดรายการหนึ่งมี :focus-visible

section:has(*:focus-visible) {...}

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

a:has(> img) {...}

ตัวอย่างทั้งหมดที่กล่าวมาเป็นกรณีที่ :has() ดูเหมือนตัวเลือกระดับบนสุดเท่านั้น พิจารณากรณีการใช้งานรูปภาพภายในองค์ประกอบ <figure> และปรับรูปแบบในรูปภาพหากรูปภาพมี <figcaption> ในตัวอย่างต่อไปนี้ ระบบจะเลือกรูปภาพที่มีคำบรรยายรูปภาพ แล้วเลือกรูปภาพภายในบริบทนั้น :has() ใช้และไม่เปลี่ยนเรื่อง เนื่องจากเรื่องที่เรา กำหนดเป้าหมายคือรูปภาพ ไม่ใช่ตัวเลข

figure:has(figcaption) img {...}

ซึ่งมีตัวเลือกมากมาย รวม :has() กับการค้นหา จำนวนและปรับ เลย์เอาต์ตารางกริด CSS ตามจำนวนรายการย่อย รวม :has() กับ สถานะคลาสเสมือนแบบอินเทอร์แอกทีฟและสร้าง แอปพลิเคชันที่ตอบสนองด้วยวิธีใหม่ๆ ที่สร้างสรรค์

การตรวจสอบการรองรับทำได้ง่ายๆ ด้วยฟังก์ชัน @supports และ selector() ซึ่งจะทดสอบว่าเบราว์เซอร์เข้าใจไวยากรณ์หรือไม่ก่อนที่จะใช้

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

แหล่งข้อมูล

• ข้อกำหนด:has()
• :has() ใน MDN
• ตัวเลือก CSS :has() เป็นมากกว่า "ตัวเลือก ระดับบน"

ปี 2022 และหลังจากนั้น

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

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

พร็อพเพอร์ตี้ที่กำหนดเองแบบไม่เข้มงวด

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

พิจารณาสถานการณ์ที่ box-shadow ใช้พร็อพเพอร์ตี้ที่กำหนดเองสำหรับค่าของพร็อพเพอร์ตี้

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

ทุกอย่างทำงานได้ดีจนกว่าจะมีการเปลี่ยนพร็อพเพอร์ตี้ใดพร็อพเพอร์ตี้หนึ่งเป็นค่าที่ CSS ไม่ยอมรับ เช่น --x: red เงาทั้งหมดจะหยุดทำงานหากตัวแปรที่ซ้อนกันหายไปหรือตั้งค่าเป็นประเภทค่าที่ไม่ถูกต้อง

@property จึงเข้ามามีบทบาทในจุดนี้ โดย --x สามารถ กลายเป็นพร็อพเพอร์ตี้ที่กำหนดเองแบบมีประเภท ซึ่งจะไม่ใช่พร็อพเพอร์ตี้ที่ยืดหยุ่นและไม่เข้มงวดอีกต่อไป แต่จะปลอดภัยด้วยขอบเขตที่กำหนดไว้

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

ตอนนี้เมื่อ box-shadow ใช้ var(--x) และต่อมามีการพยายามใช้ --x: red ระบบจะไม่สนใจ red เนื่องจากไม่ใช่ <length> ซึ่งหมายความว่า Shadow จะยังคงทำงานต่อไปได้ แม้ว่าจะมีการระบุค่าที่ไม่ถูกต้องให้กับพร็อพเพอร์ตี้ที่กำหนดเองรายการใดรายการหนึ่งก็ตาม แต่จะกลับไปใช้ initial-value ของ 0px แทน

แอนิเมชัน

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

ลองดูตัวอย่างการสาธิตนี้ ซึ่งใช้การไล่ระดับสีแบบรัศมีเพื่อสร้างส่วนหนึ่งของ ภาพซ้อนทับ ทำให้เกิดเอฟเฟกต์โฟกัสสปอตไลต์ JavaScript จะตั้งค่า x และ y ของเมาส์ เมื่อกดปุ่ม Alt/Option จากนั้นจะเปลี่ยนขนาดโฟกัสเป็นค่าที่เล็กลง เช่น 25% เพื่อสร้างวงกลมโฟกัสสปอตไลต์ที่ตำแหน่งของเมาส์

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

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

วิดีโอเกมที่ใช้เอฟเฟกต์โฟกัสนี้จะทำให้วงกลมเคลื่อนไหวเสมอ โดยจะเคลื่อนไหวจากวงกลมขนาดใหญ่ ไปเป็นวงกลมขนาดเล็ก วิธีใช้ @property กับเดโมของเราเพื่อให้เบราว์เซอร์ เคลื่อนไหวมาสก์ไล่ระดับสีมีดังนี้

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

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

@property ทำได้มากกว่านี้มาก แต่การเปิดใช้ฟีเจอร์เล็กๆ เหล่านี้ก็ช่วยได้มากแล้ว

แหล่งข้อมูล

• @property specification
• @property ใน MDN
• @property ใน web.dev
• การสาธิตโฟกัสการซูม
• เคล็ดลับ CSS: สำรวจ @property และความสามารถในการเคลื่อนไหวของพร็อพเพอร์ตี้นี้

อยู่ใน min-width หรือ max-width

ก่อนช่วงคำค้นหาสื่อ คำค้นหาสื่อ CSS จะใช้ min-width และ max-width เพื่อ ระบุเงื่อนไข "มากกว่า" และ "น้อยกว่า" ซึ่งอาจมีลักษณะดังนี้

@media (min-width: 320px) {
  …
}

หลังจากช่วงการค้นหาสื่อ การค้นหาสื่อเดียวกันอาจมีลักษณะดังนี้

@media (width >= 320px) {
  …
}

คำค้นหาสื่อ CSS ที่ใช้ทั้ง min-width และ max-width อาจมีลักษณะดังนี้

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

หลังจากช่วงการค้นหาสื่อ การค้นหาสื่อเดียวกันอาจมีลักษณะดังนี้

@media (320px <= width <= 1280px) {
  …
}

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

แหล่งข้อมูล

• ข้อกำหนดไวยากรณ์ช่วงของ Media Query
• ไวยากรณ์ช่วงของ Media Query ใน MDN
• ไวยากรณ์ช่วงของ Media Query ปลั๊กอิน PostCSS

ไม่มีตัวแปรการค้นหาสื่อ

ก่อน @custom-media คำค้นหาสื่อต้องทำซ้ำแล้วซ้ำอีก หรือ ต้องพึ่งพาตัวประมวลผลล่วงหน้าเพื่อสร้างเอาต์พุตที่เหมาะสมตามตัวแปรแบบคงที่ ในระหว่างเวลาบิลด์

หลังจาก @custom-media แล้ว CSS จะอนุญาตการใช้นามแฝงสำหรับ Media Query และการอ้างอิงถึง Media Query เหล่านั้น เช่นเดียวกับพร็อพเพอร์ตี้ที่กำหนดเอง

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

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

เมื่อกำหนดแล้ว ฉันก็สามารถใช้ตัวใดตัวหนึ่งได้ดังนี้

@media (--OSdark) {
  :root {
    …
  }
}

ดูรายการคำค้นหาสื่อที่กำหนดเองทั้งหมดที่ฉันใช้ในไลบรารีพร็อพเพอร์ตี้ที่กำหนดเองของ CSS Open Props

แหล่งข้อมูล

• ข้อกำหนดเกี่ยวกับ การค้นหาสื่อที่กำหนดเอง
• ปลั๊กอิน Custom Media Queries PostCSS

การซ้อนตัวเลือกนั้นดีมาก

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

หลังจาก @nest การทำซ้ำจะหายไป ฟีเจอร์เกือบทั้งหมดของการซ้อนที่เปิดใช้ตัวประมวลผลล่วงหน้าจะพร้อมใช้งานใน CSS

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

สิ่งที่สำคัญที่สุดเกี่ยวกับการซ้อนสำหรับฉัน นอกเหนือจากการไม่ทำซ้ำ article ใน ตัวเลือกที่ซ้อนกันคือบริบทการจัดรูปแบบยังคงอยู่ในบล็อกรูปแบบเดียว แทนที่จะเปลี่ยนจากตัวเลือกหนึ่งและสไตล์ของตัวเลือกนั้นไปยังตัวเลือกอื่นที่มีสไตล์ (ตัวอย่างที่ 1) ผู้อ่านจะยังคงอยู่ในบริบทของบทความและเห็นว่าบทความเป็นเจ้าของลิงก์ภายในบทความ ความสัมพันธ์และสไตล์ที่ต้องการจะรวมกัน ดังนั้น article จึงปรากฏขึ้นเพื่อเป็นเจ้าของสไตล์ของตัวเอง

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

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

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

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

แหล่งข้อมูล

• @ข้อกำหนดของ Nest
• @nest PostCSS plugin
• Bramus: อนาคตของ CSS: การซ้อน ตัวเลือก

การกำหนดขอบเขตสไตล์เป็นเรื่องยากมาก

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

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

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

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

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

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

และเพื่อปิดท้ายเรื่องราวนี้ @scope ยังช่วยให้กำหนดขอบเขตของสไตล์ได้ด้วย ซึ่งทำไม่ได้ด้วยรูปแบบการตั้งชื่อหรือตัวประมวลผลล่วงหน้า แต่เป็นฟีเจอร์พิเศษที่ CSS ในตัวของเบราว์เซอร์เท่านั้นที่ทำได้ ในตัวอย่างต่อไปนี้ สไตล์ img และ .content จะมีผลเฉพาะเมื่อองค์ประกอบย่อยของ .media-block เป็นองค์ประกอบที่อยู่ระดับเดียวกันหรือเป็นองค์ประกอบหลักของ .content

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

แหล่งข้อมูล

• @ข้อกำหนดขอบเขต
• @scope explainer

ไม่มีวิธี CSS สำหรับเลย์เอาต์แบบก้อนอิฐ

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

หลังจากใช้ CSS Masonry กับกริดแล้ว คุณจะไม่ต้องใช้ไลบรารี JavaScript และลำดับเนื้อหาจะถูกต้อง

การสาธิตข้างต้นทำได้ด้วย CSS ต่อไปนี้

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

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

แหล่งข้อมูล

• ข้อกำหนด เลย์เอาต์แบบอิฐ
• เลย์เอาต์แบบเมสันรีใน MDN
• Smashing Magazine: เลย์เอาต์แบบเมสันรี CSS เนทีฟด้วย CSS Grid

CSS ช่วยให้ผู้ใช้ลดการใช้ข้อมูลไม่ได้

ก่อนที่จะมี prefers-reduced-data Media Query, JavaScript และเซิร์ฟเวอร์สามารถ เปลี่ยนลักษณะการทำงานตามระบบปฏิบัติการหรือตัวเลือก "ประหยัดข้อมูล" ของเบราว์เซอร์ ของผู้ใช้ได้ แต่ CSS ทำไม่ได้

หลังจาก prefers-reduced-data Media Query แล้ว CSS จะช่วยปรับปรุงประสบการณ์ของผู้ใช้ และมีส่วนช่วยในการประหยัดข้อมูลได้

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

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

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

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

แหล่งข้อมูล

• ข้อกำหนด prefers-reduced-data
• prefers-reduced-data ใน MDN
• prefers-reduced-data ใน GUI Challenge
• Smashing Magazine: การปรับปรุง Core Web Vitals, กรณีศึกษาของ Smashing Magazine

ฟีเจอร์การเลื่อนสแนปมีข้อจำกัดมากเกินไป

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

API ใหม่

snapChanging()

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

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

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

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

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

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

ตัวเลือก CSS นี้จะจับคู่องค์ประกอบในคอนเทนเนอร์การเลื่อนสแนปที่เบราว์เซอร์ สแนปอยู่ในปัจจุบัน

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

หลังจากข้อเสนอการเลื่อนสแนปเหล่านี้ การสร้างแถบเลื่อน แคโรเซล หรือแกลเลอรีจะง่ายขึ้นมาก เนื่องจากตอนนี้เบราว์เซอร์มีเครื่องมืออำนวยความสะดวกสำหรับงานนี้แล้ว ซึ่งช่วยลดความจำเป็นในการใช้โค้ดสำหรับ Observer และการจัดระเบียบการเลื่อนเพื่อใช้ API ในตัว

ฟีเจอร์ CSS และ JS เหล่านี้ยังอยู่ในช่วงเริ่มต้น แต่โปรดคอยติดตาม Polyfill ที่จะช่วยให้คุณนำไปใช้และทดสอบได้ในเร็วๆ นี้

แหล่งข้อมูล

• ข้อกำหนดฉบับร่างของ Scroll Snap 2
• คำอธิบาย Scroll Snap 2
• การสาธิต Snap

การเปลี่ยนสถานะที่รู้จัก

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

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

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

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

และรูปแบบ CSS toggle() ที่เกี่ยวข้อง

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

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

แหล่งข้อมูล

• ข้อกำหนดฉบับร่างของ toggle()
• Bramus: อนาคตของ CSS: CSS Toggles

การปรับแต่งองค์ประกอบบางอย่าง

ก่อนหน้านี้ <selectmenu>CSS ไม่มีความสามารถในการปรับแต่ง<option> องค์ประกอบด้วย HTML ที่สมบูรณ์ หรือเปลี่ยนแปลงการแสดงรายการตัวเลือกมากนัก ซึ่งทำให้นักพัฒนาซอฟต์แวร์ต้องโหลดไลบรารีภายนอกที่สร้างฟังก์ชันการทำงานส่วนใหญ่ของ <select> ขึ้นมาใหม่ ซึ่งต้องใช้เวลามาก

หลังจาก <selectmenu> นักพัฒนาแอปจะระบุ HTML ที่สมบูรณ์สำหรับองค์ประกอบตัวเลือกและ จัดรูปแบบได้มากเท่าที่ต้องการ ในขณะที่ยังคงเป็นไปตามข้อกำหนดด้านการช่วยเหลือพิเศษ และระบุ HTML เชิงความหมาย

ในตัวอย่างต่อไปนี้ ซึ่งมาจาก<selectmenu> หน้าคำอธิบาย เราจะสร้างเมนูแบบเลือกใหม่ พร้อมตัวเลือกพื้นฐานบางอย่าง

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS สามารถกำหนดเป้าหมายและจัดรูปแบบส่วนต่างๆ ขององค์ประกอบได้ ดังนี้

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

คุณทดลองใช้องค์ประกอบ <selectmenu> ใน Chromium ใน Canary ได้โดยเปิดใช้แฟล็ก web experiments โปรดติดตามการอัปเดตเกี่ยวกับองค์ประกอบเมนู ที่เลือกซึ่งปรับแต่งได้ในปี 2023 และหลังจากนั้น

แหล่งข้อมูล

• ข้อกำหนดของ Selectmenu
• การสาธิต Selectmenu

การยึดองค์ประกอบกับองค์ประกอบอื่น

ก่อน anchor() กลยุทธ์ตำแหน่งคือตำแหน่งแบบสัมบูรณ์และแบบสัมพัทธ์ ที่นักพัฒนาซอฟต์แวร์ใช้เพื่อให้องค์ประกอบย่อยเคลื่อนที่ภายในองค์ประกอบหลัก

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

คำอธิบายมีตัวอย่างและตัวอย่างโค้ดที่ยอดเยี่ยม 2-3 รายการ หากคุณสนใจดูข้อมูลเพิ่มเติม

แหล่งข้อมูล

• anchor() explainer