Avem multe proprietăți CSS și stăpânirea tuturor poate fi o provocare. Vizibilitatea CSS este una dintre proprietățile importante pe care ar trebui să le stăpâniți dacă doriți să deveniți un dezvoltator web calificat.
În acest articol, voi defini vizibilitatea CSS, voi explica importanța acesteia și voi enumera și explica diferitele valori de vizibilitate CSS.
Cuprins
Ce este vizibilitatea CSS?
Proprietatea de vizibilitate CSS ascunde sau afișează un element dintr-o pagină web. De exemplu, puteți avea patru casete pe pagina dvs. web și puteți utiliza proprietatea de vizibilitate pentru a determina cum vor fi afișate. Toate elementele vor apărea pe pagină dacă setați vizibilitatea ca vizibilă.
Cu toate acestea, dacă elementul este ascuns, acesta va ocupa în continuare spațiu, dar va fi ascuns din browserul/ecranul final.
Vizibilitatea CSS este importantă în următoarele cazuri;
- Controlul vizibilității: puteți controla ce ar trebui să fie afișat în funcție de utilizatorul curent. Puteți seta vizibilitatea unui element să fie vizibilă numai atunci când un utilizator îl declanșează folosind o anumită acțiune. De exemplu, trecerea cu mouse-ul sau făcând clic pe un buton.
- Păstrarea aspectului: o aplicație bună ar trebui să-și păstreze aspectul și conținutul, indiferent de dimensiunea ecranului. Când setați vizibilitatea unui element ca ascuns, acesta va ocupa în continuare spațiu, dar nu va fi vizibil pentru utilizatorii finali. O astfel de abordare face posibilă menținerea unui aspect consistent.
- Optimizați performanța: browserul nu trebuie să continue să recalculeze aspectul atunci când proprietatea de vizibilitate este setată ca vizibilitate:ascunsă. Cu toate acestea, când utilizați proprietatea display:none, browserul trebuie să recalculeze aspectul ori de câte ori decideți să afișați din nou elementul.
- Creați interfață de utilizare dinamică și interactivă: puteți combina proprietatea de vizibilitate CSS cu alte proprietăți, cum ar fi opacitatea, pentru a crea efecte de estompare, animații și tranziții fluide.
Diferite valori de vizibilitate CSS
Vizibilitatea CSS are cinci valori posibile. Voi intra în detaliu prin blocuri de cod și capturi de ecran. Dacă intenționați să urmați,
- Creați un folder pe computerul dvs. local.
- Adăugați două fișiere; index.html și styles.css.
- Deschideți proiectul în editorul de cod preferat (folosesc VS Code)
Puteți folosi această comandă;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Următorul este să conectați fișierele index.html și styles.css. În secțiunea
a fișierului index.html, adăugați aceasta;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Acum ar trebui să aveți ceva similar cu acesta în editorul de cod;
Vizibil
Când setați valoarea unui element ca vizibilitate: vizibil, acesta va apărea pe pagina web. Această vizibilitate există în mod implicit. Putem avea trei casete în documentul nostru HTML pentru a înțelege mai bine acest concept. În secțiunea
din index.html, adăugați următoarele;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Acum putem stila div-urile (casetele) folosind următorul cod 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);
}
Când pagina finală este redată, veți avea așa ceva;
Dacă setați vizibilitatea casetelor ca vizibilitate: vizibil, nu va avea niciun efect deoarece toate casetele sunt vizibile în mod implicit.
Cu toate acestea, putem demonstra cum funcționează proprietatea vizibilă folosind afișarea: nicio proprietate pe una dintre casete. Putem selecta caseta 3 ca exemplu. Schimbați codul CSS pe clasa .box3 după cum urmează;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Când redați pagina, veți observa că avem doar două casete, una și două.
Dacă sunteți pasionat, veți observa că elementul nostru .container are dimensiuni reduse. Când utilizați afișajul: nicio proprietate, Caseta 3 nu este redată, iar spațiul său din browserul nostru devine liber pentru a fi ocupat de alte casete.
Ascuns
Când aplicăm proprietatea visibility: hidden CSS pe un element, aceasta va fi ascunsă utilizatorului final. Cu toate acestea, va ocupa încă spațiu. De exemplu, putem ascunde Box2 folosind această proprietate.
Pentru a realiza acest lucru, modificați codul CSS Box2 după cum urmează;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Singura modificare pe care am făcut-o este adăugarea acestei linii;
visibility: hidden
Pagina finală va fi așa cum este afișată;
Putem vedea un spațiu între Box 1 și Box 3 deoarece elementul Box 2 este doar ascuns.
Putem vedea că Box 2 este încă în DOM dacă ne inspectăm pagina redată.
Colaps
Restrângerea este o valoare de vizibilitate care este utilizată pe subelemente. Tabelele HTML sunt un exemplu perfect de unde putem aplica atributul visibility:collapse.
Putem adăuga următorul cod pentru a crea un tabel în fișierul nostru 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>
Acum putem stila tabelul nostru cu un chenar de 1px pe toate celulele sale. Adăugați acest lucru în fișierul dvs. CSS;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Când afișăm tabelul, vom avea următoarele;
Vom ascunde acum al doilea rând pentru a demonstra cum funcționează atributul vizibilitate: restrângere. Adăugați acest lucru la codul dvs. CSS;
.hidden-row {
visibility: collapse;
}
Când pagina este redată, rândul cu Ruby și Ruby on Rails va fi ascuns.
Iniţială
Vizibilitatea: proprietatea initiala reseteaza un element HTML la valoarea initiala. De exemplu;
- Am început cu afișarea tuturor rândurilor din tabelul nostru.
- Am restrâns valoarea rândului 2, ascunzând-o astfel.
- Acum putem reveni la valoarea inițială (o afișăm)
Vom adăuga un buton care comută între afișarea și restrângerea valorilor pentru a demonstra acest lucru.
Adăugați acest buton pe care se poate face clic la codul dvs. HTML;
<button onclick="toggleVisibility()">Click Me!!</button>
Putem apoi adăuga o funcție JavaScript care caută clasa .hidden-row și comută clasa .visible-row pe ea când se face clic pe butonul.
<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;
}
Valoarea vizibilității se va schimba înainte și înapoi pe măsură ce faceți clic pe butonul afișat;
Moşteni
Proprietatea vizibilitate: moștenire permite unui element copil să moștenească proprietatea de afișare de la părinte.
Putem avea acest cod simplu pentru a demonstra cum funcționează această proprietate;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Doar conținutul din interiorul etichetelor h1 și paragraf va fi afișat dacă randați pagina. Totuși, va exista un spațiu reprezentând elementele ascunse între etichetele
și
.
Avem un div a cărui vizibilitate am setat-o ca ascunsă. Avem eticheta
în interiorul div. Am setat vizibilitatea
ca mostenire, ceea ce înseamnă că moștenește de la părintele său, div.
Totuși, dacă setăm proprietatea div-ului ca fiind vizibilă,
(fiul său) va moșteni și asta.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Vizibilitate CSS: ascuns vs. afișare: niciunul
Diferența majoră dintre display:none și visibility:hidden este că primul elimină complet un element din aspect, în timp ce cel din urmă ascunde un element, dar totuși ocupă spațiu.
Putem folosi acest cod pentru a demonstra diferența dintre cele două;
<!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>
Dacă redăm pagina noastră, vom avea două casete una lângă alta;
Ecran: niciun demo
Adăugați acest lucru la clasa .box1;
display: none;
Când randați pagina, veți observa că .box1 nu va mai fi afișat. A doua casetă (neagră) se deplasează și ea spre stânga pentru a ocupa spațiul ocupat anterior de caseta albastru deschis.
Vizibilitatea: demonstrație ascunsă
În loc de afișare: none, adăugați această clasă .box1;
visibility: hidden
Această proprietate lasă spațiu pentru caseta 1, dar nu o afișează. Pe de altă parte, caseta 2 rămâne la locul său.
display:nonevisibility:hiddenElimină un element din pagina web în întregimeAscunde un element HTML, dar totuși ocupă spațiu pe pagina webPuteți stila un element al cărui afișaj este setat la niciunulPuteți poziționa și stiliza un element a cărui vizibilitate este ascunsăNu este accesibil de către cititorii de ecranPuteți accesa un element a cărui vizibilitate este setată ca ascunsă folosind cititoare de ecran
Îmbunătățiți accesibilitatea cu vizibilitatea CSS
Puteți utiliza vizibilitatea CSS pentru a ascunde elemente care nu sunt importante pentru toți utilizatorii. De exemplu, puteți utiliza această funcție pentru a ascunde un utilizator de conectare care va fi disponibil numai pentru utilizatorii care nu sunt autentificați. Puteți avea, de asemenea, o bară laterală sau un subsol care conține termenii și informațiile privind drepturile de autor.
Putem avea acest cod pentru a ilustra modul în care puteți îmbunătăți vizibilitatea;
<!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>
Formularul de conectare devine vizibil numai atunci când treceți cu mouse-ul peste primul articol.
Concluzie
Credem că acum puteți utiliza confortabil proprietatea de vizibilitate CSS din codul dvs. pentru a face tranziții fără probleme și pentru a îmbunătăți accesibilitatea paginilor dvs. web. Cu toate acestea, trebuie să știți unde să folosiți fiecare valoare de vizibilitate pentru a evita să ajungeți cu pagini șocante. De asemenea, puteți ascunde datele esențiale de la utilizatorii finali atunci când utilizați greșit proprietatea de vizibilitate CSS.
Consultați ghidurile și resursele noastre CSS pentru a afla mai multe despre proprietățile CSS pe care le puteți combina cu vizibilitatea CSS.