Tailwind CSS – migracja z wersji 2 do 3


19 kwietnia 2022 / Michał Kortas


Tailwind CSS w wersji 3 przynosi użytkownikom szereg usprawnień w porównaniu do swojego poprzednika. Na szczęście migracja pomiędzy wersjami nie powoduje przyśpieszonego siwienia włosów, jednak jest kilka elementów, na które trzeba zwrócić uwagę.

Aby nie duplikować treści, odsyłam Cię do mojego wpisu na blogu tailwind.pl.

Jeśli potrzebujesz skondensowanej dawki wiedzy na temat Tailwind CSS, przeczytaj koniecznie moją książkę! Tailwind CSS. Projektowanie stron WWW i podejście utility-first.


Tagi:


Scroll Snap – polepszanie zachowania przesuwanych elementów


25 sierpnia 2021 / Michał Kortas


Czy spotkałeś się z elementami na stronach internetowych, których przesuwanie i przeglądanie na urządzeniu mobilnym wołało o pomstę do nieba? Na pewno tak. To choćby różnego rodzaju karty informacyjne lub zdjęcia w galerii. Istnieje jednak sposób, który znacznie uprzyjemni korzystanie z nich, a wymaga dodania jedynie kilku linijek w CSS i znany jest pod nazwą Scroll-Snap. Continue reading Scroll Snap – polepszanie zachowania przesuwanych elementów


Tagi:


Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS


24 sierpnia 2021 / Michał Kortas


Słyszałem gdzieś kiedyś opinię, w której to blokowanie nagłówków tabeli z poziomu CSS działa tylko i wyłącznie w demach artykułów, w których się znajdują. Postaram się dzisiaj zagiąć czasoprzestrzeń tak, by końcowy efekt wyszedł z tej czarnej dziury przez horyzont zdarzeń i zadziałał również u Ciebie (oczywiście jeśli mówimy o najnowszych przeglądarkach).

Przygotowanie szkieletu tabeli

Tabela testowa będzie posiadała kilka kolumn i wiele wierszy, aby ukazać blokadę nagłówków w działaniu. Treścią się nie przejmujemy, dodając Lorem Ipsum.

Jeśli jesteś zainteresowany efektem końcowym, zerknij na poniższe GIFy lub odwiedź stronę: https://webroad.pl/demo/table-sticky-headers/

Nie chciałem rozciągać listingu w nieskończoność – powiel więc poniższą część <tbody> i zawarte w niej wiersze kilkadziesiąt razy, tak by pojawił się suwak pionowy.

Style tabeli, aby nie wyglądała zbyt surowo, niech będą następujące:

Efekt na ten moment:

Tabela z nagłówkami

Tabela z nagłówkami

Czas na część właściwą. Blokujemy nagłówki.

Blokowanie nagłówków przy przewijaniu strony w pionie

Najczęściej potrzebujemy właśnie tej blokady – górny wiersz nagłówka ma zostać przyklejony do górnej części ekranu. By uzyskać ten efekt w dokumencie HTML wystarczy dopisać do powyższej tabeli następujące kilka linijek kodu CSS:

Po odświeżeniu widoku i przewinięciu pionowym suwakiem nagłówek pozostanie na górze.

Zablokowany nagłówek poziomy tabeli

Zablokowany nagłówek poziomy tabeli

Blokowanie nagłówków przy przewijaniu strony w poziomie

Blokowanie pierwszej kolumny nie jest zbyt popularne, jednak często klient przyzwyczajony do blokad kolumn w Excelu może sobie zażyczyć i taką funkcjonalność.

Jeśli wcześniej nie zauważyłeś, spójrz ponownie na listing HTML tabeli, szczególnie na pierwszą kolumnę wiersza.

Zamiast <td> użyliśmy komórki <th> z atrybutem scope o wartości row. Mając tak przygotowaną kolumnę możemy teraz dodać odpowiednie style, aby ją zablokować.

Co otrzymaliśmy?

Zablokowany pionowy nagłówek tabeli

Zablokowany pionowy nagłówek tabeli

Super! Czy u Ciebie działa? :-)

Na co zwrócić uwagę przy blokowaniu nagłówków?

