CSS3 ส่วนติดต่อผู้ใช้
CSS3 มีคุณสมบัติอินเตอร์เฟซผู้ใช้ใหม่เช่นองค์ประกอบการปรับขนาดการแสดงและกล่องขนาด
ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติของอินเตอร์เฟซผู้ใช้ต่อไปนี้:
-
resize -
outline-offset
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| resize | 4.0 | ได้รับการสนับสนุน | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | ได้รับการสนับสนุน | 5.0 4.0 -moz- | 4.0 | 9.5 |
CSS3 การปรับขนาด
resize ของสถานที่ระบุหรือไม่ว่าเป็นองค์ประกอบที่ควรจะปรับขนาดได้โดยผู้ใช้
ตัวอย่างต่อไปนี้ช่วยให้ผู้ใช้ปรับขนาดความกว้างของเท่านั้นที่ <div> องค์ประกอบ:
ตัวอย่างต่อไปนี้ช่วยให้ผู้ใช้ปรับขนาดเพียงความสูงของที่ <div> องค์ประกอบ:
ตัวอย่างต่อไปนี้ช่วยให้ผู้ใช้ปรับขนาดทั้งความสูงและความกว้างของที่ <div> องค์ประกอบ:
CSS3 Outline Offset
outline-offset ทรัพย์สินเพิ่มช่องว่างระหว่างร่างและ EDGE หรือเขตแดนขององค์ประกอบ
เค้าโครงแตกต่างจากชายแดนในสามวิธี:
- ร่างจะลากเส้นรอบองค์ประกอบนอกขอบชายแดน
- ร่างไม่ได้ใช้พื้นที่
- ร่างอาจจะไม่ใช่สี่เหลี่ยม
ตัวอย่างต่อไปนี้ใช้สถานที่ให้บริการโครงชดเชยเพื่อเพิ่มพื้นที่ 15px ระหว่างชายแดนและเค้าร่าง:
CSS3 คุณสมบัติส่วนติดต่อผู้ใช้
ตารางต่อไปนี้แสดงทุกคุณสมบัติส่วนติดต่อผู้ใช้:
| คุณสมบัติ | ลักษณะ |
|---|---|
| box-sizing | ช่วยให้คุณสามารถที่จะรวมถึงการขยายพรมแดนความกว้างรวมขององค์ประกอบและความสูง |
| nav-down | ระบุตำแหน่งที่จะนำทางเมื่อใช้ปุ่มทิศทางลูกศรลง |
| nav-index | ระบุการสั่งซื้อแท็บสำหรับองค์ประกอบ |
| nav-left | ระบุตำแหน่งที่จะนำทางเมื่อใช้ลูกศรซ้ายปุ่มทิศทาง |
| nav-right | ระบุตำแหน่งที่จะนำทางเมื่อใช้ลูกศรขวาปุ่มทิศทาง |
| nav-up | ระบุตำแหน่งที่จะนำทางเมื่อใช้ลูกศรขึ้นปุ่มทิศทาง |
| outline-offset | เพิ่มช่องว่างระหว่างร่างและ EDGE หรือเขตแดนขององค์ประกอบ |
| resize | ระบุหรือไม่ว่าเป็นองค์ประกอบที่ปรับขนาดได้โดยผู้ใช้ |