สถานะของ CSS 2022

ฟีเจอร์การจัดรูปแบบเว็บสำหรับวันนี้และพรุ่งนี้ที่มีให้ดูที่ Google IO 2022 พร้อมฟีเจอร์เพิ่มเติมบางส่วน

Adam Argyle

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

ภาพรวม

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

สารบัญ

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

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

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

คอมปัตปี 2021

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

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

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

การทำงานร่วมกันในปี 2022

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

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

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

ใหม่สำหรับปี 2022

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

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

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

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

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

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

แหล่งข้อมูล

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

ตารางย่อย

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

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

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

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

แหล่งข้อมูล

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

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

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

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

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

รูปแบบเหล่านี้คือสิ่งที่ทำให้คอลัมน์ จ. อ. พ. พฤ. และศ. ในวิดีโอต่อไปนี้สามารถค้นหาได้จากองค์ประกอบเหตุการณ์

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

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

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

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

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

แหล่งข้อมูล

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

accent-color

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

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

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

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

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

แหล่งข้อมูล

• ข้อกำหนดเกี่ยวกับสีเฉพาะจุด
• สีเฉพาะจุดใน MDN
• accent-color ใน web.dev
• Bramus: ปรับตัวควบคุมอินเทอร์เฟซผู้ใช้ด้วย CSS accent-color

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

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

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

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

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

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

แหล่งข้อมูล

• ข้อมูลจำเพาะของ HWB
• HWB ใน MDN
• Stefan Judis: hwb() – สัญลักษณ์สีสำหรับมนุษย์ใช่ไหม

พื้นที่สี

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

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

color-mix()

ก่อนวันที่ color-mix() นักพัฒนาซอฟต์แวร์และนักออกแบบต้องใช้ Preprocessor เช่น 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-cโต้แย้ง() ใน MDN
• การสาธิต

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

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

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

ในตัวอย่างไวยากรณ์ต่อไปนี้ มีการระบุเลขฐาน 16 ฐานและสร้างสีใหม่ 2 สีที่เกี่ยวข้อง สีแรก --absolute-change จะสร้างสีใหม่ใน LCH จากสีฐาน จากนั้นเปลี่ยนค่าความสว่างของสีฐานเป็น 75% โดยคงโทนสี (c) และโทนสี (h) ไว้ สีที่ 2 --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 1 ชุดนี้จะเป็นตัวขับเคลื่อนพาเล็ตหลากหลายสี โดยแต่ละชุดมีฐานที่แตกต่างกัน เนื่องจากผมใช้ LCH ดังนั้นพื้นที่สีนี้ ฉันจึงใช้ 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 เชื่อถือได้ แต่มีจุดอ่อนบางอย่าง เช่น โซนเดือดสีเทา

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

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

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

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

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

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

หากต้องการข้อมูลเจาะลึก ตัวอย่าง และความคิดเห็นเพิ่มเติม โปรดอ่านชุดข้อความ Twitter นี้

แหล่งข้อมูล

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

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 ทำให้อีโมจิ เป็นเวกเตอร์และสวยงาม

แบบอักษรไอคอนมีประโยชน์อย่างมากกับรูปแบบนี้ นำเสนอชุดสีแบบดูโอโทนที่กำหนดเอง และอีกมากมาย การโหลดแบบอักษร 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;
}

เมื่อมีแบบอักษรและแบบอักษรสีที่มีความหลากหลายมากขึ้น แบบอักษรเว็บจึงเป็นวิธีที่สำคัญอย่างยิ่งต่อการปรับแต่งที่หลากหลายและการแสดงออกอย่างสร้างสรรค์

แหล่งข้อมูล

• ข้อกำหนด Colab1 ใน GitHub
• นักพัฒนาซอฟต์แวร์ Chrome: Colrv1 แบบอักษร
• วิดีโออธิบาย สำหรับนักพัฒนาซอฟต์แวร์ 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;
}

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

แหล่งข้อมูล

• ข้อกำหนดหน่วยวัดที่เกี่ยวข้องของวิวพอร์ต
• Bramus: วิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก

:has()

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

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

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

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

แอนิเมชัน

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

ลองดูตัวอย่างเดโมนี้ ซึ่งใช้การไล่ระดับสีแบบรัศมีเพื่อสร้างส่วนหนึ่งของการซ้อนทับ เพื่อสร้างเอฟเฟกต์การเน้นสปอตไลท์ JavaScript จะตั้งค่าเมาส์ x และ y เมื่อกดปุ่ม Alt/opt แล้วเปลี่ยนขนาดโฟกัสเป็นค่าที่เล็กลง เช่น 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 คุณจะพิมพ์และใช้พร็อพเพอร์ตี้ 1 รายการแยกกันเพื่อให้เบราว์เซอร์เข้าใจ Intent ได้อย่างง่ายดาย

วิดีโอเกมที่ใช้เอฟเฟกต์การโฟกัสนี้จะทำให้วงกลมเคลื่อนไหวอยู่เสมอ ตั้งแต่วงกลมขนาดใหญ่ไปจนถึงวงกลมรู ต่อไปนี้เป็นวิธีใช้ @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
• @พร็อพเพอร์ตี้ใน 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) {
  …
}

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

แหล่งข้อมูล

• ข้อกำหนดไวยากรณ์ช่วงคำค้นหาสื่อ
• ไวยากรณ์ช่วงคิวรี่สื่อบน MDN
• ปลั๊กอิน PostCSS ไวยากรณ์ช่วงคำค้นหาสื่อ

ไม่มีตัวแปรคิวรี่สื่อ

ก่อนวันที่ @custom-media การค้นหาสื่อต้องทำงานซ้ำๆ หรืออาศัยตัวประมวลผลล่วงหน้าเพื่อสร้างผลลัพธ์ที่เหมาะสมตามตัวแปรคงที่ระหว่างเวลาที่สร้าง

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

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

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

เมื่อได้คำตอบแล้ว ผมก็สามารถใช้ 1 อย่าง ดังนี้

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

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

แหล่งข้อมูล

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

ตัวเลือก Nesting สวยมาก

ก่อนวันที่ @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 รายการ แทนที่จะตีกลับจากตัวเลือกหนึ่งและรูปแบบของตัวเลือกนั้นไปยังตัวเลือกอื่นที่มีรูปแบบ (ตัวอย่างที่ 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 ปลั๊กอิน
• Bramus: อนาคตของ CSS: ตัวเลือก Nesting

การกำหนดขอบเขตนั้นยากมาก

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

@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
• ข้อความอธิบาย@scope

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

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

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

การสาธิตก่อนหน้านี้จะดำเนินการด้วย CSS ต่อไปนี้

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

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

แหล่งข้อมูล

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

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

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

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

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

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

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

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

แหล่งข้อมูล

• ต้องการข้อกำหนด ข้อมูลที่ลดลง
• ต้องการข้อมูลที่ลดลงบน MDN
• ต้องการลดข้อมูลในชาเลนจ์ GUI
• Smashing Magazine: การปรับปรุง Core Web Vitals, กรณีศึกษาของนิตยสารที่ได้รับความนิยมมากที่สุด

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

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

API ใหม่

snapChanging()

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

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;
}

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

ฟีเจอร์ CSS และ JS เหล่านี้ยังอยู่ในช่วงเริ่มต้น

แหล่งข้อมูล

• ข้อกำหนดฉบับร่างของ 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 การสลับใช้งาน

การปรับแต่งองค์ประกอบที่เลือก

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

หลังจากวันที่ <selectmenu> นักพัฒนาซอฟต์แวร์จะสร้าง HTML Rich 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 ได้โดยการเปิดใช้แฟล็กการทดสอบเว็บ คอยดูในปี 2023 และปีต่อๆ ไปสำหรับ องค์ประกอบเมนูแบบเลือกที่ปรับแต่งได้

แหล่งข้อมูล

• เลือกข้อกำหนดเมนู
• การสาธิตการเลือกเมนู

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

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

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

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

แหล่งข้อมูล

• anchor() โปรแกรมอธิบาย