70-480 – Tworzenie struktury pliku CSS przy użyciu selektorów CSS

70-480

Prawidłowe odwołania do elementów; wdrażanie dziedziczenia; zastępowanie dziedziczenia przez stosowanie dyrektywy !important, określanie stylu elementów na podstawie pseudo-elementów i pseudo-klas (np. :before, :first-line, :first-letter, :target, :lang, :checked, :first-child).



To już ostatni wpis poświęcony egzaminowi 70-480, a o większości elementów wymienionych w opisie podrozdziału wspominałem w poprzednim artykule. Opowiem dziś zatem tylko o dziedziczeniu w CSS oraz nadpisywaniu styli.

Dziedziczenie w CSS

Dziedziczenie w CSS możliwe jest za pomocą selektorów zależnych, o których była pokrótce mowa w poprzednim wpisie.

Spójrzmy na przykład (zerknij na strukturę HTML, a potem style CSS):

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/652nc16u/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kontenerowi div ustawiony został styl, który nadaje czerwony kolor dla tekstu. Następnie wykorzystano selektor zależny div p, który dodatkowo zwiększa czcionkę oraz dodaje podkreślenie tekstu dla elementów p, które znajdują się bezpośrednio wewnątrz div. W strukturze HTML mamy dwa krótkie teksty – pierwszy bezpośrednio w elemencie blokowym div, a drugi w paragrafie. Rezultatem jest czerwony kolor tekstu znajdującego się bezpośrednio w bloku div oraz również czerwony kolor tekstu znajdujący się w paragrafie oraz dodatkowo większa czcionka i podkreślenie. Widać wyraźnie, że kolor czerwony dla tekstu, ustawiony dla elementu nadrzędnego jest dziedziczony przez elementy znajdujące się wewnątrz struktury, które nie nadpisały tego stylu.

Więcej szczegółów w specyfikacji W3C: http://www.w3.org/TR/CSS21/cascade.html

Nadpisywanie styli CSS

Spójrzmy od razu na przykład (zerknij na strukturę HTML, a potem style CSS):

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/652nc16u/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Widzimy tutaj, że dla elementu div.container ustawiony został kolor tekstu na czerwony. W środku znajduje się kolejny element div.inside, który ma ustawiony kolor tekstu na niebieski. Tekst, który znajduje się poza tym wewnętrznym elementem div posiada rzeczywiście kolor czerwony, a tekst znajdujący się wewnątrz elementu .inside posiada kolor niebieski.

By wymusić styl również dla elementów podrzędnych wykorzystać możemy wyrażenie !important. Nie powinno być ono jednak nadużywane i najlepiej jest go unikać i tworzyć właściwą strukturę HTML, która nie będzie wymagała takich rozwiązań.

Spójrzmy na przykład wymuszenia stylu dla elementów podrzędnych. Jest to ten sam przykład, co wyżej, z tą różnicą, że tym razem dla bloku .container nałożony został styl, który zawiera wyrażenie !important:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/652nc16u/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Podsumowanie

I to byłoby na tyle :) Powodzenia w przygotowaniach do egzaminu 70-480 i na samym egzaminie. Jest to dopiero początek drogi w wielkim świecie WWW.

70-480 – Wyszukiwanie elementów przy użyciu selektorów arkusza CSS i kwerendy jQuery

70-480

Wybór odpowiedniego selektora w celu odwołania do elementu; definiowanie selektorów elementu, stylu i atrybutu; wyszukiwanie elementów przy użyciu pseudo-elementów i pseudo-klas (np. :before, :first-line, :first-letter, :target, :lang, :checked, :first-child).



Przedostatnim tematem dotyczącym egzaminu 70-480 będzie biblioteka jQuery. Nakłada ona na czysty język JavaScript (Vanilla) pewną warstwę abstrakcji oraz udostępnia API, które nie dość tego, że jest znacznie bogatsze i prostsze niż standardowe metody dostępu do elementów DOM, to wspiera wiele różnych wersji przeglądarek. Każdy kto zetknął się z pisaniem kodu JavaScript z pewnością słyszał o jQuery, więc dzisiejszy wpis będzie krótki, lecz treściwy.

Selektory CSS

Wyszukiwanie elementów jQuery jest bardzo podobne do nakładania styli poprzez stosowanie selektorów dostępnych w CSS. Spójrzmy na te podstawowe:

  • * – pobranie wszystkich elementów
  • #id – id elementu (pamiętajmy, że tylko jeden element na stronie może posiadać takie samo id)
  • .class – wszystkie elementy, które posiadają klasę class
  • .class1, .class2 – wszystkie elementy, które  mają ustawioną klasę class1 lub class2

