HTML 5 okiem .NET-owca - odc.0 w części drugiej

Pozwolę sobie tutaj rzucić okiem na style CSS w ujęciu dość podstawowym i funkcjonalnie porównać je do styli XAML. W niewielkim stopniu zahaczymy też o podstawowe ustawienia elementów wizualnych i zagadnienia layout’u.

Historia

• CSS 1 - 1996 (czcionki, kolory, wyrównania, odstępy)
• CSS 2.1 - 2004 (layout, pozycjonowanie)
• CSS 3 - w rozwoju (efekty, rozmiary, mowa)

http://www.quirksmode.org/css/contents.html

Selektory w stylach

Proste

• po typie np. body;  h1,h2 (h1 i h2)
• po id, np. #menu
• po klasie, np.  .bookTitle
• wszytko *

Złożone

• potomek np. div p (paragrafy w div), ul li: nth-child(3) (trzecie dziecko), #buttons input:last-child (ostatnie dziecko)
• dziecko np. div > p (paragrafy w div bezpośrednio w nim zawarte)
• atrybut np. img[alt=spacer]
• pseudo-klasa np. a:visited, .menu li:hover

Więcej na http://www.w3.org/TR/css3-selectors/

Jak widać selektory dla styli w CSS są znacznie bardziej rozbudowane niż w XAML (np. w Silverlight), gdzie mamy w zasadzie dopasowanie po typie, a styl dla danej instancji możemy przypisać używając najczęściej StaticResource. Pseudo-klasy CSS jawią się jako pewne odpowiedniki stanów wizualnych w XAML, będących zazwyczaj składowymi szablonów kontrolek, które są też elementami stylów. W CSS brakuje możliwości definiowania szablonów dla kontrolek, w tym wyglądu dla ich template parts. Tą ostatnią rzecz Microsoft w przypadku swoich aplikacji Metro dla Windows 8 umożliwił w CSS poprzez zdefiniowane przez siebie selektory.

Wartości właściwości w stylach

• słowa - np. thin, thick, larger, x-large, solid
• rozmiary
  • fizyczne  - np. cale (in), punkty (pt) - np.28pt, milimetry - np. 2mm
  • ekranu - piksele (px)
  • relatywne -  %, em (np. 1.5em)
