Перспективы и расширения HTML

Разбить на страницы

Показывать лекцию целиком

Последний стандарт HTML появился в 1998 году. После этого работа консорциума WWW над развитием HTML была на долгое время прервана, но в 2007 году возобновлена. В настоящее время работа над проектом HTML 5 ведётся W3C совместно с группой разработчиков, называемой Web Hypertext Application Technology Working Group (WHATWG). В основе этой работы лежит стремление создать спецификацию новой версии HTML, учитывающую реальные современные потребности веб-разработчиков и более точно (по сравнению с HTML 4) описывающую порядок интерпретации документа браузером.

Момент, когда можно будет забыть HTML 4 и полностью перейти на HTML 5, наступит точно не скоро. Для этого спецификация HTML 5 сначала должна быть завершена, одобрена производителями браузеров и полностью реализована в браузерах. И ещё должно будет пройти какое-то время, чтобы доля старых браузеров, не поддерживающих новой спецификации, сократилась бы до пренебрежимо малой величины.

Однако почему бы уже сейчас не создавать страницы, которые несколько красивее выглядят в браузерах, поддерживающих новые возможности HTML 5 и CSS 3? Главное, предусмотреть также поведение страниц в остальных сегодняшних (и, желательно, завтрашних) браузерах.

В этой лекции рассматриваются далеко не все возможности, заложенные в новые спецификации (для этого нужен отдельный курс), а только отдельные интересные моменты, которые уже сейчас работают в тех или иных браузерах. Мы не будем уточнять, в каких именно, потому что ситуация меняется очень быстро. Эту информацию можно всегда уточнить в таблицах совместимости браузеров со стандартами - например, http://www.quirksmode.org/dom/html5.html и http://www.quirksmode.org/css/contents.html .

Определение типа документа HTML 5

ОТД в HTML 5 упрощено до предела:

<!DOCTYPE html>

Современные браузеры воспринимают такое ОТД независимо от наличия у них поддержки HTML 5 (полной поддержки пока нет ни в одном браузере) - при этом они переходят в стандартный режим.

Улучшения, касающиеся форм

Это, в первую очередь, валидация введённых пользователем данных и новые типы элемента ввода, созданные специально для ввода и валидации таких данных как e-mail, URL, телефон, дата, время, число и т.п.

В использовании всё очень просто: HTML-элемент input может иметь дополнительные значения атрибута type, datetime-local, date, month, week, time, number, range, email и url. Браузер отображает элементы этих типов на экране специфическим образом. Также тип элемента ввода влияет на представление значения в DOM и способ его проверки перед отправкой формы.

(рис 21.1) Новые элементы ввода в HTML 5

Браузеры, не понимающие новых типов input, отобразят их как <input type="text" />. Таким образом, функциональность не страдает, и никаких усилий для соблюдения обратной совместимости прилагать не нужно. Однако, если вы хотите, чтобы, например, календарь отобразился в любом случае, то в качестве решения можно использовать одну из Javascript-библиотек. А можно поступить и так: сначала проверить, поддерживает ли браузер требуемый тип input и, если нет, то создать календарь на Javascript.

<script type="text/javascript">
	//создадим в памяти элемент input
	var inp = document.createElement("input");
	//попытаемся установить его тип в "date"
	inp.setAttribute("type", "date");
	//если тип остался обычным текстом,
	if (inp.type == "text") {
		//то используем JQuiry UI для создания календаря
		$("#calendar").datepicker();
	}
</script>

С проверкой вводимых пользователем данных в HTML 5 связан ещё целый ряд интересных моментов. Во-первых, поля обязательные для заполнения могут быть снабжены атрибутом required:

<input type="text" name="name" required="required" />

Это гарантирует, что форма не будет отправлена с незаполненным полем.

Другой интересный атрибут элемента input - pattern. С помощью атрибута pattern можно задать регулярное выражение, которому должен соответствовать введённый текст:

<label>
	Номер кредитной карты:
	<input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

В данном случае введённый текст должен состоять из цифр в количестве от 13 до 16.

Пользуясь селекторами атрибутов CSS 3, можно связать различные состояния элементов input с разным форматированием, например, так:

<style type="text/css">
	input:valid {
		background: lime;
	}
	input:invalid {
		background: red;
		color: white;
	}
	input:required {
		background: yellow;
		color: Red;
	}
</style>

Результат показан на скриншоте и, видимо, не нуждается в пояснениях.

