WEB - уведомления (Notifications)

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

На поддерживаемых платформах показ системного уведомления обычно включает в себя два этапа.

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

Во-вторых, с помощью конструктора Notification () создается новое уведомление. Ему должен быть передан в качестве аргумента заголовок сообщения и, возможно, - объект options для указания дополнительных параметров, таких как направление текста, основной текст, значок для отображения, звук уведомления для воспроизведения и многое другое.

Запрос разрешения

Проверить статус разрешения

Создание уведомления

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

Методы, свойства и события

API веб-уведомлений принимает два параметра: строку, содержащую заголовок уведомления, и необязательный объект настроек. Настройки, которые мы можем указать:

• body: Строка, используемая для дальнейшего уточнения цели уведомления.
• lang: Указывает язык уведомления. Его значение должно соответствовать стандарту BCP 47. Примеры действительных строк - en-US и it-IT.
• dir: Определяет направление текста сообщения. Его значение может быть автоматически означающим, что направление основано на настройках браузера, ltr, чтобы указать направление слева направо (для европейских языков) или rtl, чтобы указать направление справа налево (для некоторых азиатских языков).
• tag: Строка, которая используется как идентификатор, который можно использовать для извлечения, замены или удаления уведомления.
• icon: Указывает URL-адрес изображения, которое будет использоваться в качестве значка уведомления.

Чтобы создать экземпляр объекта Notification, мы должны написать инструкцию следующим образом:

Настройки доступны как свойства для чтения экземпляра объекта notification.

Кроме того, объект Notification предоставляет свойство, называемое разрешением (permission). Разрешение содержит строку, представляющую текущей статус разрешения на отображение уведомлений.

Его значение может быть одним из следующих:

• denied, что означает, что пользователь отклонил уведомления
• granted, что означает, что пользователь дал разрешение
• default, что означает, что выбор пользователя неизвестен

Этот API предоставляет два метода: requestPermission() и close(). Как следует из названия, первый используется для запроса разрешения на показ уведомлений пользователю, в то время как последний программно закрывает уведомление.

requestPermission () - это метод объекта Notification, который принимает необязательный параметр - callback функцию, которая выполняется, когда пользователь принимает или отклоняет разрешение. Выбор пользователя передается в эту функцию в качестве параметра, и значение может быть: granted, denied, default.

close () является методом, который не принимает никаких параметров.

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

• onclick: вызывается, когда пользователь нажимает на уведомление.
  
• onclose: вызывается, как только пользователь или броузер закрывает уведомление.
  
• onerror: вызывается, если с уведомлением возникает ошибка.
  
• onshow: вызывается, когда отображается уведомление.
  

Пример использования этих событий.

Несколько примеров, используя разные CSS свойства

HTML

CSS - работа со шрифтами

Для внешнего вида WEB - сайта большое значение имеет то, как и какие шрифты (fonts) Вы используете. Шрифт определяет начертание букы текста.

Все шрифты, которые сайт использует, должны быть всегда доступны браузеру клиента, откуда бы он ни смотрел сайт (Windows, Linux, Android, Mac ,...).

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

Указания браузеру, какие именно шрифты использовать, даются с помощью CSS - директивы font-family.

Например - для двух CSS - классов (.MySansSerif и .MyMonospace ) :

Для этой директивы (font-family) в качестве значения задаётся список имён шрифтов (через запятую, в порядке приоритета), из которых браузер выбирает доступные шрифты (Arial, Helvetica, sans-serif).

Универсальные WEB - шрифты (Safe web fonts)

Это те шрифты, которые практически наверняка есть на любом компьютере, с которого заходит посетитель Вашего сайта

По типу шрифтов.

Шрифты Serif

Шрифты Sans-Serif

Шрифты Monospace

Шрифты Cursive

Сохранение шрифтов на сервере

WEB - шрифты можно хранить на сервере, вместе с WEB сайтом. Для этого нужно:

• сохранить файлы шрифтов на сервере
  
• при помощи CSS директивы  @font-face описать шрифты, которые предполагается использовать в документе
  
• при помощи директивы CSS  font-family закрепить шрифты за HTML - элементами.
  

Файлы - описания шрифтов можно купить у разработчика, можно скачать бесплатные (например - Google Fonts).

В директиве @font-face указывается имя, под которым далее шрифт будет использоваться в HTML - документе, путь к папке со шрифтами на сервере и имя файла, содержащего конкретный шрифт.

Например:

Далее этот шрифт можно использовать через CSS директиву font-family. Например директива:

