жание. Благодаря заданию кодировок текст web-страниц отображается в читаемом виде, что является неотъемлемой частью представления webдокумента конечному пользователю.
КОНТРОЛЬНЫЕ ВОПРОСЫ
1.Какой стандарт является предшественником языка HTML?
2.Какие требования предъявлялись к языку гипертекстовой разметки?
3.Перечислите основные версии языка HTML.
4.Что такое тег? В чем его основное предназначение?
5.Какова структура тега? Назовите основные свойства тегов.
6.Дайте понятие атрибута.
7.Перечислите рекомендации по написанию кода в HTML5.
8.Приведите основные классификации тегов.
9.Каково назначение следующих тегов: <body>, <meta>, <form>, <title>, <select>?
10.Назовите самые используемые форматы изображений.
11.Почему не рекомендуется применять такой формат, как .bmp?
12.Какой формат изображения поддерживает анимацию?
13.Перечислите атрибуты тега <img>.
14.С помощью какого тега изображение можно представить в виде
карты?
15.Дайте определение таблицы в HTML.
16.Какие основные теги предназначены для работы с таблицами?
17.Для чего предназначена кодировка теста?
18.Назовите актуальный на текущий момент стандарт кодирования.
19.Какой тег применяется для указания кодировки текста?
20.Что такое подстановка и какое у нее предназначение?
19
2.БАЗОВЫЕ ПРИНЦИПЫ ТЕХНОЛОГИИ CSS
2.1.ПРАВИЛА И ПРЕИМУЩЕСТВА ПРИМЕНЕНИЯ
ТЕХНОЛОГИИ CSS
Язык HTML по праву можно считать первым этапом процесса обучения проектированию и разработке сайтов, но в настоящее время он не является основным инструментом, поскольку его возможности ограничены в части создания и описания концепции дизайна web-страниц. В силу этого получили признание каскадные таблицы стилей.
Каскадные таблицы стилей представляют собой набор параметров, управляющих видом и положением элементов web-страницы [11]. Для задания параметров стилей создается файл style.css. Так как на файл с параметрами стилей можно ссылаться из каждого web-документа, это позволяет устранить такую проблему, как дублирование данных. В то же время разделение исполняемого кода и оформления дизайна страниц значительно оптимизирует работу с внешним видом разрабатываемого сайта.
Применение каскадных таблиц стилей сопровождается специальными правилами. Эти правила позволяют определить стили элементов или групп элементов. Каждое правило имеет в синтаксисе селектор {свойство: значение; свойство: значение}. Селектор – это часть правила, предназначенная для того, чтобы сообщить браузеру, к какому из элементов применить тот или иной стиль. Каждая пара свойство: значение называется декларацией (ключевым словом). Основные правила, с которыми можно работать в CSS, представлены в табл. 2.1.
|
|
|
|
|
|
|
|
Таблица 2.1 |
|
|
Основные правила CSS |
|
|
|
|
||
|
|
|
|
|
|
|
|
|
№ |
Правило |
Описание |
Наличие возможности использовать правило |
|||||
п/п |
|
|
|
|
в браузере |
|
||
|
|
|
|
|
|
|
|
|
|
|
|
Chrome |
Firefox |
|
Opera |
Safari |
IExplorer |
|
|
|
|
|
|
|
|
|
1 |
@charset |
Служит для фик- |
|
|
|
|
|
|
|
|
сации кодировки |
+ |
+ |
|
+ |
+ |
+ |
|
|
символов |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20
|
|
|
|
|
|
|
|
|
|
|
Окончание табл. 2.1 |
|
|
|
|
|
|
|
|
|
|
||||
№ |
Правило |
|
Описание |
Наличие возможности использовать правило |
||||||||
п/п |
|
|
|
|
|
|
|
|
в браузере |
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Chrome |
Firefox |
Opera |
Safari |
IExplorer |
|
|
|
|
|
|
|
|
|
|
||||
2 |
@font-face |
Служит для рабо- |
|
|
|
|
|
|
||||
|
|
ты |
с |
дополни- |
+ |
+ |
|
+ |
+ |
+ |
||
|
|
тельными |
шриф- |
|
||||||||
|
|
|
|
|
|
|
|
|||||
|
|
тами |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
3 |
@font- |
Позволяет |
опти- |
|
|
|
|
|
|
|||
|
feature- |
мизировать рабо- |
|
|
|
|
|
|
||||
|
values |
ту |
CSS |
при |
ис- |
– |
+ |
|
– |
– |
– |
|
|
|
пользовании |
нес- |
|
|
|
|
|
|
|||
|
|
кольких шрифтов |
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
||
4 |
@import |
Служит |
для |
им- |
|
|
|
|
|
|
||
|
|
порта наполнения |
|
|
|
|
|
|
||||
|
|
файла CSS в |
те- |
+ |
+ |
|
+ |
+ |
+ |
|||
|
|
кущую |
таблицу |
|
|
|
|
|
|
|||
|
|
стилей |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
5 |
@keyframes |
Служит |
для |
ото- |
|
|
|
|
|
|
||
|
|
бражения |
проме- |
+ |
+ |
|
+ |
+ |
+ |
|||
|
|
жуточных |
точек |
|
||||||||
|
|
|
|
|
|
|
|
|||||
|
|
анимации |
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
||||
6 |
@media |
Служит для адап- |
|
|
|
|
|
|
||||
|
|
тации стилей под |
+ |
+ |
|
+ |
+ |
+ |
||||
|
|
конкретные типы |
|
|||||||||
|
|
|
|
|
|
|
|
|||||
|
|
устройств |
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
Из данных таблицы можно сделать вывод, что практически все правила поддерживаются основными браузерами.
Использование каскадных таблиц стилей дает разработчикам ряд весомых преимуществ, а именно:
1.Универсальность – возможность браузеров обрабатывать таблицы CSS без ошибок.
2.Использование альтернативных вариантов работы с таблицами – вставка элементов стилей в общий код страниц и подключение отдельных файлов стилей к страницам. При этом более эффективным вариантом является создание отдельного файла со стилями.
21
3.Ускорение работы web-документа за счет минимизации кода в части описания дизайна и, как следствие, снижение нагрузки на сервер.
4.Кеширование таблиц стилей браузером, т. е. однократное сохранение CSS-файлов и параметров в памяти браузера.
5.Возможность быстрого освоения CSS-технологии, что, в свою очередь, предполагает снижение затрат времени на саму разработку сайта.
6.Наличие множества инструментов, способствующих повышению эффективности работы с CSS-таблицами.
Явные недостатки у каскадных таблиц стилей на текущий момент отсутствуют. В числе некоторых затруднений в работе с CSS-таблицами можно выделить:
1) возникновение ошибок при выполнении редких команд CSS в браузерах, устаревших на текущиймомент;
2) некорректное применение команд из заявленного типа документа;
3) двойственность понимания браузером параметров стилей при размещении команд CSS внутри кода web-документа и отдельным файлом одновременно.
Таким образом, каскадные таблицы стилей являются незаменимым на сегодняшний момент инструментом, предназначенным для описания внешнего вида web-документов посредством специально разработанных правил.
2.2.ТИПЫ И СВОЙСТВА CSS-СТИЛЕЙ
Стили, применяющиеся к одному документу, можно явным образом классифицировать по следующим типам:
1. Стиль браузера. Данный тип стилей ориентирован на оформление всех элементов web-страницы по умолчанию с помощью браузера. Применятся этот вариант стиля только в случае, если оригинальные стили CSS для web-страницы не указаны. Стиль браузера, как правило, имеет самый низкий приоритет.
22
2. Стиль автора. Данный тип стилей задается разработчиком самостоятельно, поэтому и является авторским. Стиль автора можно считать оптимальным из всех типов, поскольку он в наибольшей степени адаптирует web-страницу под настройки браузеров и задает визуальное представление страницы, соответствующее техническим требованиям. Для стиля автора можно выделить несколько подтипов: 1) внешний стиль (работа с файлом style.css); 2) внутренний стиль (работа с тегом <style>); 3) встроенный стиль (работа с атрибутом style=“ ”). В основном разработчики отдают предпочтение внешнему стилю.
3. Стиль пользователя. Тип стилей настраивается пользователем самостоятельно благодаря параметрам конкретного браузера. Например, можно указать, что шрифт у абзацев всех страниц имеет одно и то же значение. Также можно самостоятельно задать стили тегам, отвечающим за ссылки, таблицы, изображения и др. С точки зрения работы с webстраницами стиль пользователя имеет самый высокий приоритет и позволяет полностью перенастроить дизайн web-документа.
Графически классификация стилей по типам представлена на рис. 2.1.
Рис. 2.1. Классификация стилей по типам
23
Каждый из подтипов стилей автора имеет собственный способ реализации. Подключение стилей внутри элемента является самым нежелательным, поскольку не следует размещать элементы CSS и HTML в одном документе. Суть этого способа заключается в том, что конкретный стиль записывается внутри тега HTML с использованием атрибута style. Синтаксис при этом будет выглядеть так, как указано в примере:
<p style="color: red">наполнение абзаца</p>
В данном примере для текста, который находится в рассматриваемом абзаце, будет задан красный цвет.
Подключение стиля внутри документа также не является эффективным с точки зрения производительности сайта, поскольку работа со стилями осуществляется в документе HTML. В случае такого подключения речь идет о записи стилей в структуру web-страницы (в теге <head>). В примере ниже рассмотрена общая схема синтаксиса подключения стилей внутри документа:
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Заголовок</title> |
|
<style type="text/css"> |
|
p { color: red; } |
|
a { color: green; } |
|
</style> |
|
... |
Из примера |
видно, что абзацы будут выделены красным цветом |
(p { color: red; |
}), а ссылки, присутствующие в тексте, – зеленым |
(a { color: green; }).
Третий тип подключения с помощью внешнего файла полностью отделяет HTML от CSS, это, в свою очередь, дает возможность применить стили одновременно к нескольким web-страницам. Для подключения
24
внешнего файла со стилями создается файл с расширением .css, загружается в систему и во всех нужных файлах HTML прописывается ссылка на внешний файл .css. Пример ссылки на отдельный файл со стилями (f.css) приведен ниже:
<!DOCTYPE html> <html> <head>
<title>Заголовок</title>
<link rel="stylesheet" type="text/css" href='f.css'/>
Общую схему CSS можно представить так, как показано на рис. 2.2.
Рис. 2.2. Общая схема CSS
Как видно из рис. 2.2, основной составляющей работы с CSS можно по праву считать свойства. В табл. 2.2 приведены наиболее распространенные свойства каскадных таблиц стилей, а также их описания и значения.
|
|
|
|
|
|
|
Таблица 2.2 |
|
|
|
|
|
|
Свойства CSS |
|
|
|
|
|
|
|
|
|
|
|
|
|
№ |
Имя |
Значения |
Описание |
|
|||
|
|
|
|
|
||||
|
п/п |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
|
background |
|
[background-color || background-image || |
|
Обеспечивает управле- |
|
|
|
|
|
background-repeat || background- |
|
ние фоном элементов |
|
|
|
|
|
|
|
attachment || background-position] | inherit |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2 |
|
background- |
|
<color> | transparent | inherit |
|
Позволяет задать цвет |
|
|
|
|
color |
|
|
фона |
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
3 |
|
background- |
|
<uri> | none | inherit |
|
Задает фоновое изоб- |
|
|
|
|
image |
|
|
ражение для документа |
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
25
|
|
|
Продолжение табл. 2.2 |
|
|
|
|
№ |
Имя |
Значения |
Описание |
п/п |
|
|
|
|
|
|
|
4 |
background- |
[ [<percentage> | <length> ]{1,2} | [ [top | |
Обеспечивает распо- |
|
center | bottom] || [left | center | right] ] ] | |
ложение фонового |
|
|
position |
||
|
inherit |
изображения |
|
|
|
||
|
|
|
|
5 |
|
|
Обеспечивает повто- |
|
background- |
repeat | repeat-x | repeat-y | no-repeat | |
рение фонового изоб- |
|
repeat |
inherit |
ражения в границах |
|
|
|
экрана |
|
|
|
|
6 |
border |
[ border-width || border-style || <color> ] | |
Определяет границы |
|
inherit |
конкретного элемента |
|
|
|
||
|
|
|
|
7 |
border- |
|
Позволяет объеди- |
|
collapse | separate | inherit |
нить/разделить смеж- |
|
|
collapse |
||
|
|
ные границы |
|
|
|
|
|
|
|
|
|
8 |
border-color |
<color>{1,4} | transparent | inherit |
Определяет цвет гра- |
|
ниц |
||
|
|
|
|
|
|
|
|
9 |
border-style |
<border-style>{1,4} | inherit |
Задает стиль линии |
|
границы |
||
|
|
|
|
|
|
|
|
10 |
border- |
<border-width>{1,4} | inherit |
Задает толщину линии |
|
width |
границы |
|
|
|
||
|
|
|
|
11 |
|
|
Способствует запрету |
|
clear |
none | left | right | both | inherit |
заполнения свободного |
|
пространства рядом |
||
|
|
|
|
|
|
|
с элементом |
|
|
|
|
12 |
clip |
<shape> | auto | inherit |
Позволяет вырезать |
|
содержимое элемента |
||
|
|
|
|
|
|
|
|
13 |
color |
<color> | inherit |
Задает цвет содержи- |
|
мого элемента |
||
|
|
|
|
|
|
|
|
14 |
|
[ [<uri> ,]* [ auto | crosshair | default | |
|
|
|
pointer | move | e-resize | ne-resize | nw- |
Определяет форму |
|
cursor |
resize | n-resize | se-resize | sw-resize | s- |
|
|
курсора |
||
|
|
resize | w-resize| text | wait | help ] ] | |
|
|
|
|
|
|
|
inherit |
|
|
|
|
|
26
|
|
|
Продолжение табл. 2.2 |
|
|
|
|
№ |
Имя |
Значения |
Описание |
п/п |
|
|
|
|
|
|
|
15 |
|
inline | block | list-item | run-in | compact | |
|
|
|
marker | table | inline-table | table-row- |
|
|
display |
group | table-header-group | table-footer- |
Задает способ отобра- |
|
group | table-row | table-column-group | |
жения элемента |
|
|
|
||
|
|
table-column | table-cell | table-caption | |
|
|
|
none | inherit |
|
|
|
|
|
16 |
float |
left | right | none | inherit |
Позволяет разместить |
|
элемент |
||
|
|
|
|
|
|
|
|
17 |
|
[ font-style || font-variant || font-weight ] |
Позволяет осуществ- |
|
|
[ font-size [ / line-height ] font-family ] | |
|
|
font |
лять управление |
|
|
caption | icon | menu | message-box | small- |
||
|
|
шрифтом |
|
|
|
caption | status-bar | inherit |
|
|
|
|
|
|
|
|
|
18 |
font-family |
[[ <family-name> | <generic-family> ],]* |
Определяет список се- |
|
[<family-name> | <generic-family>] | in- |
мейства шрифтов |
|
|
|
herit |
|
|
|
|
|
|
|
|
|
19 |
font-size |
<absolute-size> | <relative-size> | <length> |
Определяет тип кегля |
|
| <percentage> | inherit |
шрифта (размер) |
|
|
|
||
|
|
|
|
20 |
font-style |
normal | italic | oblique | inherit |
Определяет стиль |
|
шрифта |
||
|
|
|
|
|
|
|
|
21 |
|
|
Позволяет выбрать ва- |
|
font-variant |
normal | small-caps | inherit |
рианты отображения |
|
|
|
шрифта |
|
|
|
|
22 |
font-weight |
normal | bold | bolder | lighter | 100 | 200 | |
Определяет толщину |
|
300 | 400 | 500 | 600 | 700 | 800 | 900 | |
шрифта |
|
|
|
inherit |
|
|
|
|
|
|
|
|
|
23 |
height |
<length> | <percentage> | auto | inherit |
Задает ширину эле- |
|
мента |
||
|
|
|
|
|
|
|
|
24 |
line-height |
normal | <number> | <length> | <percent- |
Позволяет определить |
|
age> | inherit |
высоту строки |
|
|
|
||
|
|
|
|
25 |
margin |
<margin-width>{1,4} | inherit |
Служит для задания |
|
внешнего отступа |
||
|
|
|
|
|
|
|
|
26 |
padding |
<padding-width>{1,4} | inherit |
Служит для задания |
|
внутреннего отступа |
||
|
|
|
|
|
|
|
|
27
|
|
|
Окончание табл. 2.2 |
|
|
|
|
№ |
Имя |
Значения |
Описание |
п/п |
|
|
|
|
|
|
|
27 |
position |
static | relative | absolute | fixed | inherit |
Определяет позицию |
|
конкретного элемента |
||
|
|
|
|
|
|
|
|
28 |
right |
<length> | <percentage> | auto | inherit |
Определяет положение |
|
правой границы |
||
|
|
|
|
|
|
|
|
29 |
text-align |
left | right | center | justify | <string> | |
Служит для выравни- |
|
inherit |
вания текстового блока |
|
|
|
||
|
|
|
|
30 |
text- |
none | [ underline || overline || line-through |
Позволяет задать тек- |
|
decoration |
|| blink ] | inherit |
стовые эффекты |
|
|
|
|
31 |
text-indent |
<length> | <percentage> | inherit |
Позволяет задать аб- |
|
зацные отступы |
||
|
|
|
|
|
|
|
|
32 |
text- |
capitalize | uppercase | lowercase | none | |
Определяет начертание |
|
transform |
inherit |
текста |
|
|
|
|
33 |
vertical- |
baseline | sub | super | top | text-top | middle |
Задает вертикальное |
|
| bottom | text-bottom | <percentage> | |
выравнивание в преде- |
|
|
align |
||
|
<length> | inherit |
лах блока |
|
|
|
||
|
|
|
|
34 |
|
|
Служит для управле- |
|
visibility |
visible | hidden | collapse | inherit |
ния видимостью эле- |
|
|
|
мента |
|
|
|
|
35 |
z-index |
auto | <integer> | inherit |
Задает порядок пере- |
|
хода по клавише Tab |
||
|
|
|
|
|
|
|
|
Многие из представленных выше свойств предназначены для изменения вида табличных данных. Наглядное описание таблиц заключается в указании правил визуализации заголовков и ячеек таблиц, а также их выравнивания, определения границ между ячейками, представления рамок и т. д. Таким образом, свойства CSS являются составляющей основой для создания визуальных стилей, которые, в свою очередь, формируют уникальный вид сайта.
28
2.3.ОСОБЕННОСТИ СТАНДАРТА CSS3
Изначально концепция CSS была предложена Хоконом Виумом Ли, ученым, специалистом в области информатики и информационных технологий. Развитие CSS как самостоятельного формализованного языка происходило в несколько этапов, каждый из которых можно связать с активным использованием конкретной CSS-версии. Основные версии CSS представлены в табл. 2.3.
|
|
|
|
|
Таблица 2.3 |
|
Стадии развития CSS |
|
|
||
|
|
|
|
|
|
№ |
Версия и дата |
|
Возможности версии |
|
|
п/п |
введения в действие |
|
|
||
|
|
|
|
||
|
|
|
|
||
1 |
CSS1: принята Консорциумом |
1. |
Возможность управления отображением |
||
|
Всемирной паутины 17 декабря |
элементов на странице |
|
||
|
1996 г., отредактирована 11 ян- |
2. |
Возможность |
настройки обтекания тек- |
|
|
варя 1999 г. |
стом |
|
|
|
|
|
3. |
Возможность определения размеров эле- |
||
|
|
ментов |
|
|
|
|
|
4. |
Возможность |
управления |
свойствами |
|
|
форматирования текста и шрифтов [12] |
|||
|
|
|
|||
2 |
CSS2: принята Консорциумом |
К возможностям CSS1 добавлены: |
|||
|
Всемирной паутины 12 мая |
1. |
Возможность |
управления позициониро- |
|
|
1998 г. |
ванием элементов (блочная верстка) |
|||
|
|
2. |
Возможность |
изменения |
направления |
|
|
текста |
|
|
|
|
|
3. |
Возможность |
определения |
максималь- |
|
|
ных и минимальных размеров элементов |
|||
|
|
4. |
Возможность задания стилей для кавы- |
||
|
|
чек |
|
|
|
|
|
5. |
Возможность задания звуковых свойств |
||
|
|
таблиц |
|
|
|
|
|
6. |
Возможность управления контентом при |
||
|
|
его отправке на печать [12] |
|
||
|
|
|
|
|
|
29
|
|
|
|
Окончание табл. 2.3 |
|
|
|
|
|
|
|
№ |
Версия и дата |
|
Возможности версии |
|
|
п/п |
введения в действие |
|
|
||
|
|
|
|
||
|
|
|
|
|
|
3 |
CSS2.1: принята Консорциумом |
1. |
Исправлен ряд ошибок CSS2 |
|
|
|
Всемирной паутины 8 сентября |
2. |
Актуализированы особенности CSS2, |
||
|
2009 г. |
удалены устаревшие фрагменты |
|
||
|
|
|
|
||
4 |
CSS3: находится в стадии раз- |
1. |
Возможность отображения теней эле- |
||
|
работки |
ментов |
|
|
|
|
|
2. |
Возможность применения нестандартных |
||
|
|
шрифтов |
|
|
|
|
|
3. |
Возможность задания закругленных уг- |
||
|
|
лов и градиентных границ |
|
||
|
|
4. |
Возможность |
редактирования |
размеров |
|
|
блоков пользователями |
|
||
|
|
5. |
Возможность |
управления |
фоновыми |
|
|
изображениями |
|
|
|
|
|
|
|
|
|
Подробнее стоит остановиться на спецификации CSS3. Данную спецификацию по праву можно считать следующей ступенью в сфере визуального представления web-страниц. В настоящий момент модули спецификации постоянно совершенствуются, вместе с этим ни один браузер не имеет возможности поддерживать все модули разом. Как следствие, возникает проблема, заключающаяся в том, что разработчикам необходимо постоянно принимать решение, какие конструкции использовать, а какие игнорировать во время создания и оформления web-документов.
Применять стандарт CSS3 следует согласно трем принципам:
1. Работа со сложным функционалом CSS3, который необходим для реализации задач.
Суть принципа заключается в попытке использования высокого уровня поддержки на основных браузерах. Например, стандарт CSS3 позволяет работать со шрифтами правильного формата, что, в свою очередь, поддерживается даже устаревшими браузерами. Но на сегодняшний день не
30
все возможности CSS3 являются такими же универсальными, поскольку большинство современных браузеров ограничено в их представлении
иреализации.
2.Позиционирование возможностей CSS3 как усовершенствований предыдущих версий.
Идея второго принципа состоит в том, чтобы использовать CSS3 для более детальной и глубокой доработки web-страниц, которая, в свою очередь, не окажет влияния на отображение наполнения и форматирования web-страниц в устаревших браузерах. У данного принципа есть недостаток, связанный с тем, что большинство пользователей работает с разными браузерами вне зависимости от их актуальности. Поэтому конечный пользователь не всегда может получить доступ к наиболее привлекательной версии web-страницы.
3.Добавление запасных решений за счет специальной библиотеки
Modernizr.
Библиотека Modernizr позволяет разрешать конфликты между CSS3
иHTML5, а также является постоянно обновляемой. Ее возможности ориентированы на то, чтобы использовать свойства и правила CSS3 без ограничений со стороны браузеров.
В то же время создание новых возможностей CSS3, не связанных с оформлением страниц, породило достаточно большое количество вопросов об их необходимости, поскольку подобные результаты можно получить с применением JavaScript или модулей Flash и Silverlight. Достоинства и недостатки применения каждой из перечисленных технологий представлены в табл. 2.4.
Из таблицы можно сделать вывод, что технология CSS3 является полноценной альтернативой другим приведенным инструментам в связи с простотой синтаксиса, а также возможностью сохранения целостности web-документов.
31
Таблица 2.4
Сравнительный анализ web-технологий в части оформления документов
№ |
Наименование |
|
Достоинства |
Недостатки |
|
|||||
п/п |
технологии |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
1 |
CSS3 |
1. |
Простой синтаксис |
1. Низкоуровневая |
под- |
|||||
|
|
|
|
|
держка |
кроссбраузерности |
||||
|
|
|
|
|
в части |
реализации |
новых |
|||
|
|
|
|
|
возможностей |
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
2. |
Анимация с высокой ча- |
2. Небольшое |
количество |
|||||
|
|
стотой кадров |
|
инструментов |
для |
создания |
||||
|
|
|
|
анимации автоматически |
||||||
|
|
3. |
Высокая эффективность |
|||||||
|
|
от SEO-оптимизации |
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
4. |
Сохранение |
целостно- |
|
|
|
|
|
|
|
|
сти структуры самого доку- |
|
|
|
|
|
|
||
|
|
мента |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
2 |
JavaScript |
1. |
Наличие фреймворков |
1. Сложный |
|
|
синтаксис |
|||
|
|
|
|
|
сценариев |
|
|
|
|
|
|
|
|
|
|
||||||
|
|
2. |
Управление элементами |
2. Снижение скорости за- |
||||||
|
|
HTML, DOM, CSS |
|
грузки страницы |
|
|
|
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
3. Отсутствие |
индексации |
||||
|
|
|
|
|
контента |
поисковыми |
систе- |
|||
|
|
|
|
|
мами |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
3 |
Платформы |
1. |
Возможность |
создания |
1. Нет |
адаптации |
под |
|||
|
Flash |
анимаций, эффектов, трех- |
большинство |
|
мобильных |
|||||
|
и Silverlight |
мерных сцен высокой степе- |
устройств |
|
|
|
|
|
||
|
|
ни сложности |
|
|
|
|||||
|
|
|
2. Зависимость |
работоспо- |
||||||
|
|
|
|
|
собности |
от |
наличия |
кон- |
||
|
|
2. |
Наличие языка сцена- |
|||||||
|
|
кретного |
плагина |
или про- |
||||||
|
|
рия, |
который упрощает про- |
|||||||
|
|
граммной платформы |
|
|||||||
|
|
цедуру кодирования |
|
|||||||
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
3. Снижение |
|
|
возможно- |
||
|
|
|
|
|
стей поисковой оптимизации |
|||||
|
|
|
|
|
сайта из-за технической со- |
|||||
|
|
|
|
|
ставляющей, связанной с про- |
|||||
|
|
|
|
|
грузкой контента и некото- |
|||||
|
|
|
|
|
рых элементов сайта |
|
||||
|
|
|
|
|
|
|
|
|
|
|
32
Учитывая широкие возможности CSS3, следует отметить применение web-шрифтов. До появления CSS3 набор web-шрифтов был достаточно ограничен, поскольку большинство существовавших шрифтов не поддерживалось браузерами или операционными системами.
В CSS3 обеспечение подключения сложных шрифтов проводится посредством @font-face и состоит из нескольких этапов:
1.Необходимые шрифты подгружаются на сайт.
2.Каждый из подгруженных шрифтов фиксируется в таблице CSS
спомощью команды @font-face.
3. Шрифт, который был зафиксирован, применяется так же, как и обычные шрифты.
4.После определения браузером таблицы стилей, которая включает
всебя специальные шрифты, он запоминает данные шрифты в кеше и в дальнейшем использует их для конкретного сайта, где эти шрифты были применены.
У шрифтов существует такое важное свойство, как формат файла. Разные браузеры работают с разными типами файлов. Например, Internet Explorer корректно отрабатывает только с файлами типа EOT (Embedded OpenType). Данный тип позволяет сжимать объем файла, а также применять лицензирование, что предупреждает возможность получения несанкционированного доступа к шрифтам. Однако тип EOT не используется другими браузерами. Вместо него распространение получили иные типы файлов, такие как TTF (TrueType) и OTF (OpenType PostScript).
Можно выделить несколько основных особенностей, принципиально отличающих CSS3 от версий-предшественников:
1.Реализация адаптивного дизайна. Технология CSS3 поддерживает как адаптивный дизайн, так и медиазапросы, которые дают информацию о размере экрана и типе устройства пользователя, посетившего конкретный сайт.
2.Наличие модульного кода. Код в CSS3 разделен на модули, что значительно сокращает время работы с кодом. Помимо модулей кода,
33