Dzięki selektorom zależnym jesteśmy w stanie odwoływać się do poszczególnych elementów, które znajdują się w pewnej hierarchii względem innych elementów:

  • parent child – wszystkie elementy child, które są potomkami elementu parent, bez względu na stopień pokrewieństwa
  • parent > child – to samo co wyżej, ale w tym wypadku elementy child muszą być bezpośrednimi potomkami parent
  • element + next-element – wybranie elementu next-element, który występuje zaraz za elementem element
  • element ~ siblings – wszystkie elementy siblings, które są rodzeństwem dla element

Możemy również odwoływać się do poszczególnych atrybutów, a nawet ich wartości:

  • [attr=] – znak równości, więc wartość atrybutu musi równać się podanemu wyrażeniu
  • [attr!=…] – wartość atrybutu różna od podanego wyrażenia
  • [attr$=…] – wartość atrybutu kończyć się musi według podanego wyrażenia
  • [attr^=…] – wartość atrybutu zaczynać się musi według podanego wyrażenia
  • [attr~=…] – wartość atrybutu zawierać musi podane słowo
  • [attr*=…] – wartość atrybutu zawierać musi podane znaki

Mamy poza tym szereg pseudo-selektorów. Najpopularniejsze z nich to:

  • :hover – element wskazywany właśnie przez wskaźnik myszy
  • :focus – element, który aktualnie jest aktywny
  • :first-child – pierwsze dziecko danego elementu
  • :odd – wszystkie nieparzyste elementy w liście
  • :even – wszystkie parzyste elementy w liście
  • :disabled – wyłączonynieaktywny element

Pełna lista selektorow CSS na stronie w3schools.com – http://www.w3schools.com/cssref/css_selectors.asp

Wyszukiwanie elementów DOM przy pomocy jQuery

Podobnie sprawa wygląda w jQuery. Mają co dyspozycji utworzony obiekt jQuery / $ jesteśmy w stanie bardzo szybko wyłuskiwać poszczególne elementy ze struktury HTML.

// id
$('#myId');

// klasa
$('.myClass');

// atrybut
$('input[name="first_name"]');

// zagnieżdżone elementy
$('#contents ul.people li');

// pseudo - selektory
$('a.external:first');
$('tr:odd');
$('#myForm:input');
$('div:visible');
$('div:gt(2)');
$('div:animated');

Pełna lista dostępnych selektorów jQuery: http://api.jquery.com/category/selectors/

Na w3schools.com znajdziemy też ciekawe demo, które w interaktywny sposób unaoczni nam możliwości jQuery jeśli chodzi o znajdowanie elementów w strukturze HTML: http://www.w3schools.com/jquery/trysel.asp

70-480 – Tworzenie animowanego i adaptacyjnego interfejsu użytkownika

70-480

Animacja obiektów poprzez stosowanie przejść CSS; stosowanie przekształceń 3-D i 2-D; dostosowywanie interfejsu użytkownika na podstawie kwerend dotyczących nośników (dostosowywanie urządzeń do formatów wyjściowych, rozwiązań do wyświetlania i prezentowania informacji), ukrywanie lub wyłączanie elementów sterujących.



Tytuł oraz opis materiału dzisiejszego wpisu zaczerpnięte z oficjalnego przewodnika do egzaminu 70-480 nie są być może zbyt czytelne i zrozumiałe. Jest to część poświęcona transformacjom CSS (2D oraz 3D) oraz @media queries.

CSS3 transitions

Dzięki CSS3 jesteśmy w stanie zdefiniować przejścia / animacje bez użycia Flash, czy JavaScript. Dzieje się tak za sprawą właściwości transition, która pozwala pokazać przejście z jednego stylu w inny. Tworzone animacje można łączyć z właściwościami translate oraz transform, o czym pisałem już wcześniej.

Dzięki właściwości transition jesteśmy w stanie wskazać jaką inną właściwość chcemy animować oraz przez jak długi czas. Tym samym musimy podać dwa argumenty:

  • właściwość, którą chcemy animować
  • czas animacji – bez podania czasu nie zobaczymy animacji, bo wartość domyślnie ustawiona będzie na 0

Spójrzmy na przykład animacji zmiany wysokości elementu blokowego, która trwać będzie jedną sekundę: transition: height 1s. Wystarczy, że najedziemy na poniższy czerwony prostokąt by zobaczyć efekt.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Należy pamiętać, że np. przeglądarka Internet Explorer 9 nie wspiera własności: transiton. Pełny wykaz wsparcia: http://caniuse.com/#feat=css-transitions

Efekty możemy również łączyć, podając kolejne wartości po przecinku. Spójrzmy zatem na przykład animacji zarówno wysokości jak i szerokości: transition: height 1s, width 2s z tą różnicą, że efekt animacji dla zmiany wysokości elementu potrwa jedną sekundę, a zmiana szerokości elementu dwie sekundy.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Własność transition rozbita została na kilka różnych własności, które podawać możemy niezależnie:

  • transition-property – jaką własność chcemy animować
  • transition-duration – przez jaki czas
  • transition-timing-function – jaką funkcję czasu chcemy użyć w stosunku do prędkości oraz czasu animacji (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier)
  • transition-delay – opóźnienie w wywołaniu animacji

