{"id":341,"date":"2022-03-03T09:01:29","date_gmt":"2022-03-03T09:01:29","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=341"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"przydatne-wlasciwosci-css","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/przydatne-wlasciwosci-css\/","title":{"rendered":"Przydatne w\u0142a\u015bciwo\u015bci CSS, kt\u00f3re prawdopodobnie znajd\u0105 zastosowanie w Twoich projektach"},"content":{"rendered":"\n

W sieci mo\u017cna znale\u017a\u0107 wiele artyku\u0142\u00f3w pokazuj\u0105cych ciekawe, rzadko wykorzystywane czy zapomniane w\u0142a\u015bciwo\u015bci CSS, kt\u00f3re koniecznie musimy wykorzysta\u0107 w swoich projektach. Niestety cz\u0119sto przedstawione tipy mo\u017cemy potraktowa\u0107 tylko jako ciekawostk\u0119, kt\u00f3ra przyda nam si\u0119 raz w karierze developera, zdarza si\u0119 r\u00f3wnie\u017c, \u017ce zaprezentowane w\u0142a\u015bciwo\u015bci s\u0105 na poziomie eksperymentalnym i nie mo\u017cemy u\u017cy\u0107 ich w komercyjnym projekcie.<\/strong><\/p>\n\n\n\n

Dzisiaj chcia\u0142bym przedstawi\u0107 kilka w\u0142a\u015bciwo\u015bci, kt\u00f3re rzadko znajduje wykonuj\u0105c code review, a kt\u00f3re prawdopodobnie znajd\u0105 wykorzystanie w wielu Waszych projektach. Dla ka\u017cdej z w\u0142a\u015bciwo\u015bci postaram si\u0119 poda\u0107 konkretny przyk\u0142ad u\u017cycia.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Flex Gap<\/h3>\n\n\n\n

Bardzo przydatna i cz\u0119sto pomijana w\u0142a\u015bciwo\u015b\u0107 gap<\/em> s\u0142u\u017c\u0105ca do okre\u015blania odst\u0119p\u00f3w mi\u0119dzy elementami uk\u0142adu zbudowanego za pomoc\u0105 flexboxa. Jeszcze do niedawna sam tworz\u0105c layout kolumnowy do zarz\u0105dzania odleg\u0142o\u015bciami mi\u0119dzy kolumnami wykorzysta\u0142em albo marginesy lub ujemne marginesy dla wrappera i padding dla element\u00f3w wewn\u0105trz. Takie podej\u015bcie wymaga\u0142o wi\u0119kszej ilo\u015bci kodu, dodatkowym problemem by\u0142y odleg\u0142o\u015bci w pionie, kt\u00f3re cz\u0119sto chcemy wy\u0142\u0105czy\u0107 dla ostatniego rz\u0119du, przy zmieniaj\u0105cych si\u0119 ilo\u015bciach kolumn generowa\u0142o to du\u017co niepotrzebnej zabawy z nth-child.<\/p>\n\n\n\n

W\u0142a\u015bciwo\u015b\u0107 gap pozwala nam na ustalenie tych odleg\u0142o\u015bci bez konieczno\u015bci ustawiania dodatkowych margines\u00f3w, padding\u00f3w czy korzystania z nth-child dla wy\u0142\u0105czenia tych margines\u00f3w.<\/p>\n\n\n\n

Przyk\u0142ad u\u017cycia<\/h5>\n\n\n
.columns<\/span> {\n  display<\/span>: flex;\n  flex-wrap<\/span>: wrap;\n  gap<\/span>: 10px<\/span>;\n}\n\n.culumns<\/span> .item<\/span> {\n  flex-basis<\/span>: calc<\/span>(33.333%<\/span> - 20px<\/span>\/3<\/span>);\n  max-width<\/span>: calc<\/span>(33.333%<\/span> - 20px<\/span>\/3<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
W tym przyk\u0142adzie elementy z klas\u0105 .item<\/code> znajduj\u0105ce si\u0119 w elemencie z klas\u0105 .columns<\/code> b\u0119d\u0105 mia\u0142y 1\/3 szeroko\u015bci, a odleg\u0142o\u015b\u0107 mi\u0119dzy tymi elementami b\u0119dzie wynosi\u0142a 10px, zar\u00f3wno w pionie jak i w poziomie. Przy wykorzystaniu gap<\/code> konieczne jest odj\u0119cie od szeroko\u015bci kolumny obszaru, kt\u00f3ry zostanie wykorzystany na odst\u0119py. W naszym przyk\u0142adzie gap ustawiony jest na 10px<\/code>, chcemy wy\u015bwietli\u0107 3 elementy w rz\u0119dzie, co oznacza, \u017ce b\u0119dziemy mieli dwie przestrzenie po 10px mi\u0119dzy 3 elementami. Dlatego od 33.333% szeroko\u015bci ka\u017cdej kolumny odejmujemy 20px dzielone na 3. Oczywi\u015bcie w\u0142a\u015bciwo\u015b\u0107 gap mo\u017cna ustawi\u0107 osobno dla obu osi, je\u015bli chcemy by odst\u0119py poziome wynosi\u0142y 10px, a pionowe 0, wystarczy u\u017cy\u0107 gap: 0 10px<\/code>.<\/p>\n\n\n\n
Text-overflow oraz -webkit-line-clamp<\/h3>\n\n\n\n
Kafelki z zajawk\u0105 wpisu s\u0105 nieod\u0142\u0105cznym elementem wielu witryn internetowych. Cz\u0119sto projektanci ograniczaj\u0105 ilo\u015b\u0107 tre\u015bci w takiej zajawce dodaj\u0105c na ko\u0144cu wielokropek. Je\u015bli zajawka ma mie\u0107 maksymalnie jedn\u0105 linijk\u0119 mo\u017cemy wykorzysta\u0107 w\u0142a\u015bciwo\u015b\u0107 text-overflow z parametrem ellipsis.<\/p>\n\n\n\n
Przyk\u0142ad wykorzystania:<\/h5>\n\n\n
p<\/span> {\n  text-overflow<\/span>: ellipsis;\n  white-space<\/span>: nowrap;\n  overflow<\/span>: hidden;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Takie style dodane dla paragrafu spowoduj\u0105, \u017ce wy\u015bwietli si\u0119 on w postaci jednej linii, bez znaczenia jak d\u0142ugi faktycznie b\u0119dzie, a na jego ko\u0144cu zostanie dodany wielokropek.<\/p>\n\n\n\n
Okej, text-overflow jest do\u015b\u0107 znany i wykorzystywany, ale co w przypadku gdy musimy uci\u0105\u0107 tekst nie po jednej linii, ale np. po trzech i r\u00f3wnie\u017c chcemy doda\u0107 na ko\u0144cu wielokropek? Tutaj text-overflow: ellipsis nie zadzia\u0142a, jednak mo\u017cemy skorzysta\u0107 z w\u0142a\u015bciwo\u015bci line-clamp<\/code>.<\/p>\n\n\n\n
Przyk\u0142ad u\u017cycia:<\/h5>\n\n\n
p<\/span> {  \n  display<\/span>: -webkit-box;\n  -webkit-line-clamp<\/span>: 3<\/span>;\n  -webkit-box-orient<\/span>: vertical;  \n  overflow<\/span>: hidden;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Aby line-clamp dzia\u0142a\u0142 prawid\u0142owo na element musi zosta\u0107 na\u0142o\u017cona w\u0142a\u015bciwo\u015b\u0107 display z parametrem -webkit-box<\/code>, a sama w\u0142a\u015bciwo\u015b\u0107 line-clamp<\/code> musi zosta\u0107 podana z prefixem -webkit<\/code>. Rozwi\u0105zanie te nie jest w 100% wspierane, ale jak mo\u017cemy zobaczy\u0107 na Can I Use<\/a> wsparcie z prefixem -webkit<\/code> wyst\u0119puje we wszystkich popularnych przegl\u0105darkach, mo\u017cemy wi\u0119c z niego spokojnie korzysta\u0107 we wszystkich projektach, kt\u00f3re nie wymagaj\u0105 wsparcia dla starszych przegl\u0105darek.<\/p>\n\n\n\n
@supports<\/h3>\n\n\n\n
Jest to regu\u0142a, kt\u00f3ra pozwala sprawdza\u0107 czy dana przegl\u0105darka obs\u0142uguje konkretn\u0105 w\u0142a\u015bciwo\u015b\u0107 CSS. Cz\u0119sto kusi nas by u\u017cy\u0107 rozwi\u0105zania, kt\u00f3re nie ma pe\u0142nego wsparcia dla wszystkich wersji przegl\u0105darek, dla kt\u00f3rych musimy te wsparcie zagwarantowa\u0107. W takim przypadku zazwyczaj rezygnujemy z jakiego\u015b rozwi\u0105zania czy efektu i wdra\u017camy gorsze, maj\u0105ce pe\u0142ne wsparcie. Moim zdaniem zamiast r\u00f3wna\u0107 w d\u00f3\u0142 dla przegl\u0105darki, kt\u00f3rej u\u017cywa 2% internetu, lepiej r\u00f3wna\u0107 w g\u00f3r\u0119, w czym pomo\u017ce nam regu\u0142a @supports<\/code>.<\/p>\n\n\n\n
Przyk\u0142ad u\u017cycia:<\/h5>\n\n\n
@supports<\/span> (display:<\/span> grid) {\n  .classname<\/span> {\n    display<\/span>: grid;\n  }\n}\n\n.classname<\/span> {\n  display<\/span>: flex;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
W powy\u017cszym przyk\u0142adzie sprawdzamy czy przegl\u0105darka wspiera CSS Grid Layout, je\u015bli tak to dla elementu z klas\u0105 classname<\/code> dodana zostanie w\u0142a\u015bciwo\u015b\u0107 display z warto\u015bci\u0105 grid, je\u015bli za\u015b przegl\u0105darka nie wspiera grida to element classname<\/code> otrzyma w\u0142a\u015bciwo\u015b\u0107 display z warto\u015bci\u0105 flex.<\/p>\n\n\n\n
Columns<\/h3>\n\n\n\n
Potrzebujesz roz\u0142o\u017cy\u0107 list\u0119 wypunktowan\u0105 na kilka kolumn lub stworzy\u0107 prosty layout w stylu masonry? Mo\u017cesz wykorzysta\u0107 nie tylko layout oparty na gridzie i flexie, do dyspozycji jest r\u00f3wnie\u017c w\u0142a\u015bciwo\u015b\u0107 columns<\/code>, kt\u00f3ra jest shorthandem dw\u00f3ch w\u0142a\u015bciwo\u015bci: column-width<\/code> oraz column-count<\/code>. Pierwsza z nich okre\u015bla szeroko\u015b\u0107 kolumny, druga liczb\u0119 kolumn. Do okre\u015blenia odleg\u0142o\u015bci mi\u0119dzy kolumnami mo\u017cemy wykorzysta\u0107 w\u0142a\u015bciwo\u015b\u0107 column-gap<\/code>.<\/p>\n\n\n\n
Dodatkow\u0105, przydatna w\u0142a\u015bciwo\u015bci\u0105 jest break-inside<\/code>, kt\u00f3re pos\u0142u\u017cy do zablokowania \u0142amania si\u0119 element\u00f3w mi\u0119dzy kolumnami. Domy\u015blnie ustawienie column-count: 2;<\/code> na np. list\u0119 wypunktowan\u0105 mo\u017ce spowodowa\u0107, \u017ce zawarto\u015b\u0107 ostatniego li<\/code> w pierwszej kolumnie zostanie cz\u0119\u015bciowo przeniesiona do drugiej kolumny. Aby temu zapobiec wystarczy dla tagu <li><\/code> doda\u0107 w\u0142a\u015bciwo\u015b\u0107 break-inside<\/code> z warto\u015bci\u0105 avoid-column<\/code>.<\/p>\n\n\n\n
Przyk\u0142ad u\u017cycia:<\/h5>\n\n\n
.ul<\/span> {\n  column-count<\/span>: 2<\/span>;\n  column-gap<\/span>: 2rem<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n","protected":false},"excerpt":{"rendered":"
W sieci mo\u017cna znale\u017a\u0107 wiele artyku\u0142\u00f3w pokazuj\u0105cych ciekawe, rzadko wykorzystywane czy zapomniane w\u0142a\u015bciwo\u015bci CSS, kt\u00f3re koniecznie musimy wykorzysta\u0107 w swoich projektach. Niestety cz\u0119sto przedstawione tipy mo\u017cemy potraktowa\u0107 tylko jako ciekawostk\u0119, kt\u00f3ra przyda nam si\u0119 raz w karierze developera, zdarza si\u0119 r\u00f3wnie\u017c, \u017ce zaprezentowane w\u0142a\u015bciwo\u015bci s\u0105 na poziomie eksperymentalnym i nie mo\u017cemy u\u017cy\u0107 ich w komercyjnym […]<\/p>\n","protected":false},"author":7,"featured_media":345,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4],"tags":[33,77,78,80],"class_list":["post-341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-web-development","tag-css","tag-flex-gap","tag-text-overflow","tag-webkit-line-clamp"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":12,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":692,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/341\/revisions\/692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/345"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}