(рис 21.2) Применение стилей к псевдоклассам, соответствующим состояниям элементов формы Упражнение. Создайте HTML-документ с формой и несколькими элементами ввода нового типа. Просмотрите документ сначала в браузере, поддерживающем эти типы элементов, затем - в не поддерживающем. Добавьте скрипт, сообщающий пользователю о том, полноценно ли отображается форма.

Что касается новых средств валидации, то их применение пока сильно ограничено: если браузер их не поддерживает, то никакой валидации просто не будет. Как правило, это недопустимо (хотя на сервере в любом случае необходима ещё одна проверка принятых от клиента данных).

Ссылки:

http://www.whatwg.org/specs/web-forms/current-work/#extensions

http://diveintohtml5.org/forms.html

Пример работающей формы: http://devfiles.myopera.com/articles/67/example.html

Canvas

Этот новый HTML-элемент предоставляет API для рисования. В отличие от SVG, Canvas оперирует не объектами (текст, линия, кривая), а точками, т.е. выполнение, например, команды fillRect создаст на холсте нарисованный прямоугольник, но не предоставит нового объекта, аналогичного rect в SVG, которым можно было бы манипулировать при помощи набора свойств и методов DOM, и который мог бы реагировать на внешние события. Зато работа Canvas с точечной графикой более эффективна, чем в SVG. Несколько команд рисования показано в примере 21.1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Canvas 2D</title>
	<style type="text/css">
		div {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 600px;
			height: 400px;
			margin: -200px 0 0 -300px;
		}
	</style>
</head>
<body>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

	<script type="text/javascript">
		window.onload = function() {
			/*получаем ссылку на холст*/
			var canvas = document.getElementById('myCanvas');
			/*контекст*/
			var context = canvas.getContext('2d');
			/*создаём градиент*/
			var myGradient = context.createLinearGradient(0, 0, 600, 400);
			/*добавляем цветовые позиции к градиенту*/
			myGradient.addColorStop(0, "green");
			myGradient.addColorStop(1, "white");
			/*устанавливаем созданный градиент как стиль заливки*/
			context.fillStyle = myGradient;
			/*заливаем прямоугольную область*/
			context.fillRect(0, 0, 600, 400);

			/*определяем стиль текста*/
			context.font = "bold 50px sans-serif";
			/*цвет обводки*/
			context.strokeStyle = 'black';
			/*толщина линий*/
			context.lineWidth = '3.0';
			/*цвет заливки*/
			context.fillStyle = 'yellow';
			/*выравнивание текста*/
			context.textAlign = "center";
			context.textBaseline = "middle";
			/*рисуем обводку текста*/
			context.strokeText('Hello, World!', 300, 200);
			/*рисуем заливку текста*/
			context.fillText('Hello, World!', 300, 200);

		}
	</script>

	<div>
		<canvas id="myCanvas" width="600" height="400">
	      </canvas>
	</div>

</body>
</html>

В настоящее время элемент Canvas поддерживается большинством популярных браузеров, за исключением IE. Однако, IE поддерживает язык разметки векторной графики VML, который позволяет частично эмулировать Canvas, и для эмуляции создана Javascript-библиотека ExplorerCanvas (см. пример 21.1 - в нём к HTML-странице подключается скрипт excanvas.js ). Таким образом, этот элемент с некоторыми ограничениями использовать можно.

Ссылка на спецификацию: http://www.w3.org/TR/html5/the-canvas-element.html

Хранилище DOM

Ещё один полезный механизм, заложенный в проект спецификации HTML 5 и уже реализованный в IE8, а также в ряде других браузеров - хранилище DOM.

С помощью хранилища DOM, как и с помощью файлов Cookie, веб-разработчики могут сохранять данные на стороне клиента для конкретного сеанса ( sessionStorage ) или специфические данные домена ( localStorage ) в виде пар имя-значение.

Хранилище DOM может предоставить значительно больше дискового пространства, чем файлы Cookie. В Internet Explorer в файлах Cookie можно сохранить только 4 КБ данных. В хранилище DOM в IE8 предоставляется приблизительно 10 МБ для каждой области хранения (в других браузерах - несколько меньше).

С функциональной точки зрения хранилища DOM значительно отличаются от файлов Cookie. Из хранилища DOM значения не передаются на сервер с каждым запросом, как в файлах Cookie, и срок действия данных в локальной области хранения никогда не истекает. В отличие от файлов Cookie в хранилище DOM проще осуществлять доступ к отдельным фрагментам данных с использованием стандартного интерфейса, который приобретает все более широкую поддержку у поставщиков браузеров.

Пример 14.2 иллюстрирует основные приёмы работы с хранилищем.

<!DOCTYPE html>
<html>
<head>
  <title>Сохранение сеанса</title>

  <script type="text/javascript">
    var list;
    window.onload = function() {
      //сохраняем ссылку на список (она будет использоваться часто)
      list = document.getElementById('list');
      var StorageSupported = false;
      //определяем, поддерживается ли хранилище:
      //некоторые браузеры создают исключение при обращении к sessionStorage -
      //поэтому помещаем проверку в блок try/catch
      try {
        if (sessionStorage) StorageSupported = true;
      }
      catch (e) { }


      if (StorageSupported) {
        //поддержка есть - сообщим об этом
        document.getElementById('msg').innerHTML = 
          'Ваш браузер ' + 'поддерживает'.fontcolor('green') + ' хранилище сеанса';
        //проходим в цикле по всем элементам, уже сохранённым в хранилище (если есть)
        for (var n = 0; n < sessionStorage.length; n++) {
          var key = sessionStorage.key(n);
          //помещаем их ключи и значения в список list
          list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
        }
      }
      else {
        //поддержки нет - также сообщаем об этом
        document.getElementById('msg').innerHTML = 
          'Ваш браузер ' + 'не поддерживает'.fontcolor('red') + ' хранилище сеанса';
        //получаем ссылку на массив элементов формы
        var formElems = document.forms[0].elements;
        //и делаем их недоступными (disabled)
        for (i = 0; i < formElems.length; i++) {
          formElems[i].disabled = 'disabled';
        }
      }
    }

    //это событие возникает (если браузер его поддерживает) при изменении в хранилище
    document.onstorage = function() {
      //опустошаем список
      while (list.hasChildNodes()) { list.removeChild(list.firstChild); }

      //и воссоздаём его на основе изменившегося хранилища
      for (var n = 0; n < sessionStorage.length; n++) {
        var key = sessionStorage.key(n);
        list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
      }
    }
  </script>

</head>
<body>
  <h1>
    Страница 1</h1>
  <h2 id="msg">
  </h2>
  <form action="">
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info1</code>:</p>
  <textarea cols="50" rows="5" id="info1" onkeyup="if(value) sessionStorage.setItem('info1', value);"></textarea>
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info2</code>:</p>
  <textarea cols="50" rows="5" id="info2" onkeyup="if(value) sessionStorage.setItem('info2', value);"></textarea>
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info3</code>:</p>
  <textarea cols="50" rows="5" id="info3" onkeyup="if(value) sessionStorage.setItem('info3', value);"></textarea>
  <p>
    <label>
      Ключи, существующие в хранилище сеанса:<br />
      <br />
      <select id="list" size="3" style="width: 200px;">
      </select>
    </label>
    <br />
    <input type="button" value="Поместить в textarea" onclick="if(list.value) 
  document.getElementById(list.value).value = sessionStorage[list.value]" />
    <input type="button" value="Удалить выделенный" 
    onclick="if(list.value) sessionStorage.removeItem(list.value);" />
    <br />
    <input type="button" value="Удалить все" onclick="sessionStorage.clear();" />
    <input type="button" value="Обновить список" onclick="document.onstorage()" />
    <br />
    <br />
    <a href="Ext_sessionStorage_page2.htm">Перейти на страницу 2</a></p>
  </form>
</body>
</html>

Упражнения.

Введите произвольный текст в области ввода. При необходимости нажмите кнопку "Обновить список" (браузер IE8 обрабатывает событие onstorage, остальные - пока нет). Список отображает введённые блоки текста, сохранённые в хранилище сеанса.

Перейдите на страницу 2: а) в той же вкладке; б) в новой вкладке: в) начав новый сеанс (если используется IE8). Проследите в каждом случае: 1) отображаются ли в списке блоки, сохранённые на странице 1; 2) изменится ли список на странице 1, если его изменить на странице 2 (в случае "а" должен).

Откройте код страницы 1 в редакторе и измените везде sessionStorage на localStorage. Запустите изменённую страницу и убедитесь, что данные в локальном хранилище доступны даже после перезапуска браузера.

Пользоваться рассматриваемой технологией следует с осторожностью, поскольку лишь последние версии популярных браузеров её поддерживают. Поэтому на хранилище DOM следует возлагать задачи, связанные с повышением удобства пользователя (например, запоминание состояния страницы), но не с принципиальными моментами, касающимися функционирования приложения.

Ссылки:

http://dev.w3.org/html5/webstorage

http://msdn.microsoft.com/ru-ru/library/cc197062(VS.85).aspx