Wszystkie cztery wartości możemy oczywiście połączyć w jedno: transition. Spójrzmy na przykład dwóch takich samych animacji utworzonych na dwa róże sposoby.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Jeśli chodzi o funkcje czasu, to świetnie opisano i pokazano to na stronie: http://www.the-art-of-web.com/css/timing-function/

Różnymi opcjami możemy eksperymentować ponownie na tech demo przygotowanym przez Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_transitions.htm

Transformacje CSS3 2D

O transformacja 2D pisałem już w jednym z pierwszych wpisów: 70-480 – Programowe stosowanie stylów do elementów HTML

Transformacje CSS3 3D

Spójrzmy najpierw na przykład:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/299ms1rq/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Widzimy tutaj wykorzystanie animacji za pomocą własności transition, która określona została dla własności transform. To własnie ta własność powoduje, że możemy manipulować elementami blokowymi, wykorzystując w tym celu następujące funkcje:

  • rotateX (angle) – obrót wokół osi X
  • rotateY (angle) – obrót wokół osi Y
  • rotateZ (angle) – obrót wokół osi Z
  • rotate3d (x, y, z, angle) – obrót wokół wektora definiowanego przez parametry x, y, z
  • scaleX (x) – skalowanie wzdłuż osi X
  • scaleY (y) – skalowanie wzdłuż osi Y
  • scaleZ (z) – skalowanie wzdłuż osi Z
  • scale3d (x, y, z) – skalowanie wzdłuż wektora definiowanego przez parametry x, y, z
  • translateX (x) – przesunięcie wzdłuż osi X
  • translateY (y) – przesunięcie wzdłuż osi Y
  • translateZ (z) – przesunięcie wzdłuż osi Z
  • translate3d (x, y, z) – przesunięcie wzdłuż wektora definiowanego przez parametry x, y, z
  • perspective (n) – definicja perspektywy
  • matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) – mix wszystkiego powyżej, poszczególne wartości odpowiadają odpowiednim przekształceniom

Oprócz własności transform, wyróżniamy także:

Tutaj również przychodzi nam z pomocą demo od Microsoft:  http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_3d-transforms.htm

CSS3 @media queries

W kontekście własności / atrybutu @media można napisać bardzo wiele. Atrybut (html) / własność (CSS) ten / ta służy do definiowania (w uproszczeniu) różnych rodzajów styli w zależności od urządzenia, które wyświetla stronę oraz od rozdzielczości dostępnej na ów urządzeniu.

Świetny, a zarazem krótki artykuł, który to opisuje znalazłem na css-tricks.com i pozwolę sobie odesłać Was do niego: Logic in Media Queries

Pokazywanie i ukrywanie elementów za pomocą CSS

O tym również pisałem już wcześniej: 70-480 – Programowe stosowanie stylów do elementów HTML

70-480 – Tworzenie elastycznego układu zawartości

70-480

Wdrażanie układu przy użyciu elastycznego modelu pudełkowego; wdrażanie układu przy użyciu wielu kolumn; wdrażanie układu przy użyciu pozycjonowania elementów pływających i wykluczeń; wdrażanie układu przy użyciu opcji wyrównania siatki; wdrażanie układu przy użyciu regionów, grupowania i zagnieżdżania.



Model “flexbox

Model “flexbox” to nowy sposób na pozycjonowanie elementów blokowych względem siebie. Specyfikacja nie jest jeszcze w pełni ukończona, ale już teraz przeglądarki (poprzez przedrostki: -ms-, -webkit-, -moz-) umożliwiają korzystanie z własności modelu. Pozycjonowanie elementów odbywa się w pionie i poziomie z możliwością zdefiniowania co ma się dziać z wolnym miejscem. Jesteśmy także w stanie ustawiać poszczególne elementy w odpowiedniej kolejności oraz wyrównywać je względem okna przeglądarki.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy element container, który jest bazowym komponentem dla pozostałych trzech elementów box. Dla elementu nadrzędnego ustawiona jest własność display na wartość flex, co definiuje nam model flexbox dla wszystkich elementów blokowych, które są dziećmi tego elementu. Dla elementów box ustawiona została z kolei własność flex z wartością 1, co oznacza w zasadzie tylko tyle, że każdy element zajmuje tyle samo miejsca.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W powyższym przykładzie doszła kolejna reguła, która dla pierwszego elementu box ustawia własność flex na wartość 2. Oznacza to, ze element ten będzie zajmować dwa razy więcej miejsca niżeli elementy z wartością 1. Widzimy to wyraźnie na przedstawionym przykładzie.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna własność do ustawienia to order, która również przyjmuje wartości liczbowe, a pozwala nam ustawić poszczególne elementy w odpowiedniej kolejności.

