Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

Wskazówki CSS Awesome

Zbiór porad, które pomogą Ci rozwinąć zawansowane umiejętności CSS.

Sprawdż takze inne wspaniałe listy @sindresorhus z zaufanych list.

Powrót do spisu treści

Wskazówki

  1. Użyj resetowania CSS
  2. Dziedziczenie box-sizing
  3. Użyj unset zamiast resetowania wszystkich ustawień
  4. Użyj :not() aby dodać/usunąć obramownie nawigacji
  5. Dodaj line-height do body
  6. Ustaw :focus dla elementów formularza
  7. Przesuń cokolwiek pionowo
  8. Listy rozdziele przecinkami
  9. Wybierz elementy za pomocą negatywnego nth-child
  10. Użyj SVG dla ikon
  11. Użyj selektora "Lobotomized Owl"
  12. Użyj max-height dla suwaków Pure CSS
  13. Komórki tabeli o równej-szerokości
  14. Pozbądź się marginesów za pomocą Flexbox
  15. Użyj selektorów atrybutów z pustymi linkami
  16. Stylizuj domyślne linki
  17. Spójny pionowy rytm
  18. Wewnętrzne proporcje bloków
  19. Wystylizuj uszkodzone obrazy
  20. Użyj rem dla ustawień globalnych rozmiarow i em do ustawień localnych
  21. Ukryj filmy z autoodtwarzaniem, które nie są wyciszone
  22. Użyj :root dla elastycznych typów
  23. Ustaw rozmiar czcionki w elementach formularza
  24. Użyj zdarzeń wskaźnika do sterowania zdarzeniami myszy

Użyj resetowania CSS

Reset ustawień CSS umośliwia wymuszenie spójność stylu w różnych przeglądarkach z czystym konturem dla elementów stylizacyjnych. Możesz wykorzystać jedną bibliotek resetującej ustawienia CSS np. Normalize lub użyć uproszczonego sposobu resetowania:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Elementy zostaną pozbawione marginesów i dopełnienia, a box-sizing pozwala zarządzać układami za pomocą modelu pudełkowego CSS (CSS box model).

Demonstracja

Uwaga: Jeżeli zdecydujesz sie na wykorzystanie powyżej opisanej wskazówki dotyczącej Dziedziczenia box-sizing możesz zrezygnować z dodania box-sizing w zresetowanych ustawieniach CSS.

powrót do spisu treści

Dziedziczenie box-sizing

Niech box-sizing zostanie odziedziczony z html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Ułatwia to łatwiejszą zmianę box-sizing w wtyczkach lub innych komponentach, które wpływaja na inne zachowania.

powrót do spisu treści

Użyj unset zamiast resetowania wszystkich ustawień

Podczas resetowania ustawień elementu nie jest konieczne resetowanie pojedyńczych ustawień:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Możesz sprecyzować wszystkie właściwości elementu, używając skrótu all. Używając unset możemy zresetować ustawienia elementu do wartości początkowych:

button {
  all: unset;
}

Uwaga: skrót all nie jest obsługiwany w IE11 i jest obecnie rozważany pod kątem obsługi w Edge. unset nie jest obsługiwany w IE11.

powrót do spisu treści

Użyj :not(), aby dodać/usunąć obramownie nawigacji

Zamiast dodać obramowanie...

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...a później usunąć ja z ostatniego elementu...

/* usuń obramowanie */
.nav li:last-child {
  border-right: none;
}

...użyj :not() pseudo-klasy, aby dodać obramowanie do wybranych elementów:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Oczywiście możesz także użyć .nav li + li, ale z :not() intencja jest bardzo jasna, a selektor CSS definiuje obramowanie w sposób czytelny dla człowieka.

Demonstracja

powrót do spisu treści

Dodaj line-height do body

Nie musisz dodawać wysokości linii do każdego <p>, <h*>, et al. osobno. Zamiast tego dodaj go do body:

body {
  line-height: 1.5;
}

W ten sposób elementy tekstowe mogą łatwo odziedziczyć ustawienia z body.