http://blogs.msdn.com/giorgio/archive/2009/11/29/ie8-and-html-5.aspx

CSS 3

В данном разделе рассматриваются те из многочисленных нововведений CSS 3, которые уже нашли поддержку в отдельных браузерах и представляют интерес для веб-дизайнера, не создавая при этом серьёзных проблем обратной совместимости. О поддержке конкретным браузером того или иного механизме можно узнать на http://www.quirksmode.org/css/contents.html.

Новые селекторы

Теперь правила CSS могут назначать стили элементам по более сложным критериям, чем в CSS 2.1.

Дополнения к селекторам атрибутов: новые операторы сравнения ^=, $= и *= находят элементы, свойства которых соответственно начинаются, заканчиваются или содержат в себе указанную строку.

Этот механизм можно использовать, например, когда элементы формы или таблицы имеют осмысленные идентификаторы ( id или name ), состоящие из частей, которым можно поставить в соответствие некоторое форматирование. В примере 21.3 идентификатор ячейки таблицы указывает, какие цвета применять для содержащегося в ней текста.

table {
      font-family: Verdana;
      font-size: 40px;
      border-collapse: collapse;
    }
    td {
      border: 1px solid black;
      padding: 4px;
      text-align: center;
    }
    td[id^=r]:first-letter, td[id$=r] {
      color: Red;
    }
    td[id^=g]:first-letter, td[id$=g] {
      color: Green;
    }
    td[id^=b]:first-letter, td[id$=b] {
      color: Blue;
    }
    td[id^=v]:first-letter, td[id$=v] {
      color: Fuchsia;
    }
    td[id^=k]:first-letter, td[id$=k] {
      color: Black;
    }
  ...
  <table>
    <tr>
      <td id="rr">АБ</td><td id="rb">ВГ</td><td id="rg">ДЕ</td>
    </tr>
    <tr>
      <td id="br">ЖЗ</td><td id="bb">ИК</td><td id="bg">ЛМ</td>
    </tr>
    <tr>
      <td id="gr">НО</td><td id="gb">ПР</td><td id="gg">СТ</td>
    </tr>
    <tr>
      <td id="vr">УФ</td><td id="vb">ХЦ</td><td id="vg">ЧШ</td>
    </tr>
    <tr>
      <td id="kr">ЩЫ</td><td id="kb">ЬЭ</td><td id="kg">ЮЯ</td>
    </tr>
  </table>

(рис 21.3) Дополнительные селекторы атрибутов в CSS 3 Упражнение. Модифицируйте идентификаторы ячеек и создайте правила CSS, благодаря которым можно было бы назначать ячейкам ещё и фон (несколько градаций серого).

Ссылка: http://www.w3.org/TR/css3-selectors/#attribute-substrings .

Новые псевдоклассы

Псевдокласс n-го потомка

Достаточно мощный механизм, позволяющий дифференцировать потомков по номеру следования, в том числе циклически. Простейший и востребованный пример - чередование форматирования в абзацах или строках таблицы.

p:nth-child(odd) {
  background-color: #ccc;
}
p:nth-child(even) {
  background-color: #e7c;
}

(рис 21.4) Применение селектора n-го потомка

