CSS At-Rules

At-rules เป็นคําสั่งพิเศษใน CSS ที่ใช้กําหนดพฤติกรรมหรือเงื่อนไขต่างๆ โดยจะขึ้นต้นด้วยเครื่องหมาย @

At-Rule	Description	ความนิยมสมัยใหม่
@media	กำหนด CSS สำหรับเงื่อนไขการแสดงผล	✅ นิยมใช้
@keyframes	กำหนดแอนิเมชัน	✅ นิยมใช้
@font-face	กำหนดแบบอักษรที่กำหนดเอง	✅ นิยมใช้
@theme	กำหนดตัวแปรธีม (TailwindCSS)	✅ นิยมใช้
@supports	ตรวจสอบความสามารถของ browser	✅ นิยมใช้
@container	Container queries	✅ นิยมใช้ (ใหม่)
@layer	จัดการ cascade layer	🟡 ใช้ในโครงการใหญ่
@property	กำหนด custom properties (Houdini)	🟡 ใช้เฉพาะโครงการ
@page	กำหนด style สำหรับ printing	🟡 ใช้สำหรับพิมพ์
@import	นำเข้า CSS ไฟล์อื่น	⚠️ ควรใช้ module แทน
@color-profile	กำหนด custom color profile	⚠️ Experimental
@charset	กำหนด character encoding	❌ ไม่ค่อยใช้
@namespace	กำหนด XML namespace	❌ ไม่ค่อยใช้
@scroll-timeline	กำหนด scroll-based animation	❌ Deprecated
@document	กำหนด style สำหรับ URL เฉพาะ	❌ Deprecated

@import

ใช้สําหรับนําเข้า CSS ไฟล์อื่นๆ

@import url("typography.css");
@import "theme.css";

@media

ใช้กําหนด CSS สําหรับขนาดหน้าจอหรือเงื่อนไขการแสดงผลต่างๆ

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

@media print {
  .no-print {
    display: none;
  }
}

@keyframes

ใช้กําหนดแอนิเมชันใน CSS

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.animated-element {
  animation: slide-in 0.5s ease-out;
}

@font-face

ใช้กําหนดแบบอักษรที่กําหนดเอง

@font-face {
  font-family: "CustomFont";
  src:
    url("fonts/custom-font.woff2") format("woff2"),
    url("fonts/custom-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@theme

ใช้กำหนดตัวแปรธีมใน TailwindCSS

@theme {
  --color-primary: #3f3cbb;
  --spacing-lg: 2rem;

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}