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: aspect-ratio • proporcje • ratio • współczynnik proporcji
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: formularz • input • inputmode • klawiatura
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: block • centrowanie • Flexbox • grid • wyśrodkowywanie elementu
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: css • dark mode • light mode • media • tryb ciemny
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: css • formularze • invalid • valid • walidacja
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: akapit • css • ellipsis • line-clamp • linia • skracanie • skracanie tekstu • top • ucinanie tekstu
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: przetwarzanie mowy • rozpoznawanie mowy • speech recognition • Web Speech API
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: audiodeskrypcja • nawigacja • SpeechSynthesis • SpeechSynthesisUtterance • top • Web Speech API
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: grafika • jpeg • png • webp
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: kotwice • płynne przewijanie • scroll behavior • smooth • smooth scrolling
.container {
display: grid;
}
.inner {
align-self: center;
justify-self: center;
}
Michał Kortas
Tak, selektor to kwestia wtórna. W podanym przez Ciebie przypadku po prostu każdy .inner będzie otrzymywał te parametry CSS, a nie tylko ten, umieszczony w .container.Nie zadziała gdy rodzic .inner nie będzie miał ustawionego grida;2021-02-24 19:18:58