webdevs.blog PL

W sieci można znaleźć wiele artykułów pokazujących ciekawe, rzadko wykorzystywane czy zapomniane właściwości CSS, które koniecznie musimy wykorzystać w swoich projektach. Niestety często przedstawione tipy możemy potraktować tylko jako ciekawostkę, która przyda nam się raz w karierze developera, zdarza się również, że zaprezentowane właściwości są na poziomie eksperymentalnym i nie możemy użyć ich w komercyjnym projekcie.

Dzisiaj chciałbym przedstawić kilka właściwości, które rzadko znajduje wykonując code review, a które prawdopodobnie znajdą wykorzystanie w wielu Waszych projektach. Dla każdej z właściwości postaram się podać konkretny przykład użycia.

Flex Gap

Bardzo przydatna i często pomijana właściwość gap służąca do określania odstępów między elementami układu zbudowanego za pomocą flexboxa. Jeszcze do niedawna sam tworząc layout kolumnowy do zarządzania odległościami między kolumnami wykorzystałem albo marginesy lub ujemne marginesy dla wrappera i padding dla elementów wewnątrz. Takie podejście wymagało większej ilości kodu, dodatkowym problemem były odległości w pionie, które często chcemy wyłączyć dla ostatniego rzędu, przy zmieniających się ilościach kolumn generowało to dużo niepotrzebnej zabawy z nth-child.

Właściwość gap pozwala nam na ustalenie tych odległości bez konieczności ustawiania dodatkowych marginesów, paddingów czy korzystania z nth-child dla wyłączenia tych marginesów.

Przykład użycia

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.culumns .item {
  flex-basis: calc(33.333% - 20px/3);
  max-width: calc(33.333% - 20px/3);
}Code language: CSS (css)

W tym przykładzie elementy z klasą .item znajdujące się w elemencie z klasą .columns będą miały 1/3 szerokości, a odległość między tymi elementami będzie wynosiła 10px, zarówno w pionie jak i w poziomie. Przy wykorzystaniu gap konieczne jest odjęcie od szerokości kolumny obszaru, który zostanie wykorzystany na odstępy. W naszym przykładzie gap ustawiony jest na 10px, chcemy wyświetlić 3 elementy w rzędzie, co oznacza, że będziemy mieli dwie przestrzenie po 10px między 3 elementami. Dlatego od 33.333% szerokości każdej kolumny odejmujemy 20px dzielone na 3. Oczywiście właściwość gap można ustawić osobno dla obu osi, jeśli chcemy by odstępy poziome wynosiły 10px, a pionowe 0, wystarczy użyć gap: 0 10px.

Text-overflow oraz -webkit-line-clamp

Kafelki z zajawką wpisu są nieodłącznym elementem wielu witryn internetowych. Często projektanci ograniczają ilość treści w takiej zajawce dodając na końcu wielokropek. Jeśli zajawka ma mieć maksymalnie jedną linijkę możemy wykorzystać właściwość text-overflow z parametrem ellipsis.

Przykład wykorzystania:

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}Code language: CSS (css)

Takie style dodane dla paragrafu spowodują, że wyświetli się on w postaci jednej linii, bez znaczenia jak długi faktycznie będzie, a na jego końcu zostanie dodany wielokropek.

Okej, text-overflow jest dość znany i wykorzystywany, ale co w przypadku gdy musimy uciąć tekst nie po jednej linii, ale np. po trzech i również chcemy dodać na końcu wielokropek? Tutaj text-overflow: ellipsis nie zadziała, jednak możemy skorzystać z właściwości line-clamp.

Przykład użycia:

p {  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}Code language: CSS (css)

Aby line-clamp działał prawidłowo na element musi zostać nałożona właściwość display z parametrem -webkit-box, a sama właściwość line-clamp musi zostać podana z prefixem -webkit. Rozwiązanie te nie jest w 100% wspierane, ale jak możemy zobaczyć na Can I Use wsparcie z prefixem -webkit występuje we wszystkich popularnych przeglądarkach, możemy więc z niego spokojnie korzystać we wszystkich projektach, które nie wymagają wsparcia dla starszych przeglądarek.

@supports

Jest to reguła, która pozwala sprawdzać czy dana przeglądarka obsługuje konkretną właściwość CSS. Często kusi nas by użyć rozwiązania, które nie ma pełnego wsparcia dla wszystkich wersji przeglądarek, dla których musimy te wsparcie zagwarantować. W takim przypadku zazwyczaj rezygnujemy z jakiegoś rozwiązania czy efektu i wdrażamy gorsze, mające pełne wsparcie. Moim zdaniem zamiast równać w dół dla przeglądarki, której używa 2% internetu, lepiej równać w górę, w czym pomoże nam reguła @supports.

Przykład użycia:

@supports (display: grid) {
  .classname {
    display: grid;
  }
}

.classname {
  display: flex;
}Code language: CSS (css)

W powyższym przykładzie sprawdzamy czy przeglądarka wspiera CSS Grid Layout, jeśli tak to dla elementu z klasą classname dodana zostanie właściwość display z wartością grid, jeśli zaś przeglądarka nie wspiera grida to element classname otrzyma właściwość display z wartością flex.

Columns

Potrzebujesz rozłożyć listę wypunktowaną na kilka kolumn lub stworzyć prosty layout w stylu masonry? Możesz wykorzystać nie tylko layout oparty na gridzie i flexie, do dyspozycji jest również właściwość columns, która jest shorthandem dwóch właściwości: column-width oraz column-count. Pierwsza z nich określa szerokość kolumny, druga liczbę kolumn. Do określenia odległości między kolumnami możemy wykorzystać właściwość column-gap.

Dodatkową, przydatna właściwością jest break-inside, które posłuży do zablokowania łamania się elementów między kolumnami. Domyślnie ustawienie column-count: 2; na np. listę wypunktowaną może spowodować, że zawartość ostatniego li w pierwszej kolumnie zostanie częściowo przeniesiona do drugiej kolumny. Aby temu zapobiec wystarczy dla tagu <li> dodać właściwość break-inside z wartością avoid-column.

Przykład użycia:

.ul {
  column-count: 2;
  column-gap: 2rem;
}Code language: CSS (css)