เรามีคุณสมบัติ CSS มากมาย และการเรียนรู้ทั้งหมดอาจเป็นเรื่องที่ท้าทาย การเปิดเผย CSS เป็นหนึ่งในคุณสมบัติสำคัญที่คุณควรเชี่ยวชาญหากคุณต้องการเป็นนักพัฒนาเว็บที่มีทักษะ
ในบทความนี้ ฉันจะให้คำจำกัดความของ CSS Visibility อธิบายถึงความสำคัญ และแสดงรายการและอธิบายค่าการมองเห็น CSS ต่างๆ
การมองเห็น CSS คืออะไร?
คุณสมบัติการมองเห็น CSS ซ่อนหรือแสดงองค์ประกอบในหน้าเว็บ ตัวอย่างเช่น คุณสามารถมีกล่องสี่กล่องบนหน้าเว็บของคุณ และใช้คุณสมบัติการเปิดเผยเพื่อกำหนดว่าจะแสดงอย่างไร องค์ประกอบทั้งหมดจะปรากฏบนหน้าหากคุณตั้งค่าการมองเห็นเป็นมองเห็นได้
อย่างไรก็ตาม หากองค์ประกอบถูกซ่อน องค์ประกอบจะยังคงใช้พื้นที่แต่จะถูกซ่อนจากเบราว์เซอร์/หน้าจอปลายทาง
การมองเห็น CSS มีความสำคัญในกรณีต่อไปนี้
- การควบคุมการมองเห็น: คุณสามารถควบคุมสิ่งที่ควรแสดงตามผู้ใช้ปัจจุบัน คุณสามารถตั้งค่าการเปิดเผยองค์ประกอบให้มองเห็นได้เฉพาะเมื่อผู้ใช้ทริกเกอร์องค์ประกอบโดยใช้การกระทำบางอย่างเท่านั้น ตัวอย่างเช่น การเลื่อนเมาส์หรือคลิกปุ่ม
- การรักษาเค้าโครง: แอปพลิเคชันที่ดีควรรักษาเค้าโครงและเนื้อหาไว้โดยไม่คำนึงถึงขนาดหน้าจอ เมื่อคุณตั้งค่าการเปิดเผยองค์ประกอบเป็นซ่อน องค์ประกอบจะยังคงใช้พื้นที่แต่ผู้ใช้ปลายทางจะมองไม่เห็น วิธีการดังกล่าวทำให้สามารถรักษารูปแบบที่สอดคล้องกัน
- เพิ่มประสิทธิภาพ: เบราว์เซอร์ไม่จำเป็นต้องคำนวณเลย์เอาต์ซ้ำอีกเมื่อตั้งค่าคุณสมบัติการเปิดเผยเป็น visibility:hidden อย่างไรก็ตาม เมื่อคุณใช้คุณสมบัติ display:none เบราว์เซอร์จำเป็นต้องคำนวณเค้าโครงใหม่ทุกครั้งที่คุณตัดสินใจแสดงองค์ประกอบอีกครั้ง
- สร้าง UI แบบไดนามิกและแบบโต้ตอบ: คุณสามารถรวมคุณสมบัติการมองเห็น CSS กับคุณสมบัติอื่นๆ เช่น ความทึบ เพื่อสร้างเอฟเฟ็กต์เฟด ภาพเคลื่อนไหว และการเปลี่ยนภาพที่ราบรื่น
ค่าการมองเห็น CSS ที่แตกต่างกัน
การมองเห็น CSS มีค่าที่เป็นไปได้ห้าค่า ฉันจะลงรายละเอียดผ่านบล็อกโค้ดและภาพหน้าจอ หากท่านตั้งใจปฏิบัติตาม
- สร้างโฟลเดอร์บนเครื่องของคุณ
- เพิ่มสองไฟล์ index.html และ style.css
- เปิดโครงการในโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ (ฉันใช้ VS Code)
คุณสามารถใช้คำสั่งนี้
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
ถัดไปคือการเชื่อมต่อไฟล์ index.html และ style.css ในส่วน
ของไฟล์ index.html ให้เพิ่มสิ่งนี้<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
ตอนนี้คุณควรมีสิ่งที่คล้ายกันนี้ในโปรแกรมแก้ไขรหัสของคุณ
มองเห็นได้
เมื่อคุณตั้งค่าขององค์ประกอบเป็นการมองเห็น: มองเห็นได้ องค์ประกอบนั้นจะปรากฏบนหน้าเว็บ การเปิดเผยนี้มีตามค่าเริ่มต้น เราสามารถมีสามกล่องในเอกสาร HTML เพื่อให้เข้าใจแนวคิดนี้ได้ดีขึ้น ในส่วน
ของ index.html ให้เพิ่มสิ่งต่อไปนี้<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
ตอนนี้เราสามารถจัดรูปแบบ divs (กล่อง) โดยใช้โค้ด CSS ต่อไปนี้
.container {
padding: 15px;
width: max-content;
display: flex;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
height: 30px;
width: 100px;
}
.box1 {
background-color: rgb(224, 49, 209);
margin-right: 15px;
}
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
}
.box3 {
background-color: rgb(154, 43, 12);
}
เมื่อเรนเดอร์หน้าสุดท้ายแล้ว คุณจะได้หน้าตาแบบนี้
หากคุณตั้งค่าการมองเห็นของกล่องเป็นการมองเห็น: มองเห็นได้ จะไม่มีผลกระทบใด ๆ เนื่องจากกล่องทั้งหมดจะมองเห็นได้ตามค่าเริ่มต้น
อย่างไรก็ตาม เราสามารถสาธิตวิธีการทำงานของคุณสมบัติที่มองเห็นได้โดยใช้คุณสมบัติ display: none บนกล่องใดกล่องหนึ่ง เราสามารถเลือก box3 เป็นตัวอย่างของเรา เปลี่ยนโค้ด CSS ในคลาส .box3 ดังนี้
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
เมื่อคุณแสดงผลหน้าใหม่ คุณจะทราบว่าเรามีเพียงสองกล่อง หนึ่งและสอง
หากคุณสนใจ โปรดทราบว่าองค์ประกอบ .container ของเรามีขนาดที่เล็กลง เมื่อคุณใช้คุณสมบัติ display: none กล่องที่ 3 จะไม่แสดงผล และพื้นที่บนเบราว์เซอร์ของเราจะว่างสำหรับกล่องอื่นที่จะครอบครอง
ที่ซ่อนอยู่
เมื่อเราใช้คุณสมบัติ visibility: hidden CSS ในองค์ประกอบ มันจะถูกซ่อนจากผู้ใช้ปลายทาง อย่างไรก็ตามจะยังคงใช้พื้นที่ ตัวอย่างเช่น เราสามารถซ่อน Box2 โดยใช้คุณสมบัตินี้
เพื่อให้บรรลุเป้าหมายนี้ ให้แก้ไขโค้ด Box2 CSS ดังนี้
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
สิ่งเดียวที่เราทำคือเพิ่มบรรทัดนี้
visibility: hidden
หน้าสุดท้ายจะเป็นดังรูป
เราสามารถเห็นช่องว่างระหว่างกล่องที่ 1 และกล่องที่ 3 เนื่องจากองค์ประกอบกล่องที่ 2 ถูกซ่อนไว้เท่านั้น
เราจะเห็นว่าช่องที่ 2 ยังคงอยู่ใน DOM หากเราตรวจสอบหน้าที่แสดงผลของเรา
ทรุด
ยุบเป็นค่าการมองเห็นที่ใช้กับองค์ประกอบย่อย ตาราง HTML เป็นตัวอย่างที่สมบูรณ์แบบที่เราสามารถใช้แอตทริบิวต์ visibility:collapse
เราสามารถเพิ่มโค้ดต่อไปนี้เพื่อสร้างตารางในไฟล์ HTML ของเรา
<table> <tr> <th>Programming Language</th> <th>Framework</th> </tr> <tr> <td>JavaScript </td> <td>Angular </td> </tr> <tr class="hidden-row"> <td>Ruby </td> <td>Ruby on Rails</td> </tr> <tr> <td>Python </td> <td>Django </td> </tr> </table>
ตอนนี้เราสามารถจัดรูปแบบตารางของเราด้วยเส้นขอบ 1px ในทุกเซลล์ เพิ่มสิ่งนี้ลงในไฟล์ CSS ของคุณ
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
เมื่อแสดงตารางจะได้ดังนี้
ตอนนี้เราจะซ่อนแถวที่สองเพื่อสาธิตวิธีการทำงานของแอตทริบิวต์การมองเห็น: การยุบ เพิ่มสิ่งนี้ในโค้ด CSS ของคุณ
.hidden-row {
visibility: collapse;
}
เมื่อเพจแสดงผล แถวที่มี Ruby และ Ruby บน Rails จะถูกซ่อน
อักษรย่อ
การเปิดเผย: คุณสมบัติเริ่มต้นจะรีเซ็ตองค์ประกอบ HTML เป็นค่าเริ่มต้น ตัวอย่างเช่น;
- เราเริ่มต้นด้วยการแสดงแถวทั้งหมดในตารางของเรา
- เรายุบค่าของแถวที่ 2 จึงซ่อนไว้
- ตอนนี้เราสามารถกลับไปที่ค่าเริ่มต้น (แสดง)
เราจะเพิ่มปุ่มที่สลับระหว่างค่าที่แสดงและยุบเพื่อแสดงสิ่งนี้
เพิ่มปุ่มที่คลิกได้นี้ในโค้ด HTML ของคุณ
<button onclick="toggleVisibility()">Click Me!!</button>
จากนั้นเราสามารถเพิ่มฟังก์ชัน JavaScript ที่ค้นหาคลาส .hidden-row และสลับคลาส .visible-row เมื่อคลิกปุ่ม
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Add this code to your CSS file;
.visible-row {
visibility: initial;
}
ค่าการมองเห็นจะสลับไปมาเมื่อคุณคลิกปุ่มที่แสดง
สืบทอด
คุณสมบัติการมองเห็น : สืบทอดทำให้องค์ประกอบย่อยสามารถสืบทอดคุณสมบัติการแสดงผลจากพาเรนต์ได้
เราสามารถมีรหัสง่ายๆ นี้เพื่อแสดงให้เห็นว่าคุณสมบัตินี้ทำงานอย่างไร
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
เฉพาะเนื้อหาภายในแท็ก h1 และย่อหน้าเท่านั้นที่จะแสดงหากคุณแสดงหน้า อย่างไรก็ตาม จะมีช่องว่างแทนองค์ประกอบที่ซ่อนอยู่ระหว่างแท็ก
และ
เรามี div หนึ่งรายการที่เราตั้งค่าการมองเห็นเป็นซ่อนไว้ เรามีแท็ก
อยู่ภายใน div เราได้ตั้งค่าการเปิดเผยของ
เป็นมรดก ซึ่งหมายความว่าสืบทอดมาจากพาเรนต์ div
อย่างไรก็ตาม หากเราตั้งค่าคุณสมบัติของ div เป็นการมองเห็น
(ลูกของ div) ก็จะสืบทอดคุณสมบัตินั้นเช่นกัน
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
การมองเห็น CSS:ซ่อน vs. จอแสดงผล:ไม่มี
ข้อแตกต่างที่สำคัญระหว่าง display:none และ visibility:hidden คืออันแรกจะลบองค์ประกอบออกจากเลย์เอาต์ทั้งหมด ในขณะที่อันหลังจะซ่อนองค์ประกอบแต่ยังคงใช้พื้นที่อยู่
เราสามารถใช้รหัสนี้เพื่อแสดงความแตกต่างระหว่างทั้งสอง
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: black;
}
.container {
padding: 10px;
border :2px solid black;
padding-left: 20px;
width: 250px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
หากเราเรนเดอร์หน้าเว็บ เราจะมีสองกล่องเคียงข้างกัน
จอแสดงผล: ไม่มีการสาธิต
เพิ่มสิ่งนี้ในคลาส .box1;
display: none;
เมื่อคุณเรนเดอร์เพจ คุณจะทราบว่า .box1 จะไม่แสดงอีกต่อไป กล่องที่สอง (สีดำ) จะเลื่อนไปทางซ้ายเพื่อครอบครองพื้นที่ที่เคยครอบครองโดยกล่องสีฟ้าอ่อน
การเปิดเผย: การสาธิตที่ซ่อนอยู่
แทนที่จะเป็น display: none ให้เพิ่มคลาส .box1 นี้
visibility: hidden
คุณสมบัตินี้เว้นช่องว่างไว้สำหรับ box1 แต่ไม่แสดง ในทางกลับกัน box2 ยังคงอยู่ที่เดิม
display:nonevisibility:hiddenลบองค์ประกอบออกจากหน้าเว็บทั้งหมด ซ่อนองค์ประกอบ HTML แต่ยังคงใช้พื้นที่บนหน้าเว็บ คุณสามารถจัดรูปแบบองค์ประกอบที่มีการตั้งค่าการแสดงผลเป็น none คุณสามารถจัดตำแหน่งและจัดรูปแบบองค์ประกอบที่มีการซ่อนการมองเห็นซึ่งโปรแกรมอ่านหน้าจอไม่สามารถเข้าถึงได้คุณสามารถเข้าถึงได้ องค์ประกอบที่มีการตั้งค่าการเปิดเผยเป็นซ่อนโดยใช้โปรแกรมอ่านหน้าจอ
ปรับปรุงการเข้าถึงด้วย CSS Visibility
คุณสามารถใช้การเปิดเผย CSS เพื่อซ่อนองค์ประกอบที่ไม่สำคัญสำหรับผู้ใช้ทั้งหมด ตัวอย่างเช่น คุณสามารถใช้คุณสมบัตินี้เพื่อซ่อนผู้ใช้ที่เข้าสู่ระบบซึ่งจะมีให้สำหรับผู้ใช้ที่ไม่ได้เข้าสู่ระบบเท่านั้น คุณยังสามารถมีแถบด้านข้างหรือส่วนท้ายที่มีข้อกำหนดในการให้บริการหรือข้อมูลลิขสิทธิ์
เราสามารถมีรหัสนี้เพื่อแสดงให้เห็นว่าคุณสามารถปรับปรุงการมองเห็นได้อย่างไร
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style>
.login-form {
display: none;
}
.login-text:hover + .login-form {
display: block;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 30%;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p class="login-text">Login</p>
<form class="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
</body>
</html>
แบบฟอร์มการเข้าสู่ระบบจะปรากฏให้เห็นเมื่อคุณวางเมาส์เหนือรายการแรกเท่านั้น
บทสรุป
เราเชื่อว่าตอนนี้คุณสามารถใช้คุณสมบัติการเปิดเผย CSS ในโค้ดของคุณได้อย่างสะดวกสบายเพื่อให้การเปลี่ยนเป็นไปอย่างราบรื่นและปรับปรุงการเข้าถึงหน้าเว็บของคุณ อย่างไรก็ตาม คุณต้องรู้ว่าจะใช้ค่าการเปิดเผยทุกค่าที่ใดเพื่อหลีกเลี่ยงการลงเอยด้วยหน้าที่รก คุณยังสามารถซ่อนข้อมูลสำคัญจากผู้ใช้ปลายทางได้ เมื่อคุณใช้คุณสมบัติการเปิดเผย CSS ในทางที่ผิด
ดูคำแนะนำและแหล่งข้อมูล CSS ของเราเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติ CSS ที่คุณสามารถรวมเข้ากับการมองเห็น CSS
