Przejdź do treści

Przeglądarki

Każdy webmaster z pewnością zastanawiał się, czy wybrany element HTML lub CSS będzie poprawnie wyświetlany we wszystkich popularnych przeglądarkach. Teraz można to szybko sprawdzić w jednym miejscu - w poniższym zestawieniu. Szczegółowe informacje znajdziesz w odpowiednich sekcjach opisujących działanie tych elementów w przeglądarkach.

Ranking przeglądarek

PozycjaPrzeglądarkaPoziom wsparciaNie obsługuje
🏅 1.Chrome Chrome98.11% (312/318)• HTML / HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
• CSS / Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
• CSS / Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
• CSS / Tabele CSS / Podpis tabeli {caption-side}
• CSS / Pozycjonowanie CSS / Ustawienie {float, vertical-align}
• CSS / Komendy CSS 2 / speak
🏅 1.Edge Edge98.11% (312/318)• HTML / HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
• CSS / Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
• CSS / Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
• CSS / Tabele CSS / Podpis tabeli {caption-side}
• CSS / Pozycjonowanie CSS / Ustawienie {float, vertical-align}
• CSS / Komendy CSS 2 / speak
🏅 1.Opera Opera98.11% (312/318)• HTML / HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
• CSS / Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
• CSS / Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
• CSS / Tabele CSS / Podpis tabeli {caption-side}
• CSS / Pozycjonowanie CSS / Ustawienie {float, vertical-align}
• CSS / Komendy CSS 2 / speak
🥈 2.Firefox Firefox96.23% (306/318)• HTML / HTML5 / Filmy i dźwięk <video, audio, source>
• HTML / HTML5 / Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>
• HTML / HTML5 / Blokowanie wyświetlania <link "stylesheet" blocking, script blocking, style blocking>
• HTML / HTML5 / Zawijanie tekstu w formularzu <textarea wrap>
• CSS / Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
• CSS / Tabele CSS / Podpis tabeli {caption-side}
• CSS / Drukowanie CSS / Przełamanie strony {page-break-before, page-break-after}
• CSS / Drukowanie CSS / Linijki na stronie {widows, orphans}
• CSS / Drukowanie CSS / Druk dwustronny @page :left :right
• CSS / Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}
• CSS / Media CSS / Zapytania mediów
• CSS / Komendy CSS 2 / speak
🥉 3.Safari Safari95.91% (305/318)• HTML / HTML5 / Okno dialogowe <dialog closedby open, button "button" command commandfor, form "dialog", form "dialog", button "dialog">
• HTML / HTML5 / Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>
• HTML / HTML5 / Element ukryty <... hidden>
• HTML / HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction command commandfor, input "button" popovertarget popovertargetaction>
• HTML / HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
• HTML / HTML5 / Zawijanie tekstu w formularzu <textarea wrap>
• CSS / Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
• CSS / Obramowanie CSS / Dekoracja przełamania obramowania {box-decoration-break}
• CSS / Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
• CSS / Tabele CSS / Podpis tabeli {caption-side}
• CSS / Pozycjonowanie CSS / Ustawienie {float, vertical-align}
• CSS / Drukowanie CSS / Przełamanie strony {page-break-before, page-break-after}
• CSS / Komendy CSS 2 / speak

HTML

HTML dla zielonych

Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>

Jak wygląda typowy dokument HTML? Co to są podstrony?


Chrome
Firefox
Edge
Opera
Safari
<html>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23

Nagłówek i treść HTML

Struktura dokumentu HTML

Co to jest nagłówek, a co ciało dokumentu? Jak dodać do dokumentu dodatkowe informacje, mówiące o jego charakterze?


Chrome
Firefox
Edge
Opera
Safari
<body>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<head>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<meta>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23

Tytuł strony <title>

Jak zmienić tytuł strony, który wyświetla się na górze okna przeglądarki oraz w wyszukiwarkach sieciowych?


Chrome
Firefox
Edge
Opera
Safari
<title>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Deklaracja strony kodowej <meta charset>

O czym nie należy zapominać pisząc stronę WWW po polsku?


Chrome
Firefox
Edge
Opera
Safari
<meta charset>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Automatyczne odświeżanie strony <meta "refresh">

Co zrobić, aby strona WWW była automatycznie odświeżana co określony czas?


Chrome
Firefox
Edge
Opera
Safari
<meta http-equiv="refresh">1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23

Automatyczne wczytanie strony <meta "url">

Jak wstawić przekierowanie na stronie WWW, czyli automatycznie wczytać inną stronę?


Chrome
Firefox
Edge
Opera
Safari
<meta http-equiv="refresh">1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23

Ikona strony <link "shortcut icon">

W jaki sposób wstawić ikonę obok adresu strony WWW?


Chrome
Firefox
Edge
Opera
Safari
<link rel="icon">4
2010-01-25		2
2006-10-24		12
2015-07-29		9
2006-06-20		3.1
2008-03-18

Tekst HTML

Akapit <p>

W jaki sposób układać tekst na ekranie? Jak dodać nowy akapit? Czym różni się akapit od paragrafu?


Chrome
Firefox
Edge
Opera
Safari
<p>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Tytuł nagłówka <h1, h2, h3, h4, h5, h6>

Jak wstawić tytuł (nagłówek) na stronie WWW? W jaki sposób wyświetlić "dymek narzędziowy" po wskazaniu tekstu myszką?


Chrome
Firefox
Edge
Opera
Safari
<h1>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<h2>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<h3>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<h4>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<h5>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<h6>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Blok <div>

Jak zgrupować elementy w blok?


Chrome
Firefox
Edge
Opera
Safari
<div>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Koniec linii <br>

W jaki sposób przenieść tekst do następnej linijki w dokumencie HTML?


Chrome
Firefox
Edge
Opera
Safari
<br>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Pogrubienie <b>

W jaki sposób pogrubić (wytłuścić) tekst na stronie WWW?


Chrome
Firefox
Edge
Opera
Safari
<b>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Pochylenie <i>

W jaki sposób pochylić tekst na stronie WWW (kursywa)?


Chrome
Firefox
Edge
Opera
Safari
<i>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Podkreślenie <u>

W jaki sposób podkreślić tekst na stronie WWW?


Chrome
Firefox
Edge
Opera
Safari
<u>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Przekreślenie <s>

W jaki sposób przekreślić tekst na stronie WWW?


Chrome
Firefox
Edge
Opera
Safari
<s>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Wyróżnienie <em, strong>

Jak wyróżnić tekst na ekranie (emfaza)?


Chrome
Firefox
Edge
Opera
Safari
<em>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<strong>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Indeks górny i dolny <sup, sub>

Jak wstawić indeks górny i dolny przy tekście?


Chrome
Firefox
Edge
Opera
Safari
<sub>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<sup>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Czcionka pomniejszona <small>

W jaki sposób pomniejszyć tekst?


Chrome
Firefox
Edge
Opera
Safari
<small>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Tekst preformatowany <pre>

Jak wprowadzić tekst preformatowany, czyli taki, który wygląda identycznie jak w edytorze tekstowym?


Chrome
Firefox
Edge
Opera
Safari
<pre>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Kod komputerowy <code>

Jak oznaczyć kod komputerowy?


Chrome
Firefox
Edge
Opera
Safari
<code>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Klawiatura <kbd>

Jak oznaczyć tekst, który użytkownik powinien wprowadzić z klawiatury?


Chrome
Firefox
Edge
Opera
Safari
<kbd>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Przykład <samp>

Jak oznaczyć tekst, będący przykładem działania programu lub skryptu?


Chrome
Firefox
Edge
Opera
Safari
<samp>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Zmienna <var>

Jak oznaczyć zmienną lub argument programu?


Chrome
Firefox
Edge
Opera
Safari
<var>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Źródło <cite>

Jak powinno się wprowadzać odniesienia do źródła?


Chrome
Firefox
Edge
Opera
Safari
<cite>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Cytat <q>

Jak powinno się oznaczać krótkie cytaty na stronach internetowych?


Chrome
Firefox
Edge
Opera
Safari
<q>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Blok cytowany <blockquote>

Jak wprowadzić dłuższy cytat?


Chrome
Firefox
Edge
Opera
Safari
<blockquote>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<blockquote cite>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Adres <address>

Jak umieścić na stronie WWW informacje kontatkowe z autorem?


Chrome
Firefox
Edge
Opera
Safari
<address>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Zmiany <ins, del>

Jak poinformować użytkownika o wprowadzonych zmianach na stronie WWW: elementy wstawione i usunięte?


Chrome
Firefox
Edge
Opera
Safari
<del>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ins>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Skrót <abbr>

Jak powinno się oznaczać skróty i akronimy?


Chrome
Firefox
Edge
Opera
Safari
<abbr>2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		4
2009-06-08

Definicja <dfn>

Jak oznaczyć definicję terminu?


Chrome
Firefox
Edge
Opera
Safari
<dfn>15
2011-10-25		1
2004-11-09		12
2015-07-29		15
2013-07-02		6
2012-07-25

Słownik <dl, dt, dd>

Jak wprowadzić na stronę WWW słownik (listę definicyjną)?


Chrome
Firefox
Edge
Opera
Safari
<dd>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<dl>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<dt>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Wykaz <ul, ol, li>

Jak wprowadzić na stronę wykaz: wypunktowanie (lista nieuporządkowana) lub numerowanie (lista uporządkowana)?


Chrome
Firefox
Edge
Opera
Safari
<li>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		3
2007-10-26
<li type>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<li value>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<ol>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ol start>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ol type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ul>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<ul type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Pozioma linia <hr>

Jak umieścić poziomą linię, oddzielającą sąsiednie akapity?


Chrome
Firefox
Edge
Opera
Safari
<hr>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		3
2007-10-26

Odsyłacze HTML

Odnośniki hipertekstowe

Jak stworzyć przejście do innej strony WWW (linki)?


Chrome
Firefox
Edge
Opera
Safari
<a>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Mapa odsyłaczy <img usemap, map, area>

Jak dodać kilka odnośników (linków, hiperłączy, odsyłaczy hipertekstowych) na jednym obrazku?


Chrome
Firefox
Edge
Opera
Safari
<area>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area alt>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area coords>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area href>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area shape>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<map>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<map name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Serwerowa mapa odsyłaczy <a href, img ismap>

W jaki sposób przesłać na serwer współrzędne kliknięcia myszką na obrazku?


Chrome
Firefox
Edge
Opera
Safari
<img ismap>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Tabele HTML

Struktura tabeli HTML <table, tr, td>

Jak wstawić tabelkę na stronę WWW?


Chrome
Firefox
Edge
Opera
Safari
<table>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<table border>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<td>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<tr>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23

Komórki nagłówkowe tabeli <th>

Jak powinno się tworzyć nagłówek tabeli?


Chrome
Firefox
Edge
Opera
Safari
<th>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<th align>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Tytuł tabeli <caption>

Jak wstawić tytuł (podpis) tabeli?


Chrome
Firefox
Edge
Opera
Safari
<caption>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Łączenie komórek tabeli <td colspan rowspan>

W jaki sposób połączyć kilka komórek tabeli w jedną dużą?


Chrome
Firefox
Edge
Opera
Safari
<td colspan>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<td rowspan>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Łączenie wierszy tabeli w grupy <thead, tbody, tfoot>

W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?


Chrome
Firefox
Edge
Opera
Safari
<tbody>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<tfoot>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<thead>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23

Łączenie kolumn tabeli w grupy <colgroup, col>

W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?


Chrome
Firefox
Edge
Opera
Safari
<col>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<col span>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<colgroup>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<colgroup span>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Multimedia HTML

Obrazek HTML <img>

Jak wstawić obrazek (grafikę, zdjęcie, fotografię, ilustrację) na stronę WWW?


Chrome
Firefox
Edge
Opera
Safari
<img>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<img alt>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<img height>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<img src>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<img width>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Osadzenie pliku <embed>

Jak osadzić na stronie WWW plik multimedialny: animację, film, muzykę (wav, mid, avi, ra, mp3, mpg, mov, asf i inne)?


Chrome
Firefox
Edge
Opera
Safari
<embed>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<embed height>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<embed src>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<embed width>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08

Uniwersalny sposób odtwarzania plików <a "jpg, avi, wav, txt, doc, rtf, xls, pdf", object>

Jak wstawić odtwarzacz multimedialny (filmy, muzyka) na stronę WWW? Jak wstawić na stronę pliki do pobrania (dział download)?


Chrome
Firefox
Edge
Opera
Safari
<object>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<object data>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<object height>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<object width>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Widżety HTML

Ramki lokalne <iframe>

Jak wstawić ramkę (okienko, widżet) bezpośrednio w treści strony WWW?


Chrome
Firefox
Edge
Opera
Safari
<iframe>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤15
2013-07-02		≤4
2009-06-08
<iframe height>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<iframe name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<iframe src>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<iframe width>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Wczytywanie strony do ramki lokalnej <a target>

Co zrobić, aby strony z menu wczytywały się do ramki umieszczonej bezpośrednio w treści?


Chrome
Firefox
Edge
Opera
Safari
<a target>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Formularze HTML

Ramy formularza HTML <form>

Jak wstawić formularz na stronę WWW? Co można uzyskać obsługując formularze przez skrypty? W jaki sposób sprawdzić, czy użytkownik wypełnił wszystkie pola formularza?


Chrome
Firefox
Edge
Opera
Safari
<form>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<form action>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<form enctype>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<form method>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<form name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Pole tekstowe <input "text">

Jak wprowadzić pole tekstowe, w którym można wpisać np. imię i nazwisko? W jaki sposób zablokować pole przed wpisywaniem? Jak zmienić kolejność aktywowania elementów przy pomocy tabulatora?


Chrome
Firefox
Edge
Opera
Safari
<input type="text">1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Hasło <input "password">

Jak wprowadzić pole, w którym można wpisać hasło?


Chrome
Firefox
Edge
Opera
Safari
<input type="password">1
2008-12-11		1
2004-11-09		12
2015-07-29		2
1996-07-14		1
2003-06-23

Pole wyboru <input "checkbox">

Jak dać użytkownikowi możliwość wyboru kilku bądź jednej odpowiedzi? W jaki sposób zaznaczyć pole wyboru po kliknięciu tekstu opisu? W jaki sposób zdefiniować klawisz skrótu? Jak odblokować pole formularza dopiero po wybraniu określonej opcji?


Chrome
Firefox
Edge
Opera
Safari
<input type="checkbox">1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Pole opcji <input "radio">