Kolejna własność to flex-direction, która przyjmuje cztery wartości:

  • row – domyślne ustawienie według kolejności HTML
  • row-reverse – odwrócona kolejność elementów
  • column – elementy ustawiane są od góry do dołu, według kolejności w HTML
  • column-reverse – odwrócona kolejność w pionie

Spójrzmy na przykład z wykorzystaniem wartości row-reverse:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

.. oraz wartości column:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna jest własność flex-wrap, która posiada trzy wartości:

  • wrap – niemieszczące się elementy przenoszone są do kolejnego wiersza lub kolumny
  • nowrap – blokujemy w ten sposób przenoszenie do nowego wiersza lub kolumny
  • wrap-reverse – przenoszenie do kolejnego wiersza lub kolumny z odwróceniem kolejności

Jest jeszcze własność, która łączy obie poprzednie: flex-flow. W ten sposób możemy sterować położeniem i kolejnością elementów, a także ich przenoszeniem do nowego wiersza lub kolumny przy użyciu jednej własności.

Kolejną własnością jest flex-align, czyli wyrównanie elementów względem siebie oraz okna przeglądarki. Posiada ona pięć następujących wartości:

  • start – wyrównanie do początku
  • end – wyrównanie do końca
  • center – wycentrowanie elementów
  • stretch – rozciąganie elementów
  • baseline – wyrównanie elementów (względem największego)

Microsoft przygotował tech demo, które pozwala samodzielnie pobawić się modelem “flexbox”: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_flex.htm

(Uwaga: działa jedynie pod IE!)

Tekst i interfejs kolumnowy

Kolejną ciekawą własnością CSS3 jest interfejs wielokolumnowy, który znamy z gazet, a który dotyczy ułożenia tekstu na stronie. Dzięki własnościom column-* możemy zdefiniować czytelny oraz bardziej przystępny layout dla tekstu.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dla kontenera zawierającego paragrafy tekstu zdefiniowana została w tym wypadku tylko jedna własność: column-count. Pozwala ona na określenie ilości kolumn na jaki zostanie podzielony tekst znajdujący się w danym kontenerze.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna własność, to odstęp pomiędzy kolumnami, który określa column-gap, przyjmująca jako wartość szerokość przerwy.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyżej widzimy wyraźne oddzielenie tekstu poprzez wykorzystanie własności column-rule, które tworzy linię, która separuje nam poszczególne kolumny.

Własności jest oczywiście więcej, ale zapraszam na stronę w3schools, gdzie jak zawsze znajdziemy pełen opis: http://www.w3schools.com/Css/css3_multiple_columns.asp

Microsoft również i dla własności multi-column przygotował demo, które w bardzo prosty sposób pokazuje w jaki sposób możemy manipulować tekstem: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_multi-column.htm

Opływanie elementów blokowych

Do tej pory znaliśmy tylko własność float, która pozwalała na opływanie elementu z lewej lub prawej jego strony. Wartość opływania mogliśmy wyłączyć poprzez wartość clear. CSS3 daje nam jednak możliwość sterowania opływaniem za pomocą tak zwanych wykluczeń.

Zacznijmy od spojrzenia na wartości dla własności wrap-flow, o której mowa:

  • auto – domyślnie, brak opływania
  • both – opływanie z każdej strony elementu
  • start – opływanie z lewej strony elementu
  • end – opływanie z prawej strony elementu
  • minimum – opływanie od strony, która zostanie zapełniona w minimalnym stopniu
  • maximum – opływanie od strony, która zostanie zapełniona w maksymalnym stopniu
  • clear – opływanie z lewej i prawej zostaje w tym przypadku wyłączone, tekst opływa dany element od góry i dołu

Wszystkie wartości zostały świetnie przedstawione w formie obrazków na stronie: https://docs.webplatform.org/wiki/css/properties/wrap-flow

Wyrównanie do siatki

Z kolejnym nowym modelem radzi sobie na razie w zasadzie jedynie przeglądarka ze stacji Microsoft: http://caniuse.com/#feat=css-grid Jest to jednak jeden z elementów egzaminu 70-480, więc na pewno się temu przyjrzeć. Chodzi mianowicie o budowanie layoutu strony w oparciu o tak zwany model grid, czyli siatkę elementów.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5093r9uf/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pamiętajcie, że przykład powyżej działa w zasadzie jedynie w przeglądarce IE10+.

Po pierwsze dla kontenera container z elementami blokowymi box ustawiona została własność position: -ms-grid. Powoduje to włączenie layoutu siatki, dla wszystkich elementów blokowych wewnątrz elementu. Kolejną rzeczą jest definicja ilości kolumn oraz wierszy na naszej siatce. Posłużyły do tego dwie własności: -ms-grid-columns oraz -ms-grid-rows. Następnie każdemu elementowi ustawiona została konkretna pozycja na siatce za pomocą własności: -ms-grid-column-ms-grid-row.

