โค้ดสไนเป็ต CSS สมัยใหม่: เลิกเขียน CSS เหมือนปี 2015 ได้แล้ว

 (modern-css.com)
3 คะแนน โดย GN⁺ 2026-02-16 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ชุดโค้ดที่นำ เทคนิคแฮ็ก CSS แบบเก่า มาเปรียบเทียบแบบเคียงข้างกับ ไวยากรณ์ CSS เนทีฟสมัยใหม่ ที่ใช้แทนได้
  • ใช้มาตรฐานสมัยใหม่อย่าง Grid, Flexbox, OKLCH colors, container query, scroll-timeline เพื่อลดการพึ่งพา JavaScript
  • แบ่งตามหัวข้ออย่าง สี เลย์เอาต์ แอนิเมชัน ซีเลกเตอร์ ไทโปกราฟี และเวิร์กโฟลว์ พร้อมนำเสนอทางเลือกสมัยใหม่ของแต่ละความสามารถ
  • มาตรฐาน CSS รุ่นใหม่ช่วย ลดการพึ่งพา JS, Sass และไลบรารีภายนอก พร้อม ใช้ความสามารถเนทีฟของเบราว์เซอร์ ได้อย่างเต็มที่

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

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

 
GN⁺ 2026-02-16
ความคิดเห็นจาก Hacker News

  • CSS ในปี 2025 ฟังดูเหมือนชวนให้กลับไปเขียน inline style แบบปี 2005 ลงใน HTML โดยตรง
    กำลังพูดถึง Tailwind นั่นแหละ แต่สุดท้ายก็เท่ากับมองข้ามการแยกรูปแบบออกจากการนำเสนอ

    • มายาคติ ที่เก่าแก่ที่สุดอย่างหนึ่งในวงการพัฒนาเว็บคือแนวคิดเรื่อง “การแยกส่วนความรับผิดชอบ”
    • HTML กับ CSS เป็นเพียงการแยกเทคโนโลยีเท่านั้น
      ถ้า HTML ดูแลเฉพาะคอนเทนต์จริง ๆ และ CSS ดูแลเฉพาะสไตล์จริง ๆ เราก็คงไม่ต้องสร้าง div soup แบบ .container-wrapper .container .container-inner
      ความจริงที่ว่าต้องแก้ HTML ทุกครั้งเวลาเปลี่ยนเลย์เอาต์ก็คือหลักฐาน
    • ไม่จำเป็นต้องทำโค้ดให้อ่านยาก แค่ใช้ Tailwind ก็พอ
    • ผมกลับคิดว่านั่นดีกว่าด้วยซ้ำ
      โค้ดที่เกี่ยวกับคอมโพเนนต์อยู่รวมกันในที่เดียว ไม่ต้องสลับไฟล์ไปมา
    • คิดว่าเป็นไอเดียที่ดี
      เลย์เอาต์กับสไตล์คือส่วนหนึ่งของ UI ที่แยกจากกันไม่ได้
      HTML ไม่ใช่คอนเทนต์ แต่เป็นเลย์เอาต์
      ต่อให้ยึดถือการแยกส่วนความรับผิดชอบ HTML กับ CSS ก็ยังอยู่ในชั้นการนำเสนอเดียวกัน
      การเชื่อว่าจะแยกสองอย่างนี้ออกจากกันได้ก็เหมือนปฏิเสธความจริง

  • ลองสรุปรายการจุดปรับปรุงหลัก ๆ ของ CSS ยุคหลังมานิดหน่อย

    1. nested selectors
    2. :has(...)
    3. :is(...) — เมื่อก่อนต้องใช้ลูกเล่นอย่าง :not(:not(...))
    4. :where(...) — คล้าย :is(...) แต่ selector specificity เป็น 0 เลยมีประโยชน์เวลาใช้ selector ซับซ้อน
    • เห็นด้วยกับข้อ 1 แบบมาก ๆ
      LLM ส่วนใหญ่ยังไม่รู้จักฟีเจอร์นี้
      แนะนำให้เพิ่มตัวอย่างไว้ใน AGENTS.md
      ดู เอกสาร MDN เรื่อง Nesting Selector ได้
      ใช้ & selector เพื่อให้ อ่านง่ายขึ้นและลดความซ้ำซ้อน ได้พร้อมกัน
    • อันที่ผมชอบที่สุดคือ text-box: trim
      รู้สึกเหมือนเป็นอิสระหลังจากต้องอธิบายให้นักออกแบบฟังมา 20 ปีว่าการจัดขอบด้านบนของตัวพิมพ์ใหญ่ให้ตรงกันนั้นทำไม่ได้
    • ส่วนตัวชอบฟีเจอร์ @layer มากที่สุด
    • ข้อ 2~4 ดี แต่ nested selectors ใช้ grep ไม่ได้ เลยไม่ชอบ

  • ตัวอย่างบางส่วนยังใช้วิธีเก่าที่ทำงานได้กับทุกเบราว์เซอร์ แต่แบบใหม่ใช้ได้แค่ Chrome/Edge
    การใส่ตัวอย่างแบบนี้ดูไม่รับผิดชอบ เพราะเป็นการตอกย้ำความเป็น Blink monopoly

    • เห็นด้วย อยากให้ตัวกรองเริ่มต้นเป็น “newly available” ที่รวมทั้งสามเบราว์เซอร์หลัก (Chrome/Edge, Safari, Firefox)
    • ไม่ใช่ความผิดของเว็บนั้น
      จริง ๆ ควรชี้ไปที่ การไม่ทำตามมาตรฐานของ Mozilla มากกว่า

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

  • น่าขันตรงที่เว็บนั้นกลับ บังคับใช้โหมดมืด และไม่ใช้ prefers-color-scheme

  • เวลามองตัวอย่าง CSS แปลกใหม่แล้วคิดว่า “เจ๋งดี!” ก็ต้องมาเจอข้อจำกัดในโลกจริง เพราะรองรับแค่ราว 40~50%

    • เมื่อก่อนการรองรับที่ไม่พอเป็นปัญหาใหญ่ แต่ตอนนี้ดีขึ้นมากแล้ว
      แม้จะเป็นผลจากอิทธิพลที่มากเกินไปของ Chromium ก็ตาม แต่โดยรวมก็ยังเป็นเรื่องดี
      ดู Interop 2025
    • ถ้าเปลี่ยนตัวกรองตัวอย่างเป็น “widely available” อัตราการรองรับจะสูงขึ้นมาก
    • มันแค่ต้องใช้เวลา
      ผู้พัฒนาเบราว์เซอร์กำลังใส่ฟีเจอร์ไว้ล่วงหน้าเพื่อให้เกิด การรองรับอย่างกว้างขวาง ในอนาคต

  • สับสนที่ตัวอย่างซึ่งขึ้นว่า Firefox ใช้ไม่ได้ กลับทำงานได้ดีในเดโมจริง
    เลยสงสัยว่าใช้ polyfill อยู่หรือเปล่า

    • มันขึ้นว่า “Limited availability”
      ตัวเลขเปอร์เซ็นต์สีเขียวมุมซ้ายล่างหมายถึงสัดส่วนผู้ใช้เบราว์เซอร์ที่รองรับฟีเจอร์นั้น
      หลายครั้งต่ำกว่าครึ่งด้วยซ้ำ
      สุดท้ายเลยใกล้เคียงกับ “latest Chrome CSS” มากกว่า “modern CSS”
    • การติดป้ายบอกการรองรับฟีเจอร์ทำได้แย่มาก
      เช่น sibling-index() ยังใช้ใน Firefox ไม่ได้ แต่กลับถูกระบุว่า “widely available”

  • ทุกวันนี้งงว่าควรใช้ Tailwind, CSS-in-JS, Sass/SCSS หรือ Vanilla CSS ดี

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

  • ทำเว็บมานานเกินไปจนแม้แต่ตัวอย่างที่ถูกเรียกว่า “วิธีแบบเก่า” หลายอันก็ยังเป็น ฟีเจอร์ที่ไม่เคยเห็นมาก่อน

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