• kolory - #rrggbb, rbg(r,b,g), nazwy np. Black
• czcionki  - np. Helvetica
• postać funkcyjna - np. rgb(r,g,b), url(“http://…”) - np. background-image

W porównaniu do XAML zapis jest znacznie krótszy.

Visual Studio 2010:

• intellisense dla CSS
• edytor stylu

Kaskadowość - przypisywanie stylów z różnych źródeł, reguły, priorytety

Źródła styli

• style autora - <link>, @import (np. w pliku css @import url(“styles2.css”);)  (największy priorytet)
• styl użytkownika (większy priorytet)
• domyślny styl (mały priorytet)

Internet Explorer

• http://www.iecss.com/
• Internet Options –> User style sheet

!important - wymuszenie priorytetu (np. styl użytkownika w przeglądarce:  body { font-size: 150% !important; })

A jak jest ze źródłami styli w XAML? Zamiast plików CSS możemy mieć pliki zawierające tylko słowniki ResourceDictionary, które mogą przechowywać nie tylko style. Słownik też może importować inny słownik (merged dictionaries), co daje także możliwość importowania do danego miejsca w aplikacji (np. słownika strony lub aplikacji). Kontrolki w XAML w danej technologii mają predefiniowane style określające ich domyślny wygląd. Jeśli autorzy aplikacji skorzystali z zasobów systemowych (kolorów), to użytkownicy poprzez zmianę ustawień w systemie operacyjnym (Windows, Windows Phone) mogą wpływać na wygląd aplikacji. Także w przypadku XAML najważniejsze są style autorów aplikacji, mniej ważne są style wynikające z ustawień systemowych czy zawarte w samych kontrolkach. Nie ma natomiast specjalnych mechanizmów do wymuszenia stylu użytkownika na elementach.

Reguły wybierania styli (c.d)

W przypadku kilku styli zdefiniowanych w tym samym miejscu brany jest pod uwagę ostatni (kolejność definicji ma znaczenie). Podobnie jest przy linkowaniu plików CSS w stronie.

Narzędzia przeglądarek np. Internet Explorer 9, Chrome - drzewo elementów HTML z wyszczególnieniem wartości z różnych stylów odnoszących się do elementu ze wskazaniem zwycięzcy.

CSS Reset – wyzerowanie wszystkich parametrów np. marginesów, wielkości czcionek, niezależnie od predefiniowanych styli w poszczególnych przeglądarkach

• developer.yahoo.com/yui/3/cssreset/
• meyerweb.com/eric/tools/css/reset/

Specyficzność:  100 *A + 10*B + C

• A - liczba selektorów po ID
• B - liczba selektorów po klasie i atrybutach
• C - liczba selektorów po typie

np.

• *  0
• UL LI  2
• LI.red 11
• #content  100

Z kilku styli odnoszących się do tej samej wartości zwycięża ten o najwyższej specyficzności, nawet jeśli nie jest zdefiniowany jako ostatni.

Styl zdefiniowany in-line w danym elemencie nadpisuje inne style.

Wartość konkretnej właściwości jest ustalana na podstawie jej ustaleń w poszczególnych stylach.

Dziedziczenie = część właściwości jest dziedziczona w dół (np. rozmiar czcionki, rodzina czcionki)

Narzędzia przeglądarki - np. w Chrome

Jawnie określony styl dla elementu ma większy priorytet niż wartości odziedziczone.

A jak jest z regułami wyboru styli w XAML?  Style najczęściej mają swoją nazwę x:Key (w Silverlight także x:Name), nie są przypinane jedynie na podstawie dopasowania po typie (pełniącym role prostego selektora). Przy braku nazwy mamy doczynienia ze stylami niejawnymi i wtedy przypinanie stylu do elementów danego typu odbywa się w sposób automatyczny. Kolejność definiowania styli w XAML z reguły nie ma znaczenia (przy rozszerzaniu styl bazowy powinien znajdować się wcześniej), nie można też zdefiniować dokładnie takich samych styli (o takich samych nazwach) w tym samym miejscu. Wartości, w tym style ustawione in-line na danym elemencie też mają większe znaczenie od styli zdefiniowanych w słownikach. Jeden styl w XAML może również odwoływać się do elementów o różnych rodzajach (np. kolor obwódki, margines). Także wartości dziedziczone w XAML (też ustawienia tekstowe, choć nie tylko np. DataContext, w WPF można pisać swoje propercje z tym mechanizmem) mają najmniejszy po wartościach ze styli domyślnych priorytet.

Box model - każdy element HTML tworzy swój “box”

Właściwości:

• border np. border-bottom: 3px solid black;
• padding np. padding-left: 5px
• margines np. margin:   0 3px 0 3px (top, right, bottom, left)
• display: block (zawsze na innych), inline (są przesuwane w dół tylko, gdy nie ma miejsca - przypomina horyzontalny WrapPanel), none (usunięcie), inline-block
• visibility:  hidden (nie wyświetla, ale rezerwuje miejsce)

Wertykalna redukcja marginesów na liście, by odległość pomiędzy elementami wynosiła tyle samo co od granicy listy

Narzędzia przeglądarki – np. w Chrome (Metrics)

Layout

Położenie: relative, absolute (w dokumencie), fixed (zawsze w tej samej odległości względem okna bez względu na przewijanie)

Przykład: position: relative; top: 20px; left: 50px

Także ujemne wartości

Układanie tekstu wokół obrazka

Przykład: obrazek - float: right; paragraf - clear: both (przeniesienie tekstu pod obrazek)

Te dość podstawowe właściwości są podobne w XAML, aczkolwiek jest trochę różnic. Nie ma oddzielnych propercji np. padding-left. Inna jest kolejność podawania odległości - left, top, right, bottom. Nie ma bezpośredniego odpowiednika display, za sposób układania elementów biorą odpowiedzialność kontenery layoutu np. Grid, StackPanel, Canvas, WrapPanel, oprócz ich domyślnych właściwości elementy mogą wskazywać jak chcą być w nim umieszczane. Można też pisać swoje własne kontenery. W XAML otaczanie obrazka tekstem również jest możliwe (np. w Silverlight 5 i aplikacjach Metro w Windows 8).

Czcionki

Kategorie z domyślnymi czcionkami np. do tekstu skryptu, do tekstu pochyłego lub konkretne listy rodzin czcionek:

• font-family: Arial, Helvetica, sans-serif;
• font-size: np. bezwględnie 18px lub relatywnie 2em (accessability)
• font-style: np. italic
• font-weight: np. bold
• font-variant: np. small-caps

W XAML jest podobnie, predefiniowanych kategorii nie ma, ale są predefiniowane czcionki, które są wszędzie, natomiast inne można dołączyć do aplikacji. Nie przewiduje się ścieżek typu, że jak użytkownik nie ma Arial to niech użyta zostanie Helvetica.

Tekst

• text-indent np. 3em (odstęp przed pierwszą linią każdego elementu)
• letter-spacing
• word-spacing
• text-decoration np. underline, line-through
• text-align
• text-transform
• vertical-align np. center, justify
• line-height np. 1.2em

W XAML jest podobnie, choć nie we wszystkich technologiach z nim związanych jest wszystko (np. w Silverlight nie ma tekstu przekreślonego, w Silverlight 5 pojawiła się możliwość określania odstępów między literami w tekście).