Aspect Ratio w CSS

Prezentacja treści na stronie w formie graficznej to bardzo istotne zagadnienie. Chodzi głównie o to, aby obrazy były umieszczone w odpowiednich proporcjach. W tym przypadku z pomocą przychodzi nam aspect ratio w CSS. Jest to rozwiązanie znane już od dawna, jednak nie wszystkie przeglądarki to wspierają. Przejdźmy do konkretów.

Stylowy formularz – #szybkiwebdev

Chciałbym wam przedstawić pomysł szybkich kodów do wykorzystania w różnych projektach. Mam nadzieje, że wystarczy mi pomysłów, by wrzucać je regularnie. Zatem zaczynam od pierwszego, stylowego i lekkiego formularza kontaktowego (lub jak ktoś woli rejestracyjnego).

Zapowiedź CSS Container Queries

Od jakiegoś czasu można zaobserwować w świecie dev nowy trend lub podejście do tworzenia stron www. Mowa tu o planowanym wprowadzeniu „CSS Container Queries” do obsługi elastycznych layoutów. Tworząc projekt responsywny, często używa się zapytania @media, aby zmienić układ elementów w zależności od rozmiaru widocznego obszaru.

CSS Scroll Snapping, czyli ciekawe przewijanie

Często przemierzając internet można spotkać strony internetowe typu „one page”. Na niektórych przechodzenie między sekcjami odbywa się na zasadzie przewijania oraz „doskakiwania” do kolejnej/poprzedniej sekcji. Dawniej robiło się to za pomocą JavaScriptu, jednak dzisiaj możliwości są większe. Dzisiaj pozwala już na to sam CSS, o czym będzie w tym wpisie.

Poprawa dostępności strony w CSS – color-contrast()

Dostępność jest w dzisiejszych czasach bardzo ważna, szczególnie jeśli chodzi o kontrast kolorów na stronach internetowych. Osoby słabo widzące poruszając się w internecie nierzadko mają problem z poprawnym widzeniem treści. Dzisiaj przygotowałem wpis na temat poprawy dostępności strony na podstawie kontrastu w CSS.

Safari Technology Preview 121 – nowości

Apple tworzy swoją przeglądarkę Safari Technology Preview w celu szybszego wprowadzania poprawek, zmian i nowości do głównej gałęzi Safari oraz usprawnienia dla deweloperów. We wpisach tego typu chciałbym zawierać istotnie zmiany/poprawki z mojego punktu widzenia, które będą przydatne w pracy typowo frontendowej.

Selektory w CSS – zbiór

W arkuszach styli CSS selektor to cześć kodu poprzedzająca nawias klamrowy. Określa on element lub wiele elementów, do których odnosi się dana reguła. Wyróżniamy kilka grup selektorów, które oznaczą nam elementy na stronie. Są to selektory elementów, pseudoelementów, klas i identyfikatorów, pseudoklas, atrybutów, uniwersalne oraz potomków. Selektory nie mogą zostać użyte w stylu 'inline'. Poniżej przedstawione zostały rodzaje selektorów.

Funkcja clamp() w CSS

Funkcja clamp() w CSS to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem ale elastycznej kontroli nad wyglądem stylowanych elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.

Tworzenie responsywnych tabel

Używanie tabel na stronie internetowej czasem sprawia nieco problemów, zwłaszcza, gdy nasz design strony jest elastyczny, responsywny. O ile na pełnowymiarowych komputerach nie sprawia to większych problemów, o tyle na urządzeniach mobilnych potrafi nieco popsuć odbiór danych z tabeli. Dzisiaj postaram się opisać jedno z przykładowych rozwiązań tego kłopotu.

Flexbox, czyli elastyczne tworzenie stron www

Pojęcie responsywnych stron www każdemu kojarzy się z elastycznymi stronami, które są dostosowane do wyświetlania na różnych rodzajach ekranów. W szczególności pojęcie znane jest osobom na stanowisku frontend developer – osoby odpowiedzialne za część wizualną (techniczną) strony www. Dzisiaj wiodącym trendem jest flexbox.