Grunderna i CSS-synlighet
Att behärska CSS kan kännas överväldigande med alla dess egenskaper. En central del av CSS är egenskapen `visibility`, som är avgörande för alla som vill bli skickliga webbutvecklare.
I den här artikeln kommer vi att gå igenom vad CSS-synlighet innebär, varför den är viktig och de olika värden den kan anta.
Vad är CSS-synlighet?
CSS-egenskapen `visibility` används för att styra om ett element på en webbsida ska vara synligt eller osynligt. Tänk dig att du har flera element, till exempel rutor, på din sida. Med `visibility` kan du bestämma hur dessa ska visas. Om `visibility` är inställd på `visible` kommer elementet att visas som vanligt.
Om du däremot använder värdet `hidden` kommer elementet att försvinna från skärmen, men det fortsätter att ta upp samma utrymme i layouten. Det är en viktig skillnad mot att ta bort ett element helt.
CSS-synlighet är användbar i flera situationer:
- Styrning av synlighet: Du kan anpassa vad som visas beroende på användarens interaktioner. Till exempel kan ett element bara bli synligt när användaren hovrar med musen eller klickar på en knapp.
- Layoutstabilitet: En välfungerande webbplats ska behålla sin layout, oavsett skärmstorlek. Genom att använda `visibility: hidden` kan du dölja element utan att layouten ändras, eftersom elementet fortfarande tar upp sitt utrymme.
- Prestandaoptimering: När `visibility` är inställd på `hidden` behöver webbläsaren inte räkna om layouten, till skillnad från när du använder `display: none`. Detta kan ge en viss prestandafördel.
- Dynamiska gränssnitt: Genom att kombinera `visibility` med andra CSS-egenskaper som `opacity` kan du skapa fade-effekter, animationer och mjuka övergångar.
Olika värden för CSS-synlighet
Egenskapen `visibility` har fem möjliga värden. Låt oss utforska dem med konkreta exempel.
För att testa exemplen kan du följa dessa steg:
- Skapa en ny mapp på din dator.
- Skapa två filer inuti mappen: `index.html` och `styles.css`.
- Öppna projektet i din kodredigerare.
Du kan skapa mappen och filerna med detta kommando i terminalen:
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Koppla samman HTML- och CSS-filerna genom att lägga till följande i `<head>`-sektionen i `index.html`:
<link rel="stylesheet" href="styles.css">
`visible`
När du sätter `visibility` till `visible` visas elementet på webbsidan. Detta är också standardvärdet. För att demonstrera detta kan vi skapa tre rutor i HTML-dokumentet. Lägg till följande i `<body>` i `index.html`:
<div class="container">
<div class="box1"> Box 1 </div>
<div class="box2"> Box 2 </div>
<div class="box3"> Box 3 </div>
</div>
Styla sedan rutorna med följande CSS-kod i `styles.css`:
.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 sidan renderas kommer du se tre färgade rutor.
Om du sätter `visibility: visible` på dessa rutor kommer det inte att ske någon visuell förändring, eftersom de redan är synliga som standard.
Vi kan demonstrera effekten av `visibility` genom att kombinera den med `display: none`. Låt oss tillämpa `display: none` på `box3`. Ändra CSS för `.box3` så här:
.box3 {
background-color: rgb(154, 43, 12);
display: none;
}
Nu kommer endast två rutor att visas, `box1` och `box2`.
Observera hur `.container` har krympt i storlek. När `display: none` används så tas elementet bort helt och dess utrymme frigörs.
`hidden`
Om du ställer in ett elements `visibility` till `hidden`, kommer elementet att döljas men fortfarande uppta utrymmet i layouten. Låt oss dölja `box2` med detta värde. Ändra CSS-koden för `.box2` så här:
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden;
}
Nu är `box2` osynlig, men mellanslaget där den fanns kvarstår.
Genom att inspektera elementet kan vi se att `box2` fortfarande finns med i DOM, bara osynlig.
`collapse`
Värdet `collapse` används främst för underelement, särskilt i HTML-tabeller. Låt oss skapa en tabell för att visa hur detta fungerar. Lägg till följande HTML-kod i din `index.html` fil:
<table>
<tr>
<th>Programmeringsspråk</th>
<th>Ramverk</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>
Styla tabellen med följande CSS-kod:
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Nu kommer tabellen att visas med alla rader synliga.
Låt oss dölja den andra raden (`Ruby` och `Ruby on Rails`) med `visibility: collapse`. Lägg till följande CSS-kod:
.hidden-row {
visibility: collapse;
}
Nu är raden dold, men tabellens layout påverkas inte.
`initial`
Egenskapen `visibility: initial` återställer ett element till dess ursprungliga värde. Till exempel:
- Alla rader i vår tabell var synliga från början.
- Vi använde `collapse` för att dölja rad 2.
- Vi kan nu gå tillbaka till ursprungsvärdet med `initial` (visa den igen).
Vi ska lägga till en knapp som växlar mellan att visa och dölja raden. Lägg till följande knapp i `index.html`:
<button onclick="toggleVisibility()">Klicka här!</button>
Lägg sedan till följande JavaScript för att växla klassen `.visible-row`:
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Lägg till denna CSS-kod:
.visible-row {
visibility: initial;
}
Genom att klicka på knappen kommer synligheten för rad 2 växlas fram och tillbaka.
`inherit`
Egenskapen `visibility: inherit` låter ett underordnat element ärva `visibility`-värdet från sitt föräldraelement. Vi kan demonstrera detta med följande kod:
<h2>Arv Demo</h2>
<div style="visibility: hidden">
<h3 style="visibility: inherit"> Dold</h3>
</div>
<p>Synlig (inte inom ett dolt element) </p>
Endast innehållet i rubriken `h2` och paragraferna kommer att synas på skärmen. Dock kommer det finnas ett utrymme mellan rubriken och paragrafen som representerar det dolda elementet.
Vi har ett `div`-element vars synlighet är satt till `hidden`. Inom `div` finns en rubrik `h3` som ärver synligheten från sin förälder.
Men om vi ändrar `div`-elementets synlighet till `visible`, så kommer rubriken `h3` (dess barn) att ärva detta värde.
<h2>Arv Demo</h2>
<div style="visibility: visible">
<h3 style="visibility: inherit"> Synlig </h3>
</div>
<p>Synlig (inte inom ett dolt element) </p>
CSS `visibility: hidden` jämfört med `display: none`
Den viktigaste skillnaden mellan `display: none` och `visibility: hidden` är att den förstnämnda helt tar bort elementet från layouten, medan den senare döljer elementet men låter det fortsätta uppta sin plats i layouten.
Följande kod kan användas för att demonstrera skillnaderna:
<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>
När sidan renderas kommer du se två rutor sida vid sida.
`display: none`
Lägg till `display: none;` till `.box1` klassen:
.box1 {
background-color: lightblue;
display: none;
}
När du renderar sidan kommer `box1` att vara borta, och den andra rutan flyttar till vänster för att fylla ut utrymmet.
`visibility: hidden`
Ersätt `display: none` med `visibility: hidden` på `.box1` klassen:
.box1 {
background-color: lightblue;
visibility: hidden;
}
Nu kommer `box1` att vara osynlig men fortfarande ta upp sitt utrymme, och `box2` kommer stanna på sin ursprungliga plats.
| `display: none` | `visibility: hidden` | |
| Effekt | Tar bort elementet helt från webbsidan | Döljer elementet, men det tar fortfarande upp utrymme |
| Formatering | Element som visas med display none kan inte formateras | Element med visibility hidden kan formateras och placeras |
| Tillgänglighet | Inte tillgänglig för skärmläsare | Tillgänglig för skärmläsare |
Förbättra tillgängligheten med CSS-synlighet
CSS-synlighet kan användas för att dölja element som inte är relevanta för alla användare. Till exempel kan du visa ett inloggningsformulär endast för icke-inloggade användare. Eller ha sidofält eller footers som innehåller användarvillkor eller upphovsrättsinformation.
Här är ett exempel på hur man kan förbättra synlighet med CSS:
<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">Logga in</p>
<form class="login-form">
<label for="username">Användarnamn:</label>
<input type="text" id="username" name="username" required />
<label for="password">Lösenord:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Skicka</button>
</form>
Inloggningsformuläret kommer bara synas när man hovrar över texten ”Logga in”.
Slutsats
Nu ska du ha en god förståelse för hur man använder `visibility`-egenskapen i CSS för att skapa smidiga övergångar och förbättra tillgängligheten på dina webbsidor. Se bara till att du använder rätt värde för rätt situation så du inte skapar knasiga upplevelser för användaren. Kom ihåg att inte missbruka `visibility` så att viktig information döljs.
Kolla gärna in våra andra CSS-guider och resurser för att fördjupa dig ännu mer inom CSS!