Mamy wiele właściwości CSS, a opanowanie wszystkich może być wyzwaniem. Widoczność CSS jest jedną z ważnych właściwości, które powinieneś opanować, jeśli chcesz zostać wykwalifikowanym programistą stron internetowych.
W tym artykule zdefiniuję widoczność CSS, wyjaśnię jej znaczenie oraz wymienię i wyjaśnię różne wartości widoczności CSS.
Spis treści:
Co to jest widoczność CSS?
Właściwość widoczności CSS ukrywa lub pokazuje element na stronie internetowej. Na przykład możesz mieć cztery pola na swojej stronie internetowej i użyć właściwości widoczności, aby określić, w jaki sposób będą wyświetlane. Wszystkie elementy pojawią się na stronie, jeśli ustawisz widoczność jako widoczne.
Jeśli jednak element jest ukryty, nadal będzie zajmował miejsce, ale będzie ukryty przed przeglądarką/ekranem końcowym.
Widoczność CSS jest ważna w następujących przypadkach;
- Kontrola widoczności: Możesz kontrolować, co powinno być wyświetlane na podstawie bieżącego użytkownika. Możesz ustawić widoczność elementu tak, aby był widoczny tylko wtedy, gdy użytkownik uruchomi go za pomocą określonej akcji. Na przykład najechanie kursorem lub kliknięcie przycisku.
- Zachowanie układu: Dobra aplikacja powinna zachować układ i zawartość niezależnie od wielkości ekranu. Gdy ustawisz widoczność elementu jako ukryty, nadal będzie on zajmował miejsce, ale nie będzie widoczny dla użytkowników końcowych. Takie podejście pozwala zachować spójny układ.
- Zoptymalizuj wydajność: przeglądarka nie musi ciągle przeliczać układu, gdy właściwość widoczności jest ustawiona na widoczność: ukryta. Jeśli jednak użyjesz właściwości display:none, przeglądarka musi ponownie obliczyć układ za każdym razem, gdy zdecydujesz się ponownie wyświetlić element.
- Twórz dynamiczny i interaktywny interfejs użytkownika: Możesz łączyć właściwość widoczności CSS z innymi właściwościami, takimi jak krycie, aby tworzyć efekty zanikania, animacje i płynne przejścia.
Różne wartości widoczności CSS
Widoczność CSS ma pięć możliwych wartości. Przejdę do szczegółów poprzez bloki kodu i zrzuty ekranu. Jeśli zamierzasz podążać za
- Utwórz folder na komputerze lokalnym.
- Dodaj dwa pliki; index.html i style.css.
- Otwórz projekt w swoim ulubionym edytorze kodu (ja używam VS Code)
Możesz użyć tego polecenia;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
Kolejnym jest połączenie plików index.html i styles.css. W sekcji
pliku index.html dodaj to;<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Powinieneś teraz mieć coś podobnego do tego w swoim edytorze kodu;
Widoczny
Gdy ustawisz wartość elementu jako widoczność: widoczny, pojawi się on na stronie internetowej. Ta widoczność jest dostępna domyślnie. Możemy mieć trzy pola w naszym dokumencie HTML, aby lepiej zrozumieć tę koncepcję. W sekcji
pliku index.html dodaj następujące elementy;<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
Możemy teraz stylizować nasze elementy div (pola) za pomocą następującego kodu 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);
}
Kiedy ostatnia strona zostanie wyrenderowana, będziesz mieć coś takiego;
Jeśli ustawisz widoczność pól jako widoczność: widoczna, nie będzie to miało żadnego efektu, ponieważ domyślnie wszystkie pola są widoczne.
Możemy jednak zademonstrować, jak działa widoczna właściwość za pomocą wyświetlacza: brak właściwości na jednym z pudełek. Jako przykład możemy wybrać box3. Zmień kod CSS w klasie .box3 w następujący sposób;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Kiedy ponownie wyrenderujesz stronę, zauważysz, że mamy tylko dwa pola, jedno i dwa.
Jeśli jesteś zainteresowany, zauważysz, że nasz element .container ma zmniejszony rozmiar. Kiedy używasz właściwości display: none, Box 3 nie jest renderowany, a jego miejsce w naszej przeglądarce staje się puste dla innych pól.
Ukryty
Gdy zastosujemy właściwość CSS „visight: hidden” na elemencie, będzie on ukryty przed użytkownikiem końcowym. Jednak nadal będzie zajmować miejsce. Na przykład możemy ukryć Box2 za pomocą tej właściwości.
Aby to osiągnąć, zmodyfikuj kod CSS Box2 w następujący sposób;
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
Jedyna zmiana, jaką wprowadziliśmy, to dodanie tej linii;
visibility: hidden
Ostatnia strona będzie taka, jak została wyświetlona;
Widzimy spację między Boxem 1 a Boxem 3, ponieważ element Box 2 jest tylko ukryty.
Możemy zobaczyć, że Box 2 nadal znajduje się w DOM, jeśli sprawdzimy naszą wyrenderowaną stronę.
Zawalić się
Zwiń to wartość widoczności używana w elementach podrzędnych. Tabele HTML są doskonałym przykładem tego, gdzie możemy zastosować atrybut „widoczność: zwiń”.
Możemy dodać następujący kod, aby utworzyć tabelę w naszym pliku 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>
Możemy teraz stylizować naszą tabelę z obramowaniem 1px na wszystkich jej komórkach. Dodaj to do swojego pliku CSS;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Kiedy wyświetlimy tabelę, będziemy mieć następujące informacje;
Ukryjemy teraz drugi wiersz, aby zademonstrować działanie atrybutu widoczności: zwiń. Dodaj to do swojego kodu CSS;
.hidden-row {
visibility: collapse;
}
Gdy strona zostanie wyrenderowana, wiersz z Ruby i Ruby on Rails zostanie ukryty.
Wstępny
Właściwość widoczność: początkowa resetuje element HTML do jego wartości początkowej. Na przykład;
- Zaczęliśmy od wyświetlenia wszystkich wierszy w naszej tabeli.
- Zwinęliśmy wartość wiersza 2, ukrywając ją w ten sposób.
- Możemy teraz wrócić do wartości początkowej (wyświetl ją)
Dodamy przycisk, który przełącza między wyświetlaniem a zwijaniem wartości, aby to zademonstrować.
Dodaj ten klikalny przycisk do swojego kodu HTML;
<button onclick="toggleVisibility()">Click Me!!</button>
Następnie możemy dodać funkcję JavaScript, która wyszukuje klasę .hidden-row i przełącza na niej klasę .visible-row po kliknięciu przycisku.
<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;
}
Wartość widoczności będzie się zmieniać po kliknięciu wyświetlanego przycisku;
Dziedziczyć
Właściwość widoczności: dziedziczenie umożliwia elementowi podrzędnemu dziedziczenie właściwości wyświetlania od elementu nadrzędnego.
Możemy mieć ten prosty kod, aby zademonstrować, jak działa ta właściwość;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Podczas renderowania strony zostanie wyświetlona tylko treść wewnątrz znaczników h1 i akapitu. Będzie jednak istniała spacja reprezentująca ukryte elementy między znacznikami
i
.
Mamy jeden div, którego widoczność ustawiliśmy jako ukrytą. Mamy znacznik
wewnątrz elementu div. Ustawiliśmy widoczność elementu
jako dziedziczenie, co oznacza, że dziedziczy on po swoim rodzicu, div.
Jeśli jednak ustawimy właściwość elementu div jako widoczny, element
(jego element potomny) również to odziedziczy.
<h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Widoczność CSS: ukryta vs. wyświetlana: brak
Główną różnicą między display:none i visible:hidden jest to, że ta pierwsza całkowicie usuwa element z układu, a druga ukrywa element, ale nadal zajmuje miejsce.
Możemy użyć tego kodu, aby zademonstrować różnicę między nimi;
<!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>
Jeśli wyrenderujemy naszą stronę, będziemy mieć dwa pola obok siebie;
Wyświetlacz: brak demo
Dodaj to do klasy .box1;
display: none;
Podczas renderowania strony zauważysz, że .box1 nie będzie już wyświetlany. Drugie pudełko (czarne) również przesuwa się w lewo, zajmując miejsce poprzednio zajmowane przez jasnoniebieskie pudełko.
Widoczność: ukryte demo
Zamiast display: none dodaj tę klasę .box1;
visibility: hidden
Ta właściwość pozostawia trochę miejsca na box1, ale go nie wyświetla. Z drugiej strony pudełko 2 pozostaje na swoim miejscu.
display:nonevisibility:hidden Całkowicie usuwa element ze strony internetowej Ukrywa element HTML, ale nadal zajmuje miejsce na stronie internetowej Możesz stylizować element, którego wyświetlanie jest ustawione na brak Możesz ustawić i stylizować element, którego widoczność jest ukryta Niedostępne dla czytników ekranu Możesz uzyskać dostęp element, którego widoczność jest ustawiona jako ukryta za pomocą czytników ekranu
Popraw dostępność dzięki widoczności CSS
Możesz użyć widoczności CSS, aby ukryć elementy, które nie są ważne dla wszystkich użytkowników. Na przykład możesz użyć tej funkcji, aby ukryć zalogowanego użytkownika, który będzie dostępny tylko dla niezalogowanych użytkowników. Możesz także mieć pasek boczny lub stopkę zawierającą warunki korzystania z usługi lub informacje o prawach autorskich.
Możemy mieć ten kod, aby zilustrować, jak możesz poprawić widoczność;
<!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>
Formularz logowania staje się widoczny dopiero po najechaniu kursorem na pierwszy element.
Wniosek
Wierzymy, że możesz teraz wygodnie korzystać z właściwości widoczności CSS w swoim kodzie, aby płynnie przechodzić i poprawiać dostępność stron internetowych. Musisz jednak wiedzieć, gdzie użyć każdej wartości widoczności, aby uniknąć sytuacji, w której strony będą stukać. Możesz także ukryć kluczowe dane przed użytkownikami końcowymi, gdy niewłaściwie użyjesz właściwości widoczności CSS.
Zapoznaj się z naszymi przewodnikami i zasobami CSS, aby dowiedzieć się więcej o właściwościach CSS, które możesz połączyć z widocznością CSS.