CSS @property และสไตล์แบบใหม่

 (ryanmulligan.dev)
2 คะแนน โดย GN⁺ 2024-09-05 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • กฎ @property รองรับแล้วในเบราว์เซอร์สมัยใหม่ทั้งหมด และมอบความสามารถในการกำหนดไวยากรณ์ ค่าเริ่มต้น และการสืบทอดของ CSS custom properties อย่างชัดเจน
  • เวลาผ่านไปนานมากแล้วนับตั้งแต่มีการเปิดตัว CSS Houdini และ CSS Properties and Values API ครั้งแรก
  • บทความนี้พาชมเดโมที่สำรวจความเป็นไปได้ของ @property เพื่อดูว่า CSS ยุคถัดไปสามารถมอบอะไรได้บ้าง

Calls to action (องค์ประกอบกระตุ้นการกระทำ)

  • CTA ที่ดึงดูดสายตาบนหน้าเว็บถูกใช้งานในหลายเว็บไซต์
  • ผู้เขียนได้ลองทำสไตล์นี้ด้วยตัวเอง และสามารถดูผลลัพธ์ได้บน CodePen
  • หากเปิดแผง CSS ของเดโม จะเห็นกฎ @property ที่เกี่ยวข้องกับ custom properties ซึ่งต้องใช้ในการทำแอนิเมชัน
@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}
  • กฎ @property ทำให้เบราว์เซอร์ยอมรับไวยากรณ์นี้และตั้งค่าเริ่มต้นเป็น 0deg
  • สิ่งนี้ช่วยให้เบราว์เซอร์เปลี่ยนจาก 0deg ไปเป็น 360deg ได้อย่างลื่นไหล และแสดงผลกราเดียนต์ที่หมุนอยู่ได้
@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}
  • เดโมการหมุนกราเดียนต์แบบเรียบง่ายนี้แสดงให้เห็นว่าต้องใช้โค้ดเพียงไม่กี่บรรทัดเพื่อทำแนวคิดนี้ให้เกิดขึ้นจริง

การเปลี่ยนผ่านเมื่อโฮเวอร์แบบลื่นไหล

  • เมื่อองค์ประกอบถูกโฮเวอร์ จำเป็นต้องมีรายละเอียดพิเศษบางอย่างเพื่อให้เกิดการเปลี่ยนกราเดียนต์อย่างลื่นไหล
  • custom property แต่ละตัวที่ต้องทำแอนิเมชันจะประกาศไวยากรณ์ไว้ในนิยาม @property เพื่อให้เบราว์เซอร์เปลี่ยนค่าต่าง ๆ ได้อย่างต่อเนื่อง
.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}
  • ค่า --gradient-percent เป็นตัวกำหนดขนาดของบริเวณที่ส่องประกาย และเมื่อโฮเวอร์จะเพิ่มเปอร์เซ็นต์ให้สูงขึ้นเพื่อยืดแสงออก
  • ค่า --gradient-angle-offset ใช้ปรับมุมของกราเดียนต์ใหม่ เพื่อไม่ให้แสงย้อนกลับเมื่อโฮเวอร์

การปรับความเร็วการหมุน

  • ทริก CSS สำหรับทำให้การหมุนช้าลงเมื่อโฮเวอร์นั้นมีประโยชน์มาก
  • วิธีคือประกาศแอนิเมชันการหมุนเดียวกันสองครั้ง โดยตัวที่สองตั้งให้ย้อนทิศทาง, หยุดชั่วคราว และลดระยะเวลาลงครึ่งหนึ่ง
  • เมื่อโฮเวอร์ที่องค์ประกอบ animation-play-state: running จะเขียนทับค่าหยุดชั่วคราวและทำให้การหมุนช้าลงเหลือครึ่งความเร็ว

จุดแสงเล็ก ๆ

  • เพิ่มเอฟเฟกต์จุดเล็ก ๆ ที่เปล่งประกายอยู่ภายในปุ่ม
  • ทำได้โดยสร้างพื้นหลังแบบ radial-gradient
.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}
  • custom property --gradient-angle ถูกนำไปใช้ในมาสก์ conic-gradient เพื่อเผยให้เห็นบางส่วนของแพตเทิร์นจุดขณะหมุน

เพิ่มความโดดเด่นของสีเมื่อโฮเวอร์

  • ปรับปรุงสไตล์ตอนโฮเวอร์ให้มีมิติและสะดุดตามากขึ้น
  • ห่อข้อความบนปุ่มด้วยองค์ประกอบ span แล้วใช้ box-shadow แบบเบลอ เพื่อให้มันขยายและย่อเมื่อโฮเวอร์

นำสไตล์ใหม่มาใช้

  • หลายเทคนิคข้างต้นแทบเป็นไปไม่ได้เลยเมื่อไม่นานมานี้
  • การกำหนด custom properties อย่างชัดเจนเปิดโอกาสใหม่ ๆ ได้มากมาย
  • น่าจับตาว่า @property จะถูกนำไปใช้ในแอปพลิเคชันขนาดใหญ่และ design system อย่างไรบ้าง

