Css-ի ֆունկցիաները (Մաս-3)
Աջակցող ֆունկցիաներ
attr()
Функция используется для стилизации значения атрибута.
Синтаксис функции attr():
attr(строка класса, ''мойКласс-01:” )
class – имя атрибута.
string – тип атрибута
string(текст — пример: attr(строка класса, «myclass01»)),
color(цвет), url(веб-адрес),
integer(целое число – 1, 23, 142 и т. д.),
number(действительное число – -5, 6,7, 10e3 и т. д.),
angle(угол), time(время), deg(степень).
“мойКласс-01:“ – значение атрибута. Это указывается, когда для атрибута необходимо установить значение по умолчанию.
В круглых скобках обычно указывается только имя атрибута: attr(href) ;
.site::after {
content: attr(href);
font-size: 0.8em;
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p><a href="https://hayti.am/ru/" class="site" data-no-auto-translation="">Մեր կայքը- </a></p>
</body>
</html>
var()
var() – определяет переменную.
Например: div { –laynutyun: 100px; } — «-лайнутюн» — имя переменной, «100px» — ее значение. Переменная будет использоваться в качестве значения, где необходимо установить «100 пикселей».
Если значение в основном местоположении переменной изменится, оно также изменится для всех остальных мест, где эта переменная определена.
Переменная определена в другом месте var() через функцию
div {
--laynutyun: 100px;
width: var(--laynutyun);
height: var(--laynutyun);
}
Переменная доступна только в том селекторе, где она определена.
Чтобы сделать переменную доступной для всей таблицы стилей, ее необходимо поместить в псевдокласс :root (который <html> главный элемент).
:root {
--narnjaguyn: orange;
}
div {
background: var(--narnjaguyn);
}
p {
color: var(--narnjaguyn);
}
button {
background-color: var(--narnjaguyn);
}
Другой пример:
background-color: var(–narnjaguyn, red); - если значение переменной недоступно, цвет фона будет установлен на красный.
@media правило не поддерживает определение переменных.
Запрещено использовать для свойств, значения которых должны оставаться неизменными.
Их невозможно установить в качестве селектора.
env()
env() - Смартфоны сильно изменились с течением времени. всякие кнопки уже управляются с экрана.
Например, начиная с iPhone X от Apple, все смартфоны полноэкранные, поэтому содержимое программы (текст, кнопка, поле заполнения и т. д.) нужно расположить таким образом, чтобы элементы отображались на экране, не переходя над невидимой частью. То есть необходимо определить чистую область для полноценного отображения элементов:
Если выделены внешние границы, скажем, для экрана iPhone X, то в случае с другими типами смартфонов проблема останется.
Чтобы решить эту проблему, были созданы глобальные свойства (называемые «Боковые переменные(переменные среды)»), определяющие свободную область экранов смартфонов. Они расположены в браузерах. Браузер определяет свободное пространство на основе экрана смартфона.
Переменные:
env(SAFE-AREA-INSET-TOP, length)
env(SAFE-AREA-INSET-RIGHT, length)
env(SAFE-AREA-INSET-BOTTOM, length)
env(SAFE-AREA-INSET-LEFT, length)
Символы данных переменных должны быть в верхнем регистре.
Они, в отличие от обычных переменных CSS, также могут использоваться в правиле @media и определяются браузерами. Они работают env() через функцию.
Чтобы переменные стали активными, необходимо сообщить об этом браузеру. Это делается, когда Тег определяет следующие данные:
<meta name= "viewport" content= "initial-scale=1, viewport-fit=cover" >
вместо покрытия можно определить еще два варианта:
cover – веб-страница будет отображаться на весь экран смартфона и будет изменяться с использованием четырех глобальных переменных. Этот вариант удобен, когда экран смартфона не вызывает проблем и веб-страница отображается во весь экран.
contain – веб-страница будет располагаться только в свободной области экрана.
auto - это то же самое, что containтот
Если веб-страница будет открыта на экране компьютера или ноутбука, значение четырех глобальных переменных будет равно 0.
Если страница будет открыта на квадратном экране, глобальные переменные сопоставят экран с прямоугольником и отобразят на нем содержимое.
С помощью глобальных переменных вы также можете определить вторичные значения, которые будут работать, когда глобальные переменные недоступны браузеру.
env(SAFE-AREA-INSET-TOP, 25px)
env(SAFE-AREA-INSET-RIGHT, 25px)
env(SAFE-AREA-INSET-BOTTOM, 25px)
env(SAFE-AREA-INSET-LEFT, 25px)
или без второстепенных значений:
env(SAFE-AREA-INSET-TOP)
env(SAFE-AREA-INSET-RIGHT)
env(SAFE-AREA-INSET-BOTTOM)
env(SAFE-AREA-INSET-LEFT)
<head>
<meta
charset="utf-8"
name="viewport"
content="initial-scale=1,
viewport-fit=cover"
/>
<title>hayti</title>
<style>
body {
padding: env(SAFE-AREA-INSET-TOP) env(SAFE-AREA-INSET-RIGHT)
env(SAFE-AREA-INSET-BOTTOM) env(SAFE-AREA-INSET-LEFT);
}
</style>
</head>
Сайт открывается только через браузер, но его можно превратить в программу для смартфона и компьютера.
Это тот же сайт, но он выглядит как программа. Эта технология называется PWA (подробности можно найти в сети).
«Имя программы» получено
Ծրագրի անվանումը
Содержание программы.