คุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้

Articles

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้

คุณสามารถเรียนรู้เกี่ยวกับคุณสมบัติ content, cursor, pointer-events และ resize รวมถึงการใช้งานและวิธีการเขียน

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-ui.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

เกี่ยวกับส่วนต่อประสานผู้ใช้

คุณสมบัติ `content`

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

คุณสมบัติ content ใช้เพื่อเพิ่มเนื้อหาให้กับ pseudo-elements โดยเฉพาะ ::before และ ::after คุณสมบัตินี้ใช้เพื่อกำหนดข้อความ รูปภาพ ตัวนับ ฯลฯ ซึ่งไม่ได้แสดงอยู่ในองค์ประกอบโดยตรง บทบาทหลักของมันคือช่วยควบคุมเนื้อหาตกแต่งหรือข้อมูลเสริมที่ไม่ได้เขียนใน HTML โดยตรงผ่านสไตล์ชีต

ในตัวอย่างนี้ "Note: " ถูกเพิ่มก่อนองค์ประกอบ และ "(End)" ถูกเพิ่มหลังองค์ประกอบ สิ่งนี้ใช้ pseudo-elements ::before และ ::after ตามลำดับ

ค่าต่างๆ ของคุณสมบัติ `content`

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

คุณสมบัติ content สามารถมีค่าดังต่อไปนี้:

ข้อความ: กำหนดโดยตรงโดยใส่สายอักขระภายใต้ "" เพิ่มข้อความ
รูปภาพ: ใช้ฟังก์ชัน url() เพื่อแทรกรูปภาพ
ตัวนับ: ใช้ฟังก์ชัน counter() เพื่อแสดงตัวนับ
แอตทริบิวต์: ใช้ฟังก์ชัน attr() เพื่อแสดงค่าของแอตทริบิวต์ขององค์ประกอบ HTML ตัวอย่างเช่น คุณสามารถแสดงแอตทริบิวต์ title ได้
none: กำหนดว่าจะไม่มีเนื้อหาใดๆ แสดงขึ้น นี่คือสถานะเริ่มต้น

หมายเหตุการใช้งาน

คุณสมบัติ content ใช้ได้เฉพาะกับ pseudo-elements เท่านั้น ไม่ใช่องค์ประกอบปกติ
เนื่องจากไม่ได้ถูกเพิ่มเข้าไปใน DOM จึงไม่สามารถจัดการได้โดยตรงด้วย JavaScript
มันอาจมีผลต่อเลย์เอาต์ ดังนั้นมักใช้เพื่อแสดงข้อมูลตกแต่งหรือข้อมูลเสริม

ตัวอย่าง

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

นี่คือตัวอย่างของการเพิ่มไอคอนก่อนแท็ก <p> ด้วยวิธีนี้ คุณสามารถเพิ่มข้อมูลเสริมหรือตกแต่งเนื้อหาผ่านสไตล์ชีตได้

คุณสมบัติ `cursor`

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

คุณสมบัติ cursor ใช้สำหรับกำหนดประเภทของเคอร์เซอร์ที่จะแสดงเมื่อวางตัวชี้เมาส์เหนือองค์ประกอบ คุณสามารถกำหนดรูปแบบเคอร์เซอร์ต่างๆ ได้ และมักใช้กับองค์ประกอบที่โต้ตอบได้เพื่อปรับปรุงประสบการณ์ผู้ใช้

ประเภทเคอร์เซอร์หลัก

ค่าต่อไปนี้สามารถกำหนดเป็นประเภทเคอร์เซอร์ได้:

`default`

- `default` คือเคอร์เซอร์ลูกศรปกติ (เคอร์เซอร์เริ่มต้นของเบราว์เซอร์)

`pointer`

- `pointer` คือเคอร์เซอร์รูปมือที่แสดงเมื่อวางเมาส์เหนือลิงก์

`text`

- `text` คือเคอร์เซอร์รูป I-beam ที่แสดงในพื้นที่ที่สามารถเลือกข้อความได้

`move`

- `move` คือเคอร์เซอร์รูปกากบาทที่ใช้เมื่อสามารถลากองค์ประกอบได้

`crosshair`

- `crosshair` คือเคอร์เซอร์รูปแว่นเล็งสำหรับการเลือกที่แม่นยำ

`not-allowed`

- `not-allowed` คือเคอร์เซอร์สำหรับพื้นที่หรือการกระทำที่ไม่ได้รับอนุญาต

`help`

- `help` คือเคอร์เซอร์ที่มีรูปเครื่องหมายคำถามแสดงเมื่อวางเมาส์เหนือองค์ประกอบที่สามารถให้ข้อมูลช่วยเหลือได้

`wait`

- `wait` คือเคอร์เซอร์รูปนาฬิกาทรายหรือลูกศรวงกลมที่แสดงสถานการณ์กำลังประมวลผล

