Definition
@import
@importใช้สำหรับนำเอา CSS จากไฟล์อื่นหรือแหล่งภายนอกมาใช้ในไฟล์ CSS ปัจจุบัน
@namespace
@namespaceกำหนด XML namespace สำหรับใช้ในเอกสาร CSS
@charset
@charsetกำหนดรหัสอักขระสำหรับไฟล์ CSS เพื่อรองรับการแสดงผลตัวอักษรที่หลากหลาย
Font
@font-face
@font-faceใช้สำหรับโหลดและกำหนดฟอนต์แบบกำหนดเองในเว็บไซต์
@keyframes
@keyframesใช้สร้างแอนิเมชันโดยกำหนดการเปลี่ยนแปลงของสไตล์ในช่วงเวลาต่างๆ
@media
@mediaใช้กำหนดสไตล์ที่จะใช้ภายใต้เงื่อนไขเฉพาะ เช่น ขนาดหน้าจอ ทำให้เว็บไซต์ตอบสนองต่อขนาดหน้าจอต่างๆ ได้
@supports
@supportsใช้กฎ CSS เฉพาะเมื่อเบราว์เซอร์รองรับคุณสมบัติ CSS ที่ระบุ
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>ทดสอบ CSS Grid</h1>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
</body>
</html>.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@supports not (display: grid) {
.grid {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 calc(33.33% - 20px);
margin: 10px;
}
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}Style
@color-profile
@color-profileกำหนดและจัดการโปรไฟล์สีสำหรับการแสดงผลสีบนหน้าเว็บ
@counter-style
@counter-styleสร้างรูปแบบตัวนับที่กำหนดเองสำหรับใช้กับรายการหรือการจัดลำดับในเนื้อหา
@starting-style
@starting-styleกำหนดสไตล์เริ่มต้นสำหรับการเปลี่ยนแปลงหรือแอนิเมชันของ CSS
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="fade-in">ข้อความที่ค่อยๆ ปรากฏ</div>
</body>
</html>@starting-style {
.fade-in {
opacity: 0;
}
}
.fade-in {
transition: opacity 0.5s ease-in;
opacity: 1;
}@property
@propertyกำหนดคุณสมบัติ CSS แบบกำหนดเองพร้อมกับระบุประเภทข้อมูลและค่าเริ่มต้น
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">กล่องที่ใช้ custom property</div>
</body>
</html>@property --my-color {
syntax: '<color>';
initial-value: #c0ffee;
inherits: false;
}
.box {
width: 200px;
height: 100px;
background-color: var(--my-color);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
}Layout
@page
@pageกำหนดสไตล์สำหรับการพิมพ์เอกสาร เช่น ขนาดหน้า และขอบกระดาษ
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>หน้าสำหรับพิมพ์</h1>
<p>ลองสั่งพิมพ์หน้านี้ดูสิ!</p>
</body>
</html>@page {
size: A4;
margin: 1cm;
}
@page :first {
margin-top: 2cm;
}
body {
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}@layer
@layerจัดระเบียบและจัดลำดับความสำคัญของกฎ CSS โดยแบ่งเป็นชั้นหรือกลุ่ม
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn">ปุ่มตัวอย่าง</button>
</body>
</html>@layer base, components, utilities;
@layer base {
body {
font-family: Arial, sans-serif;
}
}
@layer components {
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
}
}
@layer utilities {
.btn {
background-color: #3498db;
color: white;
}
}@scope
@scopeจำกัดขอบเขตของกฎ CSS ให้ใช้เฉพาะกับส่วนที่กำหนดของเอกสาร
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<img src="profile.jpg" alt="Profile">
<h2>ชื่อผู้ใช้</h2>
</div>
</body>
</html>@scope (.card) {
img {
border-radius: 50%;
width: 100px;
height: 100px;
}
h2 {
color: #333;
}
}Customization
@apply
@applyใช้กลุ่มของสไตล์ที่กำหนดไว้ล่วงหน้า (เช่น ใน utility-first CSS frameworks) กับตัวเลือก CSS
<!DOCTYPE html>
<html lang="th">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn-primary">คลิกฉัน</button>
</body>
</html>@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer components {
.btn-primary {
@apply font-bold py-2 px-4 rounded;
background-color: #3490dc;
color: #ffffff;
}
}หมายเหตุ: การใช้ @apply จำเป็นต้องใช้ร่วมกับ PostCSS และ Tailwind CSS หรือ utility-first CSS frameworks อื่นๆ