COOL IT IDEAS AND STUFF
5 New Features That Will Change the Way You Write CSS
19-Jan-24
คัมภีร์เทพ IT
See the original english version Click here!
ปัจจุบัน เราได้เห็น CSS Features ใหม่ ๆ มากมายที่ปฏิวัติวิธีการเขียน CSS ไม่ว่าคุณจะอยู่ตรงไหนบนเส้นทางการพัฒนา Web จะมีสิ่งใหม่มาให้เรียนรู้อยู่เสมอ ยิ่งสำหรับ Styling Language ที่เรียบง่ายด้วยแล้ว มันเปลี่ยนแปลงได้เร็วมาก ดังนั้นบทความจึงมาแนะนำ 5 Features ที่จะช่วยเปลี่ยนวิธีการเขียน CSS ของคุณ
1. :has() selector
มันเป็น Selector ใหม่ที่ใช้งานได้กับทุก Browsers ยกเว้น Firefox แต่มันจะรองรับได้เมื่อเปิดใช้งาน Flag ดังนั้นเราจึงรู้ว่ากำลังจะมา
:has() selectors จะช่วยให้เราสามารถจัด Style ของ Parent Elements ได้ตาม Child Elements ของพวกมัน จากตัวอย่าง นี่คือ สิ่งที่เราสามารถทำได้:
มันจะเปลี่ยน Background ให้เป็นสีเทาในกรณีที่มี Element .img อยู่ และแน่นอนว่ายังมีการใช้งานจริงที่มากกว่านี้อีก เช่น:
การใช้ :not(:has(input:invalid)) นั้นค่อนข้างเจ๋ง แต่ก็อาจทำให้สับสนได้เช่นกัน โดยพื้นฐานแล้ว หาก Form ไม่มีการ Input ข้อมูลที่ Invalid ก็จะมีเพียงการ Input ที่ Valid เท่านั้น ดังนั้นนี่จึงถือเป็น Form ที่ควรจะเป็น
2. :focus-within pseudo-class
คุณอาจเคยใช้งาน :focus มาบ้างแล้ว แต่ :focus เอง ก็สามารถใช้ได้กับ Element ปัจจุบันเท่านั้น และจะทำอย่างไรถ้าคุณต้องการทราบว่า User กำลัง Focus อยู่ที่ Child Element อยู่หรือไม่ ซึ่ง iframe ถือว่ามีประโยชน์อย่างยิ่งหากคุณมี Sublink อยู่บน Page หรือใน Menu โดยคุณสามารถใช้งานมันได้ดังนี้:
มันจะเปลี่ยน Background เป็นสีแดงหาก User ติดตาม div อะไรก็ตามใน .div ซึ่งวิธีนี้สะดวกมาก ซึ่งคุณก็สามารถทำเช่นเดียวกันได้ ในตัวอย่างก่อนหน้านี้ของเรา
ด้วยวิธีนี้ Form จะไม่เปลี่ยนเป็นสีแดงหรือสีเขียว จนกว่า User จะมีการโต้ตอบกับ Form และโดยทั่วไปแล้ว Empty Form ถือเป็น Form ที่ Invalid ในทางเทคนิค
3. Cascade layer
สิ่งนี้ค่อนข้างจะมีเอกลักษณ์นิดหน่อย เราลองมาดูตัวอย่างนี้กันก่อน
เริ่มต้นด้วย HTML นี้:
เลือก <p> Tab:
แล้วถ้าเราต้องการที่จะเพิ่ม Styles อื่น ๆ ล่ะ จะทำอย่างไรดี ซึ่งอันที่จริงเราสามารถจัดให้ CSS มีการลดหลั่นลงมาได้ ดังนั้น เราถึงจะเพิ่ม Styles บางส่วนเข้าไปได้หลังจากนั้น
จนถึงตอนนี้ นี่เป็นเพียง CSS พื้นฐานเท่านั้น ไม่มีอะไรที่แปลกใหม่ แต่ถ้าเราต้องการเพิ่ม Style ให้กับ font-weight และ color แต่ยังคง font-size เดิมเอาไว้ล่ะ? แน่นอนว่า วิธีแก้ปัญหาที่ชัดเจนก็คือ การลบบรรทัดของ font-size: 20px นี้ออกไป แต่ตอนนี้ เรามีวิธีใหม่โดยใช้ "Layers" เข้ามาช่วย:
ผลลัพธ์ของ CSS นี้จะแสดง Paragraph เป็นตัวหนา สีแดง และมีขนาดตัวอักษร 18 Pixels แม้ว่า p selector ตัวที่สอง จะมีความเฉพาะเจาะจงมากกว่า (เนื่องจากอยู่ในตำแหน่งที่ลึกกว่า) แต่เนื่องจากเป็น "type" ภายใน Layer จึงทำให้ Font ที่มีขนาด 20px จะไม่ไป Override Font ที่มีขนาด 18px
ทีนี้หากเราลองมาคิดกันอีกแบบของ สิ่งที่อยู่ภายใน @layer:
นอกจากนี้ เรายังสามารถจัดลำดับการแสดงผลของ Layers ได้ด้วยวิธีนี้:
การแสดงผลจะเป็นแบบด้านล่างนี้
นอกจากนี้ เรายังสามารถ Import Layers ที่ต้องการใน Stylesheet ได้ ซึ่งก็เหมือนกับการ Import JS Modules หรือ Python Libraries:
4. บอกลา Transforms
คุณสามารถใช้ Transforms ในการ Scale, Rotate หรือ Distort Elements และแม้แต่เปลี่ยนให้เป็นรูปร่าง 3D ได้
แต่พวกมันก็มักจะมีปัญหาอยู่เสมอ หากคุณมี CSS เช่นนี้:
จากนั้น คุณต้องการเพิ่ม Hover Effect เพื่อ Zoom คุณจะต้องเขียนมันอีกครั้ง:
จะเห็นว่า Code ด้านบนนี้ มันน่าปวดหัวมาก
แต่โชคดีที่ตอนนี้เรามีทางเลือกใหม่ ที่ไม่จำเป็นต้องใช้ Transforms อีกแล้ว ขณะเดียวกัน เราก็ยังสามารถจัดรูปแบบ Elements ของเราได้โดยที่ไม่ต้องใช้มันอีกแล้ว
5. Code จาก User Agent
CSS Custom Properties จะช่วยให้เราสามารถบันทึก Styles ใน Code และนำมาใช้ใหม่ในภายหลังได้ ดังตัวอย่างนี้
อย่างไรก็ตาม แม้ว่าสิ่งเหล่านี้จะถูก Define โดย Programmers แต่ก็มี Styles อื่น ๆ ที่ Define โดย User Agents เราสามารถ env() เข้าถึงพวกมันผ่าน Styles ได้ ซึ่งในปัจจุบันมีเพียงแค่ 8 Styles ดังต่อไปนี้เท่านั้น:
4 รายการแรก จะ Define เกี่ยวกับ Padding สำหรับ Top, Right, Bottom และ Left ของ Browser Window ซึ่งสิ่งนี้มีประโยชน์มากในกรณีที่อยู่บน Screens ที่ไม่ใช่สี่เหลี่ยมจัตุรัส เช่น Smartwatches หรือโทรศัพท์บางรุ่นที่มีหน้าจอโค้งจนถึงขอบ คุณสามารถใช้ safe-area-inset-* เหล่านี้ได้โดยตรง แต่ค่าของพวกมันคือ 0 Pixel
ส่วน titlebar-area-* Styles เหล่านี้ สามารถใช้ได้เฉพาะกับ Progressive Web Apps และเมื่อใช้ค่า window-controls-overlay display_override เท่านั้น คุณยังสามารถใช้พวกมันเพื่อป้องกัน PWA จากการ Minimize, Maximize และ Close ปุ่มได้อีกด้วย
เราไม่สามารถนึกถึงกรณีอื่น ๆ ที่ User Agents สามารถสื่อสารกับ Stylesheet เพื่อพิจารณาว่า มันควรจะแสดงอย่างไร แน่นอนว่า คุณสามารถใช้ @media (prefers-color-scheme: dark) เพื่อตรวจสอบ Dark Mode ได้ หรือบังคับให้ Printer พิมพ์บางอย่างด้วย Background Image ได้
แต่สิ่งเหล่านี้ ไม่เหมือนกับการรับค่าจาก User Agent จริง ๆ แล้วใส่ไว้ใน Stylesheet แม้ว่า Application ในปัจจุบันจะมีข้อจำกัด แต่เราก็พอจะจินตนาการได้ว่า Applications ในอนาคต อาจต้องใช้ Font ของระบบปฏิบัติการที่ถูก Default ไว้หรือรองรับระดับการ Zoom ของ Browsers ผ่านอะไรทำนองนี้
เรายังไม่สามารถทำแบบนั้นได้ ณ ตอนนี้ และมันก็เป็นปัญหาสำหรับ Developers
แม้ว่า env() จะมี Use Cases ไม่มากนัก แต่มันก็มีโอกาสที่จะช่วยเปลี่ยนวิธีการเขียน CSS ของเราได้ และอาจเป็นสิ่งที่เราควรคำนึงถึงอีกด้วย
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด