Vi har många CSS-egenskaper, och att bemästra alla kan vara en utmaning. CSS-synlighet är en av de viktiga egenskaperna som du bör behärska om du vill bli en skicklig webbutvecklare.
I den här artikeln kommer jag att definiera CSS-synlighet, förklara dess betydelse och lista och förklara de olika CSS-synlighetsvärdena.
Innehållsförteckning
Vad är CSS-synlighet?
CSS-synlighetsegenskap döljer eller visar ett element på en webbsida. Du kan till exempel ha fyra rutor på din webbsida och använda synlighetsegenskapen för att bestämma hur de ska visas. Alla element kommer att visas på sidan om du ställer in synligheten som synlig.
Men om elementet är dolt kommer det fortfarande att ta upp utrymme men kommer att döljas från slutwebbläsaren/skärmen.
CSS Synlighet är viktig i följande fall;
- Synlighetskontroll: Du kan styra vad som ska visas baserat på den aktuella användaren. Du kan ställa in synligheten för ett element så att det bara är synligt när en användare utlöser det med en viss åtgärd. Till exempel en hovring eller att klicka på en knapp.
- Layoutbevarande: En bra applikation bör bevara sin layout och innehåll oavsett skärmstorlek. När du ställer in synligheten för ett element som dolt kommer det fortfarande att uppta utrymme men kommer inte att vara synligt för slutanvändarna. Ett sådant tillvägagångssätt gör det möjligt att upprätthålla en konsekvent layout.
- Optimera prestanda: Webbläsaren behöver inte fortsätta att räkna om layouten när synlighetsegenskapen är inställd som visibility:hidden. Men när du använder egenskapen display:none måste webbläsaren räkna om layouten när du bestämmer dig för att visa elementet igen.
- Skapa dynamiskt och interaktivt gränssnitt: Du kan kombinera CSS-synlighetsegenskapen med andra egenskaper, såsom opacitet, för att skapa toningseffekter, animationer och mjuka övergångar.
Olika CSS-synlighetsvärden
CSS-synlighet har fem möjliga värden. Jag kommer att gå in i detalj genom kodblock och skärmdumpar. Om du tänker följa med,
- Skapa en mapp på din lokala dator.
- Lägg till två filer; index.html och styles.css.
- Öppna projektet i din favoritkodredigerare (jag använder VS-kod)
Du kan använda detta kommando;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Nästa är att koppla ihop index.html och styles.css-filer. I avsnittet
i filen index.html, lägg till detta;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Du bör nu ha något liknande detta i din kodredigerare;
Synlig
När du ställer in värdet på ett element som synlighet: synligt visas det på webbsidan. Denna synlighet finns där som standard. Vi kan ha tre rutor i vårt HTML-dokument för att förstå detta koncept bättre. I avsnittet
i din index.html lägger du till följande;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Vi kan nu styla våra divs (boxar) med följande 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);
}
När den sista sidan är renderad kommer du att ha något i stil med detta;
Om du ställer in synligheten på rutorna som synlighet: synlig, kommer det inte att ha någon effekt eftersom alla rutor är synliga som standard.
Däremot kan vi visa hur synlig egendom fungerar med hjälp av displayen: ingen egenskap på en av rutorna. Vi kan välja box3 som vårt exempel. Ändra CSS-koden på klassen .box3 enligt följande;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
När du återrenderar sidan kommer du att notera att vi bara har två rutor, en och två.
Om du är sugen, kommer du att notera att vårt .container-element har reducerad storlek. När du använder displayen: ingen egenskap, renderas inte ruta 3 och dess utrymme i vår webbläsare blir ledigt för andra rutor att uppta.
Dold
När vi tillämpar egenskapen visibility: hidden CSS på ett element, kommer den att döljas för slutanvändaren. Den kommer dock fortfarande att ta plats. Till exempel kan vi dölja Box2 med den här egenskapen.
För att uppnå detta, ändra Box2 CSS-koden enligt följande;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Den enda förändringen vi har gjort är att lägga till denna rad;
visibility: hidden
Den sista sidan blir som den visas;
Vi kan se ett mellanslag mellan Box 1 och Box 3 eftersom Box 2-elementet bara är dolt.
Vi kan se att ruta 2 fortfarande finns på DOM om vi inspekterar vår renderade sida.
Kollaps
Collapse är ett synlighetsvärde som används på underelement. HTML-tabeller är ett perfekt exempel på var vi kan tillämpa attributet visibility:collapse.
Vi kan lägga till följande kod för att skapa en tabell i vår HTML-fil;
<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>
Vi kan nu styla vårt bord med en ram på 1px på alla dess celler. Lägg till detta i din CSS-fil;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
När vi visar tabellen kommer vi att ha följande;
Vi kommer nu att dölja den andra raden för att visa hur attributet synlighet: kollaps fungerar. Lägg till detta i din CSS-kod;
.hidden-row {
visibility: collapse;
}
När sidan är renderad kommer raden med Ruby och Ruby on Rails att döljas.
Första
Visibility: initial-egenskapen återställer ett HTML-element till dess initiala värde. Till exempel;
- Vi började med att alla rader i vår tabell visades.
- Vi kollapsade värdet på rad 2 och gömde det på så sätt.
- Vi kan nu gå tillbaka till det ursprungliga värdet (visa det)
Vi kommer att lägga till en knapp som växlar mellan visnings- och komprimeringsvärden för att visa detta.
Lägg till den här klickbara knappen i din HTML-kod;
<button onclick="toggleVisibility()">Click Me!!</button>
Vi kan sedan lägga till en JavaScript-funktion som letar upp klassen .hidden-row och växlar klassen .visible-rad på den när knappen klickas.
<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;
}
Synlighetsvärdet växlar fram och tillbaka när du klickar på knappen som visas;
Ärva
Visibility : inherit-egenskapen tillåter ett underordnat element att ärva display-egenskapen från den överordnade.
Vi kan ha den här enkla koden för att visa hur den här egenskapen fungerar;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Endast innehållet i h1- och paragraftaggarna kommer att visas om du renderar sidan. Det kommer dock att finnas ett mellanslag som representerar de dolda elementen mellan
– och
-taggarna.
Vi har en div vars synlighet vi har ställt in som dold. Vi har
-taggen inuti div. Vi har ställt in synligheten för
som arv, vilket betyder att den ärver från sin förälder, div.
Men om vi ställer in egenskapen för div som synlig kommer
(dess barn) också att ärva det.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
CSS-synlighet:dold kontra display:ingen
Den stora skillnaden mellan display:none och visibility:hidden är att den förra tar bort ett element från layouten helt medan det senare döljer ett element men ändå tar upp plats.
Vi kan använda den här koden för att visa skillnaden mellan de två;
<!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>
Om vi renderar vår sida kommer vi att ha två rutor sida vid sida;
Displayen: ingen demo
Lägg till detta i .box1-klassen;
display: none;
När du renderar sidan kommer du att notera att .box1 inte längre kommer att visas. Den andra rutan (svart) flyttas också till vänster för att uppta det utrymme som tidigare upptogs av den ljusblå rutan.
Synligheten: dold demo
Istället för att visa: none, lägg till denna .box1-klass;
visibility: hidden
Den här egenskapen lämnar lite utrymme för box1 men visar den inte. Å andra sidan står box2 kvar på sin plats.
display:nonevisibility:hiddenTar bort ett element från webbsidan helt och hållet Döljer ett HTML-element men tar fortfarande upp plats på webbsidanDu kan formatera ett element vars visning är inställd på noneDu kan placera och formatera ett element vars synlighet är doltInte tillgängligt för skärmläsareDu kan komma åt ett element vars synlighet är inställd som dold med skärmläsare
Förbättra tillgängligheten med CSS-synlighet
Du kan använda CSS-synlighet för att dölja element som inte är viktiga för alla användare. Du kan till exempel använda den här funktionen för att dölja en inloggningsanvändare som endast kommer att vara tillgänglig för användare som inte är inloggade. Du kan också ha en sidofält eller en sidfot som innehåller användarvillkor eller information om upphovsrätt.
Vi kan ha den här koden för att illustrera hur du kan förbättra synligheten;
<!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>
Inloggningsformuläret blir endast synligt när du håller muspekaren över det första objektet.
Slutsats
Vi tror att du nu bekvämt kan använda egenskapen CSS synlighet i din kod för att göra smidiga övergångar och förbättra tillgängligheten för dina webbsidor. Du måste dock veta var du ska använda alla synlighetsvärden för att undvika att det slutar med knasiga sidor. Du kan också dölja avgörande data från slutanvändarna när du missbrukar CSS-synlighetsegenskapen.
Kolla in våra CSS-guider och resurser för att lära dig mer om CSS-egenskaper som du kan kombinera med CSS-synlighet.