Vi har mange CSS-egenskaber, og det kan være en udfordring at mestre alle. CSS-synlighed er en af ​​de vigtige egenskaber, som du bør mestre, hvis du vil blive en dygtig webudvikler.

I denne artikel vil jeg definere CSS-synlighed, forklare dens vigtighed og liste og forklare de forskellige CSS-synlighedsværdier.

Hvad er CSS-synlighed?

CSS-synlighedsegenskab skjuler eller viser et element på en webside. For eksempel kan du have fire felter på din webside og bruge egenskaben synlighed til at bestemme, hvordan de vil blive vist. Alle elementerne vises på siden, hvis du indstiller synligheden som synlig.

Men hvis elementet er skjult, vil det stadig optage plads, men vil blive skjult fra slutbrowseren/skærmen.

CSS Synlighed er vigtig i følgende tilfælde;

• Synlighedskontrol: Du kan styre, hvad der skal vises baseret på den aktuelle bruger. Du kan indstille synligheden af ​​et element til kun at være synlig, når en bruger udløser det ved hjælp af en bestemt handling. For eksempel et svæv eller et klik på en knap.
• Layoutbevarelse: En god applikation bør bevare sit layout og indhold uanset skærmstørrelsen. Når du indstiller synligheden af ​​et element som skjult, vil det stadig optage plads, men vil ikke være synligt for slutbrugerne. En sådan tilgang gør det muligt at opretholde et ensartet layout.
• Optimer ydeevnen: Browseren behøver ikke at blive ved med at genberegne layoutet, når egenskaben visibility er indstillet som visibility:hidden. Men når du bruger egenskaben display:none, skal browseren genberegne layoutet, når du beslutter dig for at vise elementet igen.
• Opret dynamisk og interaktiv UI: Du kan kombinere CSS-synlighedsegenskaber med andre egenskaber, såsom opacitet, for at skabe fade-effekter, animationer og jævne overgange.

Forskellige CSS-synlighedsværdier

CSS-synlighed har fem mulige værdier. Jeg vil gå i detaljer gennem kodeblokke og skærmbilleder. Hvis du har tænkt dig at følge med,

• Opret en mappe på din lokale maskine.
• Tilføj to filer; index.html og styles.css.
• Åbn projektet i din yndlingskodeeditor (jeg bruger VS-kode)

Du kan bruge denne kommando;

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

Det næste er at forbinde index.html og styles.css filer. Tilføj dette i -sektionen af ​​index.html-filen;

<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">

Du skulle nu have noget lignende dette på din kodeeditor;

Synlig

Når du indstiller værdien af ​​et element som synlighed: synlig, vises det på websiden. Denne synlighed er der som standard. Vi kan have tre bokse i vores HTML-dokument for at forstå dette koncept bedre. Tilføj følgende i -sektionen af ​​din index.html;

<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 style vores divs (bokse) ved hjælp af 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 sidste side er gengivet, vil du have noget som dette;

Hvis du indstiller synligheden på af boksene som synlighed: synlig, vil det ikke have nogen effekt, da alle felter er synlige som standard.

Vi kan dog demonstrere, hvordan synlig egenskab fungerer ved hjælp af displayet: ingen egenskab på en af ​​boksene. Vi kan vælge box3 som vores eksempel. Skift CSS-koden på klassen .box3 som følger;

.box3 {

    background-color: rgb(154, 43, 12);

    display: none

  }

Når du gengiver siden, vil du bemærke, at vi kun har to kasser, en og to.

Hvis du er ivrig, vil du bemærke, at vores .container-element har reduceret størrelse. Når du bruger displayet: ingen egenskab, gengives boks 3 ikke, og dens plads i vores browser bliver ledig til andre kasser.

Skjult

Når vi anvender egenskaben visibility: hidden CSS på et element, vil den blive skjult for slutbrugeren. Det vil dog stadig optage plads. For eksempel kan vi skjule Box2 ved hjælp af denne egenskab.

For at opnå dette skal du ændre Box2 CSS-koden som følger;

.box2 {

    background-color: rgb(95, 234, 77);

    margin-right: 15px;

    visibility: hidden

  }

Den eneste ændring, vi har lavet, er at tilføje denne linje;

visibility: hidden

Den sidste side vil være som vist;

Vi kan se et mellemrum mellem Box 1 og Box 3, da Box 2-elementet kun er skjult.

Vi kan se, at boks 2 stadig er på DOM, hvis vi inspicerer vores gengivne side.

Bryder sammen

Collapse er en synlighedsværdi, der bruges på underelementer. HTML-tabeller er et perfekt eksempel på, hvor vi kan anvende visibility:collapse-attributten.

Vi kan tilføje følgende kode for at oprette en tabel i vores 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 style vores tabel med en kant på 1px på alle dens celler. Tilføj dette til din CSS-fil;

table {

    border-collapse: collapse;

    width: 50%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

  }

Når vi viser tabellen, vil vi have følgende;

Vi vil nu skjule den anden række for at demonstrere, hvordan synlighed: kollaps-attributten fungerer. Tilføj dette til din CSS-kode;

.hidden-row {

    visibility: collapse;

  }

Når siden er gengivet, vil rækken med Ruby og Ruby on Rails blive skjult.

Initial

Egenskaben Visibility: initial nulstiller et HTML-element til dets oprindelige værdi. For eksempel;

• Vi startede med at alle rækkerne i vores tabel blev vist.
• Vi kollapsede værdien af ​​række 2 og skjulte den.
• Vi kan nu gå tilbage til startværdien (vise den)

Vi tilføjer en knap, der skifter mellem display- og komprimeringsværdier for at demonstrere dette.

Tilføj denne klikbare knap til din HTML-kode;

<button onclick="toggleVisibility()">Click Me!!</button>

Vi kan derefter tilføje en JavaScript-funktion, der slår op efter .hidden-row-klassen og slår klassen .visible-row på den, når der klikkes på knappen.

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

  }

Synlighedsværdien skifter frem og tilbage, når du klikker på den viste knap;

Arve

Visibility : inherit-egenskaben tillader et underordnet element at arve display-egenskaben fra den overordnede.

Vi kan have denne enkle kode til at demonstrere, hvordan denne egenskab 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>

Kun indholdet inde i h1- og afsnitstags vil blive vist, hvis du gengiver siden. Der vil dog eksistere et mellemrum, der repræsenterer de skjulte elementer mellem

og

tags.

Vi har én div, hvis synlighed vi har sat som skjult. Vi har

tag inde i div. Vi har indstillet synligheden af ​​

som arv, hvilket betyder, at den arver fra sin forælder, div.

Men hvis vi sætter egenskaben for div’en 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-synlighed:skjult vs. display:ingen

Den største forskel mellem display:none og visibility:hidden er, at førstnævnte fjerner et element fra layoutet helt, mens sidstnævnte skjuler et element, men stadig optager plads.

Vi kan bruge denne kode til at demonstrere forskellen mellem 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 gengiver vores side, vil vi have to kasser side om side;

Displayet: ingen demo

Føj dette til .box1-klassen;

display: none;

Når du gengiver siden, vil du bemærke, at .box1 ikke længere vil blive vist. Den anden boks (sort) flytter sig også til venstre for at optage den plads, der tidligere var optaget af den lyseblå boks.

Synlighed: skjult demo

I stedet for at vise: ingen, tilføj denne .box1-klasse;

visibility: hidden

Denne egenskab efterlader noget plads til box1, men viser den ikke. På den anden side forbliver box2 på sin plads.

display:nonevisibility:hiddenFjerner et element helt fra websiden Skjuler et HTML-element, men optager stadig plads på websidenDu kan style et element, hvis visning er indstillet til noneDu kan placere og style et element, hvis synlighed er skjultIkke tilgængeligt af skærmlæsereDu kan få adgang til et element, hvis synlighed er indstillet som skjult ved hjælp af skærmlæsere

Forbedre tilgængeligheden med CSS-synlighed

Du kan bruge CSS-synlighed til at skjule elementer, der ikke er vigtige for alle brugere. For eksempel kan du bruge denne funktion til at skjule en login-bruger, som kun vil være tilgængelig for brugere, der ikke er logget ind. Du kan også have en sidebjælke eller en sidefod, der indeholder servicevilkår eller oplysninger om ophavsret.

Vi kan have denne kode til at illustrere, hvordan du kan forbedre synlighed;

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

Loginformularen bliver først synlig, når du holder markøren over det første element.

Konklusion

Vi mener, at du nu komfortabelt kan bruge CSS-synlighedsegenskaben i din kode til at lave jævne overgange og forbedre tilgængeligheden af ​​dine websider. Du skal dog vide, hvor du skal bruge alle synlighedsværdier for at undgå at ende med clanky sider. Du kan også skjule vigtige data fra slutbrugerne, når du misbruger CSS-synlighedsegenskaben.

Tjek vores CSS-vejledninger og -ressourcer for at lære mere om CSS-egenskaber, du kan kombinere med CSS-synlighed.