В спецификации (см. http://www.w3.org/TR/css3-selectors/#nth-child-pseudo ) приводятся и более сложные примеры:

p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

Очевидно, данные правила форматирования будут группировать элементы не парами, а четвёрками.

Псевдоклассы, близкие по смыслу - :nth-last-child, :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, где last означает отсчёт с конца, а of-type - счёт только элементов указанного типа, например:

img:nth-of-type(2n) { float: left; }.

Другие псевдоклассы:

:target выбирает элемент, если переход по гиперссылке был сделан на него. Например, при переходе по ссылке http://example.com/html/top.html#section_2 элемент с id=section_2 будет соответствовать селектору :target.

:checked выбирает те элементы ввода radio и checkbox, которые отмечены пользователем.

:not(X) формулирует отрицание к простому CSS-селектору.

Новый обобщённый комбинатор соседства (~)

При его помощи можно выразить следующее отношение: элемент со свойствами, определяемыми селектором, где-то перед которым в ряду соседей находится элемент со свойствами, определяемыми другим селектором. Приведём пример с простыми селекторами: абзацы после заголовков различного уровня будут иметь различное форматирование (при условии, что они являются соседями заголовков, а не вложены в какой-либо дополнительный контейнер).

h1 ~ p {
      color: Red;
      font-size: 1.2em;
    }
    h2 ~ p {
      font-size: 1em;
      color: blue;
    }
    h3 ~ p {
      color: green;
    }

(рис 21.5) Применение обобщённого комбинатора соседства

Ссылка: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

Программный интерфейс (API) селекторов

Селекторы предоставляют средства выборки элементов документа по разнообразным критериям - в первую очередь, для применения к ним стилей. Браузер, выполняя CSS-правило, эту выборку осуществляет, и формирует результат - список элементов. Новые спецификации позволяют использовать результирующий список в пользовательских сценариях (раньше для этого приходилось довольствоваться тремя методами - getElementById(), getElementsByName(), getElementsByTagName() и циклическим перебором элементов).

Для этого в спецификации (см. http://www.w3.org/TR/selectors-api/ ) предусмотрены методы querySelector() и querySelectorAll(), принимающие в качестве аргумента строки-селекторы (такие же, как в объявлениях стилей) и возвращающие либо первый элемент, соответствующий строке-селектору (первый метод) либо список всех соответствующих элементов (второй метод).

(рис 21.6) Применение API селекторов

Рамки и цвета

Наконец-то в CSS 3 можно задавать цветовой градиент.

Согласно черновику спецификации, определение градиента для цвета заливки будет выглядеть, например, так:

background: linear-gradient(-45deg, yellow, blue);
background: radial-gradient(red, yellow, green);

Идея в том, что фоном служит изображение, генерируемое браузером и задаваемое при помощи функций linear-gradient и radial-gradient.

Данные функции предусматривают множество вариантов задания цветов, их позиций и направления градиента. В настоящее время браузеры ещё не реализовали в полной мере стандартных функций градиента, но уже появились экспериментальные альтернативы. Имена альтернативных реализаций функций включают префикс, указывающий на браузер (либо ядро браузера), в котором данная функций определена. Например, вы можете применять такие объявления:

div {
	background-image: -moz-linear-gradient(top, #E63B10, #F5EF38);
	background-image: -webkit-gradient(linear,center top, center bottom,from(#E63B10),to(#F5EF38));
	background-color:#f5cB10;
	color: blue;
}

Первое объявление воспринимается браузером Mozilla Firefox (и другими браузерами на ядре Gecko); второе - Apple Safari и Google Chrome (и другими, построенными на ядре Webkit); третье - остальными браузерами. Таким образом, какой-нибудь фон будет показан в любом случае, и внешний вид секции не пострадает.

(рис 21.7) Определение градиентной заливки в CSS 3

Далее, градиент для рамки можно задать следующим образом:

.border_color {
	border: 8px solid #888;
	-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
}

Здесь толщина границы - 8 пикселов, и для каждого ряда пикселов задан свой цвет - от более тёмного к более светло-серому. Браузеры, не воспринимающие свойств с префиксом -moz, проигнорируют их, и рамка останется просто серой, как указывает свойство border.

(рис 21.8) Определение градиентной рамки в CSS 3

В CSS 3 скруглённые углы рамок можно создавать, не прибегая к дополнительным изображениям. Черновик спецификации определяет для этого свойство ). Экспериментальные свойства применяются на сегодняшний день так:

.border_rounded {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

(рис 21.9) Создание рамок со скруглёнными углами в CSS 3

Спецификация предусматривает разное закругление всех углов, эллиптическую форму округлости и многие другие интересные вещи.

Для рамок можно использовать и собственные изображения - для этого следует предоставить один файл и указать правила его деления на части с последующим повтором либо растяжением этих частей:

.border_img {
	border: 8px solid #3FA9F5;
	-moz-border-image: url(border_img.png) 27 stretch;
	-webkit-border-image: url(border_img.png) 27 stretch;
}

Здесь указано, что файл следует разрезать с шагом в 27 пикселов (в обоих направлениях), и срединные участки растянуть ( stretch ) до требуемых размеров:

(рис 21.10) Создание специальной рамки в CSS 3 путём растяжения фрагмента заданного изображения

Вариант с повтором (а не растяжением) срединных фрагментов:

.border_img {
	border: 8px solid #3FA9F5;
	-moz-border-image: url(border_img.png) 27 round;
	-webkit-border-image: url(border_img.png) 27 round;
}

(рис 21.11) Создание специальной рамки в CSS 3 путём повторения фрагмента заданного изображения

Исходное изображение:

И последний эксперимент с рамкой: она может отбрасывать тень:

.box_shadow {
	-moz-box-shadow: 10px 10px 5px #888;
	-moz-background-clip:padding;
	-webkit-box-shadow: 10px 10px 5px #888;
	-webkit-background-clip:padding;
}

(рис 21.12) Создание тени для блока в CSS 3

Заодно в данном примере использовано ещё одно новое свойство: background-clip, которое может принимать значения border (заливка распространяется на область границы) или padding (не распространяется).

Ссылки:

Рассмотренные в данном разделе примеры работают лишь в некоторых браузерах. Используя тот или иной приём, необходимо предусматривать и худший вариант - то, что принято называть "degrade gracefully", т.е., "отступление без потери лица". Если браузер не может отобразить градиентную заливку - должна быть определена простая заливка. Если невозможна фигурная рамка - должна быть простая рамка и т.д. Если используются новые селекторы и комбинаторы, то следует удостовериться, что и в тех браузерах, которые их игнорируют, страница всё равно выглядит приемлемо.

Вопросы

Какие новые виды элементов формы предусмотрены в HTML 5?

Какие имеются в HTML 5 возможности по проверке введённых в форму данных?

В чём отличие технологий SVG и Canvas?

Перечислите и охарактеризуйте дополнительные селекторы CSS 3.

Какие новые методы выборки элементов документа введены в DOM?

Какие новые свойства CSS 3 можно применять для работы с рамками и цветами?

Какие дополнительные предосторожности следует принимать, пользуясь новыми средствами HTML и CSS?

Страницы:

Определение типа документа HTML 5

ОТД в HTML 5 упрощено до предела:

<!DOCTYPE html>

Улучшения, касающиеся форм

(рис 21.1) Новые элементы ввода в HTML 5

<script type="text/javascript">
	//создадим в памяти элемент input
	var inp = document.createElement("input");
	//попытаемся установить его тип в "date"
	inp.setAttribute("type", "date");
	//если тип остался обычным текстом,
	if (inp.type == "text") {
		//то используем JQuiry UI для создания календаря
		$("#calendar").datepicker();
	}
</script>

<input type="text" name="name" required="required" />

Это гарантирует, что форма не будет отправлена с незаполненным полем.

<label>
	Номер кредитной карты:
	<input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

В данном случае введённый текст должен состоять из цифр в количестве от 13 до 16.

<style type="text/css">
	input:valid {
		background: lime;
	}
	input:invalid {
		background: red;
		color: white;
	}
	input:required {
		background: yellow;
		color: Red;
	}
</style>

Результат показан на скриншоте и, видимо, не нуждается в пояснениях.

Ссылки:

http://www.whatwg.org/specs/web-forms/current-work/#extensions

http://diveintohtml5.org/forms.html

Пример работающей формы: http://devfiles.myopera.com/articles/67/example.html

Canvas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Canvas 2D</title>
	<style type="text/css">
		div {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 600px;
			height: 400px;
			margin: -200px 0 0 -300px;
		}
	</style>
</head>
<body>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

	<script type="text/javascript">
		window.onload = function() {
			/*получаем ссылку на холст*/
			var canvas = document.getElementById('myCanvas');
			/*контекст*/
			var context = canvas.getContext('2d');
			/*создаём градиент*/
			var myGradient = context.createLinearGradient(0, 0, 600, 400);
			/*добавляем цветовые позиции к градиенту*/
			myGradient.addColorStop(0, "green");
			myGradient.addColorStop(1, "white");
			/*устанавливаем созданный градиент как стиль заливки*/
			context.fillStyle = myGradient;
			/*заливаем прямоугольную область*/
			context.fillRect(0, 0, 600, 400);

			/*определяем стиль текста*/
			context.font = "bold 50px sans-serif";
			/*цвет обводки*/
			context.strokeStyle = 'black';
			/*толщина линий*/
			context.lineWidth = '3.0';
			/*цвет заливки*/
			context.fillStyle = 'yellow';
			/*выравнивание текста*/
			context.textAlign = "center";
			context.textBaseline = "middle";
			/*рисуем обводку текста*/
			context.strokeText('Hello, World!', 300, 200);
			/*рисуем заливку текста*/
			context.fillText('Hello, World!', 300, 200);

		}
	</script>

	<div>
		<canvas id="myCanvas" width="600" height="400">
	      </canvas>
	</div>

</body>
</html>

Ссылка на спецификацию: http://www.w3.org/TR/html5/the-canvas-element.html

Хранилище DOM

Пример 14.2 иллюстрирует основные приёмы работы с хранилищем.

<!DOCTYPE html>
<html>
<head>
  <title>Сохранение сеанса</title>

  <script type="text/javascript">
    var list;
    window.onload = function() {
      //сохраняем ссылку на список (она будет использоваться часто)
      list = document.getElementById('list');
      var StorageSupported = false;
      //определяем, поддерживается ли хранилище:
      //некоторые браузеры создают исключение при обращении к sessionStorage -
      //поэтому помещаем проверку в блок try/catch
      try {
        if (sessionStorage) StorageSupported = true;
      }
      catch (e) { }


      if (StorageSupported) {
        //поддержка есть - сообщим об этом
        document.getElementById('msg').innerHTML = 
          'Ваш браузер ' + 'поддерживает'.fontcolor('green') + ' хранилище сеанса';
        //проходим в цикле по всем элементам, уже сохранённым в хранилище (если есть)
        for (var n = 0; n < sessionStorage.length; n++) {
          var key = sessionStorage.key(n);
          //помещаем их ключи и значения в список list
          list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
        }
      }
      else {
        //поддержки нет - также сообщаем об этом
        document.getElementById('msg').innerHTML = 
          'Ваш браузер ' + 'не поддерживает'.fontcolor('red') + ' хранилище сеанса';
        //получаем ссылку на массив элементов формы
        var formElems = document.forms[0].elements;
        //и делаем их недоступными (disabled)
        for (i = 0; i < formElems.length; i++) {
          formElems[i].disabled = 'disabled';
        }
      }
    }

    //это событие возникает (если браузер его поддерживает) при изменении в хранилище
    document.onstorage = function() {
      //опустошаем список
      while (list.hasChildNodes()) { list.removeChild(list.firstChild); }

      //и воссоздаём его на основе изменившегося хранилища
      for (var n = 0; n < sessionStorage.length; n++) {
        var key = sessionStorage.key(n);
        list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
      }
    }
  </script>

</head>
<body>
  <h1>
    Страница 1</h1>
  <h2 id="msg">
  </h2>
  <form action="">
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info1</code>:</p>
  <textarea cols="50" rows="5" id="info1" onkeyup="if(value) sessionStorage.setItem('info1', value);"></textarea>
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info2</code>:</p>
  <textarea cols="50" rows="5" id="info2" onkeyup="if(value) sessionStorage.setItem('info2', value);"></textarea>
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info3</code>:</p>
  <textarea cols="50" rows="5" id="info3" onkeyup="if(value) sessionStorage.setItem('info3', value);"></textarea>
  <p>
    <label>
      Ключи, существующие в хранилище сеанса:<br />
      <br />
      <select id="list" size="3" style="width: 200px;">
      </select>
    </label>
    <br />
    <input type="button" value="Поместить в textarea" onclick="if(list.value) 
  document.getElementById(list.value).value = sessionStorage[list.value]" />
    <input type="button" value="Удалить выделенный" 
    onclick="if(list.value) sessionStorage.removeItem(list.value);" />
    <br />
    <input type="button" value="Удалить все" onclick="sessionStorage.clear();" />
    <input type="button" value="Обновить список" onclick="document.onstorage()" />
    <br />
    <br />
    <a href="Ext_sessionStorage_page2.htm">Перейти на страницу 2</a></p>
  </form>
</body>
</html>

Упражнения.

Ссылки:

http://dev.w3.org/html5/webstorage

http://msdn.microsoft.com/ru-ru/library/cc197062(VS.85).aspx

http://blogs.msdn.com/giorgio/archive/2009/11/29/ie8-and-html-5.aspx

CSS 3

Новые селекторы

Теперь правила CSS могут назначать стили элементам по более сложным критериям, чем в CSS 2.1.

table {
      font-family: Verdana;
      font-size: 40px;
      border-collapse: collapse;
    }
    td {
      border: 1px solid black;
      padding: 4px;
      text-align: center;
    }
    td[id^=r]:first-letter, td[id$=r] {
      color: Red;
    }
    td[id^=g]:first-letter, td[id$=g] {
      color: Green;
    }
    td[id^=b]:first-letter, td[id$=b] {
      color: Blue;
    }
    td[id^=v]:first-letter, td[id$=v] {
      color: Fuchsia;
    }
    td[id^=k]:first-letter, td[id$=k] {
      color: Black;
    }
  ...
  <table>
    <tr>
      <td id="rr">АБ</td><td id="rb">ВГ</td><td id="rg">ДЕ</td>
    </tr>
    <tr>
      <td id="br">ЖЗ</td><td id="bb">ИК</td><td id="bg">ЛМ</td>
    </tr>
    <tr>
      <td id="gr">НО</td><td id="gb">ПР</td><td id="gg">СТ</td>
    </tr>
    <tr>
      <td id="vr">УФ</td><td id="vb">ХЦ</td><td id="vg">ЧШ</td>
    </tr>
    <tr>
      <td id="kr">ЩЫ</td><td id="kb">ЬЭ</td><td id="kg">ЮЯ</td>
    </tr>
  </table>

Ссылка: http://www.w3.org/TR/css3-selectors/#attribute-substrings .

Новые псевдоклассы

Псевдокласс n-го потомка

p:nth-child(odd) {
  background-color: #ccc;
}
p:nth-child(even) {
  background-color: #e7c;
}

(рис 21.4) Применение селектора n-го потомка

В спецификации (см. http://www.w3.org/TR/css3-selectors/#nth-child-pseudo ) приводятся и более сложные примеры:

p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

Очевидно, данные правила форматирования будут группировать элементы не парами, а четвёрками.

img:nth-of-type(2n) { float: left; }.

Другие псевдоклассы:

:checked выбирает те элементы ввода radio и checkbox, которые отмечены пользователем.

:not(X) формулирует отрицание к простому CSS-селектору.

Новый обобщённый комбинатор соседства (~)

h1 ~ p {
      color: Red;
      font-size: 1.2em;
    }
    h2 ~ p {
      font-size: 1em;
      color: blue;
    }
    h3 ~ p {
      color: green;
    }

(рис 21.5) Применение обобщённого комбинатора соседства

Ссылка: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

Программный интерфейс (API) селекторов

(рис 21.6) Применение API селекторов

Рамки и цвета

Наконец-то в CSS 3 можно задавать цветовой градиент.

Согласно черновику спецификации, определение градиента для цвета заливки будет выглядеть, например, так:

background: linear-gradient(-45deg, yellow, blue);
background: radial-gradient(red, yellow, green);

div {
	background-image: -moz-linear-gradient(top, #E63B10, #F5EF38);
	background-image: -webkit-gradient(linear,center top, center bottom,from(#E63B10),to(#F5EF38));
	background-color:#f5cB10;
	color: blue;
}

(рис 21.7) Определение градиентной заливки в CSS 3

Далее, градиент для рамки можно задать следующим образом:

.border_color {
	border: 8px solid #888;
	-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
}

(рис 21.8) Определение градиентной рамки в CSS 3

.border_rounded {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

(рис 21.9) Создание рамок со скруглёнными углами в CSS 3

.border_img {
	border: 8px solid #3FA9F5;
	-moz-border-image: url(border_img.png) 27 stretch;
	-webkit-border-image: url(border_img.png) 27 stretch;
}

(рис 21.10) Создание специальной рамки в CSS 3 путём растяжения фрагмента заданного изображения

Вариант с повтором (а не растяжением) срединных фрагментов:

.border_img {
	border: 8px solid #3FA9F5;
	-moz-border-image: url(border_img.png) 27 round;
	-webkit-border-image: url(border_img.png) 27 round;
}

(рис 21.11) Создание специальной рамки в CSS 3 путём повторения фрагмента заданного изображения

Исходное изображение:

И последний эксперимент с рамкой: она может отбрасывать тень:

.box_shadow {
	-moz-box-shadow: 10px 10px 5px #888;
	-moz-background-clip:padding;
	-webkit-box-shadow: 10px 10px 5px #888;
	-webkit-background-clip:padding;
}

(рис 21.12) Создание тени для блока в CSS 3

Ссылки:

Вопросы

Какие новые виды элементов формы предусмотрены в HTML 5?

Какие имеются в HTML 5 возможности по проверке введённых в форму данных?

В чём отличие технологий SVG и Canvas?

Перечислите и охарактеризуйте дополнительные селекторы CSS 3.

Какие новые методы выборки элементов документа введены в DOM?

Какие новые свойства CSS 3 можно применять для работы с рамками и цветами?

Какие дополнительные предосторожности следует принимать, пользуясь новыми средствами HTML и CSS?

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Перспективы и расширения HTML

Определение типа документа HTML 5

Улучшения, касающиеся форм

Canvas

Хранилище DOM

CSS 3

Новые селекторы

Новые псевдоклассы

Псевдокласс n-го потомка

Новый обобщённый комбинатор соседства (~)

Программный интерфейс (API) селекторов

Рамки и цвета

Вопросы

Определение типа документа HTML 5

Улучшения, касающиеся форм

Canvas

Хранилище DOM

CSS 3

Новые селекторы

Новые псевдоклассы

Псевдокласс n-го потомка

Новый обобщённый комбинатор соседства (~)

Программный интерфейс (API) селекторов

Рамки и цвета

Вопросы

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!