назначает классу .MyMonospace шрифт из файла: Molle-Regular.ttf

Использование шрифтов из библиотек (CDN - Content Delivery Network)

Существует ряд online- ресурсов, на которых хранятся шрифты, и с которых эти шрифты можно подгружать в HTML документ.

Например, команда:

подключает к HTML документу шрифт "Open Sans"; . И далее его можно использовать через CSS - директиву 

font-family: "Open Sans";

В удобной форме посмотреть доступные Google-шрифты и сразу получить ссылку на нужный можно, например, по этой ссылке:   fontcdn.org

Дополнительные свойства шрифтов

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

Свойства CSS font

Например:

Свойства CSS text

Пример1

Пример2

Пример3

Пример4

CSS clipping

• clip-path
  
• shape-outside
  
• mask-border
  
• mask
  
• mask-clip
  
• -webkit-background-clip: text
  

Клипы

Клип (clip-path) позволяет менять форму HTML элемента. Форму можно создать  как: circle, ellipse, polygon, SVG - image.

circle( [<shape-radius>]? [at <position>]? )

ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

shape-radius - радиус, для эллипса задаются 2 радиуса

position - две координаты центра - смещения от левой границы и от верхней границы блока

fill-rule - способ заливки внутренней области многоугольника

shape-arg - массив координат вершин многоугольника

Простой клип

CSS:

HTML

Текст и клип

Текст, располагающийся вокруг области клипа в форме окружности. Клип-окружность создаёт свойство   

clip-path: circle(100px at 0px 0px) 

Область, которая "вырезана" из блока с текстом, создаёт свойство

shape-outside: circle(110px at 0px 0px)

Свойство 

float: left

для клипа обязательно для того, чтобы текст "обтекал" клип.

Два клипа и текст

Два клипа в форме многоугольников и текст между ними.

Один клип - слева () , второй клип - справа ()

Картинка - в фоне клипа

Картинка - background-image: url(../images/image.jpg);

Многоугольник - клип (clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%))

Клип - текст

-webkit-background-clip: text;

Фоновая картинка вставлена в клип-текст. Цвет текста задан с прозрачностью.

CSS Grid Layout

CSS Grid Layout — новая и мощная система построения макета окна браузера, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.

Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк.

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

Сегодня большинство браузеров поддерживает Grid. Но Grid новее, чем FlexBox (Bootstrap подерживает FlexBox) , поэтому при использовании GRID больше вероятность того, что возникнут проблемы с совместимостью браузеров. Возможно, какие-то версии браузеров не поддерживают все свойства Grid или поддерживают частично.

Основные понятия

Контейнер (CSS grid container)

Планирование макета начинается с контейнера. Контейнер задаёт сетку - разбиение экрана. Сетка состоит из ячеек (пересечение рада и колонки) и разделительных линий между ячейками.

Контейнер - основа макета. Есть корневой - главный, родительский контейнер. В его ячейки могут быть, в свою очередь, вложены другие элементы - контейнеры.

Элемент-контейнер описывается свойством display: grid (контейнер - блочный элемент) или display:inline-grid (контейнер - строчный элемент).

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

Элемент внутри контейнера (Grid Item)

Дочерний элемент контейнера. Элемент, расположенный определённым образом на сетке-макете, которую задал контейнер. Элементы на сетке можно расположить произвольным образом. Автоматически или вручную. В одной или нескольких ячейках. Задать координаты начала и конца элемента по клеткам или по (поименованным или пронумерованным) разделительным линиям, расположенным между ячейками.

Пример: простой макет

