CSS3: будущее механизмов раскладки

Раскладка

Раскладка

Чем мы пользуемся сегодня?

table

Мейнстрим: float

  1. Создан не для раскладки
  2. Неочевидный способ
  3. Недостаточно развит

Сумасшествие

Профессор престарелый, аморальный, сумасшедший и непредсказуемый старик.

float:middle?

Относительно основания Барселоны существуют две различные легенды. Первая приписывает основание города герою греческих мифов Гераклу за 400 лет до основания Рима, а затем в 3-ем столетии до н. э. город был отстроен карфагенянином Гамилькаром Баркой, отцом Ганнибала, который назвал город Барсино в честь своей семьи. Вторая легенда приписывает основание города непосредственно Гамилькару Барке. В 133 г. до н. э. иберийский город Лайе был завоёван римлянами во главе с Луцием Корнелием Сципионом. Около 15 года до н. э. римляне сделали из города укрепление, центр которого располагался на горе Табер, небольшом холме возле современной городской мэрии (Plaça de Sant Jaume). При римлянах город именовался Colonia Faventia Julia Augusta Pia Barcino, значение его было небольшим по сравнению с соседним Тарраконом (Tarraco, современная Таррагона). Однако его богатство и значимость со временем росли благодаря удобному расположению и прекрасной гавани. Город чеканил собственные монеты, часть которых со времен Гальбы сохранилась. Останки древних укреплений можно и сегодня видеть в городе, а типичная римская планировка до сих пор заметна на карте исторического центра города, т. н. Готического Квартала (Barri Gòtic). Так, на улице Парадис около экскурсионного центра Каталонии видны римские колонны.

Город разрастался в пределах крепостной стены до завоевания франками в IV веке. К этому времени Барсино оттесняет Тарракон на второй план.

В начале V века город завоевали вестготы. Король Атаульф на короткий срок перенёс сюда свою столицу. В начале VIII века город завоевали арабы (мавры). Барселона начала приходить в упадок. В 801 году сын Карла Великого, Людовик Благочестивый отбил город у эмира и сделал Барселону столицей Испанской марки, буферной зоной под управления графа Барселоны. Большую роль сыграл маркграф Вильфред Волосатый, фактический основатель независимой Каталонии. Барселона всё ещё оставалась христианским форпостом, когда в 985 году её разграбил аль-Мансур (см. Взятие Барселоны (985)). Это нападение дало повод графу Барселоны Боррелю II освободиться от власти Каролингов.

position

CSS frameworks

Специального механизма нет

Требования к новому механизму

  1. Пока, table!
  2. Пока, #wrap!
  3. Привет, mediaqueries!
Grid Microsoft
Flexbox Mozilla
Template W3C

Grid Positioning Module

Подход основанный на строках и колонках

Сетка

Новые свойства

			div{
			  grid-columns:* (20px *)[5];
			  grid-rows:*;
			  }

Синтаксис

Новая единица измерения

1gr

float-offset

Оценка

Flexible Box Layout Module

Создание сетки с помощью гибких блоков

Основной принцип

			<div class="parent">
			  <div class="box">box 1</div> 
			  <div class="box">box 2</div>
			</div>
			 
			.parent .box{ 
			  display:box;
			  box-orient:horizontal;
			  box-flex:1;
			  }

Пример box-orient:horizontal

box-flex: 2;
box-flex: 1;
box-flex: 1;
box-flex: 10;
box-flex: 1;
box-flex: 1;
→
Если не задать width, то она будет зависеть от содержимого
←

Пример box-orient:vertical

box-flex: 2;
box-flex: 1;
box-flex: 1;

Пример box-pack

start
center
end
start
center
end

Новые свойства

Оценка

Template Layout Module

Создание раскладки по шаблону

Создание шаблона

				body{
				  display:
				    "aaa"
				    "bcd"
				  }
			
				header  {position:a}
				nav     {position:b}
				article {position:c}
				aside   {position:d}

Именование слотов

. a @

Новый псевдоэлемент

			::slot(a){
			  color:#333;
			  background:url(/i/bg.png);
			  }

Пример шаблона

			body{
			  display:
			    ".hhhh." /5em
			    ".nccs."
			    ".ffff." /3em
			    * 200px minmax(500px,800px) * 12em *;
			  }

Оценка

Почему так долго возятся с черновиками?

Аргументы

Спасибо за внимание! Вопросы?