Responsywne pokazywanie i ukrywanie elementów
Używać hidden, block i inline-* z responsywnymi prefiksami, aby pokazywać i ukrywać elementy przy określonych rozmiarach ekranu.
Responsywne pokazywanie i ukrywanie elementów to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Dlaczego pokazywać i ukrywać elementy responsywnie?
Różne rozmiary obszaru wyświetlania wymagają różnych wzorców interfejsu. Nawigacja na komputerze wyświetla wszystkie odnośniki w poziomym pasku, podczas gdy na urządzeniu mobilnym pokazuje tylko ikonę hamburgera otwierającą wysuwany panel. Tabela danych z 8 kolumnami na komputerze może na urządzeniu mobilnym wyświetlać tylko 3 najważniejsze kolumny. Zamiast tworzyć dwa osobne interfejsy, Tailwind pozwala pokazywać lub ukrywać elementy w określonych punktach przerwania za pomocą narzędzi wyświetlania połączonych z responsywnymi prefiksami.
<!-- Hamburger visible on mobile, full nav on desktop -->
<nav class="flex items-center justify-between p-4">
<span class="font-bold">MyApp</span>
<!-- Full nav: hidden on mobile, visible on md+ -->
<div class="hidden md:flex gap-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<!-- Hamburger: visible on mobile, hidden on md+ -->
<button class="md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</nav>Wzorzec hidden i block
Dwa podstawowe narzędzia responsywnej widoczności to hidden (display: none) i block (display: block). Aby pokazać coś tylko na urządzeniach mobilnych, użyj: block md:hidden — domyślnie element jest blokiem, a od md wzwyż staje się niewidoczny. Aby pokazać coś tylko na komputerach, użyj: hidden md:block — domyślnie element jest niewidoczny, a od md wzwyż staje się blokiem. Te dwa wzorce pokrywają zdecydowaną większość potrzeb związanych z pokazywaniem i ukrywaniem.
<!-- Two core show/hide patterns -->
<!-- Mobile-only element -->
<div class="block md:hidden bg-blue-100 p-3 rounded">
This appears only on mobile (below md breakpoint)
</div>
<!-- Desktop-only element -->
<div class="hidden md:block bg-green-100 p-3 rounded">
This appears only on md screens and wider
</div>Określanie konkretnego zakresu punktów przerwania
Aby pokazywać element tylko w określonym zakresie — na przykład wyłącznie na tabletach (od sm do lg, ale nie na urządzeniach mobilnych ani komputerach) — połącz ukrywanie na urządzeniach mobilnych, pokazywanie od sm i ukrywanie od lg: hidden sm:block lg:hidden. Odczytujemy to następująco: domyślnie element jest niewidoczny, od sm widoczny, a od lg ponownie niewidoczny. Ta kombinacja trzech klas ogranicza widoczność elementu do zakresu odpowiadającego tabletom.
<!-- Show element only on specific viewport ranges -->
<div class="space-y-2">
<!-- Only on mobile (< sm) -->
<div class="bg-red-100 p-2 rounded block sm:hidden">Mobile only (<640px)</div>
<!-- Only on tablets (sm to md) -->
<div class="bg-yellow-100 p-2 rounded hidden sm:block md:hidden">Small tablet only</div>
<!-- Only on desktop (lg+) -->
<div class="bg-green-100 p-2 rounded hidden lg:block">Desktop only (1024px+)</div>
<!-- On all screens -->
<div class="bg-blue-100 p-2 rounded">Always visible</div>
</div>Używanie flex i grid zamiast block
Gdy element powinien być widoczny jako kontener flex (a nie tylko jako blok) w określonych punktach przerwania, należy użyć hidden md:flex zamiast hidden md:block. Ma to kluczowe znaczenie w przypadku pasków nawigacji, wierszy pasków narzędzi i wierszy kart, które wymagają zachowania flex. hidden md:flex items-center gap-4 ukrywa element na urządzeniach mobilnych, a na komputerach pokazuje go jako kontener flex z wyrównaniem.
<!-- Navigation: hidden on mobile, flex row on desktop -->
<header class="flex items-center justify-between px-6 py-4 border-b">
<span class="font-bold text-lg">Brand</span>
<!-- Desktop nav: flex row with spacing -->
<nav class="hidden md:flex items-center gap-6">
<a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Products</a>
<a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Pricing</a>
<a href="#" class="text-gray-600 hover:text-gray-900 text-sm">Blog</a>
<button class="bg-blue-600 text-white text-sm px-4 py-2 rounded-lg">Sign In</button>
</nav>
<!-- Mobile hamburger -->
<button class="md:hidden p-2">
<span class="block w-5 h-0.5 bg-gray-700 mb-1"></span>
<span class="block w-5 h-0.5 bg-gray-700 mb-1"></span>
<span class="block w-5 h-0.5 bg-gray-700"></span>
</button>
</header>Responsywne kolumny tabeli
Tabele danych na urządzeniach mobilnych stanowią wyzwanie — zbyt wiele kolumn sprawia, że tabela wymaga poziomego przewijania i jest trudna do odczytania. Częstym rozwiązaniem jest ukrywanie mniej istotnych kolumn na małych ekranach. Zastosuj hidden md:table-cell do nieistotnych kolumn tabeli — od tabletów wzwyż stają się one display: table-cell, ale na urządzeniach mobilnych są całkowicie ukryte, dzięki czemu tabela pozostaje użyteczna na małych ekranach.
<!-- Responsive table: hide secondary columns on mobile -->
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="bg-gray-50 text-left">
<th class="p-3 font-semibold">Name</th>
<!-- Hidden on mobile -->
<th class="hidden md:table-cell p-3 font-semibold">Email</th>
<th class="p-3 font-semibold">Status</th>
<!-- Hidden on mobile -->
<th class="hidden lg:table-cell p-3 font-semibold">Joined</th>
<th class="p-3 font-semibold">Actions</th>
</tr>
</thead>
<tbody class="divide-y">
<tr class="hover:bg-gray-50">
<td class="p-3">Alice Johnson</td>
<td class="hidden md:table-cell p-3 text-gray-500">alice@example.com</td>
<td class="p-3"><span class="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">Active</span></td>
<td class="hidden lg:table-cell p-3 text-gray-500">Jan 2024</td>
<td class="p-3"><button class="text-blue-600 text-sm">Edit</button></td>
</tr>
</tbody>
</table>
</div>Warianty inline-flex i inline-block
W przypadku elementów inline użyj hidden md:inline-flex lub hidden md:inline-block, aby po pojawieniu się elementu zachować jego zachowanie inline obok tekstu sąsiadujących elementów. Odznaka w nagłówku, ikona w odnośniku lub etykieta ceny umieszczona obok nazwy produktu wymagają wyświetlania inline lub inline-flex. Użycie zwykłego block przerwałoby przepływ tekstu.
<!-- Inline badge reveals on desktop -->
<h2 class="flex items-center gap-2 text-xl font-bold">
Pro Features
<!-- Badge: hidden on mobile, inline-flex on desktop -->
<span class="hidden md:inline-flex items-center gap-1 bg-purple-100 text-purple-700 text-xs font-semibold px-2 py-0.5 rounded-full">
✨ New
</span>
</h2>
<!-- Inline text suffix hides on mobile -->
<button class="flex items-center gap-1 text-sm text-blue-600">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span class="hidden sm:inline">Download</span>
</button>Widoczność a wyświetlanie ukrytych elementów
Tailwind udostępnia również narzędzia invisible i visible, które używają CSS visibility: hidden zamiast display: none. Kluczowa różnica polega na tym, że hidden (display:none) usuwa element z przepływu układu, zwalniając zajmowane przez niego miejsce. invisible ukrywa element wizualnie, ale zachowuje zajmowane przez niego miejsce w układzie. Użyj invisible, gdy element powinien zachować swoje miejsce, ale nie być widoczny.
<!-- display:none collapses space; visibility:hidden preserves it -->
<div class="space-y-4">
<p>Above</p>
<!-- hidden: collapses, no space reserved -->
<div class="hidden bg-red-100 p-4 rounded">Hidden (no space)</div>
<!-- invisible: space preserved, element not seen -->
<div class="invisible bg-blue-100 p-4 rounded">Invisible (space held)</div>
<p>Below</p>
</div>Responsywne przełączanie panelu bocznego
Bardzo częstym wzorcem jest panel boczny, który na komputerach jest stale widoczny, ale na urządzeniach mobilnych domyślnie ukryty i pojawia się dopiero po kliknięciu ikony hamburgera. Na komputerach panel boczny jest zawsze widoczny dzięki hidden md:block. Na urządzeniach mobilnych JavaScript przełącza klasę, aby go pokazać lub ukryć — Tailwind obsługuje jednak początkową widoczność. Ten wzorzec wymaga, aby panel boczny zawsze znajdował się w DOM ze względu na SEO i dostępność dla czytników ekranu.
<!-- Sidebar: always on desktop, togglable on mobile -->
<div class="flex min-h-screen">
<!-- Sidebar: hidden on mobile, always visible on md+ -->
<aside class="hidden md:block w-64 shrink-0 bg-gray-900 text-white p-6">
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Users</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Settings</a>
</nav>
</aside>
<!-- Main content -->
<main class="flex-1 p-6">
<!-- Mobile menu button -->
<button class="md:hidden mb-4 bg-gray-900 text-white px-3 py-2 rounded">
Menu
</button>
<h1 class="text-2xl font-bold">Content</h1>
</main>
</div>Warunkowe etykiety tekstowe
Przyciski zawierające na urządzeniach mobilnych tylko ikonę, a na komputerach również etykietę tekstową, to stosowana przez wiele aplikacji konwencja oszczędzająca miejsce. Ikona jest zawsze widoczna, natomiast etykieta tekstowa używa hidden sm:inline, aby pojawiać się tylko na szerszych ekranach. Dzięki temu interfejs mobilny pozostaje kompaktowy, a wersja komputerowa jest bardziej opisowa. Użytkownicy czytników ekranu zawsze widzą dostępną etykietę dzięki aria-label na przycisku.
<!-- Toolbar: icon-only on mobile, icon+label on desktop -->
<div class="flex items-center gap-2 p-3 border-b">
<button aria-label="Save" class="flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-gray-100">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
<span class="hidden sm:inline text-sm">Save</span>
</button>
<button aria-label="Share" class="flex items-center gap-1.5 px-3 py-2 rounded-lg hover:bg-gray-100">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m6.632 8.684A9 9 0 1110.7 3.294" />
</svg>
<span class="hidden sm:inline text-sm">Share</span>
</button>
</div>Pokazywanie tylko na określonych urządzeniach
Aby uzyskać bardzo precyzyjną kontrolę, można określić pojedynczy zakres punktów przerwania za pomocą dwóch klas. Aby pokazać element tylko przy md (od 768px do 1023px), użyj: hidden md:block lg:hidden. Aby pokazywać element tylko przy lg i xl, ale nie przy 2xl, użyj: hidden lg:block 2xl:hidden. Takie kombinacje wielu klas zapewniają szczegółową kontrolę nad tym, co pojawia się przy każdej szerokości obszaru wyświetlania, umożliwiając stosowanie całkowicie różnych strategii prezentacji treści dla poszczególnych klas urządzeń.
<!-- Elements visible on exactly one breakpoint range -->
<div class="p-4 space-y-2">
<!-- Shows only on sm (640-767px) -->
<div class="hidden sm:block md:hidden bg-pink-100 p-2 rounded text-sm">
Small screen only (640-767px)
</div>
<!-- Shows only on md (768-1023px) -->
<div class="hidden md:block lg:hidden bg-orange-100 p-2 rounded text-sm">
Medium screen only (768-1023px)
</div>
<!-- Shows only on lg (1024-1279px) -->
<div class="hidden lg:block xl:hidden bg-lime-100 p-2 rounded text-sm">
Large screen only (1024-1279px)
</div>
</div>Uwagi dotyczące dostępności ukrytych elementów
Elementy ukryte za pomocą hidden (display:none) są również niewidoczne dla czytników ekranu i wykluczone z drzewa dostępności — zazwyczaj jest to właściwe zachowanie. Jeśli jednak trzeba ukryć coś wizualnie, zachowując dostępność dla czytników ekranu, należy użyć sr-only. Z kolei jeśli treść ma być ukryta przed czytnikami ekranu, ale widoczna wizualnie, należy użyć aria-hidden='true' na elemencie. Wybór właściwej techniki ukrywania zależy od zamierzonego celu związanego z dostępnością.
<!-- Three hiding techniques with different a11y behavior -->
<!-- 1. Visual + screen reader hidden (most common) -->
<div class="hidden md:block">Full description for desktop</div>
<!-- 2. Visually hidden but screen-reader visible -->
<span class="sr-only">Close dialog</span>
<!-- 3. Visually visible but screen-reader hidden -->
<div aria-hidden="true" class="text-3xl">🎉</div>Szybkie sprawdzenie
Sprawdź swoje zrozumienie zagadnień Tailwind CSS Mastery omówionych w tej lekcji.
Podsumowanie lekcji
W tej lekcji nauczyli się Państwo, że: hidden md:block pokazuje element tylko na ekranach md i szerszych, block md:hidden pokazuje element tylko na urządzeniach mobilnych poniżej punktu przerwania md, a hidden sm:block md:hidden określa pojedynczy zakres punktów przerwania, na przykład tylko od sm do md. To kończy kurs Responsive Design Breakpoints — następnie omówimy tryb ciemny w Tailwind.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Responsywne pokazywanie i ukrywanie elementów” jest bezpłatna?
Tak — pełny tekst „Responsywne pokazywanie i ukrywanie elementów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Responsywne pokazywanie i ukrywanie elementów”?
Używać hidden, block i inline-* z responsywnymi prefiksami, aby pokazywać i ukrywać elementy przy określonych rozmiarach ekranu. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Responsywne pokazywanie i ukrywanie elementów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- System punktów przełamania Tailwind
- Responsywne układy z flex i grid
- Responsywna typografia i odstępy
- Responsywne pokazywanie i ukrywanie elementów