Jak wprowadzić na stronę WWW "przełącznik" (pole opcji)?


Chrome
Firefox
Edge
Opera
Safari
<input type="radio">1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Lista rozwijalna <select, option, optgroup>

Jak wprowadzić rozwijane menu?


Chrome
Firefox
Edge
Opera
Safari
<optgroup>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<optgroup disabled>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		7
2013-10-22
<optgroup label>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<option>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<option disabled>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<option label>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<option selected>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<option value>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<select>1
2008-12-11		1
2004-11-09		12
2015-07-29		2
1996-07-14		1
2003-06-23
<select disabled>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<select form>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<select multiple>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<select name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<select size>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Obszar tekstowy <textarea>

Jak wprowadzić wieloliniowe pole tekstowe, w którym można wpisać dłuższy komentarz?


Chrome
Firefox
Edge
Opera
Safari
<textarea>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<textarea cols>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<textarea disabled>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<textarea form>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<textarea name>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<textarea readonly>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<textarea rows>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08

Selektor plików <input "file">

W jaki sposób umożliwić użytkownikowi wybranie pliku ze swojego dysku lokalnego?


Chrome
Firefox
Edge
Opera
Safari
<input type="file">1
2008-12-11		1
2004-11-09		12
2015-07-29		11
2010-12-16		1
2003-06-23

Ukryte dane <input "hidden">

Jak przesłać ukryte dane w formularzu?


Chrome
Firefox
Edge
Opera
Safari
<input type="hidden">1
2008-12-11		1
2004-11-09		12
2015-07-29		2
1996-07-14		1
2003-06-23

Wysłanie formularza <input "submit, image">

Jak wysłać formularz?


Chrome
Firefox
Edge
Opera
Safari
<input type="submit">1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<input type="image">1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Wyczyszczenie danych <input "reset">

Jak wyczyścić wszystkie wprowadzone dane w formularzu? W jaki sposób zapobiec omyłkowemu wyczyszczeniu danych formularza?


Chrome
Firefox
Edge
Opera
Safari
<input type="reset">1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Przycisk <button>

Jak wprowadzić przycisk na stronę WWW?


Chrome
Firefox
Edge
Opera
Safari
<button>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤15
2013-07-02		1
2003-06-23
<button disabled>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<button form>9
2011-02-03		4
2011-03-22		16
2017-10-17		15
2013-07-02		5.1
2011-07-20
<button name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<button type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<button value>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Grupowanie pól <fieldset, legend>

W jaki sposób zgrupować tematycznie klika pól formularza?


Chrome
Firefox
Edge
Opera
Safari
<fieldset>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤15
2013-07-02		≤4
2009-06-08
<legend>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		3
2007-10-26

Forma odszyfrowana <form enctype accept-charset>

Co zrobić, aby formularze były przesyłane w formie odszyfrowanej, którą łatwiej później odczytać? Jak usunąć polskie znaki z formularza?


Chrome
Firefox
Edge
Opera
Safari
<form enctype>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<form accept-charset>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

HTML5

Sekcja <section>

Jak podzielić tematycznie obszerniejsze fragmenty dokumentu HTML5?


Chrome
Firefox
Edge
Opera
Safari
<section>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Artykuł <article>

Jak wstawić artykuł do dokumentu HTML5?


Chrome
Firefox
Edge
Opera
Safari
<article>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Wstawka <aside>

W jaki sposób w HTML5 powinno się wstawiać elementy, powiązane tematycznie z artykułem na stronie?


Chrome
Firefox
Edge
Opera
Safari
<aside>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Podtytuł <hgroup>

W jaki sposób poprawnie wstawić do dokumentu podtytuł?


Chrome
Firefox
Edge
Opera
Safari
<hgroup>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Nagłówek <header>

Jak powinno się wstawiać wprowadzenie w dokumentach HTML5?


Chrome
Firefox
Edge
Opera
Safari
<header>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Stopka <footer>

W jaki sposób oznaczyć stopkę w dokumentach HTML5?


Chrome
Firefox
Edge
Opera
Safari
<footer>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Nawigacja <nav>

Jak wstawić na stronie WWW sekcję z linkami nawigacyjnymi?


Chrome
Firefox
Edge
Opera
Safari
<nav>5
2010-05-25		4
2011-03-22		12
2015-07-29		11.1
2011-04-12		5
2010-06-07

Załącznik <figure, figcaption>

W jaki sposób oznaczyć w HTML5: ilustrację, diagram, zdjęcie, kod źródłowy, rysunek, rycinę, wykres, załącznik?


Chrome
Firefox
Edge
Opera
Safari
<figure>8
2010-12-02		4
2011-03-22		12
2015-07-29		11
2010-12-16		5.1
2011-07-20
<figcaption>8
2010-12-02		4
2011-03-22		12
2015-07-29		11
2010-12-16		5.1
2011-07-20

Główna treść <main>

W jaki sposób wskazać główną zawartość strony WWW?


Chrome
Firefox
Edge
Opera
Safari
<main>26
2013-03-26		21
2013-05-14		12
2015-07-29		16
2013-08-27		7
2013-10-22

Wyszukiwarka <search>

Jak oznaczyć na stronie formularz wyszukiwania lub filtrowania treści?


Chrome
Firefox
Edge
Opera
Safari
<search>118
2023-10-10		118
2023-09-26		118
2023-10-13		104
2023-10-23		17
2023-09-18

Uwydatnienie <mark>

Jak zaznaczyć lub uwydatnić część tekstu?


Chrome
Firefox
Edge
Opera
Safari
<mark>7
2010-10-19		4
2011-03-22		12
2015-07-29		11
2010-12-16		5.1
2011-07-20

Data i czas <time>

W jaki sposób poprawnie oznaczać datę i czas w dokumentach HTML5?


Chrome
Firefox
Edge
Opera
Safari
<time>62
2017-10-17		22
2013-06-25		14
2016-08-02		49
2017-11-08		7
2013-10-22
<time datetime>62
2017-10-17		22
2013-06-25		14
2016-08-02		49
2017-11-08		7
2013-10-22

Możliwy koniec linii <wbr>

Jak umożliwić przeglądarce przełamanie długiej linii do następnego wiersza?


Chrome
Firefox
Edge
Opera
Safari
<wbr>1
2008-12-11		1
2004-11-09		12
2015-07-29		11.6
2011-12-06		4
2009-06-08

Responsywny obrazek <picture, source>

W jaki sposób wstawić na stronie internetowej obrazek (grafikę, zdjęcie, fotografię, ilustrację), który automatycznie dopasowuje się do wielkości ekranu?


Chrome
Firefox
Edge
Opera
Safari
<picture>38
2014-10-07		38
2015-05-12		13
2015-11-12		25
2014-10-15		9.1
2016-03-21
<source>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<source height>90
2021-04-13		108
2022-12-13		90
2021-04-15		76
2021-04-28		15
2021-09-20
<source media>3
2009-09-15		15
2012-08-28		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<source src>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<source srcset>38
2014-10-07		38
2015-05-12		13
2015-11-12		25
2014-10-15		9.1
2016-03-21
<source type>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3.1
2008-03-18

Filmy i dźwięk <video, audio, source>

W jaki sposób wstawić odtwarzacz filmów wideo lub muzyki audio na stronie internetowej?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<video>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video autoplay>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video controls>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video height>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video loop>3
2009-09-15		11
2012-03-13		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video muted>30
2013-10-01		11
2012-03-13		12
2015-07-29		17
2013-10-08		5
2010-06-07
<video playsinline>75
2019-06-04		❌79
2020-01-15		62
2019-06-27		10
2016-09-20
<video poster>3
2009-09-15		3.6
2010-01-21		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video preload>3
2009-09-15		4
2011-03-22		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<video src>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<video width>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<audio>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<audio controls>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<audio loop>3
2009-09-15		11
2012-03-13		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<audio muted>15
2011-10-25		11
2012-03-13		≤18
2018-10-02		15
2013-07-02		6
2012-07-25
<audio preload>3
2009-09-15		4
2011-03-22		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<audio src>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		3.1
2008-03-18
<source>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<source height>90
2021-04-13		108
2022-12-13		90
2021-04-15		76
2021-04-28		15
2021-09-20
<source src>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<source type>3
2009-09-15		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3.1
2008-03-18
<source width>90
2021-04-13		108
2022-12-13		90
2021-04-15		76
2021-04-28		15
2021-09-20

Napisy do filmów <track>

Jak dodać napisy (ścieżkę tekstową) do filmu wideo?


Chrome
Firefox
Edge
Opera
Safari
<track>23
2012-11-06		31
2014-07-22		12
2015-07-29		12.1
2012-11-20		6
2012-07-25
<track default>23
2012-11-06		31
2014-07-22		12
2015-07-29		12.1
2012-11-20		6
2012-07-25
<track kind>23
2012-11-06		31
2014-07-22		12
2015-07-29		12.1
2012-11-20		6
2012-07-25
<track label>23
2012-11-06		31
2014-07-22		12
2015-07-29		12.1
2012-11-20		6
2012-07-25
<track src>23
2012-11-06		50
2016-11-15		12
2015-07-29		12.1
2012-11-20		6
2012-07-25
<track srclang>23
2012-11-06		31
2014-07-22		12
2015-07-29		12.1
2012-11-20		6
2012-07-25
::cue { cecha: wartość }26
2013-03-26		55
2017-08-08		79
2020-01-15		15
2013-07-02		7
2013-10-22

Autouzupełnianie <datalist>

W jaki sposób dodać autouzupełnianie pola formularza?


Chrome
Firefox
Edge
Opera
Safari
<datalist>20
2012-06-26		4
2011-03-22		12
2015-07-29		9.5
2008-06-12		12.1
2019-03-25

Pasek postępu <progress>

Jak wstawić na stronie WWW pasek postępu?


Chrome
Firefox
Edge
Opera
Safari
<progress>6
2010-09-02		6
2011-08-16		12
2015-07-29		11
2010-12-16		6
2012-07-25
<progress max>6
2010-09-02		6
2011-08-16		12
2015-07-29		11
2010-12-16		6
2012-07-25
<progress value>6
2010-09-02		6
2011-08-16		12
2015-07-29		11
2010-12-16		6
2012-07-25

Pasek wyniku <meter>

Jak wstawić na stronie WWW pasek głosowania w ankiecie?


Chrome
Firefox
Edge
Opera
Safari
<meter>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25
<meter high>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25
<meter low>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25
<meter max>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25
<meter min>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25
<meter optimum>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25
<meter value>6
2010-09-02		16
2012-10-09		13
2015-11-12		11
2010-12-16		6
2012-07-25

Otwierany panel <details, summary>

Co zrobić, aby wstawić na stronę panel, otwierany po kliknięciu myszką?


Chrome
Firefox
Edge
Opera
Safari
<details>12
2011-06-07		49
2016-09-20		79
2020-01-15		15
2013-07-02		6
2012-07-25
<details open>12
2011-06-07		49
2016-09-20		79
2020-01-15		15
2013-07-02		6
2012-07-25
<summary>12
2011-06-07		49
2016-09-20		79
2020-01-15		15
2013-07-02		6
2012-07-25

Okno dialogowe <dialog closedby open, button "button" command commandfor, form "dialog", form "dialog", button "dialog">

Jak w języku HTML stworzyć okno dialogowe bez użycia JavaScript? Co to jest okno modalne? Jak zrobić formularz dialogowy?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<dialog>37
2014-08-26		98
2022-03-08		79
2020-01-15		24
2014-09-02		15.4
2022-03-14
<dialog closedby>134
2025-03-04		141
2025-07-22		134
2025-03-06		119
2025-05-13		❌
<dialog open>37
2014-08-26		98
2022-03-08		79
2020-01-15		24
2014-09-02		15.4
2022-03-14
<button command>135
2025-04-01		144
2025-10-14		135
2025-04-04		120
2025-07-02		26.2
2025-12-12
<button commandfor>135
2025-04-01		144
2025-10-14		135
2025-04-04		120
2025-07-02		26.2
2025-12-12

Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>

Jak wstawić na stronie WWW pole (kontrolkę) formularza służącą do wyboru: koloru, daty, czasu, tygodnia roku, adresu e-mail, wartości liczbowej, przedziału (zakresu) liczb, numeru telefonu, adresu strony (URL) czy pole wyszukiwania?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<input type="color">20
2012-06-26		29
2014-04-29		14
2016-08-02		12
2012-06-14		12.1
2019-03-25
<input type="color">20
2012-06-26		❌14
2016-08-02		12
2012-06-14		12.1
2019-03-25
<input type="date">20
2012-06-26		57
2017-11-14		12
2015-07-29		11
2010-12-16		14.1
2021-04-26
<input type="date">20
2012-06-26		❌12
2015-07-29		11
2010-12-16		14.1
2021-04-26
<input type="datetime-local">20
2012-06-26		93
2021-10-05		12
2015-07-29		11
2010-12-16		14.1
2021-04-26
<input type="email">5
2010-05-25		1
2004-11-09		12
2015-07-29		11
2010-12-16		5
2010-06-07
<input type="email">22
2012-09-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		12.1
2019-03-25
<input type="month">20
2012-06-26		❌12
2015-07-29		11
2010-12-16		❌
<input type="number">7
2010-10-19		29
2014-04-29		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<input type="number">22
2012-09-25		29
2014-04-29		12
2015-07-29		15
2013-07-02		12.1
2019-03-25
<input type="range">4
2010-01-25		23
2013-08-06		12
2015-07-29		11
2010-12-16		3.1
2008-03-18
<input type="range">20
2012-06-26		110
2023-02-14		12
2015-07-29		11
2010-12-16		12.1
2019-03-25
<input type="search">5
2010-05-25		4
2011-03-22		12
2015-07-29		10.6
2010-07-01		5
2010-06-07
<input type="search">22
2012-09-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		12.1
2019-03-25
<input type="tel">3
2009-09-15		4
2011-03-22		12
2015-07-29		11
2010-12-16		4
2009-06-08
<input type="tel">22
2012-09-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		12.1
2019-03-25
<input type="time">20
2012-06-26		57
2017-11-14		12
2015-07-29		10
2009-09-01		14.1
2021-04-26
<input type="time">20
2012-06-26		❌12
2015-07-29		10
2009-09-01		14.1
2021-04-26
<input type="url">1
2008-12-11		1
2004-11-09		12
2015-07-29		11
2010-12-16		1
2003-06-23
<input type="url">22
2012-09-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		12.1
2019-03-25
<input type="week">20
2012-06-26		❌12
2015-07-29		11
2010-12-16		❌
<input min>4
2010-01-25		16
2012-10-09		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input max>4
2010-01-25		16
2012-10-09		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input step>5
2010-05-25		16
2012-10-09		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input multiple>2
2009-05-21		3.6
2010-01-21		12
2015-07-29		≤12.1
2012-11-20		4
2009-06-08

