Mnogo je CSS svojstava i njihovo ovladavanje može predstavljati izazov. CSS vidljivost je jedno od ključnih svojstava koje treba savladati ako želite da postanete stručan veb programer.
U ovom tekstu definisaću CSS vidljivost, objasniću njenu važnost i navesti i objasniti različite vrednosti CSS vidljivosti.
Šta je CSS vidljivost?
CSS svojstvo vidljivosti sakriva ili prikazuje element na veb stranici. Na primer, možete imati četiri polja na svojoj veb stranici i koristiti svojstvo vidljivosti da odredite kako će biti prikazana. Svi elementi će se pojaviti na stranici ako podesite vidljivost kao vidljivu.
Međutim, ako je element skriven, on će i dalje zauzimati prostor, ali će biti nevidljiv korisniku.
CSS vidljivost je važna u sledećim slučajevima:
- Kontrola vidljivosti: Možete da kontrolišete šta treba da bude prikazano na osnovu trenutnog korisnika. Možete podesiti vidljivost elementa da bude vidljiva samo kada korisnik pokrene određenu akciju, na primer, prelazak mišem ili klik na dugme.
- Očuvanje izgleda: Dobra aplikacija treba da sačuva svoj izgled i sadržaj bez obzira na veličinu ekrana. Kada postavite vidljivost elementa kao skrivenu, on će i dalje zauzimati prostor, ali neće biti vidljiv korisnicima. Takav pristup omogućava održavanje konzistentnog rasporeda.
- Optimizacija performansi: Pretraživač ne mora stalno ponovo da izračunava izgled kada je svojstvo vidljivosti podešeno kao `visibility:hidden`. Međutim, kada koristite svojstvo `display:none`, pretraživač mora ponovo da izračuna izgled svaki put kada odlučite da ponovo prikažete element.
- Kreiranje dinamičnog i interaktivnog korisničkog interfejsa: Možete kombinovati svojstvo vidljivosti CSS-a sa drugim svojstvima, kao što je neprozirnost, da biste kreirali efekte zatamnjivanja, animacije i glatke prelaze.
Različite vrednosti vidljivosti CSS-a
CSS vidljivost ima pet mogućih vrednosti. Detaljnije ću ih objasniti kroz blokove koda i snimke ekrana. Ako želite da pratite:
- Napravite folder na vašem računaru.
- Dodajte dve datoteke: `index.html` i `styles.css`.
- Otvorite projekat u omiljenom uređivaču koda (ja koristim VS Code).
Možete koristiti ovu komandu:
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Sledeće je povezivanje datoteka `index.html` i `styles.css`. U odeljku `
<link rel="stylesheet" href="styles.css">
Sada bi trebalo da imate nešto slično ovome u svom uređivaču koda:
Vidljivo
Kada postavite vrednost elementa kao `visibility: visible`, on će se pojaviti na veb stranici. Ova vidljivost je podrazumevana. Možemo imati tri polja u našem HTML dokumentu da bismo bolje razumeli ovaj koncept. U odeljku „ vašeg `index.html`, dodajte sledeće:
<div class="container">
<div class="box1"> Box 1 </div>
<div class="box2"> Box 2 </div>
<div class="box3"> Box 3 </div>
</div>
Sada možemo stilizovati naše `div` (kutije) koristeći sledeći CSS kod:
.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);
}
Kada se završi prikaz stranice, imaćete nešto ovako:
Ako podesite vidljivost na kutijama kao `visibility: visible`, to neće imati nikakvog efekta jer su sve kutije podrazumevano vidljive.
Međutim, možemo demonstrirati kako svojstvo vidljivo funkcioniše uz pomoć `display: none` svojstva na jednoj od kutija. Možemo izabrati `box3` kao naš primer. Promenite CSS kod za klasu `.box3` na sledeći način:
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Kada ponovo učitate stranicu, primetićete da imamo samo dva polja, jedan i dva.
Ako ste zainteresovani, primetićete da se naš element `.container` smanjio. Kada koristite svojstvo `display: none`, polje 3 se ne prikazuje, a njegov prostor u našem pretraživaču postaje prazan da bi drugi okviri mogli da zauzmu.
Sakriven
Kada primenimo svojstvo `visibility: hidden` CSS na element, on će biti sakriven od korisnika. Međutim, i dalje će zauzimati prostor. Na primer, možemo sakriti `Box2` koristeći ovo svojstvo.
Da biste to postigli, modifikujte CSS kod za `Box2` na sledeći način:
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Jedina promena koju smo napravili je dodavanje ove linije:
visibility: hidden
Konačna stranica će biti kao što je prikazano:
Možemo videti razmak između kutije 1 i kutije 3, pošto je element kutije 2 samo sakriven.
Možemo videti da je polje 2 još uvek u DOM-u ako pregledamo našu prikazanu stranicu.
Skupi
Skupi je vrednost vidljivosti koja se koristi za podelemente. HTML tabele su savršen primer gde možemo primeniti atribut `visibility:collapse`.
Možemo dodati sledeći kod da bismo napravili tabelu u našoj HTML datoteci:
<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>
Sada možemo da stilizujemo našu tabelu sa ivicom od 1px na svim ćelijama. Dodajte ovo u svoju CSS datoteku:
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Kada prikažemo tabelu, imaćemo sledeće:
Sada ćemo sakriti drugi red da pokažemo kako funkcioniše atribut `visibility: collapse`. Dodajte ovo svom CSS kodu:
.hidden-row {
visibility: collapse;
}
Kada se stranica prikaže, red sa Ruby i Ruby on Rails će biti sakriven.
Inicijal
Svojstvo `visibility: initial` resetuje HTML element na njegovu početnu vrednost. Na primer:
- Počeli smo sa prikazivanjem svih redova u našoj tabeli.
- Skupili smo vrednost reda 2 i tako ga sakrili.
- Sada se možemo vratiti na početnu vrednost (prikaži je)
Dodaćemo dugme koje se prebacuje između vrednosti prikaza i skupljanja da bismo to demonstrirali.
Dodajte ovo dugme u svoj HTML kod:
<button onclick="toggleVisibility()">Click Me!!</button>
Zatim možemo dodati JavaScript funkciju koja traži `.hidden-row` klasu i uključuje klasu `.visible-row` na njoj kada se klikne na dugme.
<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;
}
Vrednost vidljivosti će se menjati napred-nazad dok kliknete na prikazano dugme.
Naslediti
Svojstvo `visibility: inherit` omogućava podređenom elementu da nasledi svojstvo prikaza od nadređenog.
Možemo imati ovaj jednostavan kod da pokažemo kako ovo svojstvo funkcioniše:
<h2>Inherit Demo</h2>
<div style="visibility: hidden">
<h3 style="visibility: inherit"> Hidden</h3>
</div>
<p>Visible (not inside a hidden element) </p>
Samo sadržaj unutar oznaka `h2` i pasusa biće prikazan ako učitate stranicu. Međutim, postojaće razmak koji predstavlja skrivene elemente između oznaka `
`.<
Imamo jedan `div` čiju smo vidljivost postavili kao skrivenu. Imamo `
` tag unutar diva. Postavili smo vidljivost `
` kao nasledstvo, što znači da nasleđuje od svog roditelja, diva.
Međutim, ako svojstvo diva postavimo kao vidljivo, `
` (njegovo dete) će to takođe naslediti.
<h2>Inherit Demo</h2>
<div style="visibility: visible">
<h3 style="visibility: inherit"> Hidden</h3>
</div>
<p>Visible (not inside a hidden element) </p>
CSS vidljivost: skrivena u odnosu na prikaz: nema
Glavna razlika između `display: none` i `visibility: hidden` je u tome što prvi u potpunosti uklanja element iz izgleda, dok drugi sakriva element, ali i dalje zauzima prostor.
Možemo koristiti ovaj kod da pokažemo razliku između ova dva:
<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>
Ako učitamo našu stranicu, imaćemo dve kutije jedna pored druge:
Ekran: nema demo
Dodajte ovo u klasu `.box1`:
display: none;
Kada učitate stranicu, primetićete da `.box1` više neće biti prikazan. Druga kutija (crna) se takođe pomera ulevo da bi zauzela prostor koji je prethodno zauzimala svetloplava kutija.
Vidljivost: skriveni demo
Umesto `display: none`, dodajte ovu klasu `.box1`:
visibility: hidden
Ovo svojstvo ostavlja malo prostora za `box1`, ali ga ne prikazuje. S druge strane, `box2` ostaje na svom mestu.
| `display:none` | `visibility:hidden` | |
| U potpunosti uklanja element sa veb stranice | Sakriva HTML element, ali i dalje zauzima prostor na veb stranici | |
| Možete stilizovati element čiji je prikaz podešen na none | Možete pozicionirati i stilizovati element čija je vidljivost skrivena | |
| Nije dostupno čitačima ekrana | Možete pristupiti elementu čija je vidljivost podešena kao skrivena uz pomoć čitača ekrana |
Poboljšajte pristupačnost pomoću CSS vidljivosti
Možete da koristite CSS vidljivost da sakrijete elemente koji nisu važni za sve korisnike. Na primer, možete da koristite ovu funkciju da sakrijete obrazac za prijavu koji će biti dostupan samo korisnicima koji nisu prijavljeni. Takođe možete imati bočnu traku ili podnožje koje sadrži uslove korišćenja usluge ili informacije o autorskim pravima.
Možemo imati ovaj kod da ilustrujemo kako možete poboljšati vidljivost:
<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>
<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>
Obrazac za prijavu postaje vidljiv samo kada pređete mišem preko prvog pasusa.
Zaključak
Verujemo da sada možete udobno da koristite svojstvo vidljivosti CSS-a u svom kodu da biste napravili glatke prelaze i poboljšali pristupačnost svojim veb stranicama. Međutim, morate znati gde da koristite svaku vrednost vidljivosti da biste izbegli da završite sa neurednim stranicama. Takođe možete sakriti ključne podatke od korisnika ako zloupotrebljavate svojstvo vidljivosti CSS-a.
Pogledajte naše CSS vodiče i resurse da biste saznali više o CSS svojstvima koja možete kombinovati sa CSS vidljivošću.