<kbd>
Dane wprowadzane przez użytkownika: klawisze, skróty klawiszowe i polecenia do wpisania.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Zapisz plik skrótem <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>, a na Macu <kbd><kbd>Cmd</kbd> + <kbd>S</kbd></kbd>.</p>
<p>Zainstaluj zależności: wpisz w terminalu <kbd>npm install</kbd> i naciśnij <kbd>Enter</kbd>.</p>Definicja i zastosowanie
#Element <kbd> oznacza to, co wprowadza użytkownik: pojedynczy klawisz, skrót klawiszowy, tekst do wpisania, a nawet polecenie głosowe. Przeglądarki wyświetlają go czcionką o stałej szerokości znaków.
Skróty klawiszowe zapisuje się przez zagnieżdżanie: zewnętrzny <kbd> obejmuje całą kombinację, a wewnętrzne oznaczają poszczególne klawisze, np. <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.
Razem z <samp> tworzy parę opisującą rozmowę z komputerem: <kbd> to Twoje polecenie, a <samp> to odpowiedź programu. Z kolei <code> oznacza kod źródłowy.
Domyślnie <kbd> wygląda jak zwykły tekst o stałej szerokości znaków. Wygląd klawisza, z obramowaniem i cieniem, nadasz mu w CSS.
Składnia
#<kbd>Enter</kbd>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<p>
Okno z podpowiedzią zamkniesz klawiszem
<kbd style="padding: 2px 8px; border: 1px solid #64748b; border-bottom-width: 3px; border-radius: 6px;">Esc</kbd>.
</p>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
kbd {
font-family: monospace;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Skróty zapisuj jako zagnieżdżone
<kbd>: jeden element na cały skrót i po jednym na każdy klawisz. - Podawaj warianty dla Windows i macOS, jeśli się różnią.
- Nazwy klawiszy pisz tak, jak widnieją na klawiaturze, np. Enter, Shift czy Esc.
Powiązane hasła
#- <code>Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.
- <samp>Przykładowy wynik działania programu: komunikat, odpowiedź konsoli albo treść błędu.
- <var>Zmienna we wzorze matematycznym lub w programie, a także symbol zastępczy w poleceniu.
- <pre>Tekst sformatowany wstępnie: zachowuje spacje, tabulatory i przełamania linii dokładnie tak, jak w kodzie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.