[Wskazówka] Rozmiary względem obszaru roboczego: vw, vh, vmax, vmin


4 maja 2015 / Michał Kortas


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

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 1vw jest równa: 1% x 1000px = 10px.

Czyli jeżeli ustawisz wysokość i szerokość kontenera <div>  w ten sposób:

Otrzymasz następujący efekt:

50vh i 50vw

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.

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:

Taki styl zapewni nam to, że w przypadku ekranu pionowego <div>  przyjmie szerokość i wysokość połowy krótszego boku obszaru roboczego (czyli szerokość).

Vertical viewport

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ść.

Horizontal viewport

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?


Tagi:


Prosty preloader CSS3 bez użycia Javascriptu


1 maja 2015 / Michał Kortas


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

  1. Utwórz kontener o klasie loader .
  2. 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

sygnets-webroad

Kod CSS loadera

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 .

Jeżeli przypiszemy ją do każdej ikonki otrzymamy efekt spadania ale niestety w równej kolejności, co nie wygląda tak efektownie.

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.

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:

[role] + [aria-labelledby]

Podsumowanie

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.

Zobacz DEMO


Tagi:


Jak pisać deklaracje CSS? Czyli o kolejności właściwości.


22 listopada 2014 / Mr.Mr


Sposoby pisania deklaracji w języku CSSMożemy wyróżnić trzy sposoby pisania deklaracji CSS (a konkretnie segregowania właściwości). Pierwszy sposób zakłada grupowanie par właściwość-wartość na zasadzie ich ważności. Drugi opiera się o segregacji alfabetycznej, trzeci zaś to mówiąc krótko sposób opierający się o brak sposobu… Który z nich jest najlepszy?

Czytaj dalej Jak pisać deklaracje CSS? Czyli o kolejności właściwości.


Tagi:


Dokąd zmierza CSS?


19 października 2014 / Mr.Mr


dokąd zmierza cssIm więcej czytam o tym jak powinno się tworzyć kaskadowe arkusze stylów tym więcej myśle w bardziej ogólnych kategoriach o tym czym jest CSS i czym mógłby być. Nie da się ukryć, że CSS jest technologią prostą, pewnie zbyt prostą jak na współczesne potrzeby i dodatkowo zmienia się relatywnie wolno. Właściwie wszystko to co wymyślamy w kwestii różnorakich metodologii i technologii (np. preprocesorów) jest odpowiedzią na bolączki CSS i, mówiąc wprost, na jego braki. Jeśli się dobrze zastanowić to można z łatwością dojść do wniosku, że język arkuszy stylów nie przystaje do potrzeb współczesnego web design’u. Wiele osób może być tym zaskoczona bo przecież dzisiejsi deweloperzy tworzą rzeczy wręcz niewiarygodne, wielke serwisy internetowe i aplikacje o skomplikowanej strukturze front end’u to codzienność dla każdego użytkownika internetu, ale zapewne nikt nigdy nie zastanawiał się jak to wszystko powstaje i co jest używane do tego by takie serwisy mogły istnieć. Jeśli wziąć to wszystko pod uwagę od razu rodzi się pytanie: dokąd CSS powinien zmierzać?

Czytaj dalej Dokąd zmierza CSS?


Tagi:


Informacja o autorze jako przykład BEM i OOCSS


2 sierpnia 2014 / Michał Załęcki


screenshot_00119Wiadomo, że przykład kodu tłumaczy pewne zagadnienie lepiej niż sucha teoria. Poniższy elementu interfejsu został stworzony na potrzeby Bydgoszcz Web Development Meetup #4 jako demo do mojej prezentacji o dobrych praktykach CSS, BEM i OOCSS. W kodzie zastosowane jest kilka ciekawych podejść m. in. logiczne grupowanie selektorów [ ]. Podstawowymi zaletami takiego rozwiązania jest duża przenośność, przynajmniej częściowe rozdzielenie selektorów używanych w CSS od tych, z których korzystamy w JavaScript oraz duża czytelność kodu – szczególnie ważna gdy nad jednym projektem pracuje więcej developerów.

HTML

SCSS

Struktura całego projektu może niektórym wydać się skomplikowana, ale niesie ze sobą szereg zalet, które rosną proporcjonalnie do wielkości projektu. Podejście jest diametralnie różne od tego, które proponuje SMACSS. Bardziej od samych elementów, których dotyczy CSS ważniejsze są warstwy abstrakcji.

screenshot_00118

Poniższy kod dotyczy wyłącznie komponentu informacji o autorze, pełen kod znajduje się w repozytorium na GitHub.

Starsze wersje IE mają problem z animacjami SVG realizowanymi w CSS. Zachowanie ikon po najechaniu możemy zmienić wykorzystując wykrywanie funkcjonalności dzięki Modernizr i to, że nadaje on stosowaną klasę elementowi html.

JavaScript

