Strona główna webroad.pl

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: • • • •

Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit

10 grudnia 2020 / Michał Kortas

Pytaliście w komentarzach jak skracać tekst znajdujący się w kilku wierszach, w akapicie. Jest to obecnie możliwe również za pomocą CSS. Postanowiłem więc odświeżyć ten wpis z przed lat i dostosować go do bieżących możliwości przeglądarek. Pierwsza część zawiera to, co było tutaj do tej pory – skracanie tekstu w jednej linii. Druga część poradnika prezentuje sposób na ucinanie rozbudowanego bloku tekstowego bez stosowania skomplikowanych zabiegów.
Continue reading Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit

Tagi: • • • • • • • •

Przetwarzanie mowy na tekst za pomocą Web Speech API

26 października 2020 / Michał Kortas

Zaciekawiły mnie możliwości, jakie daje Web Speech API. Ostatnio napisałem o przetwarzaniu mowy na tekst, więc naturalnym kierunkiem będzie sprawdzenie odwrotności tego procesu – przetwarzanie tekstu na mowę. Niestety, jeśli chodzi o kompatybilność, realnie działa to jedynie na stacjonarnym i mobilnym Google Chrome, oraz jeszcze na kilku innych, egzotycznych przeglądarkach. Być może niedługo interfejs będzie wspierany również w Microsoftowym Edgu. Jednak na razie pozostaje nam uzbroić się w cierpliwość i czekać na ruchy pozostałych dostawców. Continue reading Przetwarzanie mowy na tekst za pomocą Web Speech API

Tagi: • • •

Web Speech API – nawigacja na stronie z audiodeskrypcją

19 października 2020 / Michał Kortas

Zaprzyjaźniałem się ostatnio z możliwościami Web Speech API przy okazji tworzenia nawigacji po aplikacji webowej. Konieczna była funkcjonalność odczytująca opisy aktywnych elementów. Posłużyłem się w tym celu interfejsem SpeechSynthesis, który jest już obecnie dość dobrze wspierany przez wiodące przeglądarki. Przyjąłem, że powinienem brać pod uwagę te elementy, które posiadają niepsute atrybuty aria-label, aria-labelledby lub aria-describedby. Dodatkowo chciałem, aby obsługiwane były również formularze i ich etykiety. Continue reading Web Speech API – nawigacja na stronie z audiodeskrypcją

Tagi: • • • • •

Format zdjęć WebP sprawdza się w sieci znakomicie

9 października 2020 / Michał Kortas

Chciałbym dziś krótko pochwalić format zdjęć WebP. Ostatnio poprawiałem wydajność strony i PageSpeed Insights zwrócił mi uwagę, aby używać nowszych formatów zdjęć, zamieniając PNG i JPEG na WebP właśnie. Przekonwertowałem więc kilka zdjęć, między innymi zdjęcie w tle tego bloga, nie skupiając się zbyt na szczegółach kompresji. Efekt?

Continue reading Format zdjęć WebP sprawdza się w sieci znakomicie

Tagi: • • •

Płynne przewijanie strony – smooth-behavior: scroll

2 października 2020 / Michał Kortas

To już kolejne odświeżenie tematu płynnego przewijania strony. Wcześniejsze dwie wersje jednego z bardziej popularnych wpisów na blogu opierały się na JavaScript. Lata minęły i można już śmiało użyć w tym celu możliwości czystego CSSa. Co prawda, nie wszędzie poniższy przykład zadziała, jednak pomijanie Internet Explorera stało się wreszcie upragnionym standardem ;-)

Cały czas można wesprzeć się awaryjnie JavaScriptem, ten temat zwięźle opisał u siebie WebKrytyk.
Continue reading Płynne przewijanie strony – smooth-behavior: scroll

Tagi: • • • •