Mester CSS-synlighet: Skjul og vis elementer effektivt!

by
Tweet
Share
Share
Pin
0 Shares

Det finnes et stort antall CSS-egenskaper, og det kan være en utfordring å beherske dem alle. CSS-synlighet er en av de sentrale egenskapene du bør kunne for å bli en dyktig webutvikler.

I denne artikkelen vil jeg definere hva CSS-synlighet er, understreke dens betydning og forklare de ulike verdiene som denne CSS-egenskapen har.

Hva er CSS-synlighet?

CSS-synlighet brukes til å skjule eller vise et element på en nettside. La oss si at du har fire bokser på nettstedet ditt, og du bruker synlighetsegenskapen for å styre hvordan de skal presenteres. Hvis du setter synligheten til «synlig,» vil alle elementene vises på siden.

Men dersom et element er skjult, vil det fortsatt oppta plass, men det vil ikke være synlig for brukeren.

CSS-synlighet er avgjørende i følgende situasjoner:

  • Synlighetskontroll: Du kan bestemme hva som skal vises basert på den aktuelle brukeren. Det er mulig å konfigurere et elements synlighet slik at det kun vises når brukeren utfører en spesifikk handling, for eksempel å holde musepekeren over eller klikke på en knapp.
  • Opprettholde layout: En god applikasjon bør bevare layout og innhold uavhengig av skjermstørrelse. Når du setter synligheten til et element som «skjult», vil det fortsatt oppta plass, men være usynlig for brukeren. Denne metoden sikrer en konsekvent layout.
  • Ytelsesoptimalisering: Nettleseren trenger ikke å omberegne layouten når synlighetsegenskapen er satt til visibility:hidden. Hvis du derimot bruker display:none, må nettleseren beregne layouten på nytt hver gang elementet skal vises.
  • Skap dynamiske og interaktive brukergrensesnitt: Ved å kombinere CSS-synlighet med andre egenskaper, som for eksempel opasitet, kan du lage fade-effekter, animasjoner og myke overganger.

Ulike CSS-synlighetsverdier

CSS-synlighet har fem mulige verdier. Nedenfor vil jeg forklare dem i detalj med kodeeksempler og skjermbilder. Hvis du vil følge med, gjør følgende:

  • Opprett en mappe på din lokale maskin.
  • Lag to filer inni mappen; index.html og styles.css.
  • Åpne prosjektet i din foretrukne kodeeditor (jeg bruker VS Code).

Du kan bruke denne kommandoen:

mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css

Neste steg er å koble sammen index.html og styles.css-filene. Legg til følgende i <head>-seksjonen i index.html-filen:

<link rel="stylesheet" href="styles.css">

Nå skal det se omtrent slik ut i din kodeeditor:

Synlig

Når du setter verdien til et element til visibility: visible, vil elementet vises på nettsiden. Dette er standard synlighetsinnstillingen. For å forstå konseptet bedre, kan vi legge til tre bokser i vårt HTML-dokument. I <body>-seksjonen i 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 våre div-elementer (boksene) ved hjelp av 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 rendret, vil det se omtrent slik ut:

Hvis du setter synligheten til boksene til visibility: visible, vil det ikke ha noen effekt, ettersom alle boksene er synlige som standard.

Vi kan imidlertid demonstrere hvordan egenskapen «visible» fungerer ved å bruke display: none på en av boksene. La oss velge box3 som eksempel. Endre CSS-koden for klassen .box3 slik:

.box3 {
    background-color: rgb(154, 43, 12);
    display: none
}

Når du laster inn siden på nytt, vil du se at det kun er to bokser, boks 1 og 2.

Hvis du ser nøye etter, vil du se at .container-elementet har blitt mindre. Når du bruker display: none, blir ikke boks 3 rendret, og plassen i nettleseren blir ledig for andre bokser.

Skjult

Når vi bruker CSS-egenskapen visibility: hidden på et element, vil det være skjult for brukeren, men det vil fortsatt oppta plass. For eksempel kan vi skjule Box2 ved å bruke denne egenskapen.

For å oppnå dette, endre CSS-koden for Box2 slik:

.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 endelige siden vil se slik ut:

Vi kan se en avstand mellom boks 1 og boks 3, siden boks 2 bare er skjult.

Vi kan se at boks 2 fortsatt er i DOM hvis vi inspiserer den rendrede siden.

Kollaps

Collapse er en synlighetsverdi som brukes på underelementer. HTML-tabeller er et godt eksempel på hvor vi kan bruke attributtet visibility: collapse.

Vi kan legge til følgende kode for å lage 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 nå style tabellen med en 1px kantlinje på alle cellene. Legg dette til i CSS-filen din:

table {
    border-collapse: collapse;
    width: 50%;
}
th, td {
    border: 1px solid black;
    padding: 8px;
}

Når vi viser tabellen, vil den se slik ut:

Vi vil nå skjule den andre raden for å demonstrere hvordan attributtet visibility: collapse fungerer. Legg dette til i din CSS-kode:

.hidden-row {
    visibility: collapse;
}

Når siden er rendret, vil raden med Ruby og Ruby on Rails være skjult.

Første

Egenskapen visibility: initial tilbakestiller et HTML-element til den opprinnelige verdien. For eksempel:

  • Vi begynte med at alle radene i tabellen var synlige.
  • Vi kollapset verdien av rad 2, og dermed skjulte den.
  • Vi kan nå gå tilbake til startverdien (vise den).

Vi vil legge til en knapp som veksler 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 finner .hidden-row-klassen og veksler klassen .visible-row på den når knappen klikkes.

<script>
    function toggleVisibility() {
      const hiddenRow = document.querySelector('.hidden-row');
      hiddenRow.classList.toggle('visible-row');
    }
</script>
Legg til denne koden i CSS-filen din:
.visible-row {
    visibility: initial;
}

Synlighetsverdien vil veksle frem og tilbake når du klikker på knappen som vises.

Arve

Egenskapen visibility: inherit lar et underelement arve visningsegenskapen fra overordnet element.

Vi kan bruke 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>

Bare innholdet i h1– og p-taggene vil vises hvis du laster siden på nytt. Det vil imidlertid være en avstand som representerer de skjulte elementene mellom <h1> og <p>-taggene.

Vi har en div der synligheten er satt til skjult. Vi har en <h2>-tag inni denne div-en. Vi har satt synligheten til <h2> som inherit, som betyr at den arver fra den overordnede div-en.

Men hvis vi setter egenskapen til div som synlig, vil <h2> (dens underordnede) også arve den.

<h1>Inherit Demo</h1>
    <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 den førstnevnte fjerner et element helt fra layouten, mens den sistnevnte skjuler et element, men likevel tar opp plass.

Vi kan bruke denne koden for å demonstrere forskjellen mellom de to:

<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>

Hvis vi laster inn siden, vil vi se to bokser side ved side:

display: none Demo

Legg dette til klassen .box1:

display: none;

Når du laster inn siden, vil du se at .box1 ikke lenger vises. Den andre boksen (svart) beveger seg også til venstre for å fylle plassen som tidligere var okkupert av den lyseblå boksen.

visibility: hidden Demo

I stedet for display: none, legg til dette i klassen .box1:

visibility: hidden

Denne egenskapen reserverer plass for boks 1, men viser den ikke. På den annen side forblir boks 2 på sin plass.

display:none visibility:hidden
Fjerner et element helt fra nettsiden Skjuler et HTML-element, men tar fortsatt opp plass på nettsiden
Du kan ikke style et element hvis visning er satt til none Du kan plassere og style et element hvis synlighet er skjult
Ikke tilgjengelig for skjermlesere Du 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. For eksempel kan du bruke denne funksjonen til å skjule et påloggingsskjema som kun skal være tilgjengelig for brukere som ikke er logget inn. Du kan også ha en sidefelt eller bunntekst som inneholder vilkår for bruk eller informasjon om opphavsrett.

Vi kan bruke denne koden for å illustrere hvordan du kan forbedre synligheten:

<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>

Påloggingsskjemaet blir først synlig når du holder musepekeren over det første elementet.

Konklusjon

Vi håper at du nå er komfortabel med å bruke CSS-synlighetsegenskapen i koden din for å lage myke overganger og forbedre tilgjengeligheten på nettsidene dine. Du må imidlertid være bevisst på hvor du skal bruke hver synlighetsverdi for å unngå klumpete sider. Du kan også skjule viktig data fra brukerne hvis du misbruker CSS-synlighetsegenskapen.

Sjekk ut våre CSS-guider og ressurser for å lære mer om CSS-egenskaper som kan kombineres med CSS-synlighet.