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
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ą
Bootstrap zajmuje u mnie dość wysokie miejsce, jeśli chodzi o frontendowe frameworki, z których korzystam na co dzień, tak więc bacznie przyglądam się zmianom nadchodzącym w piątym jego wydaniu. Właśnie pojawiło się wydanie Alpha 2, sprawdzam więc zmiany. Co nowego słychać w Bootstrapie?
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 ;-)
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
Na forum webroad.pl pojawił się z pozoru prosty, lecz ciekawy temat, który chciałbym krótko poruszyć w to piątkowe popołudnie. Otóż jeden z Czytelników bloga zapytał o pomoc we wdrożeniu czegoś w rodzaju uzupełniania treści w kontrolkach formularzy (autocomplete) za pomocą jQuery.
Owszem, można zrobić to za pomocą jQuery. W sumie czego nie można?
Ważniejsze jest jednak pytanie – Ale po co?
Podpowiedzi w input’ach w HTML5
HTML5 zawiera w sobie ciekawy element
<datalist>, który działa bardzo podobnie do natywnych podpowiedzi ostatnio wpisanych fraz w kontrolkach formularzy, z tą różnicą, że sami możemy zasugerować przeglądarce, co dokładnie ma podpowiedzieć.
Praktycznie rzecz biorąc, wszystkie nowsze wersje popularnych przeglądarek wspierają
<datalist>. Więcej szczegółów znajdziesz na stronie caniuse.com/#feat=datalist.
Czy przycisk wybierania pliku musi wyglądać zupełnie inaczej w każdej z przeglądarek?
Takie pytanie otrzymałem we wczesnej fazie projektowania interfejsu aplikacji webowej. Oczywiście osoba, która je zadała, nie musiała wiedzieć, że wygląd ten narzuca z góry silnik przeglądarki. Postanowiłem jednak wyjść na przeciw temu zagadnieniu i przygotowałem krótki kod niwelujący różnice.
Czy kiedykolwiek zastanawiałeś się, w jaki sposób ustawić rozmiar elementu na stronie dokładnie względem okna przeglądarki? Ilekroć razy chciałeś użyć do tego Javascriptu? Jeżeli na oba pytania odpowiedziałeś sobie wynikiem większym niż zero, zapoznaj się z poniższą wskazówką.
W dzisiejszym wpisie zademonstruję Ci w jaki sposób odnosić się do rozmiarów elementów względem okna przeglądarki (viewport). Pomocne będą Ci w tym jednostki vw, vh, vmax i vmin, czyli tak zwane Viewport Units. Bieżące wsparcie dla nich przez najpopularniejsze przeglądarki możesz zweryfikować na stronie caniuse.com. Stan na dzień dzisiejszy prezentuję poniżej.
Wsparcie dla Viewport Units dzięki http://caniuse.com/
Viewport width i viewport height
Ogólnie rzecz biorąc 1vh jest równy 1% wysokości obszaru roboczego ekranu, tak samo jak 1vw – z tym, że w tym przypadku mówimy o 1% szerokości. Z tej własności wynika, że w przypadku obszaru roboczego ekranu o szerokości 1000px wartość dla 1vwjest równa: 1% x 1000px = 10px.
Czyli jeżeli ustawisz wysokość i szerokość kontenera
<div> w ten sposób:
CSS
1
2
3
4
5
6
div {
box-sizing:border-box;
background:red;
width:50vw;
height:50vh;
}
Otrzymasz następujący efekt:
Jednostki vh i vw używać możesz nie tylko dla wartości własności width czy height, ale i choćby dla określania rozmiaru fontu na stronie.
CSS
1
2
3
4
5
p {
font-family:sans-serif;
font-size:15vw;
text-align:center;
}
Przy zmianie rozmiarów okna font będzie dopasowywał się do wskazanej wartości.
Viewport minimum i viewport maximum
W tym wypadku wartość będzie dopasowywała się automatycznie, w zależności, której opcji użyjemy.
Wartość 1vmin jest równa mniejszej z wartości 1vh lub 1vw, natomiast 1vmax wybierze sobie większą wartość ze zbioru {1vh, 1vw}.
Sprawdźmy to w praktyce.
Ustaw dla kontenera następujący kod CSS:
CSS
1
2
3
4
5
6
div {
background:red;
box-sizing:border-box;
width:50vmin;
height:50vmin;
}
Taki styl zapewni nam to, że w przypadku ekranu pionowego
<div> przyjmie szerokość i wysokość połowy krótszego boku obszaru roboczego (czyli szerokość).
Jeśli jednak zamienimy orientację ekranu na horyzontalną, wartości dopasują się wprawdzie również do krótszej krawędzi obszaru roboczego, ale w tym przypadku będzie nią już wysokość.
Zakończenie
Zachęcam Cię do testowania i dzielenia się z nami swoimi uwagami.
A może stworzyłeś już projekt, gdzie wykorzystałeś już viewport units?
Tworząc aplikacje przeglądarkowe powinniśmy zrobić wszystko, aby użytkownicy korzystający z nich czuli jak największy komfort. Powinno zależeć nam na dobrej optymalizacji skryptów, jak najmniejszej liczbie przeładowań strony oraz prostocie i intuicyjności interfejsu. Nawet jeżeli klient końcowy musi czekać, powinniśmy go o tym informować. Informacja, niezależnie od tego jaka jest, znacznie lepiej wpływa na wewnętrzny spokój aniżeli jej zupełny brak, okraszony białym ekranem przeglądarki obliczającej coś w tle. Z tego więc powodu pokażę Ci jak stworzyć prosty preloader, korzystający tylko i wyłącznie z możliwości CSS3. Do jego działania nie będzie więc potrzebna włączona obsługa Javascriptu, co jest naprawdę (uwierzcie) mile widziane.
Zobacz działanie preloadera na poniższym wideo.
Kod HTML loadera
Utwórz kontener o klasie
loader .
Umieść w nim kilka niedużych ikon lub innych elementów (np.
<div>). Ja użyłem do tego 6 identycznych sygnetów z loga WEBroad.pl
Najpierw ostyluj kontener
loader . Oczywiście pozostawiam Ci pełną dowolność. Ja akurat chciałem ustawić go w centrum ekranu z efektem cienia wewnętrznego.
Zajmijmy się teraz ikonkami preloadera. Pokażę Ci w jaki sposób wprawić je w ruch, tak aby spadały z góry, zatrzymywały się na chwilę na środku swojej drogi i w końcu chowały się za dolną krawędzią obszaru ograniczonego przez rodzica.
Stwórz nową animację w CSS3 o nazwie
loader .
CSS
1
2
3
4
5
6
7
8
9
@keyframes loader{
0% {transform:translateY(-150px);}
20% {transform:translateY(30px);}
30% {transform:translateY(-10px);}
40% {transform:translateY(0);}
60% {transform:translateY(0);}
80% {transform:translateY(-20px);}
100% {transform:translateY(150px);}
}
Jeżeli przypiszemy ją do każdej ikonki otrzymamy efekt spadania ale niestety w równej kolejności, co nie wygląda tak efektownie.
CSS
1
2
3
4
5
6
.loader img{
width:40px;
height:40px;
margin:5px;
animation:loader1.75sinfiniteease-in-out;
}
Dla urozmaicenia przygotowałem więc różne style dla co czwartego obiektu. Będzie je różnić tylko i wyłącznie opóźnienie wykonywania animacji. Dzięki temu najpierw „ruszy” ikona pierwsza i w ustalonych odstępach pozostałe.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
.loader img:nth-child(4n+1){
animation-delay:0ms;
}
.loader img:nth-child(4n+2){
animation-delay:200ms;
}
.loader img:nth-child(4n+3){
animation-delay:1000ms;
}
.loader img:nth-child(4n+4){
animation-delay:1000ms;
}
Dostępność
// Akapit został dodany po dyskusji, która zrodziła się w komentarzach. Dziękuję za odzew.
Aby zapewnić dobrą dostępność powyższego rozwiązania, powinniśmy dodać do kontenera
.loader dodatkowe atrybuty:
Otrzymaliśmy ładny efekt preloadera, który możemy wdrożyć do naszych przyszłych i obecnych projektów. Zachęcam do modyfikacji i podzielenia się nią w komentarzach.
W powyższym przykładzie, dla zmniejszenia ilości kodu nie używałem w tworzeniu animacji przedrostków dla przeglądarek. Pamiętaj, aby je dodać w końcowym projekcie, jeżeli są potrzebne.
html, body
{
margin: 0;
height: 100%
}div.a {
background: yellow;
height: 300px;
}div.b
{
background: gray;
height: calc(100% - 300px;
}Górny DIV o klasie "a" ma wysokość 300px, dolny DIV o klasie "b" ma wysokość całej strony, pomniejszony o wysokość górnego DIVa - zatem dolny DIV wypełnia pozostałą część strony pod DIVem górnym.
Panowie mam takie pytanie odnośnie odnowienia certyfikatu ale z poziomu komputera lokalnego?Czy po wpisaniu nowych wpisów TXT w nazwa.pl ponownie muszę wczytywać nowe pliki fullchain.pem i privkey.pem ??
pjotruh
html, body { margin: 0; height: 100% }div.a { background: yellow; height: 300px; }div.b { background: gray; height: calc(100% - 300px; }Górny DIV o klasie "a" ma wysokość 300px, dolny DIV o klasie "b" ma wysokość całej strony, pomniejszony o wysokość górnego DIVa - zatem dolny DIV wypełnia pozostałą część strony pod DIVem górnym.2024-09-17 23:28:56