Wstępne ładowanie <link "preload" as>

W jaki sposób przyspieszyć ładowanie zewnętrznych zasobów (plików): zdjęć, filmów wideo, dźwięku audio, arkuszy stylów CSS, czcionek, skryptów?


Chrome
Firefox
Edge
Opera
Safari
<link as>50
2016-04-13		56
2017-09-28		17
2018-04-30		37
2016-05-04		10
2016-09-20

Asynchroniczne ładowanie skryptów <script src async>

W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, aby nie blokował szybkiego wyświetlania strony WWW?


Chrome
Firefox
Edge
Opera
Safari
<script async>1
2008-12-11		3.6
2010-01-21		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>

Jak zabezpieczyć formularz internetowy przed wyciekiem (ujawnieniem) danych osobowych?


Chrome
Firefox
Edge
Opera
Safari
<form autocomplete>14
2011-09-16		4
2011-03-22		12
2015-07-29		15
2013-07-02		6
2012-07-25
<input autocomplete>14
2011-09-16		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		6
2012-07-25
<select autocomplete>66
2018-04-17		59
2018-03-13		79
2020-01-15		53
2018-05-10		9.1
2016-03-21
<textarea autocomplete>66
2018-04-17		59
2018-03-13		79
2020-01-15		53
2018-05-10		9.1
2016-03-21

Blokowanie wyświetlania <link "stylesheet" blocking, script blocking, style blocking>

W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, ale zatrzymać wyświetlanie (renderowanie) strony, dopóki nie skończy on generować dynamicznej zawartości?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<link blocking>105
2022-09-02		❌105
2022-09-01		91
2022-09-14		18.2
2024-12-11
<script blocking>105
2022-09-02		❌105
2022-09-01		91
2022-09-14		18.2
2024-12-11
<style blocking>105
2022-09-02		❌105
2022-09-01		91
2022-09-14		18.2
2024-12-11

Deklaracja strony kodowej <meta charset>

Jak HTML5 upraszcza sposób deklarowania strony kodowej umożliwiającej poprawne wyświetlanie znaków diakrytycznych na stronie?


Chrome
Firefox
Edge
Opera
Safari
<meta charset>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Element edytowalny <... contenteditable>

Jak sprawić, aby zawartość dowolnego elementu HTML na stronie WWW można było edytować?


Chrome
Firefox
Edge
Opera
Safari
<element contenteditable>1
2008-12-11		3
2008-06-17		12
2015-07-29		9
2006-06-20		≤4
2009-06-08
<element contenteditable="plaintext-only">51
2016-05-25		136
2025-03-04		12
2015-07-29		38
2016-06-08		5
2010-06-07

Uwierzytelnienie <audio crossorigin, img crossorigin, link crossorigin, script crossorigin, video crossorigin>

W jaki sposób można identyfikować zalogowanego użytkownika pomiędzy różnymi serwisami?


Chrome
Firefox
Edge
Opera
Safari
<audio crossorigin>33
2014-02-20		74
2020-03-10		≤18
2018-10-02		20
2014-03-04		10
2016-09-20
<img crossorigin>13
2011-08-02		8
2011-11-08		12
2015-07-29		15
2013-07-02		6
2012-07-25
<link crossorigin>34
2014-04-08		18
2013-01-08		17
2018-04-30		21
2014-05-06		10
2016-09-20
<script crossorigin>19
2012-05-15		14
2012-07-17		14
2016-08-02		12
2012-06-14		6
2012-07-25
<video crossorigin>33
2014-02-20		74
2020-03-10		≤18
2018-10-02		20
2014-03-04		10
2016-09-20

Atrybuty danych <... data-...>

Jak dodać do dowolnego znacznika HTML własny, niestandardowy atrybut?


Chrome
Firefox
Edge
Opera
Safari
<element data-nazwa>7
2010-10-19		6
2011-08-16		12
2015-07-29		15
2013-07-02		5.1
2011-07-20

Dekodowanie obrazków <img decoding>

W jaki sposób nie opóźniać wyświetlania strony podczas ładowania dużych obrazków?


Chrome
Firefox
Edge
Opera
Safari
<img decoding>65
2018-03-06		63
2018-10-23		79
2020-01-15		52
2018-03-22		11.1
2018-04-12

Grupowa blokada pól formularza <fieldset disabled>

W jaki sposób za jednym razem zablokować kilka pól formularza HTML?


Chrome
Firefox
Edge
Opera
Safari
<fieldset disabled>20
2012-06-26		4
2011-03-22		79
2020-01-15		12
2012-06-14		6
2012-07-25

Pobieranie <a download, area download>

Jak wymusić pobranie pliku na dysk po kliknięciu linka (odnośnika hipertekstowego)?


Chrome
Firefox
Edge
Opera
Safari
<a download>14
2011-09-16		20
2013-04-02		18
2018-10-02		15
2013-07-02		10.1
2017-03-27
<area download>54
2016-10-12		20
2013-04-02		12
2015-07-29		41
2016-10-25		10.1
2017-03-27

Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>

Jak zapewnić szybsze ładowanie krytycznych zasobów (obrazków, arkuszy stylów, skryptów) osadzonych na stronie?


Chrome
Firefox
Edge
Opera
Safari
<link fetchpriority>101
2022-04-26		132
2024-10-29		101
2022-04-28		87
2022-05-17		17.2
2023-12-11
<script fetchpriority>101
2022-04-26		132
2024-10-29		101
2022-04-28		87
2022-05-17		17.2
2023-12-11

Przypisanie pola do formularza <button form, fieldset form, input form, object form, output form, select form, textarea form>

Czy można umieszczać pola (kontrolki) poza znacznikiem formularza?


Chrome
Firefox
Edge
Opera
Safari
<button form>9
2011-02-03		4
2011-03-22		16
2017-10-17		15
2013-07-02		5.1
2011-07-20
<fieldset form>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<input form>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<object form>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<output form>10
2011-03-08		4
2011-03-22		≤18
2018-10-02		11
2010-12-16		7
2013-10-22
<select form>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<textarea form>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08

Nadpisanie atrybutów formularza <button formaction formenctype formmethod formnovalidate formtarget, input "submit, image" formaction formenctype formmethod formnovalidate formtarget>

W jaki sposób zbudować formularz HTML, który zostanie wysłany pod inny adres, w zależności który przycisk użytkownik kliknie?


Chrome
Firefox
Edge
Opera
Safari
<button formaction>9
2011-02-03		4
2011-03-22		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<button formenctype>9
2011-02-03		4
2011-03-22		12
2015-07-29		10.6
2010-07-01		5.1
2011-07-20
<button formmethod>9
2011-02-03		4
2011-03-22		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<button formnovalidate>9
2011-02-03		4
2011-03-22		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<button formtarget>9
2011-02-03		4
2011-03-22		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<input formaction>9
2011-02-03		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input formenctype>9
2011-02-03		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input formmethod>9
2011-02-03		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input formnovalidate>4
2010-01-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<input formtarget>9
2011-02-03		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07

Element ukryty <... hidden>

W jaki sposób ukryć element na stronie, ale pozwolić wyszukiwać jego treść?

🔷 Zawiera błędy

Chrome
Firefox
Edge
Opera
Safari
<element hidden>10
2011-03-08		4
2011-03-22		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<element hidden="until-found">102
2022-05-24		148
2026-02-24		102
2022-05-31		88
2022-06-08		🔷 26.2
2025-12-12

Leniwe ładowanie <iframe loading, img loading>

Co zrobić, żeby obrazki na stronie były ładowane dopiero, kiedy użytkownik przewinie stronę w ich pobliże?


Chrome
Firefox
Edge
Opera
Safari
<iframe loading>77
2019-09-10		121
2023-12-19		79
2020-01-15		64
2019-10-07		16.4
2023-03-27
<img loading>77
2019-09-10		75
2020-04-07		79
2020-01-15		64
2019-10-07		15.4
2022-03-14

Minimalna i maksymalna liczba znaków <input minlength maxlength, textarea minlength maxlength>

Jak wymusić wpisanie w formularzu tekstu przynajmniej o podanej długości? Jak zabezpieczyć się przed wprowadzeniem zbyt długiego tekstu?


Chrome
Firefox
Edge
Opera
Safari
<input minlength>40
2015-01-21		51
2017-01-24		17
2018-04-30		27
2015-01-27		10.1
2017-03-27
<input maxlength>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		1
2003-06-23
<textarea minlength>40
2015-01-21		51
2017-01-24		17
2018-04-30		27
2015-01-27		10.1
2017-03-27
<textarea maxlength>4
2010-01-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07

Pominięcie walidacji formularza <form novalidate>

W jaki sposób zrezygnować ze sprawdzania poprawności wypełniania pól formularza?


Chrome
Firefox
Edge
Opera
Safari
<form novalidate>10
2011-03-08		4
2011-03-22		12
2015-07-29		15
2013-07-02		10.1
2017-03-27

Walidacja pól formularza <input pattern>

Jak zrobić pole formularza do wpisania tekstu w niestandardowym formacie - np. kodu pocztowego?


Chrome
Firefox
Edge
Opera
Safari
<input pattern>4
2010-01-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07

Podpowiedź pola formularza <input placeholder, textarea placeholder>

Jak umieścić podpowiedź w polu formularza HTML w postaci szarego tekstu, który zniknie po rozpoczęciu wprowadzania danych?


Chrome
Firefox
Edge
Opera
Safari
<input placeholder>3
2009-09-15		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		4
2009-06-08
<textarea placeholder>4
2010-01-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07

Okienko popover <... popover, button "button" popovertarget popovertargetaction command commandfor, input "button" popovertarget popovertargetaction>

Jak w języku HTML otworzyć wyskakujące okienko na warstwie ponad zawartością strony bez użycia JavaScript?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<element popover>114
2023-05-30		125
2024-04-16		114
2023-06-02		100
2023-06-29		17
2023-09-18
<element popover="hint">133
2025-02-04		149
2026-03-24		133
2025-02-06		118
2025-04-15		❌
<button popovertarget>114
2023-05-30		125
2024-04-16		114
2023-06-02		100
2023-06-29		17
2023-09-18
<button popovertargetaction>114
2023-05-30		125
2024-04-16		114
2023-06-02		100
2023-06-29		17
2023-09-18
<input popovertarget>114
2023-05-30		125
2024-04-16		114
2023-06-02		100
2023-06-29		17
2023-09-18
<input popovertargetaction>114
2023-05-30		125
2024-04-16		114
2023-06-02		100
2023-06-29		17
2023-09-18
<button command>135
2025-04-01		144
2025-10-14		135
2025-04-04		120
2025-07-02		26.2
2025-12-12
<button commandfor>135
2025-04-01		144
2025-10-14		135
2025-04-04		120
2025-07-02		26.2
2025-12-12

Pole obowiązkowe <input required, select required, textarea required>

W jaki sposób wymusić wypełnienie obowiązkowego (wymaganego) pola w formularzu HTML?


Chrome
Firefox
Edge
Opera
Safari
<input required>4
2010-01-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07
<select required>10
2011-03-08		4
2011-03-22		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
<textarea required>4
2010-01-25		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		5
2010-06-07

Wykaz z numeracją odwrotną <ol reversed>

Jak ponumerować punkty w kolejności malejącej?


Chrome
Firefox
Edge
Opera
Safari
<ol reversed>18
2012-03-28		18
2013-01-08		79
2020-01-15		15
2013-07-02		6
2012-07-25

Piaskownica zabezpieczająca <iframe sandbox>

Jak zabezpieczyć zewnętrzne widżety (ramki lokalne), aby nie mogły zainstalować wirusa czy konia trojańskiego użytkownikom naszego serwisu ani wyłudzać od nich danych?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<iframe sandbox>5
2010-05-25		17
2012-11-20		12
2015-07-29		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-downloads">83
2020-05-19		82
2020-10-20		83
2020-05-21		69
2020-06-24		17
2023-09-18
<iframe sandbox="allow-forms">5
2010-05-25		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-modals">46
2015-10-13		49
2016-09-20		79
2020-01-15		33
2015-10-27		11.1
2018-04-12
<iframe sandbox="allow-orientation-lock">68
2018-07-24		≤49
2016-09-20		79
2020-01-15		55
2018-08-16		❌
<iframe sandbox="allow-pointer-lock">23
2012-11-06		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		10.1
2017-03-27
<iframe sandbox="allow-popups">17
2012-02-08		28
2014-03-18		12
2015-07-29		15
2013-07-02		6
2012-07-25
<iframe sandbox="allow-popups-to-escape-sandbox">46
2015-10-13		49
2016-09-20		79
2020-01-15		33
2015-10-27		11.1
2018-04-12
<iframe sandbox="allow-presentation">53
2016-08-31		50
2016-11-15		79
2020-01-15		40
2016-09-20		❌
<iframe sandbox="allow-same-origin">5
2010-05-25		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-scripts">5
2010-05-25		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-top-navigation">6
2010-09-02		≤49
2016-09-20		79
2020-01-15		15
2013-07-02		5
2010-06-07
<iframe sandbox="allow-top-navigation-by-user-activation">58
2017-04-19		79
2020-07-28		79
2020-01-15		45
2017-05-10		11.1
2018-04-12
<iframe sandbox="allow-top-navigation-to-custom-protocols">❌101
2022-05-31		❌❌16
2022-09-12

Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>

Jak bez użycia JavaScript wygenerować zawartość ramki lokalnej bez wczytywania do niej żadnej strony?


Chrome
Firefox
Edge
Opera
Safari
<iframe srcdoc>20
2012-06-26		25
2013-10-29		79
2020-01-15		15
2013-07-02		6
2012-07-25

Zawijanie tekstu w formularzu <textarea wrap>

W jaki sposób wymusić wysłanie tekstu dokładnie w taki sposób, jak wyglądał podczas wypełniania formularza HTML?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
<textarea wrap>16
2011-12-13		4
2011-03-22		12
2015-07-29		≤12.1
2012-11-20		6
2012-07-25
<textarea wrap="hard">16
2011-12-13		❌12
2015-07-29		15
2013-07-02		❌

