Właściwość display i jej wartości

Temat: Właściwość display i jej wartości

Właściwość display określa, jak elementy HTML są prezentowane w przeglądarce. Dzięki zrozumieniu jej działania i dostępnych wartości będziesz mógł tworzyć bardziej elastyczne i złożone układy stron, kontrolować widoczność elementów oraz wpływać na interakcje między nimi.

Dlaczego właściwość display jest ważna?

• Kontrola układu: Pozwala decydować, czy elementy są wyświetlane w linii, jako bloki czy w innych formach.
• Widoczność elementów: Umożliwia ukrywanie i pokazywanie elementów bez ich usuwania z DOM.
• Tworzenie zaawansowanych układów: Dzięki wartościom takim jak flex czy grid można tworzyć responsywne i nowoczesne układy stron.
• Optymalizacja interfejsu: Pozwala na dostosowanie interakcji między elementami, np. kontrolowanie, czy elementy nakładają się na siebie czy też przepływają obok siebie.

Co to jest właściwość display?

Właściwość display określa, jak przeglądarka ma wyświetlać dany element na stronie. Ma ona wpływ na:

• Model pudełkowy elementu.
• Przepływ dokumentu i sposób, w jaki elementy są układane względem siebie.
• Możliwość stosowania pewnych właściwości CSS (np. marginesów, szerokości, wysokości).

Składnia

element {
  display: wartość;
}

Podstawowe wartości właściwości display

1. display: block

Opis

• Element jest wyświetlany jako blokowy.
• Zajmuje całą dostępną szerokość rodzica (chyba że zostanie określona inna szerokość).
• Zaczyna się od nowej linii, a następne elementy są umieszczane poniżej.
• Można ustawić szerokość, wysokość, marginesy i wypełnienia.

Przykłady elementów domyślnie blokowych

• <div>
• <h1> do <h6>
• <p>
• <ul>, <ol>, <li>
• <section>, <article>

Przykład użycia

<div class="blok">To jest element blokowy.</div>

.blok {
  display: block;
  width: 80%;
  margin: 20px auto;
  background-color: #ecf0f1;
}

2. display: inline

Opis

• Element jest wyświetlany w linii z innymi elementami.
• Nie zaczyna się od nowej linii.
• Ignoruje właściwości width i height.
• Marginesy i wypełnienia są stosowane tylko w kierunku poziomym (lewo, prawo), a nie pionowym (góra, dół).

Przykłady elementów domyślnie liniowych

• <span>
• <a>
• <strong>, <em>
• <img> (uwaga: zachowuje pewne cechy elementów blokowych)

Przykład użycia

<p>
  Ten tekst zawiera <span class="podkreslony">podkreślone słowo</span> w środku.
</p>

.podkreslony {
  display: inline;
  text-decoration: underline;
}

3. display: inline-block

Opis

• Łączy cechy elementów liniowych i blokowych.
• Element jest wyświetlany w linii z innymi elementami, ale można ustawić jego width, height, marginesy i wypełnienia we wszystkich kierunkach.
• Nie zaczyna się od nowej linii.

Przykład użycia

<a href="#" class="przycisk">Kliknij mnie</a>

.przycisk {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
}

4. display: none

Opis

• Element nie jest wyświetlany na stronie.
• Nie zajmuje miejsca w układzie strony.
• Jest usuwany z przepływu dokumentu, ale nadal istnieje w kodzie HTML (można do niego odwoływać się np. za pomocą JavaScriptu).

Przykład użycia

<p class="ukryty">Ten tekst jest ukryty i nie będzie widoczny na stronie.</p>

.ukryty {
  display: none;
}

Zaawansowane wartości właściwości display

5. display: flex

Opis

• Ustawia element jako kontener flexbox, umożliwiając tworzenie elastycznych i responsywnych układów.
• Dzieci takiego kontenera są automatycznie ustawiane jako elementy flex.

Przykład użycia

<div class="nawigacja">
  <a href="#">Strona główna</a>
  <a href="#">O nas</a>
  <a href="#">Kontakt</a>
</div>

.nawigacja {
  display: flex;
  justify-content: space-around;
}

6. display: grid

Opis

• Ustawia element jako kontener siatki CSS Grid, pozwalając na tworzenie złożonych układów siatki.
• Dzieci takiego kontenera są umieszczane w zdefiniowanych przez nas wierszach i kolumnach.

Przykład użycia

<div class="galeria">
  <div>Obrazek 1</div>
  <div>Obrazek 2</div>
  <div>Obrazek 3</div>
  <!-- Kolejne elementy -->
</div>

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

7. display: table, display: table-row, display: table-cell

Opis

• Pozwalają na symulowanie zachowania tabel za pomocą elementów innych niż <table>, <tr>, <td>.
• Używane rzadziej, głównie do specyficznych układów.

Przykład użycia

<div class="tabela">
  <div class="wiersz">
    <div class="komorka">Komórka 1</div>
    <div class="komorka">Komórka 2</div>
  </div>
</div>

.tabela {
  display: table;
  width: 100%;
}

.wiersz {
  display: table-row;
}

.komorka {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 10px;
}

8. display: inline-flex i display: inline-grid

Opis

• Działają podobnie jak flex i grid, ale kontener jest wyświetlany w linii z innymi elementami.
• Umożliwiają tworzenie elastycznych układów wewnątrz tekstu lub innych elementów liniowych.

