У нас є багато властивостей 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);
}
Коли завершальна сторінка буде відображена, ви матимете щось на зразок цього;
Якщо ви встановите видимість полів як видимість: видимий, це не матиме жодного ефекту, оскільки всі поля видимі за замовчуванням.
Однак ми можемо продемонструвати, як працює властивість visible, використовуючи властивість display: none на одному з полів. Ми можемо вибрати box3 як наш приклад. Змініть код CSS у класі .box3 наступним чином;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Коли ви повторно візуалізуєте сторінку, ви помітите, що у нас є лише два ящики, один і два.
Якщо ви зацікавлені, ви помітите, що наш елемент .container має зменшений розмір. Коли ви використовуєте властивість display: none, поле 3 не відображається, і його місце в нашому браузері стає вільним для інших полів.
Прихований
Коли ми застосовуємо властивість CSS visibility: hidden до елемента, він буде прихований від кінцевого користувача. Однак він все одно займатиме місце. Наприклад, ми можемо приховати 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, якщо перевірити нашу відрендерену сторінку.
Згорнути
Collapse – це значення видимості, яке використовується для піделементів. Таблиці 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>
Тепер ми можемо оформити нашу таблицю з рамкою 1 піксель на всіх її клітинках. Додайте це до свого файлу 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.