Demonstracja

powrót do spisu treści

Ustaw :focus dla elementów formularza

Obserwowani użytkownicy klawiatury polegają na fokucie, aby określić, gdzie na stronie pojawiają się zdarzenia na klawiaturze. Skoncentruj się na elementach formy, które będą spójne, a następnie domyślna implementacja przeglądarki:

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

Demonstracja

Powrót do spisu treści

Przesuwanie w pionie

Nie, to nie jest czarna magia, naprawdę możesz wyśrodkować elementy w pionie:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

a także używając CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Chcesz coś przenieść? Pionowo, poziomo... zawsze i wszędzie? Na CSS-Tricks znajdziesz ciekawy artykuł z dobrymi instrukcje na ten temat.

Uwaga: Uważaj na pewne nieprawidłowe zachowanie z Flexbox w IE11.

Demonstracja

Powrót do spisu treści

Listy podzielone przecinkami

Elementy listy mogą wyglądać jak prawdziwa, oddzielona przecinkami lista:

ul > li:not(:last-child)::after {
  content: ",";
}

Użyj :not() pseudo-klasy, aby przecinek nie zostal dodany do ostatniego elementu.

Uwaga: Ta wskazówka może nie być idealna dla ułatwień dostępu, w szczególności na ekranach czytników. Kopiowanie / wklejanie z przeglądarki nie działa z treścią generowaną przez CSS. Postępuj ostrożnie.

Powrót do spisu treści

Wybierz przedmioty za pomocą nth-child

Wybierz przedmioty nieparzyste za pomocą negatywnego nth-child w CSS, aby wybrać elementy od 1 do n.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

Lub, skoro już nauczyłeś się trochę o użyciu :not(),wypróbuj:

/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
  display: none;
}

To było całkiem łatwe.

Demonstracja

Powrót do spisu treści

Użyj SVG dla ikon

Nie ma powodu, aby nie używać SVG jako ikon:

.logo {
  background: url("logo.svg");
}

SVG skaluje się dobrze dla wszystkich typów rozdzielczości i jest obsługiwany we wszystkich przeglądarkach wróć do IE9. Więc porzuć swoje pliki .png, .jpg lub .gif-jif-whatev.

Uwaga: Jeśli masz przyciski tylko ikony SVG dla widzących użytkowników, a SVG nie załaduje się, pomoże to w utrzymaniu dostępności:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

Powrót do spisu treści

Użyj selektora "Lobotomized Owl"

Być może "Lobotomized Owl" to dziwna nazwa dla selektora, ale użycie uniwersalnego (*) selektora z sąsiednim selektorem rodzeństwa (+) może udostepnić potężne możliwości CSS:

* + * {
  margin-top: 1.5em;
}

W tym przykładzie wszystkie elementy, które śledzą inne elementy, otrzymają margin-top: 1.5em.

Dowiedź sie wiecej na temat selektora "lobotomized owl" czytajac artykul Heydon'a Pickering A List Apart.

Demonstracja

Powrót do spisu treści

Użyjmax-height (atrybutu maksymalnej wysokości) dla suwaków Pure CSS

Zaimplementuj suwaki CSS używając max-height z ukrytym przepełnieniem:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

Element rozwija się do max-height po najechaniu kursorem, a suwak wyświetla się w wyniku przepełnienia.

Powrót do spisu treści

Komórki tabeli o równej-szerokości

Tworzenie tabel może być uciążliwe. Spróbuj użyć table-layout: fixed, aby upewnić sie, że komórki mają jednakową szerokość:

.calendar {
  table-layout: fixed;
}

Widzisz jakie to proste! :)

Demonstracja

Powrót do spisu treści

Pozbądź się marginesów za pomocą Flexbox

Podczas pracy z rynnami kolumnowymi (column gutters) możesz pozbyć się nth-, first-, i last-child za pomocą właściwościspace-between:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Teraz rynny kolumnowe zawsze są rozmieszczone równomiernie.

Powrót do spisu treści

Użyj selektorów atrybutów z pustymi linkami