Przykład użycia

<span class="mini-galeria">
  <img src="obrazek1.jpg" alt="Obrazek 1">
  <img src="obrazek2.jpg" alt="Obrazek 2">
</span>

.mini-galeria {
  display: inline-flex;
}

.mini-galeria img {
  width: 50px;
  height: 50px;
  margin-right: 5px;
}

Porównanie wartości display

Praktyczne zastosowania

1. Konwersja elementu span na blokowy

Domyślnie element <span> jest liniowy. Jeśli chcemy nadać mu właściwości elementu blokowego:

span.blokowy {
  display: block;
}

2. Tworzenie przycisków za pomocą inline-block

Chcąc stworzyć przyciski, które są wyświetlane w linii, ale umożliwiają ustawienie szerokości, wysokości i marginesów:

.przycisk {
  display: inline-block;
  padding: 10px 20px;
  background-color: #27ae60;
  color: #fff;
  text-decoration: none;
  margin: 5px;
}

3. Ukrywanie elementów

Jeśli chcemy tymczasowo ukryć element (np. w przypadku menu mobilnego):

.menu {
  display: none;
}

/* Po kliknięciu w ikonę menu, możemy zmienić display za pomocą JavaScriptu */

Dobre praktyki

• Używaj odpowiedniej wartości display dla zamierzonego efektu: Jeśli chcesz, aby element był blokowy, użyj display: block; jeśli chcesz, aby element był w linii, ale z możliwością ustawienia wymiarów, użyj display: inline-block.
• Unikaj nadmiernego manipulowania display: Częste zmiany wartości display mogą prowadzić do nieprzewidywalnych efektów, szczególnie w złożonych układach.
• Pamiętaj o wpływie na model pudełkowy: Zmiana display może wpłynąć na sposób, w jaki stosowane są marginesy, wypełnienia i inne właściwości.
• Używaj display: none z rozwagą: Ukrywanie elementów może wpływać na dostępność strony. Upewnij się, że ważne treści nie są ukrywane przed użytkownikami korzystającymi z czytników ekranu.
• Stosuj nowoczesne wartości display: Warto korzystać z flex i grid do tworzenia responsywnych układów, pamiętając o kompatybilności przeglądarek.

Częste błędy i jak ich unikać

• Stosowanie display: inline i próba ustawienia width lub height: Elementy liniowe ignorują te właściwości.

Niepoprawnie:

.element {
  display: inline;
  width: 100px; /* Ignorowane */
  height: 50px; /* Ignorowane */
}

• Zapominanie o wpływie display na marginesy i wypełnienia: Elementy liniowe nie stosują marginesów i wypełnień pionowych.
• Nadmierne używanie display: none: Może to prowadzić do problemów z dostępnością i SEO.
• Niekompatybilność z przeglądarkami: Starsze przeglądarki mogą nie obsługiwać pewnych wartości, takich jak grid. Upewnij się, że Twoja strona działa poprawnie w docelowych przeglądarkach.
• Niezrozumienie różnic między inline, block i inline-block: Prowadzi to do problemów z układem i nieoczekiwanym zachowaniem elementów.

Podsumowanie

W tej lekcji nauczyliśmy się:

• Czym jest właściwość display i jak wpływa na sposób wyświetlania elementów na stronie.
• Podstawowych wartości display: block, inline, inline-block, none.
• Zaawansowanych wartości display, takich jak flex, grid, inline-flex, inline-grid.
• Jak każda z tych wartości wpływa na model pudełkowy, przepływ dokumentu i interakcje między elementami.
• Praktycznych zastosowań różnych wartości display w tworzeniu układów stron.
• Dobrych praktyk w korzystaniu z właściwości display oraz jak unikać typowych błędów.

Zrozumienie właściwości display jest kluczowe dla efektywnego projektowania układów stron internetowych. Pozwala na kontrolowanie sposobu, w jaki elementy są prezentowane i jak oddziałują ze sobą, co jest niezbędne w tworzeniu responsywnych i interaktywnych interfejsów.

Zadania do samodzielnego wykonania

1. Stwórz menu nawigacyjne:

   • Użyj listy <ul> i elementów <li> do stworzenia menu.
   • Spraw, aby elementy menu były wyświetlane w linii za pomocą display: inline lub display: inline-block.
   • Dodaj style, takie jak marginesy, tło i efekty najechania myszką.

2. Zaprojektuj galerię obrazów:

   • Utwórz kontener z display: flex lub display: grid.
   • Dodaj kilka obrazów lub elementów zastępczych.
   • Ustaw odstępy między elementami i dostosuj układ dla różnych rozmiarów ekranu.

3. Eksperymentuj z różnymi wartościami display:

   • Wybierz kilka elementów na stronie i zmieniaj ich display na różne wartości.
   • Obserwuj, jak zmienia się układ strony i zachowanie elementów.
   • Zanotuj swoje obserwacje i wnioski.

Ciekawostka

Czy wiesz, że początkowo projektanci stron internetowych używali tabel (<table>) do tworzenia układów stron? Było to przed wprowadzeniem zaawansowanych właściwości CSS, takich jak display: flex czy display: grid. Obecnie takie podejście jest uważane za przestarzałe i niezalecane, ponieważ utrudnia dostępność strony i jej responsywność.