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: