10 niezbędnych tricków CSS, które ułatwią Ci życie

W codziennej pracy z arkuszami stylów niejednokrotnie spotykamy sytuacje, które stają się wyzwaniem. W zależności od tego, na ile jesteśmy doświadczeni, wyzwaniem można nazwać zupełnie inne rzeczy. Dodatkowo nie zawsze możemy, z różnych względów, posłużyć się dobrodziejstwem rozwiązań takich, jak na przykład model Flexbox. Dlatego postaram się przybliżyć wam sztuczki CSS, które warto znać i stosować jeżeli będziecie mieli taką potrzebę.

Sztuczki CSS – Zmienne

Przez długie lata używanie zmiennych w czystym CSS-ie było niemożliwe. Stosowano preprocesory takie jak LESS czy SCSS by usprawnić sobie pracę. Reużywalne kolory, fonty, wymiary ustalane z jednego miejsca w kodzie, to tylko niektóre z możliwych zastosowań zmiennych.

Jeśli jedynym, do czego używaliście preprocesora były zmienne, ucieszycie się zapewne, że wsparcie dla zmiennych w CSS3 zapewnia już ponad 85% rynku przeglądarek. Co prawda konstrukcja zmiennej w języku CSS wygląda dość karkołomnie, nie mniej da się. By używać zmiennych globalnie, należy zdefiniować je w elemencie :root. Tak wygląda to w praktyce:

:root {

--color-brand: #333333;

}

.element {

background-color: var(--color-brand);

}

Podwójne myślniki oznaczają, że wartość jest zmienną. Konstrukcja wyglada dziwnie, ale korzystając ze zmiennych na czystym CSS-ie można osiągnąć wiele ciekawych efektów. Zmienne są wrażliwe na wielkość znaków, więc –zmienna, to nie to samo, co –ZMIENNA.

Likwidowanie odstępów między elementami liniowo-blokowymi

Możliwe, że spotkaliście się kiedyś z problemem umieszczania elementów liniowo-blokowych obok siebie. Prawdopodobnie zauważyliście, że przeglądarki lubią sobie między takimi elementami umieścić odstępy. Oczywiście można sprawę załatwić floatem, puścić commit, pusha, rzucić za siebie odpaloną zapałkę i wyjść w zwolnionym tempie z biura. Ale każdy szanujący się koder wie, że właściwość float służy do manipulowania elementami względem tekstu.

Jak zatem poradzić sobie z piekłem elementów inline-block nie stosując praktyk sprzed kilkunastu lat?Na poradzenie sobie z tym problemem istnieje kilka rozwiązań. Z moich obserwacji wynika jednak, że najsensowniejszym jest nadanie elementom prawego marginesu o wartości -4px. Wygląda niepoważnie, ale działa na każdej liczącej się przeglądarce.

Pozbycie się floata w tym rzypadku może spowodować też inny problem. Elementy będące obok siebie, zaczną układać się w “schodki”. Rozwiązaniem jest dodanie im właściwości:

vertical-align: top;

Zaawansowane odwołania do elementów

Czasem może się zdarzyć tak, że musimy nadać styl na przykład tylko pierwszemu elementowi bezpośrednio za konkretnym wskazanym. Albo pierwszemu napotkanemu po wskazanym. Częściej jest tak, gdy nie mamy za bardzo wpływu na HTML, a potrzebujemy się dobrać do konkretnego elementu. Dziś CSS oferuje bardziej złożone selektory niż dawniej.

Stylowanie elementu .b znajdującego się bezpośrednio za .a:

 .a + .b {}

Stylowanie pierwszego napotkanego elementu .x znajdującego się za elementem .n:

 .n ~ .x {}

Stylowanie parzystych i nieparzystych elementów

 .n:nth-child(even) {}
 .n:nth-child(odd) {}

Pierwszy przypadek można użyć na przykład nadając niestandardowe stylowanie radiobuttonom lub checboksom, w połączeniu z labelkami.

Ładne radiobuttony i checkoboxy

Coraz częściej musimy radzić sobie z sytuacją, w której wspomniane elementy potrzebują własnego, dostosowanego do całego layoutu stylowania. Wykorzystując sztuczki współczesnego CSSa, staje się to banalnie proste! Warunkiem jest konkretna struktura HTMLa, gdzie label znajduje się za kontrolką:

Teraz możemy zacząć działać. Najpierw ukrywamy input…

.checkbox { display: none; }

.checkbox + label { position: relative; padding-left: 32px; }

.checkbox + label::before, .checkbox + label::after { content: ''; position: absolute; }

