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ć preferencje systemu operacyjnego 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:


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:


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:


Bootstrap 4 i menu responsywne


13 lutego 2017 / Michał Kortas


Bootstrap 4 wciąż leży w powijakach, jednak z rosnącą nadzieją na finalne wydanie. Na blogu Bootstrapa znajdują się informacje o gotowości do wydania pierwszej bety, a co za tym idzie, nie powinny już pojawiać się żadne większe aktualizacje, nie licząc oczywiście bug-fixów. Myślę, że w tym wypadku mogę już w miarę bezpiecznie zacząć publikować krótkie poradniki związane z tymże frameworkiem. Całość dostępna będzie pod specjalnie wydzielonym tagiem Bootstrap 4. Continue reading Bootstrap 4 i menu responsywne


Tagi: