sobota, 2 czerwca 2012

CSS 3 odc.3 (adaptacyjny layout w stronach web)

Tym razem trochę notatek (z prezentacji IE 10 Platform Preview 1: The Future of Adaptive Web Design i The View of the World Depends on the Glasses I Wear) porządkujących tematykę tworzenia przy pomocy CSS3 stron web o skalowalnym układzie.

Dotychczasowe złe praktyki odnośnie layoutu na stronach web

  • tabelki (wpływają na markup i elementy DOM)
  • fluid text i CSS (możliwość “zepsucia”)
  • “wydruk” o szerokości 960px (na nowych ekranach często puste przestrzenie po lewej i prawej strony)

Nowe możliwości

  • zarządzanie rodzinami urządzeń (rozmiary i orientacje ekranów …)
    • CSS Media Queries  (telefon, tablet, desktop)
  • zarządzanie dostępną przestrzenią
    • CSS3 Grid Layout
  • adaptacyjne komponenty
    • CSS3 Flexbox
    • CSS3 Multi-Column

CSS Media Queries

image

image

image

image

image

image

image

image

image

Hardboiled CSS3 Media Quries - użyteczne zapytania

http://mediaqueri.es

CSS Grid Layout

Grid w CSS3 pod względem wierszy, kolumn, zarządzania warstwami przypomina Grida znanego z aplikacji XAML (Silverlight, WPF, …). Dodatkowo z jego poziomu można wpływać na sposób wyrównywania układanych elementów.

image

image

image

image

image

image

CSS3 FlexBox

FlexBox z CSS3 odpowiada mniej więcej panelom StackPanel i WrapPanel z Silverlight i WPF, aczkolwiek zawiera też niespotykane w nich funkcjonalności (rozciąganie możemy uzyskać za pomocą Grid-a w aplikacjach XAML, ale są też inne bardziej unikalne). Jednocześnie wszystko się bardzo łatwo i szybko definiuje, prościej nawet niż w aplikacjach XAML.

image

image

image

image

image

image

image

image

image

image

image

image

CSS3 Multi-column

image

image

image

image

image

Skracanie napisów z użyciem … (tak jak np. w Silverlight)

image

Zmiana wyrównania elementów w gridzie w szablonie elementu listy

image

Popup ze szczegółami zawsze wycentrowany przez flexbox (wyglądem przypomina to ChildWindow z Silverlight)

image

image

Brak komentarzy: