polish translation

[Justino96]

Hello Mate,

I have noticed you have a wide variety of languages. I am going to add Polish into it and send you the results.

Thank you Justin Oliver

[Justino96]

wskazówki CSS

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

W potrzebue innych wspaniałych list sprawdź zobacz @sindresorhus's curated list of awesome lists.

Powrót do spisu treści

• Wskazowki
• Wsparcie
• Tłumaczenia
• Wskazówki dotyczące wkładu

Wskazowki

1. Reset CSS
2. Odziedzicz box-sizing
3. [Użyj :not() aby zastosować / anulować ograniczenia w nawigacji](#Użyj-not-to-aby-zastosować / anulować-ograniczenia-w-nawigacji)
4. Dodaj line-height do body
5. Przesuń cokoliweg pionowo
6. Listy rozdziele przecinkami
7. Wybierz przedmioty za pomocą negatywnego nth-child
8. Użyj SVG dla ikon
9. Użyj selektora "Lobotomized Owl"
10. Użyj max-height dla suwaków Pure CSS
11. Równoważne komórki tabeli
12. Pozbądź się margin za pomocą Flexbox
13. Użyj selektorów atrybutów z pustymi linkami
14. Linki w stylu "Default"
15. Spójny pionowy rytm
16. Indywidualne pola wyników
17. Wystylizuj Uszkodzone Obrazy
18. Użyj rem for Global Sizing; Użyj em for Local Sizing
19. Ukryj filmy z autoodtwarzaniem, które nie są wyciszone
20. Użyj :root for Flexible Type
21. Ustaw font-size w elementach formularza, aby uzyskać lepsze wrażenia z urządzenia mobilnego

Użyj resetowania CSS

Resetowanie CSS wspomaga wymuszać spójność stylu w różnych przeglądarkach z czystym konturem dla elementów stylizacyjnych. Kożystanie z biblioteki resetującej CSS, takiej jak Normalize i innie, lub użycie bardzije 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

Demo

Uwaga: Używanie poniższej wskazówki dotyczącej Inherit box-sizing może nie uwzględniać właściwości box-sizing w resetowaniu CSS.

^{powrót do spisu treści}

Odziedzicz box-sizing

Niech box-sizing zostanie odziedziczony z html:

html {
  box-sizing: border-box;
}

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

Ułatwia to zmianę rozmiaru skrzynek w wtyczkach lub innych komponentach, które wykorzystują inne zachowanie.

^{powrót do spisu treści}

Use :not() to Apply/Unapply Borders on Navigation

Zamiast zakładać granicę...

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

...a następnie zdejmując go z ostatniego elementu ...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...użyj :not() pseudo-klasy aby zastosować tylko do potrzebnych elementów:

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

Można też użyć .nav li + li lub nawet .nav li:first-child ~ li, ale z :not() intencja jest bardzo jasna, a selektor CSS definiuje granicę w sposób opisany przez człowieka.

Demo

^{Powrót do spisu treści}

Dodaj wysokość linii do treści

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

treści {
wysokości linii: 1.5;
}

W ten sposób elementy tekstowe mogą łatwo korzystać z treści.

Demo

^{Powrót do spisu treścis}

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;
}

Chcesz coś przeniesc? Wertykalnie, poziomo ... cokolwiek, zawsze i wszędzie CSS-Tricks ma a nice write-up dobre instrukcje na ten temat.

Uwaga: Uważaj na pewne błędne zachowanie z Flexbox w IE11.

Demo

^{Powrót do spisu treści}

Listy podzielone przecinkami

Elementy listy wyglądają jak prawdziwa, oddzielona przecinkami lista:

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

Użyj :not() pseudo-klasy aby do ostatniego elementu nie dodano przecinka.

Uwaga: ta wskazówka może nie być idealna dla ułatwień dostępu, w szczególności czytników ekranu.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 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 using :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.

Demo

^{Powrót do spisu treści}

Użyj SVG dla ikon

Nie ma powodu, aby nie używać SVG do 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"

Może mieć dziwną nazwę, ale użycie uniwersalnego (*) z sąsiednim selektorem rodzeństwa (+) może zapewnić potężne możliwości CSS:

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

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

Aby uzyskać więcej informacji na temat selektora "lobotomized owl", przeczytaj wpis Heydon'a Pickering na A List Apart.

Demo

^{Powrót do spisu treści}

Użyjmax-height dla suwaków Pure CSSs

Zaimplementuj suwaki CSS max-height Wysokości 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}

Równoważne komórki tabeli

Tabele mogą być uciążliwe, więc spróbuj table-layout: fixed aby utrzymać komórki na jednakowej szerokości:

.calendar {
  table-layout: fixed;
}

Bezbolesne układy stołów.

Demo

^{Powrót do spisu treści}

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

Podczas pracy z rynnami kolumnowymi możesz pozbyć się nth-, first-, i last-child za pomocą właściwości spacji między fleksami space-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 ma link:

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

a To całkiem wygodne.

Demo

^{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;
}

Teraz linki wstawiane za pośrednictwem CMS, które zwykle nie mają atrybutu class, będą miały rozróżnienie bez generalnie wpływającego na kaskadę.

^{Powrót do spisu treści}

Spójny pionowy rytm

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

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

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

^{Powrót do spisu treści}

Indywidualne pola wyników

Aby utworzyć pole o wewnętrznym współczynniku, 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% do wypełnienia sprawia, że wysokość pudełka jest równa 20% jego szerokości. Bez względu na szerokość rzutni, element div zachowa swój współczynnik proporcji (100% / 20% = 5:1).

Demo

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

Wystylizuj Uszkodzone Obrazy

Spraw, aby uszkodzone obrazy były bardziej estetyczne z odrobiną CSS:

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

Teraz 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 tego wzoru w oryginalnym poście Ire Aderinokun. Ire Aderinokun's originalny post.

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

Użyj rem dla Global Sizing; Użyj em dla Local Sizing

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 i łatwiejszy do ułożenia, łatwiejszy w utrzymaniu i bardziej elastyczny. .

^{[Powrót do spisu treści](#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 wideo:

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 Tryp Elastyczny

Rozmiar czcionki typowej w responsywnym układzie powinien być dostosowywany dla każdej rzutni. Możesz obliczyć rozmiar czcionki na podstawie wysokości i szerokości widoku, używając :root:

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

Now you can utilize the root em unit based on the value calculated by :root:

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

Demo

^{Powrót do spisu treści}

Set font-size on Form Elements for a Better Mobile Experience

Aby uniknąć korzystania z przeglądarek komurkowych (iOS Safari, et al.) 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;
}

:tancerz:

^{Powrót do spisu treści}

Wsparcie

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

^{Powrót do spisu treści}

Tłumaczenia

• Español
• Français
• Italiano
• 日本語
• Português do Brasil
• Русский
• 简体中文
• Polski

^{Powrót do spisu treści}

[AllThingsSmitty]

This is great! Thanks!