Kilka wskazówek do wdrażania blokady nagłówków zebrałem i wypisałem na poniższej liście:

  1. dodajemy z-index większy dla komórek w nagłówku poziomym, aby nagłówek pionowy chował się pod spód,
  2. jeśli blokujemy nagłówek przy przewijaniu pionowym określamy pozycję top lub bottom,
  3. jeśli blokujemy nagłówek przy przewijaniu poziomym określamy pozycję left lub right,
  4. dodajemy kolor tła do nagłówków, aby komórki przesuwane nie były widoczne przy przewijaniu po nimi,
  5. dodajemy cień, aby ukazać warstwy nadrzędne, jakimi są nagłówki.

Kod i demo

Kod z powyższego przykładu zamieściłem na GitHubie.

Demo możesz zobaczyć na specjalnie przygotowanej stronie.


Tagi:


Własne style CSS dla zaznaczonej frazy wskazanej w adresie URL za pomocą ::target-text


17 sierpnia 2021 / Michał Kortas


Ciekawostka, wspierana obecnie tylko przez Chromium, czyli selektor ::target-text – pozwala on na stylowanie zaznaczenia frazy w tekście strony internetowej na podstawie specjalnego parametru w adresie URL. Jak to działa? Continue reading Własne style CSS dla zaznaczonej frazy wskazanej w adresie URL za pomocą ::target-text


Tagi:


Współczynnik proporcji, czyli aspect-ratio w CSS


3 lutego 2021 / Michał Kortas


Nie tak dawno temu, bo w styczniu 2021 roku, pojawiło się w przeglądarkach Chrome i Edge wsparcie dla właściwości CSS, pozwalającej ustanowić współczynnik proporcji dla elementów HTML. Poniższym tekstem pozwolę sobie opisać to przydatne usprawnienie, czyli tzw. aspect-ratio.

Continue reading Współczynnik proporcji, czyli aspect-ratio w CSS


Tagi:


Dostosowywanie klawiatury urządzenia mobilnego w polach formularza


13 stycznia 2021 / Michał Kortas


Polami formularza możemy manipulować za pomocą atrybutu type. Nie zawsze jednak urządzenie mobilne wie dokładnie, jaką klawiaturę wysunąć użytkownikowi, szczególnie w różnego typu specyficznych przypadkach. Nie zawsze chcemy też polegać na domyślnym wyborze przeglądarki. Możemy temu w prosty sposób zaradzić i samodzielnie zdefiniować widok klawiatury urządzenia mobilnego. Continue reading Dostosowywanie klawiatury urządzenia mobilnego w polach formularza


Tagi:


Jak wyśrodkować element w kontenerze – 3 sposoby: Flexbox, Grid i Block


7 stycznia 2021 / Michał Kortas


Po świąteczno-noworocznej przerwie pora rozruszać stawy palcach. Dzisiejszym tematem będzie centrowanie elementu znajdującego się w kontenerze. Rzecz prosta, lecz często poszukiwana w wyszukiwarkach, szczególnie przez początkujących web-developerów. O tym, jak wyśrodkować element za pomocą trzech sposobów – Flexbox, Grid i Block – przeczytasz poniżej. Continue reading Jak wyśrodkować element w kontenerze – 3 sposoby: Flexbox, Grid i Block


Tagi:


Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS


16 grudnia 2020 / Michał Kortas


Ostatnio bardzo modny ale i za razem praktyczny – z punktu widzenia użytkownika – jest temat udostępniania wszem i wobec ciemnych wersji interfejsu aplikacji webowych. Sam jestem zwolennikiem tego ruchu i z utęsknieniem wypatruję kolejnych usług, które taką formę oferują. Co ciekawe, za pomocą CSS3 i reguł dostępnych w Media Queries Level 5 możemy wykryć pośrednio preferencje systemu operacyjnego (lub bezpośrednio – przeglądarki) użytkownika i łatwo dostosować interfejs własnej aplikacji. Continue reading Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS


Tagi:


Jak zaznaczyć poprawnie i błędnie wypełnione pola formularza w CSS?


15 grudnia 2020 / Michał Kortas


Znacie ten ból podczas wypełniania formularza na stronie internetowej? Ciągłe komunikaty – wypełnij to pole, niepoprawny format. Klikamy i klikamy, czasem kilka razy w przycisk wysyłania, za każdym razem dowiadując się o błędach walidacji. Co zrobić, aby takim jak my, żyło się lepiej? Zaoferować choćby minimalną, niewielką pomoc w postaci pseudo-klas CSS :valid i :invalid. Continue reading Jak zaznaczyć poprawnie i błędnie wypełnione pola formularza w CSS?


Tagi: