Упражнения.
Введите произвольный текст в области ввода. При необходимости нажмите кнопку "Обновить список" (браузер 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 (html, txt)
Рис. 21.3. Дополнительные селекторы атрибутов в CSS 3
Упражнение. Модифицируйте идентификаторы ячеек и создайте правила CSS, благодаря которым можно было бы назначать ячейкам ещё и фон (несколько градаций серого).
Ссылка: http://www.w3.org/TR/css3-selectors/#attribute-substrings .