Имаме много CSS свойства и овладяването на всички може да бъде предизвикателство. Видимостта на CSS е едно от важните свойства, които трябва да овладеете, ако искате да станете опитен уеб разработчик.
В тази статия ще дефинирам видимостта на CSS, ще обясня нейното значение и ще изброя и обясня различните стойности на видимостта на CSS.
Съдържание
Какво е CSS видимост?
Свойството за видимост на CSS скрива или показва елемент в уеб страница. Например, можете да имате четири полета на вашата уеб страница и да използвате свойството за видимост, за да определите как ще бъдат показани. Всички елементи ще се появят на страницата, ако зададете видимостта като видима.
Ако обаче елементът е скрит, той пак ще заема място, но ще бъде скрит от крайния браузър/екран.
Видимостта на CSS е важна в следните случаи;
- Контрол на видимостта: Можете да контролирате какво трябва да се показва въз основа на текущия потребител. Можете да зададете видимостта на даден елемент да бъде видима само когато потребител го задейства чрез определено действие. Например задържане на мишката или щракване върху бутон.
- Запазване на оформлението: Доброто приложение трябва да запази оформлението и съдържанието си, независимо от размера на екрана. Когато зададете видимостта на даден елемент като скрит, той пак ще заема място, но няма да бъде видим за крайните потребители. Такъв подход прави възможно поддържането на последователно оформление.
- Оптимизиране на производителността: Браузърът не трябва да продължава да преизчислява оформлението, когато свойството за видимост е зададено като visibility:hidden. Въпреки това, когато използвате свойството display:none, браузърът трябва да преизчисли оформлението всеки път, когато решите да покажете елемента отново.
- Създайте динамичен и интерактивен потребителски интерфейс: Можете да комбинирате свойството за видимост на CSS с други свойства, като непрозрачност, за да създадете ефекти на избледняване, анимации и плавни преходи.
Различни стойности на CSS видимост
CSS видимостта има пет възможни стойности. Ще навляза в подробности чрез кодови блокове и екранни снимки. Ако възнамерявате да следвате,
- Създайте папка на вашата локална машина.
- Добавете два файла; index.html и styles.css.
- Отворете проекта в любимия си редактор на код (аз използвам VS Code)
Можете да използвате тази команда;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Следващото е да свържете файловете index.html и styles.css. В секцията
на файла index.html добавете това;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Сега трябва да имате нещо подобно на вашия редактор на код;
Видими
Когато зададете стойността на елемент като visibility: visible, той ще се появи на уеб страницата. Тази видимост е там по подразбиране. Можем да имаме три полета в нашия HTML документ, за да разберем по-добре тази концепция. В секцията
на вашия index.html добавете следното;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Вече можем да стилизираме нашите div (кутии), като използваме следния 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);
}
Когато последната страница бъде изобразена, ще имате нещо подобно;
Ако зададете видимостта на полетата като visibility: visible, това няма да има ефект, тъй като всички полета са видими по подразбиране.
Въпреки това можем да демонстрираме как работи свойството visible, като използваме свойството display: none в едно от полетата. Можем да изберем box3 като наш пример. Променете CSS кода на клас .box3, както следва;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Когато изобразите отново страницата, ще забележите, че имаме само две кутии, една и две.
Ако сте запалени, ще забележите, че нашият елемент .container е с намален размер. Когато използвате свойството display: none, Кутия 3 не се изобразява и мястото й в нашия браузър става свободно за други кутии, които да заемат.
Скрити
Когато приложим свойството visibility: hidden CSS върху елемент, той ще бъде скрит от крайния потребител. Въпреки това, той все още ще заема място. Например, можем да скрием Box2, използвайки това свойство.
За да постигнете това, променете CSS кода на Box2, както следва;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Единствената промяна, която направихме, е добавянето на този ред;
visibility: hidden
Последната страница ще бъде такава, каквато е показана;
Можем да видим интервал между Box 1 и Box 3, тъй като елементът Box 2 е само скрит.
Можем да видим, че Box 2 все още е в DOM, ако проверим нашата изобразена страница.
Свиване
Свиването е стойност за видимост, която се използва за поделементи. HTML таблиците са перфектен пример за това къде можем да приложим атрибута visibility:collapse.
Можем да добавим следния код, за да създадем таблица в нашия HTML файл;
<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>
Вече можем да стилизираме нашата таблица с рамка от 1px на всички нейни клетки. Добавете това към вашия CSS файл;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Когато покажем таблицата, ще имаме следното;
Сега ще скрием втория ред, за да демонстрираме как работи атрибутът visibility: collapse. Добавете това към вашия CSS код;
.hidden-row {
visibility: collapse;
}
Когато страницата се визуализира, редът с Ruby и Ruby on Rails ще бъде скрит.
Първоначално
Свойството visibility: initial нулира HTML елемент до първоначалната му стойност. Например;
- Започнахме с показването на всички редове в нашата таблица.
- Ние свихме стойността на ред 2, като по този начин я скрихме.
- Сега можем да се върнем към първоначалната стойност (да я покажем)
Ще добавим бутон, който превключва между показване и свиване на стойности, за да демонстрираме това.
Добавете този бутон с възможност за кликване към вашия HTML код;
<button onclick="toggleVisibility()">Click Me!!</button>
След това можем да добавим JavaScript функция, която търси клас .hidden-row и превключва класа .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;
}
Стойността на видимостта ще се превключва напред и назад, когато щракнете върху показания бутон;
Наследяване
Свойството visibility: inherit позволява на дъщерен елемент да наследи свойството display от родителя.
Можем да имаме този прост код, за да демонстрираме как работи това свойство;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Само съдържанието вътре в таговете h1 и параграф ще се покаже, ако изобразите страницата. Ще съществува обаче интервал, представляващ скритите елементи между таговете
и
.
Имаме един div, чиято видимост сме задали като скрита. Имаме таг
вътре в div. Задали сме видимостта на
като inherit, което означава, че наследява от своя родител, div.
Въпреки това, ако зададем свойството на div като видимо,
(неговото дете) също ще наследи това.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Видимост на CSS: скрито срещу показване: няма
Основната разлика между display:none и visibility:hidden е, че първият премахва изцяло елемент от оформлението, докато вторият скрива елемент, но все пак заема място.
Можем да използваме този код, за да демонстрираме разликата между двете;
<!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>
Ако визуализираме нашата страница, ще имаме две кутии една до друга;
Дисплеят: няма демонстрация
Добавете това към клас .box1;
display: none;
Когато визуализирате страницата, ще забележите, че .box1 вече няма да се показва. Втората кутия (черна) също се премества наляво, за да заеме мястото, заето преди това от светлосинята кутия.
Видимостта: скрита демонстрация
Вместо display: none, добавете този клас .box1;
visibility: hidden
Това свойство оставя малко място за box1, но не го показва. От друга страна box2 остава на мястото си.
display:nonevisibility:hidden Премахва изцяло елемент от уеб страницата Скрива HTML елемент, но все пак заема място на уеб страницата Можете да стилизирате елемент, чието показване е зададено на noneМожете да позиционирате и стилизирате елемент, чиято видимост е скрита Недостъпен от екранни четци Можете да получите достъп елемент, чиято видимост е зададена като скрита с помощта на екранни четци
Подобрете достъпността с CSS видимост
Можете да използвате CSS видимост, за да скриете елементи, които не са важни за всички потребители. Например, можете да използвате тази функция, за да скриете потребител за влизане, който ще бъде достъпен само за потребители, които не са влезли в системата. Можете също така да имате странична лента или долен колонтитул, съдържащ условия за ползване или информация за авторски права.
Можем да имаме този код, за да илюстрираме как можете да подобрите видимостта;
<!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>
Формата за вход става видима само когато задържите курсора на мишката над първия елемент.
Заключение
Вярваме, че вече можете удобно да използвате свойството за видимост на CSS във вашия код, за да правите плавни преходи и да подобрявате достъпността на вашите уеб страници. Трябва обаче да знаете къде да използвате всяка стойност на видимост, за да избегнете завършването с дрънкащи страници. Можете също така да скриете важни данни от крайните потребители, когато злоупотребявате със свойството за видимост на CSS.
Разгледайте нашите ръководства и ресурси за CSS, за да научите повече за свойствата на CSS, които можете да комбинирате с видимостта на CSS.