CSS ส่วนตัวผู้ใช้

CSS ส่วนตัวผู้ใช้

ที่นี่คุณจะเรียนรู้คุณสมบัติ CSS สำหรับตัวแปลที่ใช้สำหรับส่วนตัวยูสเซอร์ต่อไปนี้:

  • resize
  • outline-offset

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางระบุสูตรฯ ของบราวเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่

แบบค่า Chrome IE Firefox Safari Opera
resize 4.0 ไม่สนับสนุน 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS ปรับขนาด

resize คุณสมบัตินี้กำหนดว่าองค์ประกอบควร(และจะ)ปรับขนาดโดยผู้ใช้

องค์ประกอบ div นี้สามารถปรับขนาดโดยผู้ใช้ได้!

ปรับขนาด: คลิกและลากมุมล่างขวาขององค์ประกอบ div นี้

แจ้งเตือน：Internet Explorer ไม่สนับสนุนคุณสมบัติ resize

ตัวอย่างดังต่อไปนี้ทำให้ผู้ใช้สามารถปรับขนาดความกว้างขององค์ประกอบ <div> ได้เท่านั้น:

ตัวอย่าง

div {
  resize: horizontal;
  overflow: auto;
}

ทดลองด้วยตัวเอง

ตัวอย่างดังต่อไปนี้ทำให้ผู้ใช้สามารถปรับขนาดความสูงขององค์ประกอบ <div> ได้เท่านั้น:

ตัวอย่าง

div {
  resize: vertical;
  overflow: auto;
}

ทดลองด้วยตัวเอง

ตัวอย่างดังต่อไปนี้ทำให้ผู้ใช้สามารถปรับขนาดความสูงและความกว้างขององค์ประกอบ <div> ได้:

ตัวอย่าง

div {
  resize: both;
  overflow: auto;
}

ทดลองด้วยตัวเอง

ในหลายบราวเซอร์ <textarea> มีความสามารถปรับขนาดได้โดยเริ่มต้น: ที่นี่ เราใช้คุณสมบัติ resize ที่ห้ามการปรับขนาดนี้:

ตัวอย่าง

textarea {
  resize: none;
}

ทดลองด้วยตัวเอง

การเคลื่อนที่โค้งรอบ CSS

outline-offset คุณสมบัตินี้เพิ่มช่องว่างระหว่างโครงรอยและขอบขององค์ประกอบ

div นี้มีโครงรอยด้านนอกของขอบเส้นขอบ 15px

แจ้งเตือน：โครงรอยต่างจากขอบ! โดยเหตุผลที่โครงรอยเส้นตรงอยู่นอกจากขอบขององค์ประกอบและอาจเกี่ยวข้องกับเนื้อหาอื่น ๆ พร้อม ๆ ก็ไม่ใช่ส่วนหนึ่งของขนาดขององค์ประกอบ: ความกว้างและความสูงทั้งหมดขององค์ประกอบไม่ได้รับผลกระทบจากความกว้างของโครงรอย:

ตัวอย่างดังต่อไปนี้ใช้คุณสมบัติ outline-offset ที่เพิ่มช่องว่างระหว่างเส้นขอบและโครงรอย:

ตัวอย่าง

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

ทดลองด้วยตัวเอง

CSS แบบค่าส่วนตัวผู้ใช้

ตารางต่อไปนี้ระบุแบบค่าทั้งหมดของส่วนตัวผู้ใช้

แบบค่า คำอธิบาย
outline-offset เพิ่มช่องว่างระหว่างเส้นรอยลวดและขอบของวัตถุ
resize กำหนดว่าส่วนประกอบเกี่ยวกับวัตถุว่าเป็นส่วนที่สามารถปรับขนาดโดยผู้ใช้หรือไม่