Ostatnio edytowany:

visibility

Autor: Virtual Patriot

Opis właściwości visibility

Za pomocą właściwości visibility możemy określić widzialność interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości visibility

przeznaczenie

element HTML każdego typu

dziedziczenie

tak

wartość initial

visible

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości visibility

Firefox

tak

Google Chrome

tak

Błędnie interpretuje wartość collapse.

Safari

tak

Błędnie interpretuje wartość collapse.

Opera

tak

Błędnie interpretuje wartość collapse.

Internet Explorer

tak

Błędnie interpretuje wartość collapse.

Edge

tak

Błędnie interpretuje wartość collapse.

Opis wartości właściwości visibility

visible

Opis

Wartość visible jest domyślną wartością właściwości visibility.

Domyślnie element HTML jest widzialny.

Przykład

  visibility:visible;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div" jest widzialny.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

hidden

Opis

Za pomocą wartości hidden właściwości visibility możemy sprawić, że interesujący nas element HTML stanie się niewidzialny.

Niewidzialny element HTML nie jest ukryty, dlatego niewidzialny element HTML nadal wpływa swoim rozmiarem na ułożenie sąsiednich elementów HTML lub tekstu (w ten sam sposób jakby był widzialny).

Gdy do elementu potomka elementu HTML posiadającego właściwość "visibility" wraz z wartością "hidden" dodany właściwość "visibility" wraz z wartością visible, wtedy wspomniany element potomek stanie się widzialny.

Przykład

  visibility:hidden;

Przykładowy element "div" jest niewidzialny, ponieważ do wspomnianego elementu "div" została dodana właściwość "visibility" wraz z wartością "hidden".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        visibility:hidden;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

collapse

Opis

Za pomocą wartości collapse właściwości visibility możemy sprawić, że grupa wierszy, wiersz lub komórka interesującej nas tabeli HTML staną się niewidzialne oraz ukryte.

Przykład

  visibility:collapse;
Przykładowa Tabela HTML
komórka - 1komórka - 2komórka - 3
komórka - 4komórka - 5komórka - 6
komórka - 7komórka - 8komórka - 9

Przykładowy element "tr" jest niewidzialny oraz ukryty, ponieważ do wspomnianego elementu "tr" została dodana właściwość "visibility" wraz z wartością "collapse".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      table {
        border:3px solid black;
        background-color:#CBFFFF;
      }

      table > caption {
        padding:1em;
        background-color:#CCC;
      }

      table > tbody > tr > th {
        border:1px solid black;
        padding:1em;
      }

      table > tbody > tr > td {
        border:1px solid black;
        padding:1em;
      }
    </style>
  </head>

  <body>

    <table>
      <caption>Przykładowa Tabela HTML</caption>
      <tbody>
        <tr>
          <th>komórka - 1</th>
          <td>komórka - 2</td>
          <td>komórka - 3</td>
        </tr>

        <tr style="visibility:collapse;">
          <th>komórka - 4</th>
          <td>komórka - 5</td>
          <td>komórka - 6</td>
        </tr>

        <tr>
          <th>komórka - 7</th>
          <td>komórka - 8</td>
          <td>komórka - 9</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>