HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Программное ядро (или, на жаргоне программистов, "движок") нашего Web- сайта — справочника по HTML и CSS — готово и отлажено. Осталось только создать остальные Web-страницы, описывающие многочисленные теги HTML, атрибуты стиля CSS и примеры их использования. Мы ведь их так и не написали, увлекшись Web-дизайном и Web-программированием…

Мы познакомились с азами Web-дизайна, языками HTML, CSS и JavaScript, принципами Web-программирования и библиотекой Ext Core. И не только познакомились, но и применили полученные знания на практике, создав Web-сайт. Наш проект, хоть и невелик по объему, но зато использует самые "горячие" новинки Web- дизайна и Web-программирования. Подгружаемое и генерируемое содержимое, базы данных, семантическая разметка, интерактивные элементы — такое не везде встретишь.

А еще мы активно применяли новинки, которые несут нам HTML 5 и CSS 3. Многие Web-обозреватели уже сейчас поддерживают некоторые нововведения этих версий, а вскоре станут поддерживать и остальные их возможности. Ведь время идет, "черновые" стандарты становятся окончательными, а разработчики создают новые программы, которые будут поддерживать эти стандарты.

Конечно, не все было описано в этой книге. Многое осталось нерассмотренным. Но ведь окончательные редакции стандартов HTML 5 и CSS 3 еще далеки от завершения, да и Web-обозревателей, полностью соответствующих даже их "черновым" редакциям, также пока нет. Автор просто описал то, что, по его скромному мнению, понадобится даже неопытным Web-дизайнерам, и пригодится уже сейчас. А все прочее…

А все прочее описано в других материалах, которых хватает в Интернете. В табл. З.1 приведены интернет-адреса некоторых Web-сайтов, которые будут очень полезны Web-дизайнеру любого уровня подготовки и которыми пользовался сам автор при написании этой книги. Правда, все они на английском языке, но этот язык должен знать любой грамотный компьютерщик — вопрос даже не обсуждается!

Таблица 3.1. Некоторые Web-сайты с материалами по теме книги

Интернет-адрес Описание https://developer.mozilla.org/en Mozilla Developers Network (MDN). Раздел для разработчиков на Web-сайте сообщества Mozilla, создателя Web-обозревателя Firefox. Справочники по HTML, CSS, JavaScript, DOM, многочисленные статьи с примерами. Крайне рекомендуется, несмотря на несколько запутанную навигацию http://dev.opera.com/ Opera Developer Community (DevOpera). Раздел для разработчиков на Web-сайте Opera, создателей одноименного Web-обозревателя. Многочисленные интереснейшие статьи, в том числе по HTML 5 и CSS 3 http://www.w3.org/ Web-сайт World Wide Web Consortium (W3C). Все стандарты, окончательные и "черновые", статьи для разработчиков с примерами http://www.sencha.com/products/extcore/ Раздел на Web-сайте, посвященный библиотеке Ext Core. Web-страница загрузки, руководство разработчика с примерами, справочник, форумы поддержки

Вот теперь действительно все! До свидания!

Владимир Дронов

ПРИЛОЖЕНИЕ

Расширения CSS 

Расширения CSS — это атрибуты стиля, которые поддерживаются определенными Web-обозревателями и, можно сказать, расширяют возможности текущей версии CSS. Эти атрибуты стиля могут быть включены в черновую редакцию будущей версии CSS (на данный момент CSS 3), а могут вообще отсутствовать в любых документах, описывающих стандарт. В последнем случае расширения CSS служат для поддержки специфических возможностей того или иного Web-обозревателя. Стандарт CSS требует, чтобы имена всех расширений CSS начинались с особого префикса, обозначающего Web-обозреватель, который их поддерживает. В этом приложении нам встретятся три таких префикса:

— moz- обозначает Mozilla Firefox;

— o- обозначает Opera;

— webkit- обозначает Web-обозреватели, основанные на программном ядре Webkit. Самые известные среди них — Google Chrome и Apple Safari.

Постараемся их запомнить. Расширения CSS позволят нам задействовать возможности Web-обозревателя, которые не поддерживаются стандартом CSS или появятся только в будущей его версии. Однако, во-первых, расширения CSS зачастую поддерживаются только одним Web-обозревателем; другие Web-обозреватели могут и не "знать" об их существовании. Во-вторых, разработчики Web-обозревателя в любой момент могут лишить свое детище поддержки тех или иных расширений CSS, посчитав их ненужными.

НА ЗАМЕТКУ

На Web-странице https://developer.mozilla.org/en/CSS/CSS_transitions описаны расширения CSS, предназначенные для создания анимационных эффектов — так называемых переходов CSS. Тем не менее, насколько удалось выяснить автору, последние версии Firefox их не поддерживают, хотя, по идее, должны. Вероятно, это как раз случай, когда разработчики Firefox посчитали эту возможность ненужной и удалили ее поддержку в очередной версии программы.

Вполне возможно, что из описанных автором расширений CSS некоторые уже не поддерживаются.

В настоящем приложении мы рассмотрим некоторые расширения CSS, самые полезные для Web-дизайнеров, на взгляд автора.

Многоцветные рамки

Мы уже знаем, что с помощью особых атрибутов стиля CSS можно создавать одноцветные рамки у любых элементов Web-страницы.

Однако для рамок, толщина которых превышает один пиксел, мы можем задать сразу несколько цветов. В этом случае рамка будет представлена Web- обозревателем как набор вложенных друг в друга рамок толщиной в один пиксел. Первый из заданных нами цветов будет применен к самой внешней рамке, второй — к вложенной в нее рамке, третий — к рамке, вложенной в ту, которая вложена во внешнюю, и т. д.

Многоцветные рамки создают с помощью расширений CSS — moz-border-left- colors, — moz-border-top-colors, — moz-border-right-colors и — moz-border-bottom- colors. Они задают цвета, соответственно, для левой, верхней, правой и нижней стороны рамок.

— moz-border-left-colors|-moz-border-top-colors|-moz-border-right-colors|

— moz-border-border-colors: <набор цветов, разделенных пробелами>|none

Значение none убирает "многоцветье" у соответствующей стороны рамки. Это значение по умолчанию.

Данные расширения CSS поддерживаются только Firefox и не включены в стандарт CSS.

Пример:

#cheader { width: 1010px;

padding: 0 20px;

border-bottom: medium dotted;

— moz-border-bottom-colors: #B1BEC6 #F8F8F8 #B1BEC6 }

Здесь мы задаем для контейнера cheader рамку, состоящую из одной нижней стороны, средней толщины, с тремя цветами.

Рамки со скругленными углами

Рамки с прямоугольными углами встречаются очень часто и уже успели намозолить глаза. Вот рамки со скругленными углами — другое дело!

Расширения CSS — moz-border-radius-topleft (Firefox), border-top-left-radius (Opera и стандарт CSS 3) и — webkit-border-top-left-radius (Web-обозреватели на программном ядре Webkit) задают радиус скругления верхнего левого угла рамки:

— moz-border-radius-topleft|border-top-left-radius|

— webkit-border-top-left-radius: <значение 1> [<значение 2>]

Если указано одно значение, оно задаст радиус скругления и по горизонтали, и по вертикали. Если указаны два значения, то первое задаст радиус скругления по горизонтали, а второе — по вертикали, создавая тем самым скругление эллиптической формы. Радиус скругления может быть задан в любой единице измерения, поддерживаемой CSS.

Для указания радиуса скругления остальных углов рамки предназначены расширения CSS, перечисленные далее.

— moz-border-radius-topright (Firefox), border-top-right-radius (Opera и стандарт CSS 3) и — webkit-border-top-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления верхнего правого угла рамки.

— moz-border-radius-bottomright (Firefox), border-bottom-right-radius (Opera и стандарт CSS 3) и — webkit-border-bottom-right-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего правого угла рамки.

— moz-border-radius-bottomleft (Firefox), border-bottom-left-radius (Opera и

стандарт CSS 3) и — webkit-border-bottom-left-radius (Web-обозреватели на программном ядре Webkit) — радиус скругления нижнего левого угла рамки.

Формат их использования такой же, как у расширений CSS, описанных в начале этого раздела (листинг П1).

Листинг П1

#cheader { width: 1010px;

padding: 0 20px;

border-bottom: medium dotted;

— moz-border-radius-bottomleft: 2px;

— moz-border-radius-bottomright: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;

— webkit-border-bottom-left-radius: 2px;

— webkit-border-bottom-right-radius: 2px }

Здесь мы задаем для контейнера cheader рамку, состоящую из одной нижней стороны, имеющую радиусы скругления нижнего левого и нижнего правого углов, равные двум пикселам, сразу для всех Web-обозревателей, поддерживающих эту возможность. Таким образом, и Firefox, и Opera, и Web-обозреватели на программном ядре Webkit выведут эти углы рамки скругленными.

Расширения CSS — moz-border-radius (Firefox), border-radius (Opera и стандарт CSS) и — webkit-border-radius (Web-обозреватели на программном ядре Webkit) позволяют задать радиусы скругления сразу для всех углов рамки:

— moz-border-radius|border-radius|-webkit-border-radius:

<позиция 1 значение 1>[/<позиция 1 значение 2>] [<позиция 2 значение 1>[/<позиция 2 значение 2>][<позиция 3 значение 1>[/<позиция 3 значение 2>] [<позиция 4 значение 1>[/<позиция 4 значение 2>]]]]