`progress`

- `progress` คือเคอร์เซอร์ที่แสดงสถานการณ์ดำเนินการอยู่ อย่างไรก็ตามหมายถึงผู้ใช้สามารถดำเนินการอื่นๆ ได้

`grab`

- `grab` คือเคอร์เซอร์สำหรับจับองค์ประกอบที่สามารถลากได้

`grabbing`

- `grabbing` คือเคอร์เซอร์ที่แสดงว่าองค์ประกอบกำลังถูกลาก

`resize`

- `resize` คือเคอร์เซอร์ที่ใช้เมื่อสามารถปรับขนาดหน้าต่างหรือองค์ประกอบได้ มีหลายประเภทขึ้นอยู่กับทิศทาง
    - **`n-resize`**: ปรับขนาดในทิศทางขึ้นบน
    - **`s-resize`**: ปรับขนาดในทิศทางลงล่าง
    - **`e-resize`**: ปรับขนาดในทิศทางไปทางขวา
    - **`w-resize`**: ปรับขนาดในทิศทางไปทางซ้าย
    - **`ne-resize`**: ปรับขนาดในทิศทางไปทางขวาบน
    - **`nw-resize`**: ปรับขนาดในทิศทางไปทางซ้ายบน
    - **`se-resize`**: ปรับขนาดในทิศทางไปทางขวาล่าง
    - **`sw-resize`**: ปรับขนาดในทิศทางไปทางซ้ายล่าง

เคอร์เซอร์แบบกำหนดเอง

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

สามารถกำหนดเคอร์เซอร์แบบกำหนดเองโดยใช้ url() ได้

ในตัวอย่างนี้ custom-cursor.png เป็นไฟล์ภาพสำหรับเคอร์เซอร์ หากไม่มีภาพนั้น เคอร์เซอร์เริ่มต้นของเบราว์เซอร์จะถูกแสดงโดยใช้ auto

สรุป

คุณสมบัติ cursor ระบุเคอร์เซอร์ที่ควรแสดงเมื่อผู้ใช้อยู่เหนือองค์ประกอบหนึ่ง
มีรูปแบบเคอร์เซอร์หลากหลายให้เลือกตามการใช้งานและสามารถตั้งค่ากำหนดเองได้
โดยการเลือกสไตล์เคอร์เซอร์ที่เหมาะสมตามองค์ประกอบที่โต้ตอบและข้อจำกัด จะสามารถให้ UI ที่เป็นมิตรต่อผู้ใช้มากขึ้น

คุณสมบัติ `pointer-events`

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

คุณสมบัติ pointer-events ใช้ควบคุมว่าองค์ประกอบจัดการเหตุการณ์จากอุปกรณ์ชี้ตำแหน่ง เช่น เมาส์ สัมผัส และสไตลัสอย่างไร โดยปกติ เมื่อองค์ประกอบถูกคลิกหรือชี้โดยผู้ใช้ จะได้รับ pointer events แต่พฤติกรรมนี้สามารถเปลี่ยนแปลงได้ด้วยการใช้คุณสมบัตินี้

ในคลาส pointer-events-auto คุณสมบัติ pointer-events ถูกตั้งค่าเป็น auto ทำให้สามารถจัดการเหตุการณ์คลิกและชี้ตามปกติได้ องค์ประกอบสามารถคลิกได้ ดังนั้นข้อความจะแสดงขึ้นเมื่อคลิก
ในคลาส pointer-events-auto คุณสมบัติ pointer-events ถูกตั้งค่าเป็น none ดังนั้นองค์ประกอบจะไม่รับ pointer events แม้ว่าคุณสมบัติ cursor จะถูกตั้งค่าเป็น pointer แต่เคอร์เซอร์เมาส์จะไม่เปลี่ยน และองค์ประกอบอื่นๆ ที่อยู่ด้านล่างจะสามารถคลิกได้

ประเภทของค่า

คุณสมบัติ pointer-events ระบุว่าองค์ประกอบจะได้รับ pointer events หรือไม่และใช้งานอย่างไร คุณสามารถระบุมูลค่าดังต่อไปนี้

`auto`

ค่าเริ่มต้นคือ auto ซึ่งทำให้องค์ประกอบรับเหตุการณ์การชี้ตำแหน่งตามปกติ

`none`

เมื่อระบุ none องค์ประกอบจะไม่รับเหตุการณ์การชี้ตำแหน่ง องค์ประกอบจะปิดการโต้ตอบ เช่น การคลิกและการเลื่อนเมาส์ แต่ยังเปิดให้เหตุการณ์ชี้ตำแหน่งเกิดขึ้นกับองค์ประกอบที่อยู่ข้างใต้

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;