Wyświetl linki, gdy element <a> nie ma wartości tekstowej, ale atrybut href posiada link:

a[href^="http"]:empty::before {
  content: attr(href);
}

To całkiem wygodne.

Demonstracja

Powrót do spisu treści

Stylizuj "domyślne" linki

Dodaj styl dla "domyślnych" linków:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Linki wstawiane za pośrednictwem CMS, które zwykle nie mają atrybutu class, będą wyróżnione bez wpływu na kaskadę.

Powrót do spisu treści

Spójny rytm pionowy

Użyj uniwersalnego selektora (*) wewnątrz elementu, aby stworzyć spójny rytm pionowy:

.intro > * {
  margin-bottom: 1.25rem;
}

Consistent vertical rhythm provides a visual aesthetic that makes content far more readable.

Powrót do spisu treści

Wewnętrzne proporcje bloków

Aby utworzyć pola, które posiada wewnętrzne proporcje, wystarczy zastosować górny lub dolny margines do elementu div:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Użycie 20% wypełnienia (padding) sprawia, że wysokość bloku jest równa 20% jego szerokości. Bez względu na szerokość okna roboczego (viewport), element div zachowa swój współczynnik proporcji (100% / 20% = 5:1).

Demonstracja

powrót do spisu treści

Wystylizuj uszkodzone obrazy

Spraw, aby uszkodzone obrazy były bardziej estetyczne z użyciem odrobiny CSS:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Następnie dodaj reguły pseudoelementów, aby wyświetlić komunikat użytkownika i adres URL uszkodzonego obrazu:

img::before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Dowiedz się więcej o stylizacji używając tego wzoru w oryginalnym originalny artykule Ire Aderinokun.

powrót do spisu treści

Użyj rem dla ustawień globalnych rozmiarow i em do ustawień localnych

Po ustawieniu podstawowego rozmiaru czcionki w katalogu głównym (html { font-size: 100%; }), ustaw rozmiar czcionki dla elementów tekstowych na em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Następnie ustaw rozmiar czcionki dla modułów na rem`:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Teraz każdy moduł jest podzielony na sekcje. Sprawia to żę stylizacja i utrzymanie kodu jest łątwiejsze.

powrót do spisu treści

Ukryj filmy z autoodtwarzaniem, które nie są wyciszone

To świetna sztuczka dla niestandardowego arkusza stylów użytkownika. Unikaj przeciążania użytkownika dźwiękiem z filmu, który odtwarza się automatycznie po wczytaniu strony. Jeśli dźwięk nie jest wyciszony, nie pokazuj widea:

video[autoplay]:not([muted]) {
  display: none;
}

Po raz kolejny wykorzystujemy pseudo-klasę :not()

[Powrót do spisu treści](#Powrót-do-spisu-treści

Użyj :root dla elastycznych typów

Rozmiar czcionki typowej w elastyczny układzie (responsive layout) powinien być dostosowywany dla każdego ekranu. Możesz obliczyć rozmiar czcionki na podstawie wysokości i szerokości okna roboczego używając :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Następnie możesz użyć jednostkiroot em na podstawie wartości obliczonej przez :root:

body {
  font: 1rem/1.6 sans-serif;
}

Demonstracja

powrót do spisu treści

Ustaw rozmiar czcionki w elementach formularza

Aby uniknąć korzystania z przeglądarek komórkowych (iOS Safari etc.) podczas powiększania elementów formularzy HTML, po dotknięciu menu rozwijanego <select> dnależy dodać font-size do reguły selektora:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

Powrót do spisu treści

Użyj zdarzeń wskaźnika do sterowania zdarzeniami myszy

Pointer events umożliwiają określenie sposobu interakcji myszy z elementem, na które kilka. Aby wyłączyć domyślne zdarzenie wskaźnika na przycisku, na przykład:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

To takie proste.

Powrót do spisu treści

Wsparcie

Wersje aktualne Chrome, Firefox, Safari, Opera, Edge, and IE11.

Powrót do spisu treści