Определим один контейнер (#container0) с дочерними элементами (.items1) - колонками автоматического размера и автоматического расположения, с промежутками между ними - 2 px.

Зададим расположение дочерних элементов - по колонкам.

Определим вручную ряды для размещения дочерних элементов (grid-template-rows). Зададим высоту каждого ряда в px.

Разобьём контейнер на 15 ячеек: 5 колонок и 3 ряда.

Дочерние элементы распределились по ячейкам. Так как элементов меньше, чем ячеек. то в сетке остались незаполненные ячейки.

Использованные директивы

можно переписать, используя CSS grid функцию repeat() в виде:

Добавим стили к первому и последнему дочерним элементам (first-child, last-child), которые заставят элементы занять 5 колонок (целый ряд) в первом и третьем рядах соответственно.

Единицы измерения (CSS grid units)

Для задания размеров ячеек макета (CSS grids), расстояний между ними можно использовать различные единицы ихмерения.

Это могут быть как стандартные для CSS 3 единицы (px, %, em,...) так и новая единица измерения - fr (fractions).

В примере ниже, внутри контейнера element, колонки распределяются равномерно по ширине окна, причём соотношение их ширины - 1:3:1 , высота рядов задаётся для первого (60px ) и последнего ряда (5em), высота среднего ряда автоматически вычисляется, в соответствии с контентом.

Единицы измерения - fr и % похожи. Например, 2 директивы: grid-template-columns: 50% 50%; и grid-template-columns:1fr 1fr; приводят к одинаковым результатам (когда используются только % или только fr ).

В том случае, когда эти (относительные) единицы измерения используются совместно с другими (такими как px , em), результаты разные.

Директива

grid-template-columns: 100px 50% 50%;

создаст одну колонку 100px и 2 шириной 50% от ширины контейнера (общая ширина = 100% + 100px)

Директива

grid-template-columns: 100px 1fr 1fr;

создаст колонку 100px, поделит оставшуюся ширину на 2 и создаст ещё 2 колонки равной ширины. (общая ширина колонок - 100% от контейнера)

Создание поименованных областей (Named Grid Areas)

В дополнение к тому, что дочерние элементы (grid items) можно размещать по ячейкам сетки (например: grid-column-start: 2;grid-row-start: 2;), можно создавать на сетке поименованные области и размещать контент в них.

Область можно создать директивой:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |area_name;

Где:

grid-row-start - ряд, в котором область начинается

grid-column-start колонка, в которой область начинается

grid-row-end - ряд - конец области

grid-column-end - колонка - конец области

area_name - имя области

Тогда можно разместить элемент в контейнере в этой области, указав для него:

grid-area: area_name;

Например:

index.html

style.css

Автоматическое разбиение на ячейки (implicit grid)

Для автоматического разбиения grid - контейнера на ячейки, используются CSS свойства:

grid-auto-columns - определяет размеры автоматически создаваемых колонок

grid-auto-rows - размеры автоматически создаваемых рядов

grid-auto-flow -

Для задания размеров ячейки контейнера могут использоваться:

Размер (px, em) - положительное число. Проценты (%) - положительное число. Fractures - положительное число, с единицей измерения - fr. Функция minmax(min, max), которая позволяет задать минимальное и максимальное значение для размера элемента. Ключевое слово auto, которое определяет автоматическое вычисление размеров.

Пример:

Стиль для контейнера

задаёт алгоритм, по которому в окне браузера будут, при необходимости, организовываться ячейки для дочерних элементов.Согласно этому алгоритму, колонки для ячеек займут всю ширину экрана (если нужна будет одна колонка, то шириной 100%, четыре колонки - по 25%), а каждый ряд будет высотой 100px.

Реальные позиции ячеек в такой структуре будут определяться необходимым количеством ячеек в контейнере и их стилями.Зададим HTML шаблон документа (index.html):

Стили для этого примера:

Директива:grid-column: 1 / 5; задаёт, что элемент () должен занять в контейнере колонки с номера 1 по номер 5, что приводит к автоматическому созданию этих колонок по алгоритмуgrid-auto-columns: 1fr; - то есть одинакого размера, равномерно распределённых по ширине экрана.

Всего в HTML щаблоне описано 11 дочерних эдементов (.item1) в контейнере (.wrapper ). Все они размещены последовательно в созданной сетке.

Если задать для последнего элемента (:last-child) область его размещения, предусматривающую, 2 ряда? начиная с третьего (grid-row: 3 / span 2;), то размещение элементов в контейнере изменится..item1:last-child {grid-row: 3 / span 2;background-color: red;}

Выравнивание элементов внутри grid - контейнера

HTML структура макета GRID состоит из трёх уровней, на которых элементы могут быть отцентрованы (выравнены): GRID - container (элемент, с заданным свойством display: grid;),  GRID-item (дочерний элемент grid- контейнера), GRID-content (содержимое элемента ).

При работе с шаблоном grid есть две оси для выравнивания объектов: горизонтальная (inline ) и вертикальная (block).

Для выравнивания GRID-элементов (GRID items) по вертикальной оси используются свойства CSS:align-self и align-items.

Для выравнивания по горизонтальной оси - justify-items и justify-self.

Эти свойства могут принимать значения:

• auto
• normal
• start
• end
• center
• stretch
• baselinefirst
• baselinelast
• baseline

Для GRID-контейнера используются свойства:

align-items:

justify-items:

Для дочерних элементов

justify-self:

align-self:

CSS grid properties

CSS grid функции

CSS - анимация

Свойство animation  (для браузеров Chrome, Safari, Opera нужно использовать другое свойство: -webkit-animation)  в CSS можно использовать для анимации многих  свойств CSS, таких как цвет, фон, цвет, высота или ширина. Каждая анимация должна быть определена с помощью директивы @keyframes (для браузеров Chrome, Safari, Opera нужно использовать другую директиву: @-webkit-keyframes ), которая затем вызывается со свойством анимации.

Набор свойств, которые могут быть анимированы

Свойство  CSS - animation позволяет анимировать переходы от одной конфигурации стиля CSS в другую. 

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

Существуют три ключевых преимущества использования CSS - анимации перед традиционными методами анимации, управляемыми скриптами:

1. Они просты в использовании для простых анимаций; Вы можете создавать их, даже не зная JavaScript.
2. Анимация работает хорошо, даже при умеренной загрузке системы. Простые анимации часто могут плохо работать в JavaScript (если только они не особенно качественно сделаны). Механизм рендеринга может использовать пропуски кадров и другие методы, чтобы поддерживать оптимальную производительность.
3. Предоставление браузеру управления последовательностью анимации позволяет ему оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

Настройка анимации

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

Cвойства animation

Пример:

HTML

CSS

Видео

Масштабируемая векторная графика (SVG)

SVG (Scalable Vector Graphics) - это язык разметки, построенный на основе XML и предназначенный для описания двумерной векторной графики. SVG – это графическое расширение для языка HTML. То, что HTML  делает с текстом, SVG делает с графикой.

SVG похож на фирменную технологию Adobe Flash, но это - текстовый открытый веб-стандарт вместо закрытого двоичного формата. Он разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

Изображение в формате SVG - это текстовый файл. Этот файл создаётся в формате XML. Поэтому изображения в этом формате можно создавать в текстовом редакторе. 

Часто удобнее создавать такие изображения, использую специальные программы (например - INKSCAPE ) или экспортируя из популярных графических программ (например - Adobe Photoshop).

Графические элементы, созданные в формате SVG, можно вставить в HTML страничку разными способами:

• используя теги img, embed, iframe, object (для вставки изображения из отдельного файла)
• в любой HTML тег в качестве фона
• используя тег svg (описание изображения непосредственно в документе)

Синтаксис описания SVG

Теги <svg>, <g>, <defs>

Пример

Результат 

Базовые формы изображений SVG 

Линия - прямая <line>

Тег рисует прямую линию. Использует параметры:

x1, y1 - координаты начала

x2, y2 - координаты конца

stroke-width - толщина линии

stroke - цвет линии

Линия - ломаная  <polyline>

Тег рисует ломаную линию. Использует параметры:

points - массив координат узлов линии

fill - цвет заливки

stroke-width - толщина линии

stroke - цвет линии

Прямоугольник <rect>

Тег рисует прямоугольник. Использует параметры:

x, y - координаты прямоугольника 

width - ширина

height - высота

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

Круг <circle>

Тег рисует круг. Использует параметры:

cx, cy - координаты центра

r - радиус

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

Эллипс <ellipse>

Тег рисует элипс. Использует параметры:

cx, cy - координаты центра

rx - ширина

ry - высота

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

Многоугольник <polygon>

Тег рисует многоугольник. Использует параметры:

points - массив координат углов

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

Путь <path>

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

Атрибут d тегв <path> задаёт набор команд рисования:

M - переместить курсор в точку (Move)

L - нарисовать отрезок прямой (Line)

A - нарисовать дугу (Arc)

Q - кривая Безье (Quadratic Bezier Curves)

C - кривая Безье (Cubic Bezier Curves)

Z - замкнуть путь 

Например:

Команды, используемые при рисовании линии пути (path)

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

Текст

Оператор - switch

Этот оператор позволяет использовать разные изображения, в зависимости от языка.

 SVG система координат

В SVG отсчёт координат (точка с координатами х=0, y=0) начинается из левого верхнего угла. Ось y - направление сверху вниз. Ось x - направление слева направо.

Единицы измерения

Единица измерения указывается после значения. Например:  10cm или 125mm.

Если единицы измерения не указаны, то имеются в виду пиксели - pixels (px).

Кроме этого допускается использование:

Единицы, установленные в элементе <svg> для  атрибутов width и height, влияют только на элемент <svg> (viewport - область просмотра).

Формы, находящиеся  внутри элемента <svg> должны иметь свои собственные единицы.

Если единицы измерения не указаны, то по умолчанию используются пиксели.

Размеры форм, размер области их размещения

Область, в которую выводятся SVG - формы, определяется тегом <svg>. Эта область - ViewPort определяется параметрами тега <svg> - width, height и параметром viewPort. 

Если параметра viewBox в теге svg нет, то width и height определяют абсолютные размерый этой области.

Это - абсолютные размеры области видимости форм. И параметры размеров самих форм, которые выводятся на экран тоже абсолютные (x, y, r, cx, cy,... ).

Например, если задано в теге svg  height :500 и width :200, то на экране выделится для вывода изображений область шириной 200 и высотой 500 пикселей. Если в ней определено: 

<rect   width=50 height=70 fill ="#0b0" stroke-width="1" stroke="#050" />

то внутри области будет нарисован прямоугольник шириной 50 рикселей и высотой - 100.

Параметр viewBox пропорционально меняет размеры всех элементов. Эта область имеет координаты (x, y ) и размеры (ширину, высоту).  Например: viewBox="0 0 50 20". Если для нашего примера задать такой viewBox, то реальные размеры всех элементов увеличется по горизонтали на коэффициент 500/50, а по вертикали - на коэффициент 200/20. То есть реальные размеры прясоугольника будут - 500 на 700 пикселей, а размер вилимой области - 5000 на 2000 пикселей.

Применение стилей к SVG 

С SVG можно использовать стили как внутри SVG - тегов, так и отдельно описанныа, аналогично HTML стилям.

Примеры:

Назначение стилей для всех сгруппированных элементов

Анимация SVGs при помощи CSS

Пример: таймер

Результат

CSS - Единицы измерения

CSS свойства*

Каждое свойство стиля задаётся при помощи декларации стиля (style declaration), в формате:

Например:

Некоторые свойства могут иметь несколько значений. Например:

Такого типа свойства имеют дополнительные (дочерние свойства). Например свойство, описанное выше, может быть описано так:

Группы свойств CSS

Управление цветом

Свойства фона и границ 

Свойства блока

Flexible Box Layout

Свойства текста

Оформление текста

Шрифт

Свойства написания текста

Таблицы

Списки  и счётчики

Анисация

Transform Properties

Transitions Properties

Basic User Interface Properties

Multi-column Layout Properties

Paged Media

Generated Content for Paged Media

Filter Effects Properties

Image Values and Replaced Content

Masking Properties

Speech Properties

Marquee Properties

* По материалам  www.w3schools.com

CSS селекторы

CSS селектор определяет, к какому именно HTML элементу (или группе элементов) относится данный блок стилей.

Селекторы

Стили в HTML документе - CSS

CSS - это акроним от Cascading Style Sheets.

CSS это язык, который описывает стиль HTML-документа, его внешний вид. HTML задаёт структуру документа, а CSS описывает, как должны отображаться HTML элементы на экране браузера.

Определения

Свойство (property) - название стиля.

Значение (value) - значение свойства.

Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

Правило (rule или набор правил - rule set) - селектор стиля плюс блок стилей.  

Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может  находиться одна декларация или несколько, разделённых символом точка с запятой (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

Лист стилей (StyleSheet) - это один набор правил. Он может ограничиваться тегами <STYLE></STYLE> , или импортироваться из какого-либо файла директивами @import или тегом <LINK>. 

Документ может использовать один или несколько листов стилей. 

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

Нивысший приоритет у стилей, заданных атрибутом style внутри тега.

Пример

Правило

Селектор

Свойства

Декларации стилей

Блок

Использование стилей

Способы назначения стилей

Свойства стилей

Единицы измерения для значений

Цвет.  Способы задания цвета.

Блоки, элементы

CSS3 Flexible Box Model

Способы позиционирования элементов

CSS Селекторы - подробнее 

Работа с текстом

Дополнительные CSS директивы - @ - rules

• @import: импортирует стили из файла
• @charset задаёт кодировку
• @font-face задаёт шрифт
• @media, @support - позволяют модифицировать CSS таблицы в зависимости от устройства вывода - Подробнее - CSS3 media queries 
• !important увеличивает приоритет CSS правила

Трансформации, анимация

CSS функции

CSS grid 

 Подробнее 

CSS - функции

Пример использования некоторых функций

Работа с цветом в HTML5/CSS3,4

Сложно переоценить значение правильного выбора цветовой палитры, корректного использования цветов для дизайна сайта.

Спецификаци HTML5 даёт в руки дизайнера целый набор многофункциональных инструментов управления цветом. 

Форматы задания цвета

Спецификация стилей CSS3,4 позволяет задавать цвета несколькими способами:

• используя шестнадцатеричные значения
• используя функцию rgb
• по интуитивно понятному названию цвета
• используя функцию hsl (начиная с версии CSS3)
• используя функцию hwb (начиная с версии CSS4)

Наиболее часто сегодня используются три первых способа.

Шестнадцатеричная нотация для обозначения цвета

Любой цвет представляется как результат наложения трёх базовых цветов: красного (red), зелёного (green) и синего (blue).

В шестнадцатеричном представлении количество каждого цвета задаётся двузначным шестнадцатеричным числом. Это число, каждая из двух цифр которого (количество десятков и количество единиц) может принимать 16 значений: от 0 до F (0,1,2,3,... 9,A,B,C,D,E,F).

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

Например, запись #FF0000 означает чисто красный цвет (максимум красного и 0 зелёного и синего). Код #FFFF00 - жёлтый цвет (максимум красного и зелёного и 0 - синего.

Можно использовать и сокращённую запись - только 3 цифры. Тогда каждый цвет обозначается одной из них. Например: #00F - чисто синий цвет.

Примеры цветов.

Функция rgb(r,g,b)  

Цвет задаётся также количеством красного, зелёного и синего в нём, но их количество указывается или в процентах или в десятичных цифрах от 0 до 255.

Названия цветов

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

Web Safe Colors

Даже сегодня не все компьютеры и мониторы могут корректно воспроизвести всю палитру цветов. WEB safe colors - это тот набор цветов, который наверняка поддердивается и корректно отображается всеми браузерами на любом компьютере. Эта пилитра содержит только те цвета, в которых количество красного, зелёного м синего соответствует одному из значений в приведённой ниже таблице.

Вот эти цвета. 

функция hsl(h,s,l)

Этот способ задания цвета используется реже, чем вышеперечисленные. Цвет в нём определяется, как комбинация трёх параметров: оттенок, насыщенность, яркость.

Оттенок - это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Яркость задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

Прозрачность

Спецификация стилей CSS3 позволяет добавить к цвету дополнительное свойство - прозрачность.

rgba

Прозрачность можно задавать с помошью функции rgba(r,g,b,o) , четвёртый параметр которой - прозрачность цвета (0 - полностью прозрачный цвет, 1 - непрозрачный).

Например запись: 

background-color:rgba(255,0,0,0.3);

задаёт красный цвет с 30%-й прозрачностью для фона элемента.

HEX

Прозрачность можно задавать для цвета в формате HEX.

#RRGGBBAA - RR - красный, GG - зелёный, BB - синий, AA - прозрачность (от 00 до FF)

или

#RGBA - R - красный, G - зелёный, B - синий, A - прозрачность (от 0 до F)

 opacity

Можно задавать прозрачность сразу и цвету и всему контенту элемента при помощи отдельного CSS свойства - opacity.

Например:

rgb(255, 0, 0);

opacity:0.8;

CSS 2D transforms

Трансформации в CSS позволяют перемещать, поворачивать, масштабировать и деформировать элементы.

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

Примеры:

CSS Media Queries

В спецификации CSS3 введены медиа-звпросы.

Наряду с HTML тегом <meta name="viewport"... > - это удобный и гибкий мехпнизм для создания сайтов с адаптивным дизайном.

Медиа-запросы позволяют модифицировать CSS таблицы стилей для разных устройств, HTML тег META с параметрами типа:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

В атрибуте контент ( content) можно задавать параметры:

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

Подробнее, для разных устройств, можно посмотреть, например, здесь: http://viewportsizes.com/

Медиа-запросы в CSS3 расширили идею медиа-типов CSS2: вместо того, чтобы определять тип устройства, в CSS3 определяются параметры устройства.

Такие как:

• ширина и высота окна просмотра
• ширина и высота устройства
• ориентация (это планшет / телефон в альбомном или портретном режиме?)
• разрешающая способность

Использование медиа-запросов - это удобный, популярный метод корректировки CSS стилей для различных устройств: настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).

Медиа-запрос состоит из типа носителя и может содержать одно или несколько выражений, которые принимают значения true, либо false.

@media - директива: медиа-запрос ( совместно с ней также может использоваться CSS диретива @support, которая позволяет проверить, поддерживает ли браузер те или иные CSS свойства )

mediatype - тип устройства

mediafeature - набор логических выражений, состоящий из описаний свойств устройств, связанных длгическими операторами and, not, or.

Результат запроса истинен, если:

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

все выражения в запросе на мультимедиа являются истинными. 

Когда медиа-запрос является истинным, применяются соответствующие таблицы стилей или правила стилей.

Если не использутся операторы not или only, тип носителя можно не указывать (подразумевается: все типы).

Иакже можно задать разные таблицы стилей для разных носителей:

CSS3 - некоторые типы устройств (CSS3 media types)

Свойства устройств (CSS3 media features)

Синтаксически мультимедиа-свойства напоминают свойства CSS: они имеют имена и принимают определенные значения. Однако есть несколько важных различий между свойствами и средствами массовой информации::

• Свойства CSS используются в объявлениях для предоставления информации о том, как представить документ. Свойства мультимедиа-устройств используются в выражениях для описания требований к устройству вывода.
• Большинство мультимедиа-свойств принимают необязательные ‘min-’ или ‘max-’ префиксы для того, чтобы задать константы "больше или равно" и "меньше или равно". Этот синтаксис используется, чтобы избежать символов "<" и ">" которые могут вступать в конфликт с HTML и XML. Те свойства, которые допускают префиксы, чаще всего (но не обязательно) используются с префиксами.
• Свойства CSS всегда требуют значения для формирования объявления. С другой стороны, свойства мультимедиа могут использоваться и без значений. В случае иультимедиа-свойств, выражение (свойство) будет принимать значение true, если (свойство: x) будет принимать значение true для значения x, отличного от нуля или нуля, за которым следует идентификатор единицы измерения (то есть - любое, кроме 0, 0px, 0em и т. Д. ). Те multimedia - свойства, которые описаны с префиксом min / max, не могут использоваться без конкретного значения.
• Свойства CSS могут принимать более сложные значения, например, вычисления, которые включают в себя несколько других значений. Media-свойства могут иметь только единственное значение: одно ключевое слово, одно число или число с единицей измерения. (Исключение составляют ‘aspect-ratio’ и ‘device-aspect-ratio’ )

Например, медиа-свойство «color» может формировать выражения без значения (‘(color)’) или со значением (‘(min-color: 1)’).

Примеры

CSS - диреrтивы @media и @support могут быть размещены на одном уровне кода или вложены.

@media print { body { font-size: 10pt } }

@media screen { body { font-size: 13px } }

@media screen, print { body { line-height: 1.2 } }

CSS3 адаптивные блоки (Flexible Box Model)

CSS3 Flexible Box — это новая спецификация разметки, позволяющая создавать макеты страниц и размещать блоки на странице таким образом, чтобы они вели себя предсказуемо в тех случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.

Элементы типа block используют вертикальный макет размещения. Элементы типа inline - горизонтальны. Flexbox позволяет и то и другое. Flexbox удобен, в частности, для устройств типа мобильных, где иногда нужно полностью менять макет страницы с горизонтального на вертикальный.

Вместо терминологии block и inline элементов flexbox исользует термины: главная и перпендикулярная оси (main axis и cross axis).

Контейнер (container)

Родительский элемент, в котором содержатся все остальные flexible - элементы. Flex - контейнер определяется с использованием значений flex или inline-flex свойства display.

Элемент (item)

Каждый дочерний элемент flex - контейнера становится flex - элементом.

Оси (axis)

Каждый flexbox макет использует две оси. Главная и перепендикулярная. Flex - элементы следуют один за другим вдоль главной оси (main-axis).

• flex-direction - это свойство, которое задаёт главную ось
• justify-content - задаёт размещение flex-элементов в текущей строке главной оси
• align-items - задаёт размещение flex-элементов в текущей строке перпендикулярной оси
• align-self - определяет, как единичный flex-элемент выравнивается вдоль перпендикулярной оси, переопределяя значения, заданные в align-items

Направления (directions)

Границы flex- контейнера ( main start/main end и cross start/cross end ) определяют задают начальные и конечные точки для перемещений flex-элементов внутри контейнера.

• Свойство order присваивает элементы порядковым группам и определяет, какие элементы появляются первыми.
• Свойство flex-flow сокращает описание свойств flex-direction и flex-wrap для размещения flex-элементов.

Строки (lines)

Элементы Flex могут быть размещены либо на одной строке, либо на нескольких строках в соответствии с свойством flex-wrap, которое управляет направлением поперечной оси и направлением, в котором формируются новые строки.

Размеры (dimensions)

Для flex-элементов свойства width и height задают размеры.

Свойство flex сокращает описание свойств flex-grow, flex-shrink, flex-basis для описаниия адаптивных размеров flex-элементов.

CSS3 Flexbox свойства

DOM - обработка событий (Events)

Браузер отслеживает события которые происходят в его окне. События могут быть привязаны к определенному элементу, группе элементов, или к окну браузера. 

События могут генерироваться как пользователем (например: перемещение мышки) так и системой (например: законцилась анимация )

События могут быть разных типов, например:

• нажатия клавиш мыши, перемещение курсора
• нажатие клавиш клавиатуры
• изменение размеров окна браузеа (закрытие окна)
• загрузка страницы в окно
• заполнение формы
• воспроизведение видео
• возникновение ошибок.

Реакция на события описывается через бработчики событий (events listeners или event handlers).

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

То есть: события, как правило, используются в сочетании с функциями, функция не будет выполняться до возникновения события (например, до того, как пользователь нажал на кнопку).

Типы событий

События, связанные с мышью (mouse events)

События клавиатуры (keyboard events)

События объекта frame (frame/window events)

События, связанные с формой (form events)

События drag/drop

Clipboard - события

Print - события

Media - события

Animation - события

Transition - события

Server-Sent - события

Другие события

Touch - события

Объект event

Когда происходит событие, браузер создает объект 'event', помещает в него детали события и передает его в качестве аргумента обработчику.

пример ниже выводит на консоль все свойства текущего объека event, созданного баузеом при клике мышкой по элементу ELEMENT .

function myFunc2(evnt){ console.log('Event: ', evnt); }

ELEMENT.addEventListener('click', myFunc2);

Константы

Свойства

Методы

Объект - MouseEvent

Объект - KeyboardEvent

HashChangeEvent - объект

PageTransitionEvent - объект

FocusEvent - объект

AnimationEvent - объект

TransitionEvent - объект

WheelEvent - объект

Регистрация обработчика событий

Зарегистриовать обработчик событий можно разными способами.

Присвоить значение специальному атрибуту (onclick, onkeypress, onmouseenter,...) при описании HTMl тега. Например:

Можно его изменить с помощью соответствующего свойства объекта element:

Можно использовать метод объекта element - addEventListener(event, listener). Например:

или

Если в этом примере  ипользовать оба способа, то к элементу id=myButton1 , к событию click будут привязаны сразу 2 обработчика.

Удаление обработчика событий

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

Привязать обработчик к элементу 

или

Удалить его

Можно использовать метод элемента removeEventListener(событие, имя_обработчика)

Привязать

Удалить

Удалить все обработчики событий у элемента можно, например, клонировав элемент (метод cloneNode()) , при этом обработчики событий не клонируются. 

Events bubbling, capturing

event.target - элемент, который инициировал событие.

event.currentTarget - текущий элемент, обрабатывающий событие.

event bubbling (event propagation) - обработка события, котоое инициировал элемент, всеми его родительскими элементами (снизу вверх или от дочернего элемента).

event capturing - 

event.eventPhase - фаза обработки события (capturing=1, bubbling=3)

Стандартные события DOM проходят фазы обработки событий (event.eventPhase):

• Capturing phase - событие переходит к элементу
• Target phase - событие достигло целевого элемента
  
• Bubbling phase - событие "поднимается" от элемента
  

DOM - объекты CSS

Определения

Свойство (property) - название стиля.

Значение (value) - значение свойства.

Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.

Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может быть находиться одна декларация или несколько, разделённых символом (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

Объект DOM - Style

Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.

Задать атрибут style (нужно иметь в виду, что если этот атрибут уже был задан, его старое значение будет удалено)

Удалить атрибут (и все inline стили элемента)

Модифицировать параметры атрибута style (изменение свойс объекта style для элемента).

Свойства объекта style

Объект styleSheet (CSSStyleSheet)

Объект «StyleSheet» позволяет просматривать листы стилей документа, добавлять или удалять правила в одном из них.

Получить перечень листов стилей для документа

var styleSheetList = document.styleSheets;

Добавить элемент STYLE - создать из него новый объект CSSStyleSheet

Добавить элемент LINK - добавить из файла стили и на этой базесоздать новый объект CSSStyleSheet

Свойства

Методы

Объект CSS Rules

Объект DOM - Элемент

Этот объект порождается каждым HTML тэгом документа, таким образос каждый элемент (узел) дерева DOM  наследует все его свойства и методы.

Далее имеется в виду, что node (узел в дереве объектов DOM) может быть типа: element (узел типа: HTML элемент ), text node (узел типа: текст), attribute node (узел типа: атрибут элемента).

Свойства и методы