ค่าดังกล่าวส่วนใหญ่จะใช้กับองค์ประกอบ SVG ค่าทุกค่าจะควบคุมว่าส่วนเฉพาะขององค์ประกอบ (เช่น เติมสี, เส้นขอบ เป็นต้น) จะตอบสนองต่อเหตุการณ์การชี้ตำแหน่งหรือไม่ ไม่ได้ใช้งานทั่วไปกับองค์ประกอบ HTML ปกติ

จุดสำคัญสำหรับการใช้งาน

ตัวอย่างการใช้งานคุณสมบัติ pointer-events

การเลือกองค์ประกอบที่คุณต้องการปิดใช้งาน
- ค่าของ none มีประโยชน์สำหรับการปิดใช้งานองค์ประกอบชั่วคราว เช่น ปุ่มหรือลิงก์
การใช้งานกับองค์ประกอบที่วางทับกัน
- เมื่อกำหนดคุณสมบัติ position เป็น absolute หรือใช้องค์ประกอบซ้อนกันด้วยคุณสมบัติ z-index การตั้งค่า pointer-events เป็น none บนองค์ประกอบด้านบนจะอนุญาตให้เหตุการณ์ชี้ตำแหน่งถูกส่งไปยังองค์ประกอบด้านล่าง

คุณสมบัติ `resize`

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

คุณสมบัติ resize เป็นคุณสมบัติ CSS ที่ระบุทิศทางที่ผู้ใช้งานสามารถปรับขนาดองค์ประกอบได้ โดยใช้คุณสมบัตินี้ คุณสามารถอนุญาตให้องค์ประกอบปรับขนาดในแนวตั้งหรือแนวนอนได้ด้วยการลาก หรือปิดใช้งานการปรับขนาดทั้งหมด

ในตัวอย่างนี้ กำหนดทิศทางที่สามารถปรับขนาดพื้นที่ข้อความโดยใช้คุณสมบัติ resize

ด้วย resize: both; องค์ประกอบสามารถปรับขนาดได้ทั้งแนวนอนและแนวตั้ง
ด้วย resize: horizontal; องค์ประกอบสามารถปรับขนาดได้เฉพาะแนวนอนเท่านั้น
ด้วย resize: vertical; องค์ประกอบสามารถปรับขนาดได้เฉพาะแนวตั้งเท่านั้น
ด้วย resize: none; องค์ประกอบไม่สามารถปรับขนาดได้

ประเภทของค่า

กำหนดคุณสมบัติ resize ด้วยค่าเพื่อระบุทิศทางที่องค์ประกอบสามารถปรับขนาดได้ คุณสามารถระบุมูลค่าดังต่อไปนี้

`none`

การระบุค่า none จะปิดการปรับขนาดขององค์ประกอบ นี่คือค่าตั้งต้น

`both`

การระบุค่า both จะอนุญาตให้องค์ประกอบปรับขนาดได้ทั้งแนวตั้งและแนวนอน

`horizontal`

การระบุค่า horizontal จะอนุญาตให้องค์ประกอบปรับขนาดได้เฉพาะในแนวนอน (ความกว้าง)

`vertical`

การระบุค่า vertical จะอนุญาตให้องค์ประกอบปรับขนาดได้เฉพาะในแนวตั้ง (ความสูง)

`inherit`

การกำหนดค่า inherit จะทำให้องค์ประกอบรับค่าคุณสมบัติ resize มาจากองค์ประกอบแม่

หมายเหตุ

หากต้องการให้องค์ประกอบสามารถปรับขนาดได้ คุณจำเป็นต้องตั้งค่าคุณสมบัติ overflow พร้อมกับคุณสมบัติ resize องค์ประกอบที่สามารถปรับขนาดได้อาจต้องใช้แถบเลื่อน โดยปกติจะกำหนดค่า overflow: auto
การปรับขนาดมักใช้กับองค์ประกอบประเภทบล็อก เช่น div และ textarea

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติของ CSS ที่เกี่ยวข้องกับแอนิเมชัน 3D

คุณสมบัติ CSS ที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

เกี่ยวกับส่วนต่อประสานผู้ใช้

คุณสมบัติ content

ค่าต่างๆ ของคุณสมบัติ content

หมายเหตุการใช้งาน

ตัวอย่าง

คุณสมบัติ cursor

ประเภทเคอร์เซอร์หลัก

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

เคอร์เซอร์แบบกำหนดเอง

สรุป

คุณสมบัติ pointer-events

ประเภทของค่า

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

จุดสำคัญสำหรับการใช้งาน

คุณสมบัติ resize

ประเภทของค่า

none

both

horizontal

vertical

inherit

หมายเหตุ

YouTube Video

คุณสมบัติ `content`

ค่าต่างๆ ของคุณสมบัติ `content`

คุณสมบัติ `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

คุณสมบัติ `pointer-events`

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

คุณสมบัติ `resize`

`none`

`both`

`horizontal`

`vertical`

`inherit`