Definiowanie ilości kolumn oraz wierszy, a także ich rozmiarów możliwe jest poprzez nadanie własnościom: -ms-grid-columns-ms-grid-rows wartosci:

  • px, em, % – standardowe jednostki
  • auto – wartość ustalana automatycznie na podstawie rozmiarów elementów rozmieszczonych na siatce
  • min-content – najmniejszy rozmiar wśród elementów
  • max-content – największy rozmiar wśród elementów
  • minmax(a, b) – zakres spomiędzy którego ma być ustalony rozmiar komórek na siatce
  • frakcje – jednostki części [fr]
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5093r9uf/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W powyższym przykładzie widzimy rozciąganie elementów na wiele kolumn i wierszy przy pomocy -ms-grid-column-span oraz -ms-grid-row-span. I tak:

  • element 1 został rozciągnięty na dwa wiersze
  • element 2 został rozciągnięty zarówno na dwa wiersze, jak i dwie kolumny
  • element 3 został rozciągnięty na dwie kolumny

Siatka pozwala także wyrównywać elementy znajdujące się w jej polach. Służą do tego kolejne dwie własności: -ms-grid-column-align oraz -ms-grid-row-align.

Po raz kolejny możemy się z tym zaznajomić na demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_grid.htm

Budowanie układu przy użyciu regionów

CSS3 wprowadza jeszcze jeden sposób na układ naszej strony / aplikacji. Są to regiony, które rozmieszone mogą być po całym dokumencie, a z opcją współdzielenia tekstu pozwalają tworzyć ciekawe i zarazem niestandardowe układy, które często widzimy choćby w gazetach.

Pełna specyfikacja regionów znajduje się oczywiście na stronie konsorcjum W3C: http://dev.w3.org/csswg/css-regions-1/

Przyznam się, że nigdy nie miałem okazji korzystać z tej własności. Nie spotkałem się także z pytaniem na egzaminie, które dotyczyło tego tematu i wydaje mi się, że jest on dość mocno pomijany w materiałach przygotowujących. Materiały W3C pokazują temat w bardzo obszerny sposób, a do tego odsyłam Was znów do demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_regions.htm

70-480 – Określanie właściwości elementu HTML

70-480

Stosowanie stylów do zmiany atrybutów wyglądu (rozmiar, obramowanie i zaokrąglanie narożników obramowania, kontur, dopełnienie, margines); stosowanie stylów do zmiany efektów graficznych (przezroczystość, krycie, obraz tła, gradienty, cień, przycinanie); stosowanie stylów do określania i zmiany pozycji elementu (statyczna, względna, bezwzględna, ustalona).



Definicja rozdziału ze strony Microsoft (widoczna wyżej) jest dość rozbudowana, a najważniejsze to fakt, że zajmiemy się dzisiaj stylowaniem elementów blokowych. Tym razem również posłużę się przykładami. To (według mnie) najlepszy sposób na szybkie zrozumienie kodu, który odpowiedzialny jest taką, a nie inną prezentację. Zawsze też możemy go łatwo zmienić na swój sposób i eksperymentować.

Model blokowy

[caption id="attachment_5915" align="aligncenter" width="536"]box-model w3schools.com[/caption]
  • content – najbardziej wewnętrzna warstwa, w której znajduje się tekst oraz obrazki
  • padding – tzw. warstwa dopełnienia, która stanowić może dodatkową przestrzeń dla warstwy kontentu
  • border – obramowanie kontentu oraz części dopełnienia
  • margin – dodatkowa przestrzeń, stanowiąca o wielkości elementu blokowego poza jego treścią i dopełnieniem

Model blokowy przedstawiony powyżej, powinien zostać jeszcze uzupełniony o właściwość outline, która znajduje się zupełnie w zewnętrznej warstwie modelu i okala margines. Zewnętrzne linie przerywane mogą zostać uznane za warstwę outline.

Rozmiar elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Obramowanie elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Zaokrąglenie narożników

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kontur elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/8/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dopełnienie

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Margines

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Cień elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dodatkowo można tym poeksperymentować na stronie demo od Microsoft.

Pozycja elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tło elementu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/9tfenrjk/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

70-480 – Określanie właściwości tekstu HTML

70-480

Stosowanie stylów do wyglądu tekstu (kolor, pogrubienie, kursywa); stosowanie stylów do czcionki tekstu (format WOFF i funkcja @font-face, rozmiar); stosowanie stylów do wyrównania tekstu, odstępów i wcięć, stosowanie stylów do dzielenia tekstu, stosowanie stylów do cienia tekstu.



