We hebben veel CSS-eigenschappen en het kan een uitdaging zijn om ze allemaal onder de knie te krijgen. CSS-zichtbaarheid is een van de belangrijke eigenschappen die u moet beheersen als u een bekwame webontwikkelaar wilt worden.
In dit artikel zal ik CSS-zichtbaarheid definiëren, het belang ervan uitleggen en de verschillende CSS-zichtbaarheidswaarden opsommen en uitleggen.
Wat is CSS-zichtbaarheid?
CSS-zichtbaarheidseigenschap verbergt of toont een element in een webpagina. U kunt bijvoorbeeld vier vakken op uw webpagina hebben en de eigenschap visibility gebruiken om te bepalen hoe ze worden weergegeven. Alle elementen verschijnen op de pagina als u de zichtbaarheid instelt op zichtbaar.
Als het element echter verborgen is, neemt het nog steeds ruimte in beslag, maar wordt het verborgen voor de eindbrowser/het eindscherm.
CSS Zichtbaarheid is belangrijk in de volgende gevallen;
- Zichtbaarheidscontrole: u kunt bepalen wat er moet worden weergegeven op basis van de huidige gebruiker. U kunt de zichtbaarheid van een element zo instellen dat het alleen zichtbaar is wanneer een gebruiker het activeert met een bepaalde actie. Bijvoorbeeld een muisaanwijzer of klikken op een knop.
- Lay-out behouden: een goede applicatie moet zijn lay-out en inhoud behouden, ongeacht de schermgrootte. Wanneer u de zichtbaarheid van een element als verborgen instelt, neemt het nog steeds ruimte in beslag, maar is het niet zichtbaar voor de eindgebruikers. Een dergelijke aanpak maakt het mogelijk om een consistente lay-out te behouden.
- Prestaties optimaliseren: de browser hoeft de lay-out niet steeds opnieuw te berekenen wanneer de eigenschap visibility is ingesteld als visibility:hidden. Wanneer u echter de eigenschap display:none gebruikt, moet de browser de lay-out opnieuw berekenen wanneer u besluit het element opnieuw weer te geven.
- Dynamische en interactieve gebruikersinterface maken: u kunt CSS-zichtbaarheidseigenschappen combineren met andere eigenschappen, zoals dekking, om vervagingseffecten, animaties en vloeiende overgangen te creëren.
Verschillende CSS-zichtbaarheidswaarden
CSS-zichtbaarheid heeft vijf mogelijke waarden. Ik zal in detail treden door middel van codeblokken en screenshots. Als je van plan bent om mee te gaan,
- Maak een map op uw lokale computer.
- Voeg twee bestanden toe; index.html en stijlen.css.
- Open het project in uw favoriete code-editor (ik gebruik VS Code)
U kunt deze opdracht gebruiken;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
De volgende is om index.html- en styles.css-bestanden met elkaar te verbinden. Voeg dit toe in het gedeelte
van het bestand index.html;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Je zou nu iets soortgelijks in je code-editor moeten hebben;
Zichtbaar
Wanneer u de waarde van een element instelt als visibility: visible, verschijnt het op de webpagina. Deze zichtbaarheid is er standaard. We kunnen drie vakken in ons HTML-document hebben om dit concept beter te begrijpen. Voeg in de
sectie van uw index.html het volgende toe;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
We kunnen nu onze divs (boxen) stylen met behulp van de volgende CSS-code;
.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);
}
Wanneer de laatste pagina wordt weergegeven, heb je zoiets;
Als u de zichtbaarheid van de vakken instelt op zichtbaarheid: zichtbaar, heeft dit geen effect omdat alle vakken standaard zichtbaar zijn.
We kunnen echter demonstreren hoe zichtbare eigenschap werkt met behulp van het display: geen eigenschap op een van de dozen. We kunnen box3 als voorbeeld kiezen. Wijzig de CSS-code op klasse .box3 als volgt;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Wanneer u de pagina opnieuw rendert, ziet u dat we slechts twee vakken hebben, een en twee.
Als u geïnteresseerd bent, zult u merken dat ons .container-element kleiner is. Wanneer u de eigenschap display: none gebruikt, wordt vak 3 niet weergegeven en komt de ruimte in onze browser vrij voor andere vakken.
Verborgen
Wanneer we de eigenschap visibility: hidden CSS toepassen op een element, wordt deze verborgen voor de eindgebruiker. Het zal echter nog steeds ruimte innemen. We kunnen bijvoorbeeld Box2 verbergen met deze eigenschap.
Wijzig hiervoor de CSS-code van Box2 als volgt;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
De enige wijziging die we hebben aangebracht is het toevoegen van deze regel;
visibility: hidden
De laatste pagina zal zijn zoals weergegeven;
We kunnen een spatie zien tussen Box 1 en Box 3 omdat het Box 2-element alleen verborgen is.
We kunnen zien dat Box 2 nog steeds op de DOM staat als we onze weergegeven pagina inspecteren.
Instorten
Samenvouwen is een zichtbaarheidswaarde die wordt gebruikt voor subelementen. HTML-tabellen zijn een perfect voorbeeld van waar we het kenmerk visibility:collapse kunnen toepassen.
We kunnen de volgende code toevoegen om een tabel in ons HTML-bestand te maken;
<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>
We kunnen onze tabel nu stylen met een rand van 1px op al zijn cellen. Voeg dit toe aan je CSS-bestand;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Wanneer we de tabel weergeven, hebben we het volgende;
We zullen nu de tweede rij verbergen om te demonstreren hoe het kenmerk zichtbaarheid: samenvouwen werkt. Voeg dit toe aan je CSS-code;
.hidden-row {
visibility: collapse;
}
Wanneer de pagina wordt weergegeven, wordt de rij met Ruby en Ruby on Rails verborgen.
Voorletter
De eigenschap visibility: initial zet een HTML-element terug naar de oorspronkelijke waarde. Bijvoorbeeld;
- We zijn begonnen met het weergeven van alle rijen in onze tabel.
- We hebben de waarde van rij 2 samengevouwen en dus verborgen.
- We kunnen nu teruggaan naar de beginwaarde (weergeven)
We zullen een knop toevoegen die schakelt tussen waarden voor weergeven en samenvouwen om dit te demonstreren.
Voeg deze klikbare knop toe aan uw HTML-code;
<button onclick="toggleVisibility()">Click Me!!</button>
We kunnen dan een JavaScript-functie toevoegen die opzoekt naar de klasse .hidden-row en de klasse .visible-row erop schakelt wanneer op de knop wordt geklikt.
<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;
}
De zichtbaarheidswaarde schakelt heen en weer als u op de weergegeven knop klikt;
Erven
Met de eigenschap visibility : inherit kan een onderliggend element de weergave-eigenschap van het bovenliggende element erven.
We kunnen deze eenvoudige code hebben om te demonstreren hoe deze eigenschap werkt;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Alleen de inhoud binnen de h1- en alinea-tags wordt weergegeven als u de pagina rendert. Er zal echter een spatie aanwezig zijn die de verborgen elementen tussen de
– en
-tags vertegenwoordigt.
We hebben één div waarvan we de zichtbaarheid hebben ingesteld als verborgen. We hebben
tag in de div. We hebben de zichtbaarheid van de
ingesteld als overerven, wat betekent dat het overerft van zijn ouder, de div.
Als we de eigenschap van de div echter als zichtbaar instellen, zal de
(zijn kind) dat ook erven.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
CSS-zichtbaarheid: verborgen vs. weergeven: geen
Het grote verschil tussen display:none en visibility:hidden is dat de eerste een element volledig uit de lay-out verwijdert, terwijl de laatste een element verbergt maar nog steeds ruimte in beslag neemt.
We kunnen deze code gebruiken om het verschil tussen de twee aan te tonen;
<!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>
Als we onze pagina weergeven, hebben we twee vakken naast elkaar;
Het display: geen demo
Voeg dit toe aan de .box1 klasse;
display: none;
Wanneer u de pagina weergeeft, ziet u dat .box1 niet langer wordt weergegeven. Het tweede vak (zwart) gaat ook naar links om de plaats in te nemen die voorheen werd ingenomen door het lichtblauwe vak.
De zichtbaarheid: verborgen demo
Voeg in plaats van display: none deze .box1 class toe;
visibility: hidden
Deze eigenschap laat wat ruimte over voor box1, maar geeft deze niet weer. Aan de andere kant blijft box2 op zijn plaats.
display:nonevisibility:hiddenVerwijdert een element volledig van de webpaginaVerbergt een HTML-element maar neemt nog steeds ruimte in beslag op de webpagina een element waarvan de zichtbaarheid is ingesteld als verborgen met behulp van schermlezers
Verbeter de toegankelijkheid met CSS-zichtbaarheid
U kunt CSS-zichtbaarheid gebruiken om elementen te verbergen die niet voor alle gebruikers belangrijk zijn. U kunt deze functie bijvoorbeeld gebruiken om een ingelogde gebruiker te verbergen die alleen beschikbaar is voor gebruikers die niet zijn ingelogd. U kunt ook een zijbalk of een voettekst hebben met servicevoorwaarden of copyrightinformatie.
We kunnen deze code hebben om te illustreren hoe u de zichtbaarheid kunt verbeteren;
<!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>
Het inlogformulier wordt pas zichtbaar als je met je muis over het eerste item gaat.
Conclusie
We denken dat u nu gemakkelijk de CSS-zichtbaarheidseigenschap in uw code kunt gebruiken om vloeiende overgangen te maken en de toegankelijkheid van uw webpagina’s te verbeteren. U moet echter weten waar u elke zichtbaarheidswaarde moet gebruiken om te voorkomen dat u onhandige pagina’s krijgt. U kunt ook cruciale gegevens voor de eindgebruikers verbergen wanneer u de CSS-zichtbaarheidseigenschap misbruikt.
Bekijk onze CSS-handleidingen en bronnen voor meer informatie over CSS-eigenschappen die u kunt combineren met CSS-zichtbaarheid.