Komendy HTML 4.01

ACRONYM


Chrome
Firefox
Edge
Opera
Safari
<acronym>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

BASE


Chrome
Firefox
Edge
Opera
Safari
<base>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<base href>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<base target>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

BDO


Chrome
Firefox
Edge
Opera
Safari
<bdo>≤15
2011-10-25		10
2012-01-31		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

BIG


Chrome
Firefox
Edge
Opera
Safari
<big>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

CENTER


Chrome
Firefox
Edge
Opera
Safari
<center>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

DIR


Chrome
Firefox
Edge
Opera
Safari
<dir>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08

FONT


Chrome
Firefox
Edge
Opera
Safari
<font>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<font color>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<font face>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<font size>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

FRAME


Chrome
Firefox
Edge
Opera
Safari
<frame>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame frameborder>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame marginheight>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame marginwidth>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame noresize>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame scrolling>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frame src>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

FRAMESET


Chrome
Firefox
Edge
Opera
Safari
<frameset>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frameset cols>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
<frameset rows>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

LINK


Chrome
Firefox
Edge
Opera
Safari
<link>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link charset>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link href>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link hreflang>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link media>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link rel>1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		1
2003-06-23
<link rev>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link target>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08
<link type>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		≤4
2009-06-08

MENU


Chrome
Firefox
Edge
Opera
Safari
<menu>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		3
2007-10-26

NOFRAMES


Chrome
Firefox
Edge
Opera
Safari
<noframes>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

NOSCRIPT


Chrome
Firefox
Edge
Opera
Safari
<noscript>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

PARAM


Chrome
Firefox
Edge
Opera
Safari
<param>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<param name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<param type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<param value>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<param valuetype>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

STRIKE


Chrome
Firefox
Edge
Opera
Safari
<strike>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

TT


Chrome
Firefox
Edge
Opera
Safari
<tt>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

CSS

Wstawianie stylów CSS

Styl lokalny <... style>

W jaki sposób bezpośrednio przypisać styl do dowolnego znacznika?


Chrome
Firefox
Edge
Opera
Safari
<element style>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Rozciąganie stylu <span style>

W jaki sposób objąć stylem kilka elementów tekstowych?


Chrome
Firefox
Edge
Opera
Safari
<span>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<span style>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Wydzielone bloki <div style>

W jaki sposób objąć stylem grupę elementów blokowych?


Chrome
Firefox
Edge
Opera
Safari
<div>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<div style>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Wewnętrzny arkusz stylów <style>

Jak osadzić arkusz stylów CSS bezpośrednio w dokumencie?


Chrome
Firefox
Edge
Opera
Safari
<style>1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Zewnętrzny arkusz stylów <link "stylesheet"> @charset

Jak dołączyć arkusz stylów CSS z zewnętrznego pliku?


Chrome
Firefox
Edge
Opera
Safari
@charset2
2009-05-21		1.5
2005-11-29		12
2015-07-29		9
2006-06-20		4
2009-06-08

Import arkusza stylów @import

Jak zaimportować arkusz stylów z zewnętrznego dokumentu?


Chrome
Firefox
Edge
Opera
Safari
@import1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Dziedziczenie stylów CSS

Przywrócenie wartości domyślnej {...: initial}

Jak przywrócić domyślne formatowanie elementów na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: initial }1
2008-12-11		19
2013-02-19		13
2015-11-12		15
2013-07-02		1.2
2004-02-02

Wymuszenie dziedziczenia {...: inherit}

W jaki sposób wymusić przywrócenie dziedziczenia stylów CSS?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: inherit }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23

Odwołanie wartości {...: unset}

Jak odwołać formatowanie wcześniej przypisane do elementu na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: unset }41
2015-03-03		27
2014-02-04		13
2015-11-12		28
2015-03-10		9.1
2016-03-21

Przywrócenie wartości pierwotnej {...: revert}

Jak przywrócić pierwotny wygląd wybranemu elementowi na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: revert }84
2020-07-27		67
2019-05-21		84
2020-07-16		70
2020-07-27		9.1
2016-03-21

Resetowanie wszystkich wartości {all}

W jaki sposób zresetować (wyczyścić, usunąć) całe formatowanie wybranemu elementowi na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { all: wartość }37
2014-08-26		27
2014-02-04		79
2020-01-15		24
2014-09-02		9.1
2016-03-21

Selektory elementów CSS

Selektor typu

Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Selektor uniwersalny

W jaki sposób przypisać styl do wszystkich elementów?


Chrome
Firefox
Edge
Opera
Safari
* { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Selektor potomka

W jaki sposób nadać formatowanie znacznikom potomków znajdującym się wewnątrz innego elementu - przodka?


Chrome
Firefox
Edge
Opera
Safari
przodek potomek { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Selektor dziecka

W jaki sposób nadać formatowanie znacznikowi dziecka znajdującemu się bezpośrednio wewnątrz elementu rodzica?


Chrome
Firefox
Edge
Opera
Safari
rodzic > dziecko { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23

Selektor braci

W jaki sposób nadać formatowanie znacznikowi znajdującemu się bezpośrednio po innym elemencie - bracie?


Chrome
Firefox
Edge
Opera
Safari
brat1 + brat2 { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Ogólny selektor braci

W jaki sposób nadać formatowanie znacznikom znajdującym się w dowolnym miejscu po innym elemencie - bracie?


Chrome
Firefox
Edge
Opera
Safari
brat1 ~ brat2 { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3
2007-10-26

Selektory atrybutów CSS

Prosty selektor atrybutu

W jaki sposób określić formatowanie elementu, który posiada określony atrybut?


Chrome
Firefox
Edge
Opera
Safari
[atrybut] { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3
2007-10-26

Selektor atrybutu o określonej wartości

W jaki sposób określić formatowanie elementu, który posiada określony atrybut o odpowiedniej wartości?


Chrome
Firefox
Edge
Opera
Safari
[atrybut="wartość atrybutu"] { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3
2007-10-26

Selektor atrybutu zawierającego określony wyraz

W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany wyraz?


Chrome
Firefox
Edge
Opera
Safari
[atrybut~="wyraz"] { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3
2007-10-26

Selektor atrybutu zawierającego łączniki

Jak zmienić wygląd elementów, które mają podane atrybuty z określonymi łącznikami, np. "en-US"?


Chrome
Firefox
Edge
Opera
Safari
[atrybut|="początek"] { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3
2007-10-26

Selektory specjalne CSS

Klasy selektorów <... class>

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania? Jak przypisać kilka klas CSS do jednego elementu? Co to są podzbiory klas CSS?


Chrome
Firefox
Edge
Opera
Safari
.klasa { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Selektor identyfikatora <... id>

W jaki sposób określić specjalny wygląd pojedynczego elementu na stronie WWW?


Chrome
Firefox
Edge
Opera
Safari
#identyfikator { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Selektory pseudoelementów CSS

Pierwsza linia :first-line

W jaki sposób zmienić wygląd pierwszej linii tekstu?


Chrome
Firefox
Edge
Opera
Safari
:first-line { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Pierwsza litera :first-letter

W jaki sposób zmienić wygląd pierwszej litery tekstu?


Chrome
Firefox
Edge
Opera
Safari
:first-letter { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Przed... :before

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?


Chrome
Firefox
Edge
Opera
Safari
:before { cecha: wartość }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		7
2003-01-28		4
2009-06-08

Po... :after

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?


Chrome
Firefox
Edge
Opera
Safari
:after { cecha: wartość }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		7
2003-01-28		4
2009-06-08

Cudzysłowy {quotes}

W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?


Chrome
Firefox
Edge
Opera
Safari
selektor { quotes: wartość }11
2011-04-27		1.5
2005-11-29		12
2015-07-29		4
2000-06-28		9
2015-09-30

Selektory pseudoklas CSS

Odsyłacz podstawowy :link

Jak zmienić wygląd odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?


Chrome
Firefox
Edge
Opera
Safari
:link { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Odsyłacz odwiedzony :visited

Jak zmienić wygląd odwiedzonych odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?


Chrome
Firefox
Edge
Opera
Safari
:visited { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Aktywacja :active

Jak zmienić wygląd aktywnych elementów - np. odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?


Chrome
Firefox
Edge
Opera
Safari
:active { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		5
2000-12-06		1
2003-06-23

Wskazanie myszką :hover

Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?


Chrome
Firefox
Edge
Opera
Safari
:hover { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		2
2005-04-29

Zogniskowanie :focus

Jak zmienić wygląd pola tekstowego formularza po wybraniu przez użytkownika?


Chrome
Firefox
Edge
Opera
Safari
:focus { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Atrybut języka :lang

W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?


Chrome
Firefox
Edge
Opera
Safari
:lang { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		8
2005-04-19		3.1
2008-03-18

Pierwsze dziecko :first-child

Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?


Chrome
Firefox
Edge
Opera
Safari
:first-child { cecha: wartość }4
2010-01-25		3
2008-06-17		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Ostatnie dziecko :last-child

Jak zmienić wygląd ostatniego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?


Chrome
Firefox
Edge
Opera
Safari
:last-child { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Jedyne dziecko :only-child

Jak zmienić wygląd elementu dziecka, który nie ma braci?


Chrome
Firefox
Edge
Opera
Safari
:only-child { cecha: wartość }2
2009-05-21		1.5
2005-11-29		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Pseudoklasy typu :first-of-type :last-of-type :only-of-type

W jaki sposób zmienić wygląd tylko pierwszego elementu określonego typu?


Chrome
Firefox
Edge
Opera
Safari
:first-of-type { cecha: wartość }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18
:last-of-type { cecha: wartość }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18
:only-of-type { cecha: wartość }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Etykieta :target

Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?


Chrome
Firefox
Edge
Opera
Safari
:target { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.5
2008-06-12		1.3
2005-04-15

Blokada :disabled :enabled

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane (wyszarzone)?


Chrome
Firefox
Edge
Opera
Safari
:enabled { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3.1
2008-03-18
:disabled { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3.1
2008-03-18

Tylko do odczytu :read-only :read-write

Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?


Chrome
Firefox
Edge
Opera
Safari
:read-only { cecha: wartość }1
2008-12-11		78
2020-06-30		13
2015-11-12		9
2006-06-20		4
2009-06-08
:read-write { cecha: wartość }1
2008-12-11		78
2020-06-30		13
2015-11-12		9
2006-06-20		4
2009-06-08

Zaznaczenie :checked

Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?


Chrome
Firefox
Edge
Opera
Safari
:checked { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		3.1
2008-03-18

Domyślne :default

Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?


Chrome
Firefox
Edge
Opera
Safari
:default { cecha: wartość }10
2011-03-08		4
2011-03-22		79
2020-01-15		10
2009-09-01		5
2010-06-07

Pusty element :empty

W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?


Chrome
Firefox
Edge
Opera
Safari
:empty { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Korzeń :root

W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?


Chrome
Firefox
Edge
Opera
Safari
:root { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.5
2008-06-12		1
2003-06-23

Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type

Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?


Chrome
Firefox
Edge
Opera
Safari
:nth-child { cecha: wartość }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18
:nth-last-child { cecha: wartość }4
2010-01-25		3.5
2009-06-30		12
2015-07-29		9
2006-06-20		3.1
2008-03-18
:nth-of-type { cecha: wartość }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18
:nth-last-of-type { cecha: wartość }4
2010-01-25		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Negacja :not

W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?


Chrome
Firefox
Edge
Opera
Safari
:not { cecha: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18

Czcionki CSS

Wielkość czcionki {font-size}

Jak zmienić rozmiar (wielkość) czcionki? Jaki jest najlepszy sposób ustalania wielkości czcionki?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-size: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Rodzaj czcionki {font-family}

Jak zmienić rodzaj (krój) czcionki? W jaki sposób maksymalnie zabezpieczyć się przed wyświetleniem tekstu niechcianym krojem czcionki?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-family: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { font-family: cursive }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-family: fantasy }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-family: monospace }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-family: sans-serif }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-family: serif }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Czcionki osadzone @font-face

W jaki sposób wczytać czcionkę z pliku?


Chrome
Firefox
Edge
Opera
Safari
@font-face1
2008-12-11		3.5
2009-06-30		12
2015-07-29		10
2009-09-01		3.1
2008-03-18
@font-face { src: url(*.woff) }6
2010-09-02		3.5
2009-06-30		12
2015-07-29		11.1
2011-04-12		5.1
2011-07-20
@font-face { font-family: wartość }4
2010-01-25		3.5
2009-06-30		12
2015-07-29		10
2009-09-01		3.1
2008-03-18
@font-face { src: wartość }4
2010-01-25		3.5
2009-06-30		12
2015-07-29		10
2009-09-01		3.1
2008-03-18

Styl czcionki {font-style}

W jaki sposób wprowadzić czcionkę pochyloną (kursywa)? Czym różni się styl "italic" od "oblique"?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { font-style: italic }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-style: normal }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-style: oblique }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Waga czcionki {font-weight}

Jak wprowadzić czcionkę pogrubioną? Czy można wytłuścić tekst z różną intensywnością?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-weight: wartość }2
2009-05-21		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { font-weight: bold }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-weight: bolder }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-weight: lighter }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { font-weight: normal }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Wariant wielkości liter czcionki {font-variant-caps}

W jaki sposób przekształcić zwykły tekst w kapitaliki, czyli napisany wielkimi literami, lecz czcionką o wysokości małych liter?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-variant-caps: wartość }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: all-petite-caps }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: all-small-caps }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: normal }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: petite-caps }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: small-caps }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: titling-caps }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-caps: unicase }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21

Wariant połączenia znaków czcionki {font-variant-ligatures}

W jaki sposób sprawić, aby niektóre litery w tekście były ze sobą bardziej zlane tworząc estetyczne połączenie graficzne (ligatury)?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-variant-ligatures: wartość }34
2014-04-08		34
2014-12-01		79
2020-01-15		21
2014-05-06		9.1
2016-03-21
selektor { font-variant-ligatures: common-ligatures }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: contextual }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: discretionary-ligatures }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: historical-ligatures }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: no-common-ligatures }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: no-contextual }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: no-discretionary-ligatures }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: no-historical-ligatures }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: none }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22
selektor { font-variant-ligatures: normal }31
2013-11-12		34
2014-12-01		79
2020-01-15		18
2013-11-19		7
2013-10-22

Wariant liczb czcionki {font-variant-numeric}

