Visibility

Właściwość visibility w CSS3 kontroluje widoczność elementów na stronie internetowej. Pozwala na ukrywanie elementów bez zmiany układu strony, w przeciwieństwie do display: none, który usuwa element z normalnego przepływu dokumentu. W tej lekcji omówimy różne wartości, które można przypisać właściwości visibility, i pokażemy przykłady ich użycia.

Wartości właściwości visibility

  • visible: Domyślna wartość, sprawia, że element jest widoczny.
  • hidden: Ukrywa element, ale element nadal zajmuje miejsce w układzie strony.
  • collapse: Specjalna wartość używana głównie w tabelach. Dla elementów tabeli (<table>, <tr>, <td>, etc.), collapse ukrywa wiersze lub kolumny bez usuwania przestrzeni, którą zajmują. W innych elementach działa jak hidden.

Przykład użycia visibility

W poniższym przykładzie przedstawiamy trzy divy, każdy z inną wartością visibility. Ten przykład ilustruje różnicę między ukryciem elementu przy użyciu visibility: hidden a display: none oraz pokazuje standardowe zachowanie dla visibility: visible.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia właściwości visibility w CSS3</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            display: inline-block;
        }
        .visible-box {
            background-color: lightgreen;
            /* Element widoczny */
            visibility: visible;
        }
        .hidden-box {
            background-color: lightcoral;
            /* Element ukryty, ale zajmuje miejsce */
            visibility: hidden;
        }
        .display-none-box {
            background-color: lightblue;
            /* Element ukryty i nie zajmuje miejsca */
            display: none;
        }
    </style>
</head>
<body>
    <div class="box visible-box">Visible</div>
    <div class="box hidden-box">Hidden</div>
    <!-- Poniższy element nie będzie widoczny ani nie zajmie miejsca -->
    <div class="box display-none-box">Display None</div>
</body>
</html>

W komentarzach przy każdym stylu wyjaśniono zachowanie danego ustawienia. Jak widać, visibility: hidden ukrywa element, ale zachowuje jego przestrzeń w układzie strony, podczas gdy display: none sprawia, że element jest całkowicie niewidoczny i nie zajmuje miejsca w układzie strony.

Podsumowanie

Właściwość visibility w CSS3 jest użytecznym narzędziem do kontrolowania widoczności elementów na stronie internetowej, pozwalając na ukrycie elementów bez zmiany układu strony. W zależności od potrzeb, visibility: hidden może być preferowane nad display: none, gdy chcemy, aby element pozostał w przepływie dokumentu, ale był niewidoczny.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top