ขยาย User Interface ด้วย CSS3 (Resize และ Outline-offset)

CSS3 UI Properties: resize และ outline-offset

CSS3 เพิ่ม property สำหรับควบคุม UI: resize (อนุญาตให้ผู้ใช้ปรับขนาด textarea/div) และ outline-offset (ระยะห่าง outline จากขอบ)

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: 20px; border: 1px solid rgb(0, 26, 255);
      outline: 4px dashed rgb(90, 2, 86); outline-offset: 15px;
    }
    textarea { display: inline-block; }
  </style>
</head>
<body>
  <h1>ตัวอย่าง Extending User Interface</h1>
  <h3>Resize property</h3>
  <textarea style="resize: none;">Textarea: Not resizable</textarea>
  <textarea>Textarea - Resizable (By default)</textarea>
  <h3>Outline property</h3>
  <div>Some text inside div</div>
</body>
</html>

Resize Property

• resize: none – ปิดการ resize (default สำหรับ div)
• resize: both – resize ทั้งกว้างและสูง (default textarea)
• resize: horizontal / vertical – จำกัดทิศทาง
• ต้องมี overflow: auto/hidden/scroll (ไม่ใช่ visible)

Outline-offset

• ระยะห่างระหว่างขอบ (border) และ outline
• ค่าเป็น length (px, em, rem) – ไม่รองรับ %
• ใช้สร้าง double border effect หรือ focus ring ที่ห่างจากขอบ

Browser Support

รองรับทุก browser สมัยใหม่ (IE ไม่รองรับ resize บน div, outline-offset รองรับ IE 9+)