Co zrobić, aby liczby w kolumnach tabeli z danymi były ułożone równo pod sobą? W jaki sposób wyświetlić licznik i mianownik rozdzielone kreską ułamkową?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-variant-numeric: wartość }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: diagonal-fractions }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: lining-nums }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: normal }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: oldstyle-nums }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: ordinal }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: proportional-nums }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: slashed-zero }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: stacked-fractions }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21
selektor { font-variant-numeric: tabular-nums }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9.1
2016-03-21

Wariant pozycji czcionki {font-variant-position}

W jaki sposób dodać indeks dolny lub górny tak, aby sąsiednie linijki tekstu nie były między sobą nieestetycznie rozsunięte?

🔷 Zawiera błędy

Chrome
Firefox
Edge
Opera
Safari
selektor { font-variant-position: wartość }117
2023-09-12		34
2014-12-01		117
2023-09-15		103
2023-10-03		9.1
2016-03-21
selektor { font-variant-position: normal }117
2023-09-12		34
2014-12-01		117
2023-09-15		103
2023-10-03		9.1
2016-03-21
selektor { font-variant-position: sub }🔷 117
2023-09-12		34
2014-12-01		🔷 117
2023-09-15		🔷 103
2023-10-03		🔷 9.1
2016-03-21
selektor { font-variant-position: super }🔷 117
2023-09-12		34
2014-12-01		🔷 117
2023-09-15		🔷 103
2023-10-03		🔷 9.1
2016-03-21

Atrybuty mieszane wariantu czcionki {font-variant}

W jaki sposób określić w jednym poleceniu wiele własności wariantu czcionki: połączenie liter (ligatury), wielkość liter (kapitaliki), formatowanie liczb oraz wyglądu indeksów dolnych i górnych w tekście?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-variant: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { font-variant: none }52
2016-07-20		34
2014-12-01		79
2020-01-15		39
2016-08-02		9
2015-09-30
selektor { font-variant: normal }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Atrybuty mieszane czcionki {font}

W jaki sposób określić w jednym poleceniu wiele własności czcionki: styl, wariant, wagę, rozmiar, krój, a także wysokość linii? Jak ustawić czcionkę systemową, tzn. taką jak używana na przyciskach, paskach narzędzi, menu itp.?


Chrome
Firefox
Edge
Opera
Safari
selektor { font: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { font: caption }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { font: icon }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { font: menu }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { font: message-box }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { font: small-caption }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { font: status-bar }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23

Rozciągnięcie czcionki {font-stretch}

W jaki sposób rozciągnąć lub ścieśnić czcionkę?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-stretch: wartość }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: condensed }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: expanded }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: extra-condensed }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: extra-expanded }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: normal }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: semi-condensed }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: semi-expanded }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: ultra-condensed }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19
selektor { font-stretch: ultra-expanded }60
2017-07-25		9
2011-12-20		12
2015-07-29		47
2017-08-09		11
2017-09-19

Proporcje czcionki {font-size-adjust}

Co zrobić, aby czcionka na ekranie zawsze była tak samo czytelna, bez względu na jej krój (rodzaj)?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-size-adjust: wartość }127
2024-07-23		3
2008-06-17		127
2024-07-25		113
2024-08-22		16.4
2023-03-27

Odległość między znakami czcionki {font-kerning}

W jaki sposób regulować odległość pomiędzy sąsiednimi znakami tekstu (kerning) tak, aby wyglądał bardziej estetycznie i był czytelniejszy?


Chrome
Firefox
Edge
Opera
Safari
selektor { font-kerning: wartość }33
2014-02-20		32
2014-09-02		79
2020-01-15		20
2014-03-04		9
2015-09-30
selektor { font-kerning: auto }33
2014-02-20		32
2014-09-02		79
2020-01-15		20
2014-03-04		9
2015-09-30
selektor { font-kerning: none }33
2014-02-20		32
2014-09-02		79
2020-01-15		20
2014-03-04		9
2015-09-30
selektor { font-kerning: normal }33
2014-02-20		32
2014-09-02		79
2020-01-15		20
2014-03-04		9
2015-09-30

Tekst CSS

Kolor tekstu {color}

Jak zmienić kolor tekstu w dowolnym elemencie?


Chrome
Firefox
Edge
Opera
Safari
selektor { color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Dekoracja tekstu {text-decoration}

Co zrobić, aby ten sam tekst został podkreślony, przekreślony i nadkreślony? Jak wprowadzić migający tekst w sposób zgodny ze standardem?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-decoration: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { text-decoration: blink }≤31
2013-11-12		3
2008-06-17		12
2015-07-29		≤18
2013-11-19		1
2003-06-23
selektor { text-decoration: line-through }1
2008-12-11		3
2008-06-17		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { text-decoration: none }1
2008-12-11		3
2008-06-17		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { text-decoration: overline }1
2008-12-11		3
2008-06-17		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { text-decoration: underline }1
2008-12-11		3
2008-06-17		12
2015-07-29		15
2013-07-02		1
2003-06-23

Transformacja tekstu {text-transform}

W jaki sposób przekształcić zwykły tekst na pisany w całości dużymi albo małymi literami? Jak zmienić pierwsze litery wszystkich wyrazów na wielkie?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-transform: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { text-transform: capitalize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { text-transform: lowercase }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { text-transform: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { text-transform: uppercase }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Wyrównanie tekstu {text-align}

Jak ustawić tekst po lewej, po prawej lub na środku (wyśrodkowanie, centrowanie)? Co zrobić, aby tekst był równo ułożony przy obu marginesach (justowanie)?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-align: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { text-align: center }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		≤4
2009-06-08
selektor { text-align: justify }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { text-align: left }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		≤4
2009-06-08
selektor { text-align: right }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		≤4
2009-06-08

Wcięcie w tekście {text-indent}

W jaki sposób prawidłowo dodawać wcięcia w akapitach?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-indent: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Cień pod tekstem {text-shadow}

Jak można by było dodać cień pod tekstem?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-shadow: wartość }2
2009-05-21		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		1.1
2003-10-24
selektor { text-shadow: none }2
2009-05-21		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		1.1
2003-10-24

Wysokość linii tekstu {line-height}

Jak zmienić odległość między linijkami tekstu (wysokość linii), tak aby stał się bardziej czytelny lub skondensowany?


Chrome
Firefox
Edge
Opera
Safari
selektor { line-height: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { line-height: normal }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Odstęp między wyrazami tekstu {word-spacing}

Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między sąsiednimi wyrazami?


Chrome
Firefox
Edge
Opera
Safari
selektor { word-spacing: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { word-spacing: normal }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Odstęp między literami tekstu {letter-spacing}

Jak rozstrzelić lub ścieśnić tekst poprzez zwiększenie odległości między literami?


Chrome
Firefox
Edge
Opera
Safari
selektor { letter-spacing: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { letter-spacing: normal }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Białe znaki w tekście {white-space}

W jaki sposób zablokować zawijanie tekstu? Co zrobić, aby klawisze Enter i Tab były widoczne na ekranie?


Chrome
Firefox
Edge
Opera
Safari
selektor { white-space: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { white-space: normal }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { white-space: nowrap }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { white-space: pre }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { white-space: pre-line }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		9.5
2008-06-12		3
2007-10-26
selektor { white-space: pre-wrap }1
2008-12-11		3
2008-06-17		12
2015-07-29		8
2005-04-19		3
2007-10-26

Tryb pisania {writing-mode}

Co zrobić, aby tekst na stronie był ułożony pionowo - z góry na dół?


Chrome
Firefox
Edge
Opera
Safari
selektor { writing-mode: wartość }48
2016-01-20		41
2015-09-22		12
2015-07-29		35
2016-02-02		10.1
2017-03-27
selektor { writing-mode: horizontal-tb }48
2016-01-20		43
2015-12-15		12
2015-07-29		35
2016-02-02		9
2015-09-30
selektor { writing-mode: vertical-lr }48
2016-01-20		43
2015-12-15		12
2015-07-29		35
2016-02-02		9
2015-09-30
selektor { writing-mode: vertical-rl }48
2016-01-20		43
2015-12-15		12
2015-07-29		35
2016-02-02		9
2015-09-30

Orientacja tekstu {text-orientation}

Co zrobić, aby znaki w tekście były ułożone pionowo jeden pod drugim?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-orientation: wartość }48
2016-01-20		41
2015-09-22		79
2020-01-15		35
2016-02-02		14
2020-09-16
selektor { text-orientation: mixed }48
2016-01-20		41
2015-09-22		79
2020-01-15		35
2016-02-02		≤13.1
2020-03-24
selektor { text-orientation: sideways }12
2011-06-07		44
2016-01-26		79
2020-01-15		15
2013-07-02		7
2013-10-22
selektor { text-orientation: upright }12
2011-06-07		41
2015-09-22		79
2020-01-15		15
2013-07-02		≤13.1
2020-03-24

Tło CSS

Kolor tła {background-color}

Jak zmienić kolor tła dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { background-color: transparent }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Tło obrazkowe {background-image}

Jak ustawić tło graficzne (obrazek, zdjęcie) pod dowolnym elementem? Jak ustalić rozmiary obrazka w tle?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-image: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { background-image: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background-image: wartość /* multiple backgrounds */ }1
2008-12-11		3.6
2010-01-21		12
2015-07-29		10.5
2010-03-02		1.3
2005-04-15

Powtarzanie tła obrazkowego {background-repeat}

W jaki sposób zapobiec powielaniu grafiki wstawionej w tle albo powielić ją tylko w jednym kierunku (poziomo lub pionowo)?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-repeat: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { background-repeat: no-repeat }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background-repeat: repeat }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background-repeat: repeat-x }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background-repeat: repeat-y }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background-repeat: round }30
2013-10-01		49
2016-09-20		12
2015-07-29		17
2013-10-08		8
2014-10-16
selektor { background-repeat: space }30
2013-10-01		49
2016-09-20		12
2015-07-29		17
2013-10-08		8
2014-10-16
selektor { background-repeat: wartość /* multiple backgrounds */ }1
2008-12-11		3.6
2010-01-21		12
2015-07-29		10.5
2010-03-02		1.3
2005-04-15

Pozycja tła obrazkowego {background-position}

Jak ustawić obrazek (grafikę, zdjęcie) w tle w określonej pozycji?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-position: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { background-position: bottom }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23
selektor { background-position: center }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23
selektor { background-position: left }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23
selektor { background-position: right }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23
selektor { background-position: top }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23
selektor { background-position: wartość /* multiple backgrounds */ }1
2008-12-11		3.6
2010-01-21		12
2015-07-29		10.5
2010-03-02		1.3
2005-04-15

Zaczepienie tła obrazkowego {background-attachment}

Jak zrobić tło graficzne (obrazek, zdjęcie), które nie przesuwa się przy przewijaniu strony?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-attachment: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { background-attachment: fixed }1
2008-12-11		2
2006-10-24		12
2015-07-29		10.5
2010-03-02		15.4
2022-03-14
selektor { background-attachment: local }1
2008-12-11		25
2013-10-29		12
2015-07-29		10.5
2010-03-02		15.4
2022-03-14
selektor { background-attachment: scroll }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background-attachment: wartość /* multiple backgrounds */ }1
2008-12-11		3.6
2010-01-21		12
2015-07-29		10.5
2010-03-02		1.3
2005-04-15

Przycinanie tła {background-clip}

W jaki sposób usunąć tło spod wewnętrznych marginesów elementu, ale wyświetlić je pod treścią?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-clip: wartość }1
2008-12-11		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5
2010-06-07
selektor { background-clip: border-box }1
2008-12-11		4
2011-03-22		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { background-clip: content-box }1
2008-12-11		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		3
2007-10-26
selektor { background-clip: padding-box }1
2008-12-11		4
2011-03-22		12
2015-07-29		15
2013-07-02		3
2007-10-26

Pozycja początkowa tła obrazkowego {background-origin}

W jaki sposób określić pozycję obrazka tła, względem której będą liczone wszelkie przesunięcia?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-origin: wartość }1
2008-12-11		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		3
2007-10-26
selektor { background-origin: border-box }1
2008-12-11		4
2011-03-22		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { background-origin: content-box }1
2008-12-11		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		3
2007-10-26
selektor { background-origin: padding-box }1
2008-12-11		4
2011-03-22		12
2015-07-29		15
2013-07-02		3
2007-10-26

Rozmiary tła obrazkowego {background-size}

W jaki sposób przeskalować obrazek wstawiony w tle, tak żeby pasował idealnie?


Chrome
Firefox
Edge
Opera
Safari
selektor { background-size: wartość }3
2009-09-15		4
2011-03-22		12
2015-07-29		10
2009-09-01		5
2010-06-07
selektor { background-size: auto }1
2008-12-11		3.6
2010-01-21		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { background-size: contain }3
2009-09-15		3.6
2010-01-21		12
2015-07-29		10
2009-09-01		5
2010-06-07
selektor { background-size: cover }3
2009-09-15		3.6
2010-01-21		12
2015-07-29		10
2009-09-01		5
2010-06-07

Atrybuty mieszane tła {background}

Jak można najłatwiej ustawić kilka własności tła w jednym poleceniu?


Chrome
Firefox
Edge
Opera
Safari
selektor { background: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { background: background-clip }21
2012-07-31		22
2013-06-25		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
selektor { background: background-origin }21
2012-07-31		22
2013-06-25		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
selektor { background: background-size }21
2012-07-31		9
2011-12-20		12
2015-07-29		21
2014-05-06		5.1
2011-07-20
selektor { background: left }≤31
2013-11-12		≤50
2016-11-15		≤15
2017-04-05		≤18
2013-11-19		≤9.1
2016-03-21
selektor { background: no-repeat }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { background: top }≤31
2013-11-12		≤50
2016-11-15		≤15
2017-04-05		≤18
2013-11-19		≤9.1
2016-03-21
selektor { background: wartość /* multiple backgrounds */ }1
2008-12-11		3.6
2010-01-21		12
2015-07-29		10.5
2010-03-02		1.3
2005-04-15

Gradient liniowy {background: linear-gradient repeating-linear-gradient}

Jak wypełnić tło płynnym przejściem kilku kolorów w postaci gradientu?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: linear-gradient(parametry) }26
2013-03-26		16
2012-10-09		12
2015-07-29		12.1
2012-11-20		7
2013-10-22
selektor { cecha: linear-gradient(parametry) }26
2013-03-26		10
2012-01-31		12
2015-07-29		12.1
2012-11-20		7
2013-10-22
selektor { cecha: repeating-linear-gradient(parametry) }26
2013-03-26		16
2012-10-09		12
2015-07-29		12.1
2012-11-20		7
2013-10-22
selektor { cecha: repeating-linear-gradient(parametry) }26
2013-03-26		10
2012-01-31		12
2015-07-29		12.1
2012-11-20		7
2013-10-22