Teraz od nas zależy, jak ostylujemy pseudoelementy :before i :after. To one będą naszym wizualnym checkboxem (ja najczęściej wykorzystuję :before jako tło, a :after jako “fajkę”). Konstrukcja odpowiedzialna za ostylowanie w momencie, gdy checkbox jest zaznaczony wyglądać będzie tak:

.checkbox:checked + label::before {}

I analogicznie dla :after. Dodając do tego animacje, można uzyskać naprawdę ciekawe efekty.

Niech paddingi nie dodają elementom wymiarów

Standardowym zachowaniem elementów blokowych w przeglądarkach, gdy mają nadane paddingi, jest ich doliczanie do nadanych już wymiarów. Z czasem takie zachowanie może stanowić nie lada wyzwanie przy rozbudowie projektu. Istnieje proste, intuicyjne rozwiązanie sprawiające, że paddingi nie będą nam utrudniac życia. Wystarczy problematycznemu elementowi dopisać wartość:

.element { box-sizing: border-box; }

I problem z głowy. Koniec z konstrukcjami typu width: calc(100% – 20px) 😉

Box-shadow jako border

Przypuśćmy, że mamy w linii kilka przycisków, jeden z nich po najechaniu myszą dostaje dwupikselowe obramowanie. Sąsiedzi zostają rozepchani na boki, czemu towarzyczy brzydki “skok”. Wyjściem może być zastosowanie właściwości box-shadow, jako bordera.

.button:hover { box-shadow: 0 0 2px 0 #444; }

Trzecie zero sprawia, że cień staje się “twardy”. Jeśli nie chcecie stosować cienia, jako pseudo-bordera, tutaj pomóc może też rozwiązanie z punktu 5-go.

Stylowanie według atrybutów

Nie tylko po nazwie elementu, identyfikatorze czy klasie można się do niego dostać. Możliwe jest również stylowanie według atrybutów. Przykładowo:

a[href*="synergylab.pl"] { color: red; }

Ostyluje tylko linki do naszej strony na kolor czerwony.
W miejscu gwiazdki moga wystąpić też inne operatory. Gwiazdka wskazuje na to, że ciąg znaków w atrybucie “href” musi zawierać wskazany przez nas ciąg. Równie ciekawe to $ i ^, które odpowiednio oznaczają, że ciąg kończy się wskazanym bądź zaczyna. Dzięki temu możemy przykładowo ostylować linki do plików w zależności od ich rozszerzenia:

a[href$=".pdf" i] { color: red; }

Literka “i” przed zamknięciem nawiazu kwadratowego to nie jest literówka. Wskazuje ona na to, że przeglądarka ma ignorować wielkość znaków.

Więcej niż jedno tło elementu

Zdarza się, że potrzebujemy umieścić w elemencie więcej niż jedno tło. To banalnie proste, wystarczy rozdzielić sytle przecinkiem:

.a {

background-image: url('test.png'), url('test-a.png');

}

Pamiętajcie, że w takim wypadku stosujemy osobne style również dla innych atrybutów odnoszących się do tła, takich jka jego powtarzanie, wymiary itp..

Sowa po lobotomii

To bardzo szerokie zagadnienie nadające się wręcz na osobny wykład. Tytuł tego punktu nie jest tylko radosną twórczościa autora. Termin “Lobotomised Owl” istnieje i odnosi się do sytuacji, w której wykorzystujemy składnię z punktu 3.1 do powielonychlementów. Bardzo ogólnie termin odnosi się do konstrukcji:

* + * 

Przykładowo dzięki tej składni możemy każdemu elementowi listy posiadającemu kolejnego sąsiada nadawać dolny margines. Tym samym ostatni element listy nie otrzyma odstępu:

li + li { margin-bottom: 10px }

To samo można osiągnąć oczywiście stosując konstrukcję li:last-of-type { margin-bottom: 0 } ale po co nadpisywać wartości 😉

Trochę inne centrowanie elementu względem rodzica

Tak, teraz mamy Flexbox, ale nie zawsze możemy go nistety stosować (np. ze względu na wspieranie starszych przeglądarek). Jednym z ciekawszych sposobów na wyśrodkowanie elementu wewnątrz rodzica jest poniższa konstrukcja:

.parent { width: 100%; height: 800px; position: relative; }

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Oczywiście CSS pozwala na wiele, trików znalazłoby się dużo więcej. Wiele z problemów, jakie trapiły przez długie lata CSS rozwiązują współczesne rozwiązania takie jak wspomniany model Flexbox, czy CSS Grid.