Языки описания стилей в вебе

Языки описания стилей в вебе (примеры). Характеристика каскадных стилей, медиазапросов и единиц измерения (пикселы, проценты, em). Подключение каскадных стилей к веб-странице (примеры разных способов).

Языки описания стилей в вебе (примеры)

RRP

Язык стилей, который был предложен для реализации в браузере Mosaic.
Описанные стили предполагались как рекомендации для рендера страницы.
Все свойства описаны максимально короткими ключевыми словами, чтобы не перегружать медленную скорость сетевого соединения тех лет.

@BODY fo(fa=he,si=18)

Stylesheet Language

Язык таблиц стилей, реализованный в браузере ViolaWWW.
Стили описывались в виде иерархичной структуры.

Например, применение стилей к телу документа и вложенных в него заголовков первого уровня выглядело так:

(BODY 
	fontSize=normal
	BGColor=white
	FGColor=black  
	(H1
		fontSize=largest
		BGColor=red
		FGColor=white
	)
)

Также язык примечателен тем, что в нём появился способ ссылаться на внешние таблицы стилей:

<LINK REL="STYLE" HREF="URL_to_a_stylesheet">

FOSI

Для возможности стилизация языка SGML, была разработана спецификация языка FOSI.
Описание стилей реализовано слишком подробным, что делало данный язык неудобным в применении.
Язык примечателен появлением единицы измерения em.

<outspec>
	<docdesc>
		<charlist>
			<font size="12pt" bckcol="white" fontcol="black">
		</charlist>
	</docdesc>
	<e-i-c gi="h1"><font size="24pt" bckcol="red", fontcol="white"></e-i-c>
	<e-i-c gi="h2"><font size="20pt" bckcol="red", fgcol="white"></e-i-c>
	<e-i-c gi="a"><font fgcol="red"></e-i-c>
	<e-i-c gi="cmd kbd screen listing example"><font style="monoser"></e-i-c></outspec>

DSSSL и XSL

функциональные языки программирования, которые предлагались на замену языка FOSI.
Языки отличались огромной и сложной спецификацией.
Данные технологии не обеспечивали возможность рендеринга документа до полной загрузки документа, что было критически важно в ранние годы развития интернета.

(element H1
	(make paragraph
		font-size: 14pt
		font-weight: 'bold
	)
)

Таблица стилей

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

*LI.prebreak: 0.5
*LI.postbreak: 0.5
*OL.LI.label: 1
*OL*OL.LI.label: A

PSL

Язык описания стилей, похожий на CSS, но при этом имеющий условные операторы и возможность получение актуального размера элемента, с которым он рендерится в браузере.
Не был реализован из-за своей большой расширяемости.

LI {  
	if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
		VertPos: Top = Parent.Top;
		HorizPos: Left = LeftSib.Left + Self.Width;
	else
		VertPos: Top = LeftSib.Actual Bottom;
		HorizPos: Left = LeftSib.Left;
	endif
}

CHSS

Язык, в котором впервые была предложена идея каскадных таблиц стилей.
В языке присутствовала возможность указать степень влияния каждого стиля в процентах.
Присутствовали логические выражения и предполагалась возможность изменения стилей в зависимости от релевантности отображения на различных устройствах.

CSS

Язык описания стилей, использующийся в современных браузерах. Является упрощенной версией CHSS, что и привело его к популярности.

LessCSS, SCSS, SASS

PostCSS

Характеристика каскадных стилей, медиазапросов и единиц измерения (пикселы, проценты, em)

Характеристика каскадных стилей

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

CSS состоит из правил и директив.

Правило CSS содержит следующие части:
- селектор, имя HTML-элемента в начале набора правил
- объявление, состоящее из свойства и его значения
- свойство, название конкретной характеристики для изменения
- значение свойства, устанавливает один из возможных признаков свойству

p {
	--cutom-property: 500px; /* объявление собственных свойств (переменных) */
	color: red;
	width: var(--custom-property);
}

p {
	color: green; /* перезапишет объявление color: red */
}

Директивы направлены на управление общим поведением стилей. Имена директив начинаются с символа @. Правила и другие директивы могут быть вложены в директиву.

На данный момент CSS имеет развитые возможности для реализации адаптации пользовательского интерфейса сайта под различные устройства, некоторые из которых будут описаны дальше.

Характеристика медиа-запросов

Медиа-запросы - директивы, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств.

При работе с медиа-запросами немаловажно упомянуть о HTML мета-теге viewport, который обеспечивает корректное отображение пользовательского интерфейса сайта на экранах устройств с высокой плотностью пикселей.

Объявление директивы начинается с ключевого слова @media, далее идут логические условия, после которых, в фигурных скобках, вкладываются правила и директивы.

@media screen and (min-width: 1440px) {
  /* стили будут применяться, когда условие истинно */
}

Логические условия объединяются при помощи логических операторов:
- and
- , (логическое ИЛИ)
- not

В логических условиях медиа-запросов могут указываться определённые типы устройств:
- all - для всех устройств
- print - режим предварительного просмотра печати страницы
- screen - для устройств с экранами
- speech - для программ чтения с экрана

Логические условия также могут содержать объявления для следующих характеристик:
- ширина
- высота
- ориентация устройства
- соотношение сторон viewport
- разрешение экрана

Характеристика единиц измерения (пикселы, проценты, em)

Пиксели (px)

Обычно пиксель соответствует одному пикселю на экране, но на экранах с высокой плотностью пикселей может применяться автоматическое масштабирование.

Главное достоинство пикселя - чёткость и понятность.

Недостаток заключается в том, что другие единицы измерения имеют возможность лучше подстраиваться под различные размеры при помощи соотношений

em

Размеры в em - относительные, они определяются по текущему контексту.

<div style="font-size:1.5em">
  Страусы
  <div style="font-size:1.5em">Живут также в Африке</div>
</div>

У вложенного блока шрифт будет в 1.5 раза больше родительского. Данный подход удобен тем, что достаточно изменить размер у родительского шрифта, остальные размеры будут изменены автоматически.

Проценты (%)

% является относительной единицей измерения. В отличие от em, размер свойства при помощи % не всегда вычисляется относительно родительского элемента.