CSS Playground

ทำไมถึงต้องมี Playground

การอ่าน CSS specification หรือบทความอย่างเดียวยังไม่พอ ต้องลองเขียนเองถึงจะจำ และถ้าเขียนแล้วไม่เก็บ พอต้องใช้จริงก็ต้องค้นใหม่ทุกครั้ง Playground นี้เลยเป็นที่เก็บ “ตัวอย่างที่เขียนเองแล้วเข้าใจจริง”

โครงสร้างของ Playground

css-playground/
├── layouts/
│   ├── grid-holy-grail.html
│   ├── sidebar-sticky.html
│   └── masonry-columns.html
├── components/
│   ├── card-hover.html
│   ├── tooltip-pure-css.html
│   └── toggle-switch.html
├── animations/
│   ├── skeleton-loading.html
│   └── typewriter.html
└── modern/
    ├── container-queries.html
    ├── has-selector.html
    └── anchor-positioning.html

เทคนิคที่ชอบมากที่สุด

CSS :has() selector

ทำให้ parent element รู้จัก child ได้ โดยไม่ต้องใช้ JS เลย:

/* nav ที่มี checkbox checked จะแสดง menu */
header:has(.nav-toggle:checked) nav {
  display: block;
}

/* card ที่มีรูปภาพ จะ layout ต่างออกไป */
.card:has(img) {
  grid-template-columns: auto 1fr;
}

Container Queries

ทำให้ component ปรับตัวตาม container ไม่ใช่ viewport:

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

Custom Properties + calc()

สร้าง fluid typography โดยไม่ต้องใช้ JS หรือ media query:

:root {
  --fluid-min: 1rem;
  --fluid-max: 1.5rem;
  --fluid-size: clamp(var(--fluid-min), 2.5vw, var(--fluid-max));
}

h1 { font-size: calc(var(--fluid-size) * 2); }
h2 { font-size: calc(var(--fluid-size) * 1.5); }

Techniques ที่กำลังเรียน

• @layer สำหรับ cascade management
• Anchor Positioning API (ยังเป็น experimental)
• @scope pseudo-class
• color-mix() function

สิ่งที่เรียนรู้

การทดลอง CSS ในไฟล์แยกก่อนนำไปใช้จริงช่วยให้เข้าใจ edge cases ได้ดีกว่ามาก โดยเฉพาะ grid และ flex ที่พฤติกรรมอาจเปลี่ยนเมื่ออยู่ใน context ต่างกัน