Kodu JavaScript nie ma zbyt wiele. Po inicjalizacji WOW.js nadajemy ścieżką odpowiednie atrybuty tak by można było je następnie animować po najechaniu na ikony portali społecznościowych. Ostatnim elementem jest wykrycie czy użytkownik posiada ekran dotykowy i dostosowanie zachowania jednego z elementów.

Przydatne materiały

 


Tagi:


Micro Relacja: Bydgoszcz Web Development Meetup #4 + prezentacja


24 lipca 2014 / Michał Załęcki


highres_339750322.jpegKolejne, już czwarte, spotkanie Bydgoszcz Web Development Meetup za nami. Miałem przyjemność poprowadzić jedną z trzech prezentacji, która dotyczyła dobrych praktyk CSS, BEM, OOCSS na przykładzie inuit.css. Obok mnie prezentacje przeprowadzili Sebastian Małyska (Przychodzi tester do developera) oraz Michał Kowalkowski (O backwi.re i prowadzeniu startupu w Chinach). Na zakończenie Lightning Talks, podczas których m. in. pośmiałem się (braku)logiki operatorów porównania w JavaScript przy operacjach na 0 i null, Paulina Rhone zaprosiła nas na spotkania Geek Girls Carrots oraz opowiedziała o tej organizacji.  Jakub Czaplicki, twórca popularnej aplikacji Sprawdź lekarza opowiedział o ciekawej historii swojej aplikacji.

Prezentacja

Prezentacja dotyczy dobrych praktyk CSS, BEM i OOCSS.


Tagi:


„Przesuwane tabelki” – czyli sposób na responsywność tabel na stronie internetowej


16 lipca 2014 / Mr.Mr


Responsywne tabele na stronach internetowychZapewnienie użytkownikom urządzeń mobilnych wygodnego i szybkiego przeglądania stron internetowych to dzisiaj już standardowy wymóg. Responsive Web Design to jeden z fundamentów współczesnej sieci, a rosnąca ilość użytkowników tabletów i smartphone’ów zmusza nas do tego by nie zapominać o użytkownikach tychże urządzeń. O ile technologia poszła na tyle do przodu, że RWD stało się możliwe i w podstawach nawet relatywnie łatwe do implementacji to jednak pozostał jeden element HTML, który jakby nie zauważał tych zmian… tabelki. To najczęściej one powodują problemy na stronach mobilnych, ale i na to jest sposób!

Czytaj dalej „Przesuwane tabelki” – czyli sposób na responsywność tabel na stronie internetowej


Tagi:


Block, Element, Modifier w CSS


19 kwietnia 2014 / Mr.Mr


Block, Element, ModifierMiałeś kiedyś taką sytuację, że pod koniec dużego projektu sam nie mogłeś połapać się we własnym kodzie? A może jesteś częścią większego zespołu i często nie wiesz dlaczego Twoi koledzy tworzą takie dziwaczne konstrukcje w arkuszach? Witaj w klubie! Każdy frontendowiec miał coś takiego. Można powiedzieć, że to niestety część zawodu, ale nie martw się bo są sposoby na to by radzić sobie z takimi problemami. Jednym z rozwiązań jest BEM, czyli Block, Element, Modifier – metodologia tworzenia kodu wypracowana przez Yandex po to by ułatwić deweloperom życie.

Czytaj dalej Block, Element, Modifier w CSS


Tagi:


Wskazówka: Jak automatycznie dzielić wyrazy w CSS?


14 kwietnia 2014 / Michał Kortas


Jeszcze jakiś czas temu automatyczne dzielenie wyrazów na stronach internetowych było właściwie niemożliwe. Sytuacja ta uległa nieznacznej zmianie. Dzisiaj – co prawda na tę chwilę musimy korzystać z przedrostków i to w nie wszystkich przeglądarkach – możemy zaprzęgnąć do działania nasz arkusz CSS. Jest to funkcja dopiero rozwijana, ale należy wierzyć, że w niedługim czasie zostanie ona poprawnie zaimplementowana i możliwa do wykorzystywania. Czytaj dalej Wskazówka: Jak automatycznie dzielić wyrazy w CSS?


Tagi:


CSS3 Flexbox – podstawowe założenia


6 kwietnia 2014 / Mr.Mr


CSS3 FlexboxSpołecznośc deweloperów od dawna czekała na ‚lepszy’ sposób tworzenia układów stron internetowych. Mankamenty konstrukcji opartych na elementach blokowych ze zdeklarowaną właściwością float, liczne obejścia i sztuczki, które stosowano aby dostosować sztywne układy do wyświetlania się na rozmaitych rozdzielczościach w sposób ergonomiczny i jeszcze wiele innych niedogodności stały się częścią dnia codziennego dla wielu twórców stron internetowych. Jednak pojawiło się światełko w tunelu.

Czytaj dalej CSS3 Flexbox – podstawowe założenia


Tagi: