สถานะของ 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;
  }
}

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

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

แหล่งข้อมูล

• ข้อกำหนดของ Container Queries
• คำอธิบาย 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 จากนั้นจะเปลี่ยน focal-size เป็นค่าที่เล็กลง เช่น 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

ก่อนช่วง Media Query นั้น Media Query ของ 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 เหล่านั้น เช่นเดียวกับพร็อพเพอร์ตี้ที่กำหนดเอง

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

@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()

เหตุการณ์นี้จะเริ่มทันทีที่เบราว์เซอร์ปล่อย Snap Child ซึ่งจะช่วยให้ 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 ได้โดยเปิดใช้ Flag web experiments โปรดติดตามการอัปเดตเกี่ยวกับองค์ประกอบเมนู ที่เลือกซึ่งปรับแต่งได้ในปี 2023 และหลังจากนั้น

แหล่งข้อมูล

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

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

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

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

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

แหล่งข้อมูล

• anchor() explainer