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
Hardboiled CSS3 Media Quries - użyteczne zapytania
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.
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.
CSS3 Multi-column
Skracanie napisów z użyciem … (tak jak np. w Silverlight)
Zmiana wyrównania elementów w gridzie w szablonie elementu listy
Popup ze szczegółami zawsze wycentrowany przez flexbox (wyglądem przypomina to ChildWindow z Silverlight)
Posty
Brak komentarzy:
Prześlij komentarz