Gradient promienisty {background: radial-gradient repeating-radial-gradient}

Jak wypełnić tło płynnym przejściem kilku kolorów, wywołując efekt trójwymiarowej kuli lub oświetlenia latarki?


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: radial-gradient(parametry) }26
2013-03-26		16
2012-10-09		12
2015-07-29		12.1
2012-11-20		7
2013-10-22
selektor { cecha: radial-gradient(parametry) }26
2013-03-26		10
2012-01-31		12
2015-07-29		11.6
2011-12-06		7
2013-10-22
selektor { cecha: repeating-radial-gradient(parametry) }26
2013-03-26		16
2012-10-09		12
2015-07-29		12.1
2012-11-20		7
2013-10-22
selektor { cecha: repeating-radial-gradient(parametry) }26
2013-03-26		16
2012-10-09		12
2015-07-29		15
2013-07-02		7
2013-10-22

Marginesy CSS

Wymiarowanie pudełka {box-sizing}

Jak zmienić zasady obliczania faktycznych rozmiarów elementów na stronach WWW?


Chrome
Firefox
Edge
Opera
Safari
selektor { box-sizing: wartość }10
2011-03-08		29
2014-04-29		12
2015-07-29		7
2003-01-28		5.1
2011-07-20
selektor { box-sizing: border-box }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { box-sizing: content-box }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Górny margines {margin-top}

Jak ustawić górny margines dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { margin-top: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { margin-top: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Dolny margines {margin-bottom}

Jak ustawić dolny margines dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { margin-bottom: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { margin-bottom: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Lewy margines {margin-left}

Jak ustawić lewy margines dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { margin-left: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { margin-left: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Prawy margines {margin-right}

Jak ustawić prawy margines dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { margin-right: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { margin-right: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Atrybuty mieszane marginesu {margin}

Jak ustawić jednocześnie wszystkie marginesy dla dowolnego elementu: górny, prawy, dolny, lewy?


Chrome
Firefox
Edge
Opera
Safari
selektor { margin: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { margin: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Górny margines wewnętrzny {padding-top}

Jak dodać górny margines (odstęp) wewnątrz dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { padding-top: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Dolny margines wewnętrzny {padding-bottom}

Jak dodać dolny margines (odstęp) wewnątrz dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { padding-bottom: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Lewy margines wewnętrzny {padding-left}

Jak dodać lewy margines (odstęp) wewnątrz dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { padding-left: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Prawy margines wewnętrzny {padding-right}

Jak dodać prawy margines (odstęp) wewnątrz dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { padding-right: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Atrybuty mieszane marginesu wewnętrznego {padding}

Jak ustawić jednocześnie wszystkie marginesy wewnątrz dowolnego elementu (odstępy): górny, prawy, dolny, lewy?


Chrome
Firefox
Edge
Opera
Safari
selektor { padding: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Obramowanie CSS

Styl obramowania {border-...-style}

Jak dodać obramowanie do dowolnego elementu: linia przerywana (kreskowa i kropkowa), linia ciągła, podwójne obramowanie, rowek, grzbiet, ramka, przycisk?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-top-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
selektor { border-top-style: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: dotted }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: groove }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: hidden }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: inset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: outset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: ridge }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-style: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
selektor { border-right-style: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: dotted }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: groove }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: hidden }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: inset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: outset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: ridge }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-style: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
selektor { border-bottom-style: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: dotted }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: groove }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: hidden }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: inset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: outset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: ridge }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-style: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
selektor { border-left-style: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: dotted }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: groove }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: hidden }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: inset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: outset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: ridge }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-style: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Atrybuty mieszane stylu obramowania {border-style}

Jak ustawić styl obramowania dla wszystkich krawędzi jednocześnie?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-style: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-style: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-style: groove }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-style: inset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-style: outset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-style: ridge }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-style: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Szerokość obramowania {border-...-width}

Jak ustawić szerokość (grubość) obramowania dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-top-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-top-width: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-width: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top-width: thin }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-right-width: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-width: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right-width: thin }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-bottom-width: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-width: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom-width: thin }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-left-width: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-width: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left-width: thin }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Atrybuty mieszane szerokości obramowania {border-width}

Jak ustawić szerokość (grubość) obramowania dla wszystkich krawędzi jednocześnie?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-width: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-width: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-width: thin }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Kolor obramowania {border-...-color}

Jak ustawić kolor obramowania dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-top-color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-right-color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-bottom-color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-left-color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Atrybuty mieszane koloru obramowania {border-color}

Jak ustawić kolor obramowania dla wszystkich krawędzi jednocześnie?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-color: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Atrybuty mieszane obramowania {border}

Jak ustawić szerokość (grubość), styl i kolor obramowania dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { border: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-top: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-top: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
selektor { border-right: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-right: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-bottom: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-bottom: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { border-left: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { border-left: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Styl obrysu {outline-style}

Co to jest obrys i czym się różni od obramowania?


Chrome
Firefox
Edge
Opera
Safari
selektor { outline-style: wartość }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { outline-style: dashed }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: dotted }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: double }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: groove }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: inset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: outset }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: ridge }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-style: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02

Szerokość obrysu {outline-width}

W jaki sposób ustawić szerokość (grubość) obrysu dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { outline-width: wartość }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { outline-width: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-width: thick }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline-width: thin }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02

Kolor obrysu {outline-color}

W jaki sposób ustawić kolor obrysu dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { outline-color: wartość }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		7
2003-01-28		1.2
2004-02-02

Atrybuty mieszane obrysu {outline}

Jak ustawić szerokość (grubość), styl i kolor obrysu dowolnego elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { outline: wartość }94
2021-09-21		88
2021-04-19		94
2021-09-24		80
2021-10-05		16.4
2023-03-27
selektor { outline: medium }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { outline: solid }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02

Odstęp obrysu {outline-offset}

W jaki sposób odsunąć ramkę obrysu od krawędzi elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { outline-offset: wartość }1
2008-12-11		1.5
2005-11-29		15
2017-04-05		9.5
2008-06-12		1.2
2004-02-02

Zaokrąglenie obramowania {border-...-radius}

W jaki sposób wstawić na stronę element z zaokrąglonymi narożnikami?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-top-left-radius: wartość }4
2010-01-25		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5
2010-06-07
selektor { border-top-right-radius: wartość }4
2010-01-25		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5
2010-06-07
selektor { border-bottom-right-radius: wartość }4
2010-01-25		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5
2010-06-07
selektor { border-bottom-left-radius: wartość }4
2010-01-25		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5
2010-06-07

Atrybuty mieszane zaokrąglenia obramowania {border-radius}

Jak ustawić zaokrąglenia dla wszystkich narożników jednocześnie?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-radius: wartość }4
2010-01-25		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5
2010-06-07

Dekoracja przełamania obramowania {box-decoration-break}

W jaki sposób pozbyć się nieestetycznego efektu zanikania obramowania podczas przełamania strony lub linii?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
selektor { box-decoration-break: wartość }130
2024-10-15		32
2014-09-02		130
2024-10-17		115
2024-11-27		❌
selektor { box-decoration-break: clone }130
2024-10-15		32
2014-09-02		130
2024-10-17		115
2024-11-27		7
2013-10-22
selektor { box-decoration-break: slice }130
2024-10-15		32
2014-09-02		130
2024-10-17		115
2024-11-27		7
2013-10-22

Cień {box-shadow}

W jaki sposób podstawić efektownie wyglądający cień pod elementem?


Chrome
Firefox
Edge
Opera
Safari
selektor { box-shadow: wartość }10
2011-03-08		4
2011-03-22		12
2015-07-29		10.5
2010-03-02		5.1
2011-07-20
selektor { box-shadow: inset }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		10.5
2010-03-02		5
2010-06-07
selektor { box-shadow: none }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3
2007-10-26

Obramowanie obrazkowe {border-image-source}

Jak udekorować ramkę na stronie obramowaniem graficznym?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-image-source: wartość }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25
selektor { border-image-source: none }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25

Obcięcie obramowania obrazkowego {border-image-slice}

Jak podzielić obramowanie graficzne na narożniki, krawędzie i środek?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-image-slice: wartość }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25

Szerokość obramowania obrazkowego {border-image-width}

W jaki sposób podać szerokość (grubość) obramowania obrazkowego?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-image-width: wartość }16
2011-12-13		13
2012-06-05		12
2015-07-29		15
2013-07-02		6
2012-07-25
selektor { border-image-width: auto }16
2011-12-13		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25

Nawis obramowania obrazkowego {border-image-outset}

Jak wysunąć obramowanie obrazkowe poza krawędzie elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-image-outset: wartość }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25

Powtarzanie obramowania obrazkowego {border-image-repeat}

W jaki sposób powielić obrazek w postaci obramowania elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-image-repeat: wartość }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25
selektor { border-image-repeat: repeat }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25
selektor { border-image-repeat: round }30
2013-10-01		15
2012-08-28		12
2015-07-29		17
2013-10-08		9.1
2016-03-21
selektor { border-image-repeat: space }56
2017-01-25		50
2016-11-15		12
2015-07-29		43
2017-02-07		9.1
2016-03-21
selektor { border-image-repeat: stretch }15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25

Atrybuty mieszane obramowania obrazkowego {border-image}

Jak ustawić obrazek obramowania, jego narożniki, krawędzie, środek, a także jego szerokość (grubość) i powtarzanie (powielanie)?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-image: wartość }16
2011-12-13		15
2012-08-28		12
2015-07-29		11
2010-12-16		6
2012-07-25
selektor { border-image: repeat }16
2011-12-13		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3
2007-10-26

Wykazy CSS

Typ stylu wykazu {list-style-type}

Jak zmienić rodzaj (styl, typ) wykazu - wypunktowanie (koło, okrąg, kwadrat) i numerowanie (liczby arabskie, rzymskie, litery łacińskie, greckie, hebrajskie)?


Chrome
Firefox
Edge
Opera
Safari
selektor { list-style-type: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { list-style-type: armenian }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: circle }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { list-style-type: cjk-ideographic }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		5
2010-06-07
selektor { list-style-type: decimal }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { list-style-type: decimal-leading-zero }1
2008-12-11		1
2004-11-09		12
2015-07-29		8
2005-04-19		1
2003-06-23
selektor { list-style-type: disc }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { list-style-type: georgian }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: hebrew }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-type: hiragana }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-type: hiragana-iroha }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-type: katakana }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-type: katakana-iroha }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-type: lower-alpha }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: lower-greek }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: lower-latin }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: lower-roman }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-type: square }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { list-style-type: upper-alpha }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: upper-latin }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { list-style-type: upper-roman }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23

Niestandardowy typ stylu wykazu @counter-style

W jaki sposób stworzyć własny, niestandardowy rodzaj (typ, styl) wykazu? Jak zrobić listę z punktami w postaci emotikon (emoji)?

❌ Nie działa   🔷 Zawiera błędy