Dzisiejszym wpisem rozpoczynam ostatni rozdział materiału przygotowującego do egzaminu 70-480. Będzie to seria sześciu artykułów, które skupiać się będą na wyglądzie tworzonego przez nas HTML. Poznamy możliwości CSS3, elastycznego układu zawartości, animowanego i adaptacyjnego interfejsu użytkownika oraz spojrzymy co nieco na możliwości jQuery.

Jak mówi sam tytuł wpisu – zajmiemy się stylowaniem tekstu, czyli wielkość i kolor czcionki, odstępy, akapity, wyrównanie tekstu oraz rzucanym cieniem. Poniżej znajdzie głównie przykłady z jsfiddle.net. Móc coś przeczytać to jedno, ale od razu zobaczyć i móc eksperymentować to drugie.

CSS i tekst

Kolor czcionki

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wyrównanie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dekoracja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Transformacja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wcięcie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Łącznik tekstu

Łącznik tekstu to nic innego jak kontrolowanie tekstu pod względem łamania wyrazów na końcach linii. Odpowiedzialna jest za to właściwość hyphens.

Z tą funkcjonalnością kompletnie nie radzą sobie przeglądarki ChromeOperahttp://caniuse.com/#feat=css-hyphens

Poniższy przykład należy oglądać na Firefox lub Internet Explorer.

CSS hyphens

Efekt cienia

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-*

Przejdźmy do wyboru czcionki oraz jej ustawień. W CSS3 wyróżniamy trzy rodziny czcionek:

  • Serif (szeryfowe) – posiadające ozdobniki, np. Times New Roman, Georgia – nadające się do druku, ale ciężko czyta je się na ekranie monitora
  • Sans-serif (bezszeryfowe) – nieposiadające ozdobników, np. Arial, Verdana – gorzej wyglądające po wydruku, ale znacznie bardziej przyjemne w czytaniu na ekranie monitora
  • Monospace – jednakowe szerokości liter, np. Courier New, Lucida Console

font-family

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy trzy rodziny czcionek. Warto również zauważyć, że właściwość font-family przyjmuje po przecinku kilka wartości dla rodzaju czcionki. Spowodowane jest to tym, że docelowy użytkownik może nie mieć danej czcionki zainstalowanej na swoim komputerze. Sprawdzenie dostępności następuje od lewej, więc w pierwszej kolejności podajemy czcionkę najbardziej przez nas pożądaną, a na końcu generyczną rodzinę czcionek, którą użytkownik na pewno będzie miał u siebie.

font-style

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/17/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-weight

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/21/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-size

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/22/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Warto w tym miejscu zapoznać się wieloma jednostkami rozmiaru czcionki. W tym celu odsyłam do artykułu: CSS Units na w3schools.com.

@font-face

Dzięki właściwości @font-face jesteśmy w stanie zdefiniować własne czcionki lub używać serwisów takich jak Google Fonts, gdzie mamy dostęp do wielu niestandardowych czcionek, które możemy wykorzystać na naszej stronie. Całość jest niezwykle prosta i sprowadza się do zbudowania reguły, która pozwoli nam na użycie zdefiniowanej przez nas nazwy czcionki.

Wyróżniamy przy tym kilka formatów plików czcionek, a każdy obsługiwany jest przez inne przeglądarki:

  • EOT – IE9
  • TTF – przeglądarki mobilne
  • SVG – starsze wersje przeglądarki Safari
  • WOFF – współczesne przeglądarki
  • WOFF2 (nowszy, lepsza kompresja) – najnowsze wersje przeglądarek

Całość sprowadza się do kawałka kodu:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

.. oraz późniejszego (przykładowego) użycia:

font-family: 'MyWebFont', sans-serif;
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/24/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Polecam ponadto zapoznać się ze świetnym artykułem na ten temat: Using @font-face

70-480 – Serializacja, deserializacja i przesyłanie danych

70-480

Dane binarne; dane tekstowe (JSON, XML); wdrażanie metody serializacji kwerendy jQuery; metoda Form.Submit; analiza danych; wysyłanie danych przy użyciu obiektu XMLHTTPRequest; oczyszczanie danych wejściowych przy użyciu kodowania identyfikatora URI/formularza.



Przed nami ostatnia już część podrozdziału o Uzyskiwaniu dostępu i zabezpieczaniu danych. O JSON, XML oraz XMLHTTPRequest pisałem już w zasadzie w poprzednim wpisie. Została metoda serialize z biblioteki jQuery, Form.Submit, dane binarne oraz kodowanie URL. Do dzieła więc!

jQuery.serialize

Funkcja ta pozwala w swej prostocie użycia na odczytanie wartości z formularza i zbudowanie z nich tak zwanego query string, który doklejany jest do adresu URL po znaku ?. Funkcję serialize wywołujemy dla całego formularza, a zobaczymy to najlepiej na przykładzie:

