ฟีเจอร์การจัดรูปแบบเว็บสำหรับวันนี้และพรุ่งนี้ที่มีให้ดูที่ Google IO 2022 พร้อมฟีเจอร์เพิ่มเติมบางส่วน
ปี 2022 ถือเป็นปีที่ดีที่สุดวันหนึ่งของ CSS ทั้งในด้านฟีเจอร์และ การเปิดตัวฟีเจอร์เบราว์เซอร์แบบร่วมมือ พร้อมเป้าหมายการทำงานร่วมกันเพื่อติดตั้งใช้งานฟีเจอร์ 14 รายการ
ภาพรวม
โพสต์นี้เป็นรูปแบบบทความจากการพูดคุยที่ให้ไว้ในงาน Google IO 2022 โดยไม่ได้เป็นเพียงคู่มือเชิงลึกสำหรับแต่ละฟีเจอร์ แต่เป็นการแนะนำและภาพรวมคร่าวๆ เพื่อกระตุ้นความสนใจของคุณ โดยเป็นการนำเสนอแบบกว้างๆ แทนที่จะเป็นเชิงลึก หากคุณสนใจดูลิงก์แหล่งข้อมูลที่ลิงก์ไปยังข้อมูลเพิ่มเติมได้ที่ส่วนท้ายของส่วน
สารบัญ
ใช้รายการด้านล่างเพื่อข้ามไปยังหัวข้อที่สนใจ
ความเข้ากันได้กับเบราว์เซอร์
สาเหตุหลักที่มีการตั้งค่าฟีเจอร์ CSS จำนวนมากให้เผยแพร่ร่วมกันเกิดจากความพยายามของ Interop 2022 ก่อนที่จะศึกษาความพยายามในการทำงานร่วมกัน คุณควรดูความพยายามของ Compat 2021
คอมปัตปี 2021
เป้าหมายในปี 2021 ซึ่งเกิดจากความคิดเห็นของนักพัฒนาแอปผ่านแบบสำรวจคือ การรักษาฟีเจอร์ปัจจุบันให้คงที่ ปรับปรุงชุดทดสอบ และเพิ่มคะแนนที่ผ่านของเบราว์เซอร์สำหรับ 5 ฟีเจอร์ ดังนี้
- จุดยืนของ
sticky
- ขนาด
aspect-ratio
- เลย์เอาต์
flex
- เลย์เอาต์
grid
- การวางตำแหน่งและภาพเคลื่อนไหวของ
transform
คะแนนการทดสอบก็เพิ่มขึ้นมาทั่วทั้งตัว แสดงให้เห็นถึงความเสถียรและความเสถียรที่อัปเกรดมากขึ้น ขอแสดงความยินดีกับทีมต่างๆ ที่นี่
การทำงานร่วมกันในปี 2022
ในปีนี้เบราว์เซอร์ต่างๆ ได้มาพบปะกันเพื่ออภิปรายเกี่ยวกับฟีเจอร์และลำดับความสำคัญที่ตั้งใจจะพัฒนา ซึ่งรวมพลังความพยายามของตนเข้าด้วยกัน บริษัทได้วางแผนมอบฟีเจอร์ ต่อไปนี้ของเว็บให้แก่นักพัฒนาซอฟต์แวร์
@layer
- พื้นที่สีและฟังก์ชัน
- การควบคุม
<dialog>
- ความเข้ากันได้ของแบบฟอร์ม
- การเลื่อน
- ตารางย่อย
- การพิมพ์
- หน่วยวิวพอร์ต
- การทำงานร่วมกับเว็บ
นี่คือรายการที่น่าตื่นเต้นและทะเยอทะยานจนฉันแทบอดใจรอไม่ไหวที่จะได้เผยแพร่ผลงานเหล่านี้
ใหม่สำหรับปี 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 เท่านั้น) ในภาพต่อไปนี้ ตารางกริดหลักและตารางย่อยถูกวางซ้อน ทำให้ดูคล้ายกับความคิดของนักออกแบบที่มีต่อเลย์เอาต์
ในแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะเห็นว่าองค์ประกอบใดเป็นตารางกริดและตารางกริดย่อย ซึ่งมีประโยชน์มากในการแก้ไขข้อบกพร่องหรือการตรวจสอบความถูกต้องของเลย์เอาต์
แหล่งข้อมูล
การค้นหาคอนเทนเนอร์
ก่อนวันที่ @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 จะไม่ได้เพิ่มสีใหม่ๆ ให้คุณ แต่อาจทำให้แฟนๆ ของไวยากรณ์และโมเดลทางความคิดง่ายขึ้น
แหล่งข้อมูล
พื้นที่สี
การแทนค่าสีจะแสดงด้วยพื้นที่สี พื้นที่สีแต่ละพื้นที่ มีฟีเจอร์และข้อดีข้อเสียในการใช้สี บางสีอาจรวมสีที่สว่างทั้งหมดไว้ด้วยกัน บางสีอาจเรียงกันเป็นแนวก่อนโดยพิจารณาจากความอ่อนของแสง
มีการกำหนดให้ 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
แหล่งข้อมูล
ไวยากรณ์สีสัมพัทธ์
ก่อนไวยากรณ์สีที่เกี่ยวข้อง หากต้องการคำนวณสีและทำการปรับเปลี่ยน คุณต้องวางแชแนลสีลงในพร็อพเพอร์ตี้ที่กำหนดเองแยกกัน ข้อจำกัดนี้ยังทำให้ 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
ก็มีประโยชน์เช่นกันสำหรับสิ่งต่างๆ เช่น ประสบการณ์ของผู้ใช้เมนูแบบเลื่อนออก เมื่อผู้ใช้เลื่อนเมนูด้านข้างออก ผู้ใช้ไม่ควรปล่อยให้เมาส์หรือแป้นพิมพ์โต้ตอบกับหน้าที่อยู่ด้านหลัง ซึ่งเป็นเรื่องยุ่งยากเล็กน้อย แต่เมื่อเมนูด้านข้างปรากฏขึ้น ให้ทำให้หน้าเว็บไม่ทำงาน และตอนนี้ผู้ใช้ต้องปิดหรือไปยังส่วนต่างๆ ในเมนูด้านข้าง และไม่คิดว่าตัวเองหายไปจากส่วนอื่นของหน้าที่มีเมนูเปิดอยู่
แหล่งข้อมูล
แบบอักษร 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; }
เราหวังว่าสิ่งเหล่านี้จะช่วยให้นักพัฒนาซอฟต์แวร์และนักออกแบบมีความยืดหยุ่นที่จำเป็นในการออกแบบที่ตอบสนองของวิวพอร์ต
แหล่งข้อมูล
: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() */
}
แหล่งข้อมูล
ปี 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
แหล่งข้อมูล
ตัวเลือก 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
ช่วยเหลือโดยรวมเกี่ยวกับการจัดระเบียบสไตล์ที่ดีขึ้น การรวมศูนย์ และการเป็นเจ้าของ คอมโพเนนต์สามารถจัดกลุ่มและเป็นเจ้าของสไตล์ของตัวเอง แทนที่จะกระจายไปท่ามกลางบล็อกสไตล์อื่นๆ ในตัวอย่างเหล่านี้อาจจะดูเล็ก แต่ก็มีผลกระทบอย่างมาก ทั้งในด้านความสะดวกและการอ่าน
แหล่งข้อมูล
การกำหนดขอบเขตนั้นยากมาก
การสนับสนุนเบราว์เซอร์
- 118
- 118
- x
- 17.4
ก่อนวันที่ @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;
}
}
แหล่งข้อมูล
ไม่มีวิธี 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 เหล่านี้ยังอยู่ในช่วงเริ่มต้น
แหล่งข้อมูล
ปั่นจักรยานระหว่างรัฐที่รู้จัก
ก่อนวันที่ 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 ได้มากขึ้น ซึ่งคาดว่าจะส่งผลให้วิธีการรวมการโต้ตอบและสถานะเป็นกลุ่มที่ชัดเจนและมีความหมายมากขึ้น
แหล่งข้อมูล
การปรับแต่งองค์ประกอบที่เลือก
ก่อนวันที่ <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()
นักพัฒนาซอฟต์แวร์จะวางตำแหน่งองค์ประกอบให้กับองค์ประกอบอื่นๆ ได้ ไม่ว่าองค์ประกอบนั้นจะเป็นองค์ประกอบย่อยหรือไม่ก็ตาม นอกจากนี้ยังช่วยให้นักพัฒนาซอฟต์แวร์ระบุขอบที่จะกำหนดตำแหน่งได้ รวมถึงข้อดีอื่นๆ ในการสร้างความสัมพันธ์ของตำแหน่งระหว่างองค์ประกอบ
คำอธิบายนี้มีตัวอย่างและตัวอย่างโค้ดที่น่าสนใจจำนวนหนึ่งหากคุณสนใจดูข้อมูลเพิ่มเติม