สรุปโดย GN⁺

  • กฎ @property มอบความสามารถในการกำหนดไวยากรณ์ ค่าเริ่มต้น และการสืบทอดของ CSS custom properties อย่างชัดเจน
  • ความสามารถนี้ช่วยให้นักพัฒนาเว็บสร้างแอนิเมชันและสไตล์ที่ซับซ้อนและประณีตยิ่งขึ้นได้
  • โดยเฉพาะในแอปพลิเคชันขนาดใหญ่และ design system มีแนวโน้มว่าจะใช้งานได้อย่างมีประโยชน์มาก
  • โปรเจ็กต์อื่นที่มีความสามารถคล้ายกัน ได้แก่ CSS Houdini และ CSS Properties and Values API

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-09-05
ความคิดเห็นจาก Hacker News

  • รู้สึกเหมือนสมองต่อต้านเมื่อได้เจอแนวคิดใหม่

    • แนะนำให้อ่านบทความของ MDN
    • จำเป็นต้องลองใช้ @property ด้วยตัวเองเพื่อให้เข้าใจ
    • เมื่อต้องทำ UI ที่ซับซ้อน การลดการพึ่งพา JS ให้น้อยที่สุดเป็นเรื่องสำคัญ

  • ไม่ใช่นักพัฒนาเว็บ แต่ใช้งานเว็บเฟรมเวิร์กพื้นฐานได้

    • จำตอนที่ CSS ออกมาใหม่ ๆ ได้
    • ไม่เข้าใจ CSS ในตัวอย่าง CodePen แรก
    • สงสัยว่าระบบ styling จำเป็นต้องมีภาษาโปรแกรมแอนิเมชันขนาดย่อมหรือไม่
    • คิดว่าอาจทำด้วย JavaScript ก็ได้ไม่ใช่หรือ

  • ช่วงหลังสนใจงาน CSS โดยเฉพาะ Houdini

    • ให้ความรู้สึกคล้ายตอนเคยได้หนังสือฟีเจอร์ของ IE 5.5
    • มีการเพิ่มความสามารถใหม่ ๆ เข้าไปใน CSS แต่ก็ยังเป็นสิ่งพื้นฐาน
    • นักพัฒนา IE เคยสามารถทำโค้ด JS เป็นโมดูลแล้วแนบกับ element ผ่าน CSS ได้
    • ตอนนี้เรากำลังได้ความสามารถแบบนั้นกลับมาอีกครั้ง

  • แค่ทำได้ ไม่ได้แปลว่าควรทำเสมอไป

    • ตอนที่หลอด LED สีน้ำเงินสว่างเพิ่งออกมาใหม่ ๆ มันถูกใส่ในฮาร์ดแวร์แทบทุกอย่าง แต่ไม่ได้มีคุณค่าอะไรกับผู้ใช้

  • สิ่งที่ทำได้ด้วย CSS animation ให้ความรู้สึกเหมือนเวทมนตร์

    • เพราะมันเป็นเรื่องเฉพาะของ CSS จึงเรียนรู้ยากและสร้างภาพความเข้าใจได้ยาก
    • การเขียนโปรแกรมด้วย JS ง่ายกว่า
    • ตัวเลือกการใช้งาน CSS flex ที่มีมากทำให้ลำบาก

  • เป็นเดโมที่น่าสนใจในเชิงเทคนิค แต่ไม่ควรทำ animation ปุ่มแบบนี้

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

  • งานส่งก่อนหน้านี้ไม่ได้รับความสนใจมากนัก แต่ก็น่าสนใจและให้ความรู้

  • เว็บไซต์นี้ทำให้มีความสุข

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

  • สนุกกับการทำงาน CSS แต่ก็เห็นเพื่อนร่วมงานเจอความยากลำบาก

    • ขอแนะนำช่อง YouTube ของ Kevin Powell อย่างมาก
    • มีวิดีโอที่อธิบายความสามารถที่มีประโยชน์ของ registered properties
    • ลิงก์วิดีโอ
    • ยังมีบทความที่อธิบาย registered properties ได้อย่างเข้าใจง่าย
    • ลิงก์บทความ

  • ไม่ได้ทำเว็บมาสักพัก และใช้เวลาพอสมควรกว่าจะเข้าใจว่าฟีเจอร์นี้ทำอะไร

    • คิดว่าบทความอธิบายได้ไม่ดีนัก
    • ฟีเจอร์ใหม่นี้ทำให้สามารถใช้ค่าที่กำหนดไว้ในบล็อก @property --gradient-angle {...} ได้
    • ส่วน inherits: false; นั้นเห็นชัดว่าทำอะไร แต่ไม่เข้าใจว่าทำไมถึงจำเป็น
    • ทั้งที่ CSS selector ก็ควบคุมการสืบทอดได้อยู่แล้ว ทำไมต้องควบคุมอีกจุดหนึ่งด้วย
    • ไม่เข้าใจว่าทำไมต้องกำหนด type ในบล็อก @property
    • สงสัยว่าเบราว์เซอร์จะดูจากจุดที่มีการใช้ @property แล้วอนุมาน type เองไม่ได้หรือ