Home > HTML5, IE, Web > [PL] #IE10 Platform Preview 1 z #CSS3Grid Layout

[PL] #IE10 Platform Preview 1 z #CSS3Grid Layout

Minął już ponad tydzień po tym, jak odbył się MIX 11, a w raz z nim światło dzienne ujrzało wiele nowinek technologicznych ze świata IT. Podczas tego spotkania, które w tym roku odbyło się w Las Vegas, kilka prelekcji poświęconych było kolejnej generacji HTMLa i CSS. Podczas tej konferencji światło dzienne ujrzała także przeglądarka IE 10, a raczej jej pierwsza odsłona, kóra obecnie jako jedyna zawiera kilka elementów z tworzącego się standardu CSS3 i HTML5.


W przeciągu ostatniego roku Microsoft (bez wazeliny) sporo zrobił i przyśpieszył pracę przy ustaleniu standardów web (między innymi z Googlem, Mozillą i Operą), chociaż przyznam szczerze, że od czasu gdy sam MS dołączył to praca naprawdę przyśpieszyła. W pierwszym wydaniu kolejnej poglądowej wersji przeglądarki Internet Explorer 10 zaimplementowany został między innymi CSS3 Grid Layout. Pokrótce przedstawię zastosowanie tego rozwiązania.

Czym jest CSS3 Grid Layout

Samo pojęcie Grida może niektórym przypominać Grida z WPFa i w pewnym sensie jest tym samym. Jako przykład przypuśćmy, że chcemy utworzyć stronę, której szablon przedstawia się mniej więcej jak na poniższym rysunku:

Za pomocą CSS3 Grid możemy osiągnąć to w bardzo prosty sposób, tworzymy prosty szablon w HTMLu:

<div id="grid">
 <div id="top">TOP</div> 
 <div id="left">LEFT</div> 
 <div id="content">CONTENT</div> 
 <div id="navigation">NAVIGATION</div> 
 <div id="info">INFO</div> 
</div> 

Jak widać w tym celu używamy jedynie taga DIV oraz zagnieżdżonych w nim innych tagów DIV przedstawiających określone regiony naszej strony. Dołączyć musimy do tego jeszcze styl CSS. Najpierw informujemy, że element z ID=”grid” ma wyświetlić się jako grid, w tym celu utworzona została dodatkowa wartość display: -ms-grid.

#grid {
	display: -ms-grid;
	-ms-grid-columns: 150px 2fr;
	-ms-grid-rows: 32px 1fr auto;
	background-color: red;
}

następnie tworzymy styl dla każdego obszaru informując w jakiej kolumnie i wierszu ma się wyświetlić

#navigation {
	-ms-grid-column: 2;
	-ms-grid-row: 3;
	background-color: #dedede;
}
#left {
	background-color: #efefef;
	-ms-grid-column: 1;
	-ms-grid-row: 2;
}
#content {
	background-color: #bababa;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
}
#top {
	background-color: #dedede;
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
#info {
	background-color: #f9f9f9;
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}

Otwierając teraz naszą stronę w przeglądarce nieobsługującej jeszcze tego selektora, strona wyświetli się w następujący sposób:

oraz wyświetlając w IE10 PP1, strona wyświetli się poprawnie:

Strona wyświetla się w gridzie, obszar wyświetlany na czerwono nie zawiera żadnego widoku. Co więcej, w kodzie HTML obszar INFO jest ostatnim selektorem DIV, natomiast w gridzie wyświetlany jest w pierwszej komórce. Dzięki temu łatwo możemy manipulować widok zmieniając pozycję wyświetlanych obszarów (odzielenie HTMLa od stylu). Warty uwagi jest też fakt, że nadal jest to draft, stosunkowo niedawno opublikowany, który jednak z pewnością zostanie zaimplementowany w finalnym wydaniu (przedrostek -ms zostanie usunięty).

Linki

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: