Máme mnoho vlastností CSS a zvládnout všechny může být problém. Viditelnost CSS je jednou z důležitých vlastností, kterou byste měli ovládat, pokud se chcete stát zkušeným webovým vývojářem.
V tomto článku budu definovat CSS Viditelnost, vysvětlím její důležitost a vyjmenuji a vysvětlím různé hodnoty viditelnosti CSS.
Table of Contents
Co je viditelnost CSS?
Vlastnost viditelnosti CSS skryje nebo zobrazí prvek na webové stránce. Například můžete mít na své webové stránce čtyři pole a pomocí vlastnosti viditelnosti určit, jak se budou zobrazovat. Pokud nastavíte viditelnost jako viditelnou, zobrazí se na stránce všechny prvky.
Pokud je však prvek skrytý, bude stále zabírat místo, ale bude skrytý před koncovým prohlížečem/obrazovkou.
Viditelnost CSS je důležitá v následujících případech;
- Kontrola viditelnosti: Můžete ovládat, co se má zobrazovat na základě aktuálního uživatele. Viditelnost prvku můžete nastavit tak, aby byla viditelná pouze tehdy, když jej uživatel spustí pomocí určité akce. Například podržením kurzoru nebo kliknutím na tlačítko.
- Zachování rozvržení: Dobrá aplikace by si měla zachovat rozvržení a obsah bez ohledu na velikost obrazovky. Když nastavíte viditelnost prvku jako skrytý, bude stále zabírat místo, ale nebude viditelný pro koncové uživatele. Takový přístup umožňuje zachovat konzistentní uspořádání.
- Optimalizace výkonu: Když je vlastnost viditelnosti nastavena jako viditelnost:skrytá, prohlížeč nemusí neustále přepočítávat rozvržení. Když však použijete vlastnost display:none, prohlížeč musí přepočítat rozložení, kdykoli se rozhodnete prvek znovu zobrazit.
- Vytváření dynamického a interaktivního uživatelského rozhraní: Vlastnost viditelnosti CSS můžete kombinovat s dalšími vlastnostmi, jako je neprůhlednost, a vytvářet tak efekty mizení, animace a plynulé přechody.
Různé hodnoty viditelnosti CSS
Viditelnost CSS má pět možných hodnot. Půjdu do podrobností prostřednictvím bloků kódu a snímků obrazovky. Pokud máte v úmyslu následovat,
- Vytvořte složku na místním počítači.
- Přidat dva soubory; index.html a styly.css.
- Otevřete projekt ve svém oblíbeném editoru kódu (používám VS Code)
Můžete použít tento příkaz;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Další je propojit soubory index.html a styles.css. V sekci
souboru index.html přidejte toto;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Nyní byste měli mít něco podobného v editoru kódu;
Viditelné
Když nastavíte hodnotu prvku jako viditelnost: viditelný, objeví se na webové stránce. Tato viditelnost je zde standardně. Abychom tomuto konceptu lépe porozuměli, můžeme mít v našem HTML dokumentu tři rámečky. V sekci
vašeho index.html přidejte následující;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Nyní můžeme stylovat naše divy (boxy) pomocí následujícího kódu 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);
}
Po vykreslení poslední stránky budete mít něco takového;
Pokud nastavíte viditelnost polí jako viditelnost: viditelná, nebude to mít žádný účinek, protože všechna políčka jsou ve výchozím nastavení viditelná.
Můžeme však demonstrovat, jak vlastnost viditelná funguje pomocí zobrazení: žádná vlastnost na jednom z polí. Jako náš příklad můžeme vybrat box3. Změňte kód CSS na třídě .box3 následovně;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Když stránku znovu vykreslíte, všimnete si, že máme pouze dvě pole, jedno a dvě.
Pokud máte zájem, všimnete si, že náš prvek .container má zmenšenou velikost. Když použijete vlastnost display: none, Box 3 se nevykreslí a jeho místo v našem prohlížeči se uvolní pro ostatní boxy.
Skrytý
Když na prvek aplikujeme vlastnost CSS viditelnosti: skryté, bude pro koncového uživatele skrytý. Stále však bude zabírat místo. Pomocí této vlastnosti můžeme například skrýt Box2.
Chcete-li toho dosáhnout, upravte kód CSS Box2 následovně;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Jedinou změnou, kterou jsme provedli, je přidání tohoto řádku;
visibility: hidden
Poslední stránka bude vypadat jako zobrazená;
Můžeme vidět mezeru mezi rámečkem 1 a rámečkem 3, protože prvek rámečku 2 je pouze skrytý.
Můžeme vidět, že Box 2 je stále na DOM, pokud zkontrolujeme naši vykreslenou stránku.
Kolaps
Collapse je hodnota viditelnosti, která se používá u dílčích prvků. HTML tabulky jsou dokonalým příkladem toho, kde můžeme použít atribut viditelnost:sbalit.
Můžeme přidat následující kód pro vytvoření tabulky v našem HTML souboru;
<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>
Nyní můžeme nastylovat naši tabulku s okrajem 1px na všech jejích buňkách. Přidejte to do svého souboru CSS;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Když zobrazíme tabulku, budeme mít následující;
Nyní skryjeme druhý řádek, abychom ukázali, jak funguje atribut viditelnosti: sbalení. Přidejte to do svého kódu CSS;
.hidden-row {
visibility: collapse;
}
Po vykreslení stránky bude řádek s Ruby a Ruby on Rails skrytý.
Počáteční
Vlastnost viditelnost: initial resetuje element HTML na počáteční hodnotu. Například;
- Začali jsme zobrazením všech řádků v naší tabulce.
- Sbalili jsme hodnotu řádku 2, čímž jsme ji skryli.
- Nyní se můžeme vrátit k původní hodnotě (zobrazit ji)
Abychom to demonstrovali, přidáme tlačítko, které přepíná mezi zobrazením a sbalením hodnot.
Přidejte toto klikací tlačítko do svého HTML kódu;
<button onclick="toggleVisibility()">Click Me!!</button>
Poté můžeme přidat funkci JavaScriptu, která vyhledá třídu .hidden-row a po kliknutí na tlačítko na ní přepne třídu .visible-row.
<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;
}
Hodnota viditelnosti se bude přepínat tam a zpět, když kliknete na zobrazené tlačítko;
Zdědit
Vlastnost viditelnost : inherit umožňuje podřízenému prvku zdědit vlastnost display od rodiče.
Můžeme mít tento jednoduchý kód, abychom demonstrovali, jak tato vlastnost funguje;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Pokud stránku vykreslíte, zobrazí se pouze obsah uvnitř značek h1 a odstavce. Mezi značkami
a
však bude existovat mezera představující skryté prvky.
Máme jeden div, jehož viditelnost jsme nastavili jako skrytou. Uvnitř div máme tag
. Viditelnost
jsme nastavili jako dědit, což znamená, že dědí od svého rodiče, div.
Pokud však nastavíme vlastnost div jako viditelnou,
(jeho potomek) to také zdědí.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
CSS viditelnost:skrytá vs. zobrazení:žádná
Hlavní rozdíl mezi display:none a vision:hidden spočívá v tom, že první z nich zcela odstraní prvek z rozvržení, zatímco druhý prvek skryje, ale stále zabírá místo.
Tento kód můžeme použít k demonstraci rozdílu mezi těmito dvěma;
<!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>
Pokud vykreslíme naši stránku, budeme mít dvě pole vedle sebe;
Displej: žádné demo
Přidat to do třídy .box1;
display: none;
Při vykreslování stránky si všimnete, že .box1 se již nebude zobrazovat. Druhé pole (černé) se také přesune doleva a zabere místo dříve obsazené světle modrým polem.
Viditelnost: skryté demo
Místo display: none přidejte tuto třídu .box1;
visibility: hidden
Tato vlastnost ponechává prostor pro box1, ale nezobrazuje jej. Na druhou stranu box2 zůstává na svém místě.
display:nonevisibility:hiddenOdstraní prvek z webové stránky zcelaSkryje prvek HTML, ale stále zabírá místo na webové stránceMůžete upravit styl prvku, jehož zobrazení je nastaveno na noneMůžete umístit a upravit styl prvku, jehož viditelnost je skrytaNení přístupné pro čtečky obrazovkyMůžete přistupovat prvek, jehož viditelnost je pomocí programů pro čtení z obrazovky nastavena jako skrytá
Zlepšete přístupnost pomocí viditelnosti CSS
Viditelnost CSS můžete použít ke skrytí prvků, které nejsou důležité pro všechny uživatele. Tuto funkci můžete použít například ke skrytí přihlášeného uživatele, který bude dostupný pouze uživatelům, kteří nejsou přihlášeni. Můžete mít také postranní panel nebo zápatí obsahující podmínky služby nebo informace o autorských právech.
Můžeme mít tento kód pro ilustraci, jak můžete zlepšit viditelnost;
<!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řihlašovací formulář se zobrazí pouze tehdy, když najedete na první položku.
Závěr
Věříme, že nyní můžete pohodlně používat vlastnost viditelnosti CSS ve svém kódu k hladkému přechodu a zlepšení dostupnosti vašich webových stránek. Musíte však vědět, kde použít každou hodnotu viditelnosti, abyste neskončili s hlučnými stránkami. Můžete také skrýt důležitá data před koncovými uživateli, když zneužijete vlastnost viditelnosti CSS.
Podívejte se na naše průvodce CSS a zdroje, kde se dozvíte více o vlastnostech CSS, které můžete kombinovat s viditelností CSS.