„`html
Explorarea proprietăților CSS poate fi o călătorie complexă, având în vedere numărul mare de opțiuni disponibile. Printre acestea, proprietatea `visibility` se distinge ca un instrument esențial pentru dezvoltatorii web care doresc să-și perfecționeze abilitățile.
Acest articol va detalia funcționarea proprietății `visibility` în CSS, subliniind importanța sa și explicând diferitele valori pe care aceasta le poate accepta.
Ce înseamnă vizibilitatea în CSS?
Proprietatea `visibility` din CSS permite controlul asupra afișării sau ascunderii unui element pe o pagină web. Imaginează-ți patru blocuri pe o pagină; `visibility` determină dacă și cum sunt prezentate aceste blocuri. Atunci când setată pe `visible`, toate elementele devin vizibile.
Dacă, în schimb, un element este ascuns, acesta continuă să ocupe spațiu în cadrul aspectului paginii, dar nu este afișat în browser.
Proprietatea `visibility` este utilă în mai multe situații:
- Gestionarea afișării: Poți controla elementele vizibile în funcție de acțiunile utilizatorului. De exemplu, un element poate fi afișat doar atunci când un utilizator interacționează cu un anumit element (prin trecerea cursorului sau un clic).
- Menținerea layout-ului: Pentru o experiență bună, layout-ul și conținutul paginii trebuie să rămână consistente indiferent de dimensiunea ecranului. Elementele ascunse prin `visibility: hidden` continuă să ocupe spațiu, contribuind la un aspect uniform.
- Optimizarea performanței: Utilizarea `visibility: hidden` previne recalcularea layout-ului de către browser. Spre deosebire, `display: none` forțează browserul să recalculeze aspectul de fiecare dată când elementul devine vizibil.
- Crearea interacțiunilor dinamice: Proprietatea `visibility` poate fi combinată cu alte proprietăți (cum ar fi `opacity`) pentru a crea efecte de estompare, animații și tranziții subtile.
Valorile proprietății `visibility`
Proprietatea `visibility` oferă cinci valori distincte. Pentru o înțelegere aprofundată, vom utiliza exemple practice:
- Creează un folder nou pe calculatorul tău.
- Adaugă două fișiere: `index.html` și `styles.css`.
- Deschide folderul într-un editor de cod (cum ar fi VS Code).
Poți utiliza următoarea comandă pentru a simplifica procesul:
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Acum, conectează fișierele `index.html` și `styles.css`. În interiorul secțiunii `
<link rel="stylesheet" href="styles.css">
Ar trebui să ai acum structura de bază a proiectului.
`visible`
Atunci când un element are `visibility: visible`, acesta este afișat pe pagina web. Aceasta este valoarea implicită. Pentru a exemplifica, creăm trei blocuri în documentul HTML. Adaugă următorul cod în secțiunea „ a `index.html`:
<div class="container">
<div class="box1"> Box 1 </div>
<div class="box2"> Box 2 </div>
<div class="box3"> Box 3 </div>
</div>
Apoi, adaugă următorul cod CSS pentru a stiliza blocurile:
.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);
}
Veți obține o pagină cu trei blocuri colorate.
Setarea `visibility: visible` nu va avea un efect vizibil, deoarece toate blocurile sunt afișate implicit. Pentru a înțelege efectul, putem folosi `display: none` pe unul dintre blocuri, de exemplu, `.box3`. Modifică codul CSS al clasei `.box3`:
.box3 {
background-color: rgb(154, 43, 12);
display: none;
}
Acum, pe pagină vor apărea doar două blocuri, `box1` și `box2`.
Se observă că dimensiunea elementului `.container` s-a redus. Când folosim `display: none`, spațiul ocupat de `box3` este eliberat și alte elemente pot ocupa acel spațiu.
`hidden`
Aplicarea `visibility: hidden` pe un element îl ascunde, dar acesta continuă să ocupe spațiu pe pagină. De exemplu, putem ascunde `box2`:
Pentru aceasta, modifică CSS-ul clasei `box2`:
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden;
}
Singura adăugare a fost linia `visibility: hidden`.
Pagina va afișa acum un spațiu gol între `box1` și `box3`, deoarece elementul `box2` este doar ascuns.
Putem confirma că `box2` este încă prezent în DOM, inspectând pagina.
`collapse`
Valoarea `collapse` este specifică subelementelor, cum ar fi rândurile și coloanele din tabelele HTML.
Adaugă următorul cod în fișierul HTML pentru a crea un tabel:
<table>
<tr>
<th>Limbaj de programare</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 stilizează tabelul cu o margine de 1px pentru toate celulele. Adaugă următorul cod CSS:
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Tabelul va fi afișat astfel:
Pentru a demonstra cum funcționează `visibility: collapse`, ascundem rândul al doilea. Adaugă următoarea regulă în CSS:
.hidden-row {
visibility: collapse;
}
Rândul cu Ruby și Ruby on Rails va fi ascuns.
`initial`
Proprietatea `visibility: initial` resetează valoarea unui element HTML la cea inițială. De exemplu:
- Am afișat inițial toate rândurile din tabel.
- Am ascuns al doilea rând cu `visibility: collapse`.
- Putem acum reveni la valoarea inițială (afișând-o).
Vom adăuga un buton care permite comutarea vizibilității rândului al doilea.
Adaugă următorul cod HTML:
<button onclick="toggleVisibility()">Click Me!!</button>
Adaugă o funcție JavaScript care adaugă sau elimină clasa `.visible-row` atunci când se dă clic pe buton:
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Adaugă următorul cod în fișierul CSS:
.visible-row {
visibility: initial;
}
Vizibilitatea rândului se va schimba la fiecare clic pe buton.
`inherit`
Proprietatea `visibility: inherit` permite unui element copil să moștenească valoarea proprietății de la părintele său.
Putem folosi următorul cod pentru a ilustra acest concept:
<h2>Inherit Demo</h2>
<div style="visibility: hidden">
<h3 style="visibility: inherit"> Ascuns</h3>
</div>
<p>Vizibil (nu este în interiorul unui element ascuns)</p>
Doar conținutul etichetelor `h2` și `p` va fi vizibil inițial. Va exista un spațiu corespunzător elementului ascuns între `h2` și `p`.
Elementul `div` are setată vizibilitatea pe `hidden`, iar elementul `h3` din interiorul div-ului moștenește această proprietate, fiind la rândul său ascuns.
Dacă setăm vizibilitatea `div`-ului pe `visible`, atunci și elementul `h3` va deveni vizibil:
<h2>Inherit Demo</h2>
<div style="visibility: visible">
<h3 style="visibility: inherit"> Ascuns</h3>
</div>
<p>Vizibil (nu este în interiorul unui element ascuns)</p>
Diferența dintre `visibility: hidden` și `display: none`
Cea mai importantă diferență între `display: none` și `visibility: hidden` este că prima elimină un element din aspectul paginii, în timp ce a doua ascunde elementul, dar îi menține spațiul rezervat.
Putem ilustra această diferență folosind următorul cod:
<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>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
Pagina va afișa două blocuri unul lângă altul.
Demonstrație `display: none`
Adaugă `display: none;` la clasa `.box1`:
display: none;
Blocul `.box1` va dispărea, iar al doilea bloc (`.box2`) se va deplasa spre stânga pentru a umple spațiul eliberat.
Demonstrație `visibility: hidden`
Înlocuiește `display: none` cu `visibility: hidden` în clasa `.box1`:
visibility: hidden
Blocul 1 nu va mai fi vizibil, dar spațiul său va rămâne rezervat. Blocul 2 va rămâne pe poziția inițială.
| `display:none` | `visibility:hidden` | |
| Efect | Elimină un element complet din pagina web. | Ascunde elementul, dar acesta ocupă spațiu. |
| Stilizare | Nu poți stiliza un element cu `display: none`. | Poți stiliza un element cu `visibility: hidden`. |
| Accesibilitate | Nu este accesibil de către cititoarele de ecran. | Poate fi accesat folosind cititoarele de ecran. |
Îmbunătățirea accesibilității cu `visibility`
Poți utiliza proprietatea `visibility` pentru a ascunde elemente neimportante pentru anumiți utilizatori. De exemplu, un formular de autentificare poate fi ascuns pentru utilizatorii deja logați. Sau o bară laterală cu termeni și condiții poate fi afișată selectiv.
Următorul exemplu ilustrează cum poți îmbunătăți accesibilitatea:
<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>
<p class="login-text">Autentificare</p>
<form class="login-form">
<label for="username">Utilizator:</label>
<input type="text" id="username" name="username" required />
<label for="password">Parolă:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Trimite</button>
</form>
Formularul de autentificare devine vizibil doar atunci când se trece cu mouse-ul peste textul `Autentificare`.
Concluzie
Acest articol a explorat proprietatea `visibility` din CSS, oferind o bază solidă pentru utilizarea sa eficientă. Înțelegerea valorilor și a modului în care aceasta interacționează cu alte proprietăți CSS te va ajuta să creezi tranziții fluide și să îmbunătățești experiența utilizatorilor. Cu toate acestea, este important să folosești corect fiecare valoare a `visibility` pentru a evita comportamente neașteptate ale paginii. În plus, o utilizare incorectă poate ascunde conținut important pentru utilizatori.
Pentru a aprofunda cunoștințele despre CSS, consultă și alte ghiduri și resurse.
„`