Vi har mange CSS-egenskaper, og det kan være en utfordring å mestre alle. CSS-synlighet er en av de viktige egenskapene du bør mestre dersom du ønsker å bli en dyktig webutvikler.
I denne artikkelen vil jeg definere CSS-synlighet, forklare viktigheten av den, og liste opp og forklare de forskjellige CSS-synlighetsverdiene.
Innholdsfortegnelse
Hva er CSS-synlighet?
CSS-synlighetsegenskap skjuler eller viser et element på en nettside. Du kan for eksempel ha fire bokser på nettsiden din og bruke synlighetsegenskapen for å bestemme hvordan de skal vises. Alle elementene vil vises på siden hvis du setter synligheten som synlig.
Imidlertid, hvis elementet er skjult, vil det fortsatt oppta plass, men vil være skjult fra sluttleseren/skjermen.
CSS Synlighet er viktig i følgende tilfeller;
- Synlighetskontroll: Du kan kontrollere hva som skal vises basert på gjeldende bruker. Du kan angi at synligheten til et element bare skal være synlig når en bruker utløser det ved hjelp av en bestemt handling. For eksempel ved å holde musepekeren eller klikke på en knapp.
- Layoutbevaring: En god applikasjon bør bevare layout og innhold uavhengig av skjermstørrelsen. Når du angir synligheten til et element som skjult, vil det fortsatt oppta plass, men vil ikke være synlig for sluttbrukerne. En slik tilnærming gjør det mulig å opprettholde en konsistent layout.
- Optimaliser ytelsen: Nettleseren trenger ikke fortsette å beregne oppsettet på nytt når synlighetsegenskapen er satt som visibility:hidden. Men når du bruker egenskapen display:none, må nettleseren beregne oppsettet på nytt hver gang du bestemmer deg for å vise elementet igjen.
- Lag dynamisk og interaktivt brukergrensesnitt: Du kan kombinere CSS-synlighetsegenskapene med andre egenskaper, for eksempel opasitet, for å lage fade-effekter, animasjoner og jevne overganger.
Ulike CSS-synlighetsverdier
CSS-synlighet har fem mulige verdier. Jeg vil gå i detalj gjennom kodeblokker og skjermbilder. Hvis du har tenkt å følge med,
- Opprett en mappe på din lokale maskin.
- Legg til to filer; index.html og styles.css.
- Åpne prosjektet i din favorittkodeeditor (jeg bruker VS-kode)
Du kan bruke denne kommandoen;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Det neste er å koble index.html og styles.css-filer. På
-delen av index.html-filen legger du til dette;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Du bør nå ha noe som ligner dette på koderedigeringsprogrammet ditt;
Synlig
Når du angir verdien til et element som synlighet: synlig, vil det vises på nettsiden. Denne synligheten er der som standard. Vi kan ha tre bokser i HTML-dokumentet vårt for å forstå dette konseptet bedre. I
-delen av index.html, legg til følgende;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Vi kan nå style divene (boksene) våre ved å bruke følgende CSS-kode;
.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 siste siden er gjengitt, vil du ha noe sånt som dette;
Hvis du angir synligheten på boksene som synlighet: synlig, vil det ikke ha noen effekt da alle boksene er synlige som standard.
Vi kan imidlertid demonstrere hvordan synlig egenskap fungerer ved å bruke displayet: ingen egenskap på en av boksene. Vi kan velge boks3 som vårt eksempel. Endre CSS-koden på klassen .box3 som følger;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Når du gjengir siden på nytt, vil du merke at vi bare har to bokser, en og to.
Hvis du er ivrig, vil du merke at vårt .container-element har redusert størrelse. Når du bruker displayet: ingen egenskap, gjengis ikke boks 3, og plassen på nettleseren vår blir ledig for andre bokser.
Skjult
Når vi bruker visibility: hidden CSS-egenskapen på et element, vil den være skjult for sluttbrukeren. Den vil imidlertid fortsatt oppta plass. For eksempel kan vi skjule Box2 ved å bruke denne egenskapen.
For å oppnå dette, endre Box2 CSS-koden som følger;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Den eneste endringen vi har gjort er å legge til denne linjen;
visibility: hidden
Den siste siden vil være som vist;
Vi kan se et mellomrom mellom boks 1 og boks 3 ettersom boks 2-elementet bare er skjult.
Vi kan se at boks 2 fortsatt er på DOM hvis vi inspiserer vår gjengitte side.
Kollapse
Collapse er en synlighetsverdi som brukes på underelementer. HTML-tabeller er et perfekt eksempel på hvor vi kan bruke visibility:collapse-attributtet.
Vi kan legge til følgende kode for å lage en tabell i HTML-filen vår;
<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 nå style bordet vårt med en kantlinje på 1px på alle cellene. Legg dette til CSS-filen din;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Når vi viser tabellen, vil vi ha følgende;
Vi vil nå skjule den andre raden for å demonstrere hvordan synlighet: kollaps-attributtet fungerer. Legg dette til CSS-koden din;
.hidden-row {
visibility: collapse;
}
Når siden er gjengitt, vil raden med Ruby og Ruby on Rails skjules.
Første
Visibility: initial-egenskapen tilbakestiller et HTML-element til den opprinnelige verdien. For eksempel;
- Vi startet med at alle radene i tabellen vår ble vist.
- Vi kollapset verdien av rad 2, og dermed skjulte den.
- Vi kan nå gå tilbake til startverdien (vis den)
Vi vil legge til en knapp som bytter mellom visnings- og kollapsverdier for å demonstrere dette.
Legg til denne klikkbare knappen i HTML-koden din;
<button onclick="toggleVisibility()">Click Me!!</button>
Vi kan deretter legge til en JavaScript-funksjon som ser opp etter .hidden-row-klassen og veksler på klassen .visible-row på den når knappen klikkes.
<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;
}
Synlighetsverdien vil bytte frem og tilbake når du klikker på knappen som vises;
Arve
Visibility : inherit-egenskapen lar et underordnet element arve visningsegenskapen fra overordnet.
Vi kan ha denne enkle koden for å demonstrere hvordan denne egenskapen fungerer;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Bare innholdet i h1- og avsnittstaggene vil vises hvis du gjengir siden. Imidlertid vil det eksistere et mellomrom som representerer de skjulte elementene mellom
– og
-taggene.
Vi har en div hvis synlighet vi har satt som skjult. Vi har
tag inne i div. Vi har satt synligheten til
som arv, noe som betyr at den arver fra sin overordnede, div.
Men hvis vi setter egenskapen til div som synlig, vil
(dets underordnede) også arve 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:skjult vs. display:ingen
Den største forskjellen mellom display:none og visibility:hidden er at førstnevnte fjerner et element helt fra oppsettet mens sistnevnte skjuler et element, men likevel tar opp plass.
Vi kan bruke denne koden for å demonstrere forskjellen mellom de to;
<!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>
Hvis vi gjengir siden vår, vil vi ha to bokser side ved side;
Displayet: ingen demo
Legg dette til .box1-klassen;
display: none;
Når du gjengir siden, vil du merke at .box1 ikke lenger vises. Den andre boksen (svart) beveger seg også til venstre for å okkupere plassen som tidligere var okkupert av den lyseblå boksen.
Synlighet: skjult demo
I stedet for å vise: ingen, legg til denne .box1-klassen;
visibility: hidden
Denne egenskapen gir plass til boks1, men viser den ikke. På den annen side forblir box2 på sin plass.
display:nonevisibility:hiddenFjerner et element helt fra nettsiden Skjuler et HTML-element, men tar fortsatt opp plass på nettsidenDu kan style et element hvis visning er satt til noneDu kan plassere og style et element hvis synlighet er skjultIkke tilgjengelig for skjermlesereDu kan få tilgang til et element hvis synlighet er satt som skjult ved hjelp av skjermlesere
Forbedre tilgjengeligheten med CSS-synlighet
Du kan bruke CSS-synlighet til å skjule elementer som ikke er viktige for alle brukere. Du kan for eksempel bruke denne funksjonen til å skjule en påloggingsbruker som kun vil være tilgjengelig for brukere som ikke er pålogget. Du kan også ha en sidefelt eller en bunntekst som inneholder vilkår for bruk eller informasjon om opphavsrett.
Vi kan ha denne koden for å illustrere hvordan du kan forbedre 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>
Påloggingsskjemaet blir først synlig når du holder musepekeren over det første elementet.
Konklusjon
Vi tror at du nå komfortabelt kan bruke CSS-synlighetsegenskapen i koden din for å gjøre jevne overganger og forbedre tilgjengeligheten til nettsidene dine. Du må imidlertid vite hvor du skal bruke hver synlighetsverdi for å unngå å ende opp med klunsete sider. Du kan også skjule viktige data fra sluttbrukerne når du misbruker CSS-synlighetsegenskapen.
Sjekk ut våre CSS-guider og ressurser for å lære mer om CSS-egenskaper du kan kombinere med CSS-synlighet.