Chrome
Firefox
Edge
Opera
Safari
@counter-style91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { additive-symbols: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { fallback: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { negative: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { pad: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { prefix: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { range: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { suffix: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
@counter-style { symbols: wartość }🔷 91
2021-05-25		🔷 33
2014-10-14		🔷 91
2021-05-27		🔷 77
2021-06-09		17
2023-09-18
@counter-style { system: wartość }91
2021-05-25		33
2014-10-14		91
2021-05-27		77
2021-06-09		17
2023-09-18
selektor { list-style-type: symbols }❌35
2015-01-13		❌❌❌

Zawijanie tekstu w wykazie {list-style-position}

Co zrobić, aby punkt wykazu (wyróżnik, marker) znajdował się wewnątrz tekstu?


Chrome
Firefox
Edge
Opera
Safari
selektor { list-style-position: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { list-style-position: inside }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { list-style-position: outside }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Wyróżnik obrazkowy wykazu {list-style-image}

Jak wstawić grafikę (obrazek) jak punkt wykazu (wyróżnik, marker)?


Chrome
Firefox
Edge
Opera
Safari
selektor { list-style-image: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { list-style-image: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Atrybuty mieszane wykazu {list-style}

Jak ustalić kilka własności wyglądu wykazu w jednym poleceniu?


Chrome
Firefox
Edge
Opera
Safari
selektor { list-style: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { list-style: inside }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Automatyczna numeracja wykazu {counter-reset, counter-increment}

W jaki sposób stworzyć automatyczną numerację punktów i podpunktów w stylu: 1, 1.1, 1.1.1 itd.?


Chrome
Firefox
Edge
Opera
Safari
selektor { counter-increment: wartość }2
2009-05-21		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		3
2007-10-26
selektor { counter-increment: none }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { counter-reset: wartość }2
2009-05-21		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		3
2007-10-26
selektor { counter-reset: none }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Rozmiary CSS

Szerokość {width}

W jaki sposób najprościej ustawić szerokość elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Wysokość {height}

W jaki sposób najprościej ustawić wysokość elementu?


Chrome
Firefox
Edge
Opera
Safari
selektor { height: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Maksymalna szerokość {max-width}

Co zrobić, aby szerokość elementu nigdy nie przekroczyła ustalonej wartości?


Chrome
Firefox
Edge
Opera
Safari
selektor { max-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23

Minimalna szerokość {min-width}

Co zrobić, aby szerokość elementu nigdy nie była mniejsza od ustalonej wartości?


Chrome
Firefox
Edge
Opera
Safari
selektor { min-width: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23

Maksymalna wysokość {max-height}

Co zrobić, aby wysokość elementu nigdy nie przekroczyła ustalonej wartości?


Chrome
Firefox
Edge
Opera
Safari
selektor { max-height: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.3
2005-04-15

Minimalna wysokość {min-height}

Co zrobić, aby wysokość elementu nigdy nie była mniejsza od ustalonej wartości?


Chrome
Firefox
Edge
Opera
Safari
selektor { min-height: wartość }1
2008-12-11		3
2008-06-17		12
2015-07-29		4
2000-06-28		1.3
2005-04-15

Przepełnienie {overflow}

W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?


Chrome
Firefox
Edge
Opera
Safari
selektor { overflow: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { overflow: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { overflow: hidden }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { overflow: scroll }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { overflow: visible }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		3
2007-10-26

Przepełnienie tekstu {text-overflow}

Co zrobić, kiedy tekst nie mieści się w ustalonej szerokości elementu na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { text-overflow: wartość }1
2008-12-11		7
2011-09-27		12
2015-07-29		11
2010-12-16		1.3
2005-04-15
selektor { text-overflow: clip }1
2008-12-11		7
2011-09-27		12
2015-07-29		15
2013-07-02		1.3
2005-04-15
selektor { text-overflow: ellipsis }1
2008-12-11		7
2011-09-27		12
2015-07-29		15
2013-07-02		1.3
2005-04-15

Przeciąganie {resize}

W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?


Chrome
Firefox
Edge
Opera
Safari
selektor { resize: wartość }1
2008-12-11		4
2011-03-22		79
2020-01-15		12.1
2012-11-20		3
2007-10-26
selektor { resize: both }1
2008-12-11		4
2011-03-22		79
2020-01-15		15
2013-07-02		3
2007-10-26
selektor { resize: horizontal }1
2008-12-11		4
2011-03-22		79
2020-01-15		15
2013-07-02		3
2007-10-26
selektor { resize: none }1
2008-12-11		4
2011-03-22		79
2020-01-15		15
2013-07-02		3
2007-10-26
selektor { resize: vertical }1
2008-12-11		4
2011-03-22		79
2020-01-15		15
2013-07-02		3
2007-10-26

Tabele CSS

Podpis tabeli {caption-side}

W jaki sposób ustalić położenie podpisu (tytułu) tabeli?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
selektor { caption-side: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { caption-side: bottom }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23
selektor { caption-side: left }❌❌❌❌❌
selektor { caption-side: right }❌❌❌❌❌
selektor { caption-side: top }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23

Rozplanowanie tabeli {table-layout}

W jaki sposób przeglądarka oblicza rozmiary poszczególnych komórek tabeli? W jaki sposób wyświetlić tabelę bardzo wydajnym algorytmem?


Chrome
Firefox
Edge
Opera
Safari
selektor { table-layout: wartość }14
2011-09-16		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { table-layout: auto }14
2011-09-16		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { table-layout: fixed }14
2011-09-16		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Obramowanie tabeli {border-collapse, border}

Jak dodać efektowne obramowanie tabeli i jej komórek? Jak wprowadzić nowy, estetyczny model obramowania w tabeli za pomocą pojedynczych linii?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-collapse: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1.1
2003-10-24
selektor { border-collapse: collapse }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1.1
2003-10-24
selektor { border-collapse: separate }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1.1
2003-10-24

Odstępy między komórkami tabeli {border-spacing}

Jak zmienić odstępy pomiędzy sąsiednimi komórkami tabeli? Jak ustawić pionowy odstęp inny niż poziomy?


Chrome
Firefox
Edge
Opera
Safari
selektor { border-spacing: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23

Puste komórki tabeli {empty-cells}

Co zrobić, aby wokół pustych komórek tabeli wyświetlało się obramowanie?


Chrome
Firefox
Edge
Opera
Safari
selektor { empty-cells: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1.2
2004-02-02
selektor { empty-cells: hide }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1.2
2004-02-02
selektor { empty-cells: show }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1.2
2004-02-02

Pozycjonowanie CSS

Pozycja relatywna {position: relative}

W jaki sposób przesunąć dowolny element strony o podaną odległość?


Chrome
Firefox
Edge
Opera
Safari
selektor { position: relative }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Pozycja absolutna {position: absolute}

W jaki sposób ustawić dowolny element strony w żądanym miejscu na ekranie?


Chrome
Firefox
Edge
Opera
Safari
selektor { position: absolute }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Pozycja ustalona {position: fixed}

Jak ustawić element, aby nie przesuwał się podczas przewijania strony?


Chrome
Firefox
Edge
Opera
Safari
selektor { position: fixed }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23

Pozycja statyczna {position: static}

Jak przywrócić domyślny sposób ustawienia elementu wypozycjonowanego?


Chrome
Firefox
Edge
Opera
Safari
selektor { position: static }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Przezroczystość {opacity}

W jaki sposób wstawić na stronie półprzezroczyste warstwy?


Chrome
Firefox
Edge
Opera
Safari
selektor { opacity: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		9
2006-06-20		2
2005-04-29

Nakładanie {z-index}

W jaki sposób ustawić elementy jeden na drugim? Jak ustawić element za tekstem?


Chrome
Firefox
Edge
Opera
Safari
selektor { z-index: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { z-index: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Obcinanie {clip}

W jaki sposób automatycznie przyciąć do określonych rozmiarów obrazek (grafikę, zdjęcie) lub inny element strony (kadrowanie)?


Chrome
Firefox
Edge
Opera
Safari
selektor { clip: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { clip: auto }1
2008-12-11		1
2004-11-09		79
2020-01-15		15
2013-07-02		1
2003-06-23

Wyświetlanie {display}

Jak ukryć dowolny element strony? W jaki sposób zmienić domyśle wyświetlanie dowolnych elementów strony, tak aby stały się wykazem czy tabelką?


Chrome
Firefox
Edge
Opera
Safari
selektor { display: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: block }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: inline }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: inline-block }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: inline-table }1
2008-12-11		3
2008-06-17		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: list-item }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-caption }1
2008-12-11		1
2004-11-09		≤15
2017-04-05		15
2013-07-02		≤4
2009-06-08
selektor { display: table-cell }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-column }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-column-group }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-footer-group }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-header-group }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-row }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { display: table-row-group }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23

Widzialność {visibility}

W jaki sposób schować element, tak aby pozostało po nim puste miejsce?


Chrome
Firefox
Edge
Opera
Safari
selektor { visibility: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { visibility: collapse }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1.3
2005-04-15
selektor { visibility: hidden }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { visibility: visible }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Ustawienie {float, vertical-align}

Jak ustawić obrazek (grafikę, zdjęcie) lub dowolny inny element po lewej bądź po prawej stronie tekstu? Jak ustawić element na górze, na środku lub na dole innego elementu? Jak stworzyć indeks górny i dolny za pomocą CSS?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
selektor { float: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1
2003-06-23
selektor { float: left }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { float: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { float: right }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { vertical-align: baseline }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: bottom }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: center }❌149
2026-03-24		❌❌❌
selektor { vertical-align: middle }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: sub }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: super }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: text-bottom }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: text-top }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { vertical-align: top }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Przyleganie {clear}

Jak zabezpieczyć się przed nieestetycznym przyleganiem dwóch elementów oblewanych tekstem (np. obrazki)? W jaki sposób nie dopuścić, aby obok tekstu znajdował się obrazek ani inny element?


Chrome
Firefox
Edge
Opera
Safari
selektor { clear: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { clear: both }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { clear: left }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { clear: none }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { clear: right }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Kursory CSS

Kształt kursora {cursor}

Jak zmienić kursor (wskaźnik) myszki?


Chrome
Firefox
Edge
Opera
Safari
selektor { cursor: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: alias }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: all-scroll }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: cell }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: col-resize }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: context-menu }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: copy }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: crosshair }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: default }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: e-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: ew-resize }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: grab }68
2018-07-24		27
2014-02-04		14
2016-08-02		55
2018-08-16		11
2017-09-19
selektor { cursor: grabbing }68
2018-07-24		27
2014-02-04		79
2020-01-15		55
2018-08-16		11
2017-09-19
selektor { cursor: help }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: move }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: n-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: ne-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: nesw-resize }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: no-drop }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: none }5
2010-05-25		3
2008-06-17		12
2015-07-29		15
2013-07-02		5
2010-06-07
selektor { cursor: not-allowed }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: ns-resize }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: nw-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: nwse-resize }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: pointer }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: progress }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: row-resize }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: s-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: se-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: sw-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: text }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: vertical-text }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		10.6
2010-07-01		3
2007-10-26
selektor { cursor: w-resize }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: wait }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { cursor: zoom-in }37
2014-08-26		24
2013-09-17		12
2015-07-29		24
2014-09-02		9
2015-09-30
selektor { cursor: zoom-out }37
2014-08-26		24
2013-09-17		12
2015-07-29		24
2014-09-02		9
2015-09-30

Kursor obrazkowy {cursor: url}

Jak wczytać kursor (wskaźnik) myszki z pliku?


Chrome
Firefox
Edge
Opera
Safari
selektor { cursor: url }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		15
2013-07-02		3
2007-10-26

Kolor karetki tekstowej {caret-color}

W jaki sposób zmienić kolor migającego wskaźnika (karetki, kursora), który pojawia się podczas wpisywania tekstu z klawiatury?


Chrome
Firefox
Edge
Opera
Safari
selektor { caret-color: wartość }57
2017-03-09		53
2017-04-19		79
2020-01-15		44
2017-03-21		11.1
2018-04-12
selektor { caret-color: auto }57
2017-03-09		53
2017-04-19		79
2020-01-15		44
2017-03-21		11.1
2018-04-12

Drukowanie CSS

Przełamanie strony {page-break-before, page-break-after}

Jak rozpocząć nową stronę papieru w określonym miejscu na wydruku?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
selektor { page-break-after: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { page-break-after: always }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-after: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-after: avoid }1
2008-12-11		❌12
2015-07-29		15
2013-07-02		❌
selektor { page-break-after: left }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-after: right }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-before: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		7
2003-01-28		1.2
2004-02-02
selektor { page-break-before: always }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-before: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-before: avoid }1
2008-12-11		❌12
2015-07-29		15
2013-07-02		❌
selektor { page-break-before: left }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02
selektor { page-break-before: right }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.2
2004-02-02

Blokada przełamania strony {page-break-inside}

Jak nie dopuścić, aby na wydruku pierwsza część elementu znalazła się na jednej stronie papieru, a dalsza na drugiej?


Chrome
Firefox
Edge
Opera
Safari
selektor { page-break-inside: wartość }1
2008-12-11		19
2013-02-19		12
2015-07-29		7
2003-01-28		1.3
2005-04-15
selektor { page-break-inside: auto }1
2008-12-11		19
2013-02-19		12
2015-07-29		15
2013-07-02		1.3
2005-04-15
selektor { page-break-inside: avoid }1
2008-12-11		19
2013-02-19		12
2015-07-29		15
2013-07-02		1.3
2005-04-15

Linijki na stronie {widows, orphans}

W jaki sposób poprawić estetykę wydruku, kontrolując liczbę linijek wdowich (na górze) i sierocych (na dole)?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
selektor { orphans: wartość }25
2013-02-21		❌12
2015-07-29		9.2
2007-04-11		1.3
2005-04-15
selektor { widows: wartość }25
2013-02-21		❌12
2015-07-29		9.2
2007-04-11		1.3
2005-04-15

Kontekst strony @page

Jak ustawić marginesy strony na wydruku?


Chrome
Firefox
Edge
Opera
Safari
@page2
2009-05-21		19
2013-02-19		12
2015-07-29		6
2001-12-18		18.2
2024-12-11
@page { size: wartość }15
2011-10-25		95
2021-12-07		79
2020-01-15		15
2013-07-02		18.2
2024-12-11

Okładka wydruku @page :first

Jak wyzerować marginesy na okładce wydruku?


Chrome
Firefox
Edge
Opera
Safari
:first { cecha: wartość }18
2012-03-28		116
2023-08-01		12
2015-07-29		9.2
2007-04-11		6
2012-07-25

Druk dwustronny @page :left :right

W jaki sposób przygotować druk dwustronny, tak aby potem wszystkie kartki można było wygodnie spiąć jak książkę?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
:left { cecha: wartość }6
2010-09-02		❌12
2015-07-29		9.2
2007-04-11		5
2010-06-07
:right { cecha: wartość }6
2010-09-02		❌12
2015-07-29		9.2
2007-04-11		5
2010-06-07

Rozmiar papieru @page {size}

Co zrobić, żeby strona WWW była drukowana na kartce w orientacji poziomej? Jak obrócić drukowane zdjęcie? W jaki sposób wydrukować stronę na kartce w formacie A5, A3, B5 lub B4?


Chrome
Firefox
Edge
Opera
Safari
@page { size: wartość }15
2011-10-25		95
2021-12-07		79
2020-01-15		15
2013-07-02		18.2
2024-12-11
@page { size: jis-b4 }83
2020-05-19		95
2021-12-07		83
2020-05-21		69
2020-06-24		18.2
2024-12-11
@page { size: jis-b5 }83
2020-05-19		95
2021-12-07		83
2020-05-21		69
2020-06-24		18.2
2024-12-11

Typ strony wydruku {page}

W jaki sposób wydrukować część stron poziomo, a pozostałe pionowo?


Chrome
Firefox
Edge
Opera
Safari
selektor { page: wartość }85
2020-08-25		110
2023-02-14		85
2020-08-27		71
2020-09-15		1
2003-06-23

Układ wielokolumnowy CSS

Szerokość kolumny {column-width}

Jak ustalić szerokość kolumny tekstu?


Chrome
Firefox
Edge
Opera
Safari
selektor { column-width: wartość }50
2016-04-13		50
2016-11-15		12
2015-07-29		11.1
2011-04-12		9
2015-09-30
selektor { column-width: auto }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		15
2013-07-02		3
2007-10-26

Liczba kolumn {column-count}

W jaki sposób podzielić tekst na kilka kolumn?