[wp-js-fiddle url="https://jsfiddle.net/v6L0b9p7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W wyniku wypełnienia formularza danymi w postaci:

  • First name: M
  • Last name: R
  • Email: mr@gmail.com

Otrzymamy query string w postaci: firstName=M&lastName=R&email=mr%40gmail.com. Nazwy poszczególnych kontrolek służą tutaj jako nazwy parametrów przesyłanych w URL.

Ważne jest to, że tylko kontrolki spełniające reguły walidacji zostaną poddane transformacji. Ponadto każda z kontrolek posiadać musi swoją unikalną nazwę nadaną poprzez atrybut name. Elementy takie jak radiocheckbox zostaną poddane transformacji jedynie, gdy zostaną wybrane.

Form.Submit

Wysłanie formularza za pomocą kodu JavaScript? Jest to niebywale prosta sprawa, bo ogranicza się do wywołania metody submit na obiekcie formularza, w celu wysłania formularza. Tyle! Spójrzmy na prosty przykład:

// html
<form id="sendProgrammatically" action="#"></form>
// javascript
var form = document.getElementById('sendProgrammatically');
form.submit();

Dane binarne

W przeszłości operowanie na danych binarnych musiało być to symulowane przez traktowanie surowych danych jako string i używanie metody charCodeAt(), aby przeczytać bajty z buforu danych. W momencie, gdy aplikacje internetowe stają się coraz bardziej potężne przydałoby się by pomagałby nam w tym kod JavaScript. W ten sposób powstały tablice, które zawierać mogą różne typy danych JavaScript. Mowa tutaj głównie o ArrayBuffer.

ArrayBuffer oraz tak zwane widoki posiadają wiele implementacji i najlepiej będzie odesłać Was do specyfikacji na stronach Mozilla: Tablice reprezentujące typy JavaScript

Załóżmy, że chcemy stworzyć bufor, który przyjmie 16 bajtów, a następnie wykorzystamy typ integer w obrębie stworzonego bufora i na koniec wypełnimy go danymi. Cały przykład wygląda następująco:

var buffer = new ArrayBuffer(16);
var int32View = new Int32Array(buffer);
for (var i = 0; i < int32View.length; i++) {
  int32View[i] = i * 2;
}

Ile wartości posiada bufor? Dokładnie 4, bo typ integer zajmuje 4 bajty. W tym wypadku będą to wartości: 0, 2, 4 oraz 6.

Poszczególne bufory mogą zawierać różne rodzaje formatów danych. W obrębie jednego bufora możemy stworzyć wiele widoków dla różnych typów JavaScript. Przykład ze strony Mozilla:

var buffer = new ArrayBuffer(24);

// ... read the data into the buffer ...

var idView = new Uint32Array(buffer, 0, 1);
var usernameView = new Uint8Array(buffer, 4, 16);
var amountDueView = new Float32Array(buffer, 20, 1);

Kodowanie URL

Ostatni temat na dzisiaj to kodowanie URL, a de facto łańcuchów znakowych. Posłużę się tutaj funkcjami:  encodeURI()encodeURIComponent()decodeURI()decodeURIComponent(). Funkcje te posłużą nam do zakodowania lub dekodowania części naszego URL lub jego całości. Szczególnie przydaje się to wtedy, gdy musimy przesłać dalej URL zawierający znaki specjalne, czy tak zwane polskie ogonki.

Funkcja encodeURI() pozwala na kodowanie wszystkich znaków specjalnych poza: , / ? : @ & = + $ #:

var uri = 'http://mrzepinski.pl?name=żółć';
encodeURI(uri); // "http://mrzepinski.pl?name=%C5%BC%C3%B3%C5%82%C4%87"

Funkcja decodeURI() ma dokładnie odwrotne zadanie do funkcji encodeURI():

var encodedUri = 'http://mrzepinski.pl?name=%C5%BC%C3%B3%C5%82%C4%87';
decodeURI(encodedUri); // "http://mrzepinski.pl?name=żółć"

Jeżeli jednak chcemy zakodować wszystkie znaki, wliczając w to pełny adres URL, to użyć musimy funkcji encodeURIComponent() (funkcja decodeURIComponent() ma dokładnie odwrotne działanie):

var uri = 'http://mrzepinski.pl?name=żółć';
var encodedUri = encodeURIComponent(uri); // "http%3A%2F%2Fmrzepinski.pl%3Fname%3D%C5%BC%C3%B3%C5%82%C4%87"
decodeURIComponent(encodedUri); // "http://mrzepinski.pl?name=żółć"

70-480 – Użytkowanie danych

70-480

Użytkowanie danych JSON i XML; pobieranie danych przy użyciu usług sieci Web; ładowanie danych lub pobieranie danych z innych źródeł przy użyciu obiektu XMLHTTPRequest.



Jak mówi opis ze strony Microsoft – dzisiaj zajmiemy się konsumpcją danych w formatach JSON oraz XML przy użyciu obiektu XMLHTTPRequest (odpowiednik dla IE5 i IE6, to obiekt ActiveXObject).

JSON | XML

Oba formaty pozwalają na wymianę danych w łatwy sposób. Są one również czytelne dla swoich użytkowników i zapewniają sposób opisu danych. To co jednak odróżnia JSON od XML, to “lekkość”. Ilość przesyłanych danych jest często znacznie mniejsza, a format odpowiada w zasadzie obiektom JavaScript, czy bazom danych typu NoSQL, takim jak na przykład MongoDB.

Przykład notacji JSON:

{
  "glossary":{
    "title":"example glossary",
    "GlossDiv":{
      "title":"S",
      "GlossList":{
        "GlossEntry":{
          "ID":"SGML",
          "SortAs":"SGML",
          "GlossTerm":"Standard Generalized Markup Language",
          "Acronym":"SGML",
          "Abbrev":"ISO 8879:1986",
          "GlossDef":{
            "para":"A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso":[
              "GML",
              "XML"
            ]
          },
          "GlossSee":"markup"
        }
      }
    }
  }
}

Przykład opisu tych samych danych, ale notacji XML:

<?xml version="1.0" encoding="UTF-8"?>
<glossary>
  <title>example glossary</title>
  <GlossDiv>
    <title>S</title>
    <GlossList>
      <GlossEntry ID="SGML" SortAs="SGML">
        <GlossTerm>Standard Generalized Markup Language</GlossTerm>
        <Acronym>SGML</Acronym>
        <Abbrev>ISO 8879:1986</Abbrev>
        <GlossDef>
          <para>A meta-markup language, used to create markup
languages such as DocBook.</para>
          <GlossSeeAlso OtherTerm="GML" />
          <GlossSeeAlso OtherTerm="XML" />
        </GlossDef>
        <GlossSee OtherTerm="markup" />
      </GlossEntry>
    </GlossList>
  </GlossDiv>
</glossary>

Warto również nadmienić, że JavaScript posiada natywne wsparcie dla notacji JSON i pozwala transformować obiekt JSON do formatu typu String i w drugą stronę. Służą do tego dwie funkcje:

  • stringify – transformuje obiekt JSON do String
  • parse – parsuje String i stara się z niego zbudować obiekt JSON

, które znajdziemy w obiekcie JSON.

Spójrzmy na przykład:

var json = {
  "glossary":{
    "title":"example glossary",
    "GlossDiv":{
      "title":"S",
      "GlossList":{
        "GlossEntry":{
          "ID":"SGML",
          "SortAs":"SGML",
          "GlossTerm":"Standard Generalized Markup Language",
          "Acronym":"SGML",
          "Abbrev":"ISO 8879:1986",
          "GlossDef":{
            "para":"A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso":[
              "GML",
              "XML"
            ]
          },
          "GlossSee":"markup"
        }
      }
    }
  }
};

var jsonAsString = JSON.stringify(json);
console.log(jsonAsString);

var againJson = JSON.parse(jsonAsString);
console.log(againJson);

Wersja online dostępna jest na jsfiddle.net Format JSON jest niezwykle często spotykany w komunikacji z wykorzystaniem serwisów typu REST.

Przykład operacji na notacji XML znajdziecie na stronie w3schools.com. Po raz kolejny odsyłam do dobrego źródła, bo nie chcę się powtarzać.

XMLHTTPRequest

O metodzie $.ajax oraz jej aliasach $.get i $.post pisałem już w poprzednich wpisach. Całość jednak opiera się na natywnym sposobie konsumowania tak zwanych web serwisów, z użyciem obiektu XMLHTTPRequest.

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    console.log(JSON.parse(xmlhttp.responseText));
  }
}
xmlhttp.open('GET', 'http://somefancyapi.com/returnjsonstring.json', true);
xmlhttp.send();

Całość wydaje się bajecznie prosta. Tworzymy obiekt, ustawiamy obsługę callback dla onreadystatechange, a następnie otwieramy połączenie i wysyłamy do serwera. Po odebraniu danych są one parsowane do JSON. Możemy jednak posłużyć się określeniem responseType, a odpowiedź zostanie nam zwrócona (jeśli nie wystąpi błąd) w żądanym formacie. Spójrzmy na kolejny przykład:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    console.log(xmlhttp.response);
  }
}
xmlhttp.responseType = 'json';
xmlhttp.open('GET', 'http://somefancyapi.com/returnjsonstring.json', true);
xmlhttp.send();

Nie ma konieczności korzystania z funkcji parse obiektu JSON. Całość wydaje się być jeszcze prostsza.

O XMLHTTPRequest pisałem już w poprzednich postach, a będzie o nim także mowa w kolejnych, więc nie ma co przedłużać. Zapraszam do własnych prób i przejrzenia API, które oferuje nam XMLHTTPRequest.