Chrome
Firefox
Edge
Opera
Safari
selektor { column-count: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		37
2016-05-04		9
2015-09-30
selektor { column-count: auto }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		15
2013-07-02		3
2007-10-26

Atrybuty mieszane kolumn {columns}

Jak za jednym razem ustalić szerokość kolumny i liczbę kolumn?


Chrome
Firefox
Edge
Opera
Safari
selektor { columns: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		11.1
2011-04-12		9
2015-09-30
selektor { columns: auto }50
2016-04-13		9
2011-12-20		12
2015-07-29		37
2016-05-04		3
2007-10-26

Odstęp kolumn {column-gap}

W jaki sposób ustalić odstęp pomiędzy dwiema kolumnami tekstu?


Chrome
Firefox
Edge
Opera
Safari
selektor { column-gap: wartość }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		11.1
2011-04-12		3
2007-10-26
selektor { column-gap: normal }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		11.1
2011-04-12		3
2007-10-26

Linia rozdzielająca kolumn {column-rule-color, column-rule-style, column-rule-width, column-rule}

W jaki sposób dodać pionową linię rozdzielającą kolumny tekstu?


Chrome
Firefox
Edge
Opera
Safari
selektor { column-rule-color: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		11.1
2011-04-12		9
2015-09-30
selektor { column-rule-style: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		11.1
2011-04-12		9
2015-09-30
selektor { column-rule-style: solid }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3
2007-10-26
selektor { column-rule-width: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		11.1
2011-04-12		9
2015-09-30
selektor { column-rule: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		11.1
2011-04-12		9
2015-09-30
selektor { column-rule: solid }1
2008-12-11		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3
2007-10-26

Przełamanie kolumny {break-before, break-inside, break-after}

Jak zapewnić estetyczne przełamania kolumn tekstu na stronie?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
selektor { break-before: wartość }50
2016-04-13		65
2019-01-29		12
2015-07-29		37
2016-05-04		10
2016-09-20
selektor { break-before: avoid-column }50
2016-04-13		❌79
2020-01-15		37
2016-05-04		10
2016-09-20
selektor { break-before: column }50
2016-04-13		❌79
2020-01-15		37
2016-05-04		10
2016-09-20
selektor { break-after: wartość }50
2016-04-13		65
2019-01-29		12
2015-07-29		37
2016-05-04		10
2016-09-20
selektor { break-after: avoid-column }50
2016-04-13		❌79
2020-01-15		37
2016-05-04		10
2016-09-20
selektor { break-after: column }50
2016-04-13		❌79
2020-01-15		37
2016-05-04		10
2016-09-20
selektor { break-inside: wartość }50
2016-04-13		65
2019-01-29		12
2015-07-29		37
2016-05-04		10
2016-09-20
selektor { break-inside: avoid-column }50
2016-04-13		92
2021-09-07		79
2020-01-15		37
2016-05-04		10
2016-09-20

Łączenie kolumn {column-span}

W jaki sposób wstawić element rozciąjący się ponad kilkoma kolumnami tekstu?


Chrome
Firefox
Edge
Opera
Safari
selektor { column-span: wartość }50
2016-04-13		71
2019-12-10		12
2015-07-29		37
2016-05-04		9
2015-09-30
selektor { column-span: all }6
2010-09-02		71
2019-12-10		12
2015-07-29		15
2013-07-02		5.1
2011-07-20
selektor { column-span: none }6
2010-09-02		71
2019-12-10		12
2015-07-29		15
2013-07-02		5.1
2011-07-20

Wypełnienie kolumn {column-fill}

Jak określić wypełnienie elementu kolumnami tekstu?


Chrome
Firefox
Edge
Opera
Safari
selektor { column-fill: wartość }50
2016-04-13		52
2017-03-07		12
2015-07-29		37
2016-05-04		9
2015-09-30
selektor { column-fill: auto }50
2016-04-13		17
2012-11-20		12
2015-07-29		37
2016-05-04		8
2014-10-16
selektor { column-fill: balance }50
2016-04-13		17
2012-11-20		12
2015-07-29		37
2016-05-04		8
2014-10-16

Układ elastyczny CSS

Kontener elastyczny {display: flex inline-flex}

Jak przełączyć sposób rozpalnowania elementów na układ elastyczny?


Chrome
Firefox
Edge
Opera
Safari
selektor { display: flex }29
2013-08-20		20
2013-04-02		12
2015-07-29		16
2013-08-27		9
2015-09-30
selektor { display: inline-flex }29
2013-08-20		20
2013-04-02		12
2015-07-29		16
2013-08-27		9
2015-09-30

Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}

W jaki sposób ustawić elastycznie elementy w wierszach lub kolumnach w różnych kierunkach?


Chrome
Firefox
Edge
Opera
Safari
selektor { flex-direction: wartość }29
2013-08-20		22
2013-06-25		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex-direction: column }21
2012-07-31		22
2013-06-25		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-direction: column-reverse }21
2012-07-31		81
2020-09-22		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-direction: row }21
2012-07-31		22
2013-06-25		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-direction: row-reverse }21
2012-07-31		81
2020-09-22		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-wrap: wartość }29
2013-08-20		28
2014-03-18		12
2015-07-29		16
2013-08-27		9
2015-09-30
selektor { flex-wrap: nowrap }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-wrap: wrap }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-wrap: wrap-reverse }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: wartość }29
2013-08-20		28
2014-03-18		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex-flow: column }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: column-reverse }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: nowrap }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: row }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: row-reverse }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: wrap }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex-flow: wrap-reverse }21
2012-07-31		28
2014-03-18		12
2015-07-29		15
2013-07-02		7
2013-10-22

Kolejność {order}

Jak zmienić kolejność wyświetlania elementów na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { order: wartość }29
2013-08-20		20
2013-04-02		12
2015-07-29		12.1
2012-11-20		9
2015-09-30

Elastyczność {flex-grow, flex-shrink, flex-basis, flex}

Jak sprawić, aby rozmiary elementów elastycznie dopasowały się do ich zawartości w wolnej przestrzeni na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { flex-grow: wartość }29
2013-08-20		20
2013-04-02		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex-shrink: wartość }29
2013-08-20		20
2013-04-02		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex-basis: wartość }29
2013-08-20		22
2013-06-25		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex-basis: auto }22
2012-09-25		22
2013-06-25		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex: wartość }29
2013-08-20		22
2013-06-25		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { flex: auto }21
2012-07-31		22
2013-06-25		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { flex: none }21
2012-07-31		22
2013-06-25		12
2015-07-29		15
2013-07-02		7
2013-10-22

Justowanie zawartości {justify-content}

Jak równomiernie wyrównać elementy na stronie?


Chrome
Firefox
Edge
Opera
Safari
selektor { justify-content: wartość }29
2013-08-20		20
2013-04-02		12
2015-07-29		12.1
2012-11-20		9
2015-09-30

Wyrównanie wiersza {align-items, align-self}

Co zrobić, aby wyśrodkować blok w pionie?


Chrome
Firefox
Edge
Opera
Safari
selektor { align-items: wartość }29
2013-08-20		20
2013-04-02		12
2015-07-29		16
2013-08-27		9
2015-09-30
selektor { align-self: wartość }29
2013-08-20		20
2013-04-02		12
2015-07-29		12.1
2012-11-20		9
2015-09-30
selektor { align-self: auto }21
2012-07-31		28
2014-03-18		79
2020-01-15		15
2013-07-02		7
2013-10-22
selektor { align-self: stretch }21
2012-07-31		28
2014-03-18		79
2020-01-15		15
2013-07-02		7
2013-10-22

Wyrównanie wierszy {align-content}

Jak ustawić bloki w wierszach na dole, na górze albo równomiernie na całej dostępnej wysokości?


Chrome
Firefox
Edge
Opera
Safari
selektor { align-content: wartość }29
2013-08-20		28
2014-03-18		12
2015-07-29		16
2013-08-27		9
2015-09-30

Media CSS

Wybór medium @media

Jak określić specjalny wygląd strony w wersji do wydruku czy na urządzenia przenośne?


Chrome
Firefox
Edge
Opera
Safari
@media1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		3
2007-10-26

Zapytania mediów

Jak stworzyć stronę, która automatycznie dopasowuje się do możliwości urządzenia: komputer, tablet, smartphone, telewizor, projektor?

❌ Nie działa

Chrome
Firefox
Edge
Opera
Safari
@media1
2008-12-11		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		3
2007-10-26
@media (aspect-ratio)3
2009-09-15		3.5
2009-06-30		12
2015-07-29		10
2009-09-01		5
2010-06-07
@media (color)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26
@media (color-index)29
2013-08-20		❌79
2020-01-15		16
2013-08-27		8
2014-10-16
@media (device-aspect-ratio)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26
@media (device-height)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26
@media (device-width)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26
@media (grid)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26
@media (height)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26
@media (monochrome)1
2008-12-11		2
2006-10-24		79
2020-01-15		10
2009-09-01		3
2007-10-26
@media (orientation)3
2009-09-15		2
2006-10-24		12
2015-07-29		10.6
2010-07-01		5
2010-06-07
@media (resolution)29
2013-08-20		8
2011-11-08		12
2015-07-29		16
2013-08-27		16
2022-09-12
@media (scan)104
2022-08-02		63
2018-10-23		104
2022-08-05		90
2022-08-18		16.4
2023-03-27
@media (width)1
2008-12-11		2
2006-10-24		12
2015-07-29		10
2009-09-01		3
2007-10-26

Reguły warunkowe CSS

Zapytania właściwości @supports

W jaki sposób zapewnić prawidłowy wygląd strony WWW nawet w starszych przeglądarkach?


Chrome
Firefox
Edge
Opera
Safari
@supports28
2013-07-09		22
2013-06-25		12
2015-07-29		12.1
2012-11-20		9
2015-09-30

Jednostki CSS

Długość


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: { color: Xvw }20
2012-06-26		19
2013-02-19		12
2015-07-29		20
2014-03-04		6
2012-07-25
selektor { cecha: { color: Xvh }20
2012-06-26		19
2013-02-19		12
2015-07-29		20
2014-03-04		6
2012-07-25
selektor { cecha: { color: Xvmin }26
2013-03-26		19
2013-02-19		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { cecha: { color: Xvmax }26
2013-03-26		19
2013-02-19		16
2017-10-17		15
2013-07-02		7
2013-10-22
selektor { cecha: { color: Xch }27
2013-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		7
2013-10-22
selektor { cecha: { color: Xrem }4
2010-01-25		3.6
2010-01-21		12
2015-07-29		11.6
2011-12-06		5
2010-06-07

Rozdzielczość


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: dpi(parametry) }29
2013-08-20		8
2011-11-08		12
2015-07-29		16
2013-08-27		16
2022-09-12
selektor { cecha: dpcm(parametry) }29
2013-08-20		8
2011-11-08		12
2015-07-29		16
2013-08-27		16
2022-09-12
selektor { cecha: dppx(parametry) }29
2013-08-20		16
2012-10-09		12
2015-07-29		12.1
2012-11-20		16
2022-09-12

Wyrażenia matematyczne


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: calc(parametry) }26
2013-03-26		16
2012-10-09		12
2015-07-29		15
2013-07-02		7
2013-10-22

Kolory CSS

Sposoby definiowania kolorów CSS


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: #RRGGBB }
selektor { cecha: #RGB }		1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { cecha: rgb(parametry) }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23
selektor { cecha: cecha: rgba(parametry) }65
2018-03-06		52
2017-03-07		79
2020-01-15		52
2018-03-22		12.1
2019-03-25
selektor { cecha: hsl(parametry) }1
2008-12-11		1
2004-11-09		12
2015-07-29		9.5
2008-06-12		3.1
2008-03-18
selektor { cecha: hsla(parametry) }65
2018-03-06		52
2017-03-07		79
2020-01-15		52
2018-03-22		12.1
2019-03-25
selektor { cecha: transparent }1
2008-12-11		3
2008-06-17		12
2015-07-29		10
2009-09-01		3.1
2008-03-18
selektor { cecha: currentColor }1
2008-12-11		1.5
2005-11-29		12
2015-07-29		9.5
2008-06-12		4
2009-06-08

Wykaz kolorów systemowych


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: system }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Wykaz kolorów rozszerzonych


Chrome
Firefox
Edge
Opera
Safari
selektor { cecha: nazwa }1
2008-12-11		1
2004-11-09		12
2015-07-29		3.5
1998-11-18		1
2003-06-23

Komendy CSS 2

bottom


Chrome
Firefox
Edge
Opera
Safari
selektor { bottom: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { bottom: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

content


Chrome
Firefox
Edge
Opera
Safari
selektor { content: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { content: close-quote }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { content: no-close-quote }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { content: no-open-quote }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { content: open-quote }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

direction


Chrome
Firefox
Edge
Opera
Safari
selektor { direction: wartość }2
2009-05-21		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1
2003-06-23
selektor { direction: ltr }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { direction: rtl }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

left


Chrome
Firefox
Edge
Opera
Safari
selektor { left: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		5
2000-12-06		1
2003-06-23
selektor { left: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

position


Chrome
Firefox
Edge
Opera
Safari
selektor { position: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { position: absolute }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { position: fixed }1
2008-12-11		1
2004-11-09		12
2015-07-29		4
2000-06-28		1
2003-06-23
selektor { position: relative }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
selektor { position: static }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

right


Chrome
Firefox
Edge
Opera
Safari
selektor { right: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		5
2000-12-06		1
2003-06-23
selektor { right: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

speak

❌ Nie działa   🔷 Zawiera błędy

Chrome
Firefox
Edge
Opera
Safari
selektor { speak: wartość }🔷 ≤80
2020-02-04		❌🔷 ≤80
2020-02-07		🔷 ≤67
2020-03-03		❌

top


Chrome
Firefox
Edge
Opera
Safari
selektor { top: wartość }1
2008-12-11		1
2004-11-09		12
2015-07-29		6
2001-12-18		1
2003-06-23
selektor { top: auto }1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

unicode-bidi


Chrome
Firefox
Edge
Opera
Safari
selektor { unicode-bidi: wartość }2
2009-05-21		1
2004-11-09		12
2015-07-29		9.2
2007-04-11		1.3
2005-04-15
selektor { unicode-bidi: bidi-override }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.3
2005-04-15
selektor { unicode-bidi: embed }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.3
2005-04-15
selektor { unicode-bidi: normal }2
2009-05-21		1
2004-11-09		12
2015-07-29		15
2013-07-02		1.3
2005-04-15

JS

Wstęp do JavaScript i ECMAScript

Jak osadzić skrypt JavaScript na stronie?

W jaki sposób wstawić kod JavaScript na stronie internetowej?


Chrome
Firefox
Edge
Opera
Safari
<script>1
2008-12-11		1
2004-11-09		12
2015-07-29		≤12.1
2012-11-20		3
2007-10-26
<script async>1
2008-12-11		3.6
2010-01-21		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<script defer>1
2008-12-11		3.5
2009-06-30		12
2015-07-29		15
2013-07-02		3
2007-10-26
<script src>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08
<script type>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		≤4
2009-06-08

★★★★★ 5/5 (12)

Czytaj dalej

Aby kontynuować kurs, przejdź do poprzedniego lub następnego artykułu:

Facebook