Skip to content

Commit 7036f2d

Browse files
author
Bandarenka Yura
committed
update
1 parent 1d0bac0 commit 7036f2d

File tree

5 files changed

+433
-4
lines changed

5 files changed

+433
-4
lines changed

‎.prettierrc.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"printWidth": 9999,
2+
"printWidth": 80,
33
"useTabs": true,
44
"tabWidth": 4,
55
"semi": false,

‎docs/css/@document.md

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# @document
2+
3+
Правило **`@document`** ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа. Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.
4+
5+
К примеру, если адреса мобильной и основной версии сайта различаются, то мы можем задать собственный стиль элементов для каждой версии.
6+
7+
## Синтаксис
8+
9+
```css
10+
@document url("https://www.example.com/") {
11+
h1 {
12+
color: green;
13+
}
14+
}
15+
```
16+
17+
## Значения
18+
19+
Правило `@document` может указывать одну или несколько подходящих функций. Если какая-либо из функций применяется к данному URL-адресу, это правило вступит в силу для этого URL-адреса. Доступны следующие функции:
20+
21+
- `url()`, который соответствует точному URL-адресу.
22+
- `url-prefix()`, который совпадает, если URL-адрес документа начинается с указанного значения.
23+
- `domain()`, который совпадает, если URL-адрес документа находится в предоставленном домене (или его субдомене).
24+
- `media-document()`,с параметром видео, изображения, плагина или всего.
25+
- `regexp()`, который совпадает, если URL-адрес документа сопоставляется с предоставленным регулярным выражением. Выражение должно соответствовать всему URL-адресу.
26+
27+
Значения, предоставляемые функциям `url()`, `url-prefix()`, `domain()`, и `media-document()` могут быть необязательно заключены в одинарные или двойные кавычки. Значения, предоставляемые функции `regexp()` должны быть заключены в кавычки.
28+
29+
Экранированные значения, предоставляемые функции `regexp()` акже должны быть экранированы из CSS. Например, `.` (период) соответствует любому символу в регулярных выражениях. Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений (`\.`), А затем убежать от этой строки с помощью правил CSS (`\\.`).
30+
31+
## Спецификации
32+
33+
- [CSS Conditional Rules Module Level 3](https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document)
34+
35+
## Примеры
36+
37+
### Пример 1
38+
39+
```css
40+
@document url(http://www.w3.org/),
41+
url-prefix(http://www.w3.org/Style/),
42+
domain(mozilla.org),
43+
media-document(video),
44+
regexp("https:.*") {
45+
/* CSS rules here apply to:
46+
- The page "http://www.w3.org/"
47+
- Any page whose URL begins with "http://www.w3.org/Style/"
48+
- Any page whose URL's host is "mozilla.org"
49+
or ends with ".mozilla.org"
50+
- Any standalone video
51+
- Any page whose URL starts with "https:" */
52+
53+
/* Make the above-mentioned pages really ugly */
54+
body {
55+
color: purple;
56+
background: yellow;
57+
}
58+
}
59+
```
60+
61+
### Пример 2
62+
63+
```html
64+
<!DOCTYPE html>
65+
<html>
66+
<head>
67+
<meta charset="utf-8" />
68+
<title>@document</title>
69+
<style>
70+
.ssl {
71+
display: none;
72+
}
73+
@-moz-document regexp("https:.*") {
74+
.ssl {
75+
display: block;
76+
background: #5bd4b6;
77+
color: #fff;
78+
padding: 20px;
79+
}
80+
}
81+
</style>
82+
</head>
83+
<body>
84+
<div class="ssl">
85+
Для вашей безопасности на сайте мы используем защищённый протокол.
86+
</div>
87+
</body>
88+
</html>
89+
```
90+
91+
В данном примере блок с классом `ssl` будет виден только на сайте, адрес которого начинается с протокола `https`.
92+
93+
## Ссылки
94+
95+
- [@document](https://developer.mozilla.org/ru/docs/Web/CSS/@document) на MDN

‎docs/css/@page.md

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# @page
2+
3+
Правило **`@page`** используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS свойства с `@page`. Вы можете изменить только [`margin`](margin.md), [`orphans`](orphans.md), [`widows`](widows.md), и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.
4+
5+
Правило `@page` доступно через интерфейс объектной модели CSS `CSSPageRule`.
6+
7+
## Синтаксис
8+
9+
```css
10+
@page {
11+
margin: 1cm;
12+
}
13+
14+
@page :first {
15+
margin: 2cm;
16+
}
17+
```
18+
19+
### size
20+
21+
Указывает целевой размер и ориентацию полей страницы, содержащихся в блоке. В общем случае, когда одно поле страницы отображается на одном листе страницы, он также определяет размер и ориентацию листа страницы.
22+
23+
```css
24+
/* Keyword values for scalable size */
25+
size: auto;
26+
size: portrait;
27+
size: landscape;
28+
29+
/* <length> values */
30+
/* 1 value: height = width */
31+
size: 6in;
32+
33+
/* 2 values: width then height */
34+
size: 4in 6in;
35+
36+
/* Keyword values for absolute size */
37+
size: A4;
38+
size: B5;
39+
size: JIS-B4;
40+
size: letter;
41+
42+
/* Mixing size and orientation */
43+
size: A4 portrait;
44+
```
45+
46+
Значения:
47+
48+
`auto`
49+
: Браузер сам выбирает размер листа.
50+
51+
`landscape`
52+
: Содержимое страницы отображается в альбомной ориентации
53+
54+
`portrait`
55+
: Содержимое страницы отображается в портретном режиме. Это ориентация по умолчанию.
56+
57+
`<length>`
58+
: Любое значение длины. Первое значение соответствует ширине поля страницы, а второе соответствует его высоте. Если указано только одно значение, оно используется как для ширины, так и для высоты.
59+
60+
`<page-size>`
61+
: `A5` (148mm x 210mm), `A4` (210mm x 297mm), `A3` (297mm x 420mm), `B5` (176mm x 250mm), `B4` (250mm x 353mm), `JIS-B5` (182mm x 257mm), `JIS-B4` (257mm x 364mm), `letter` (8.5in x 11in), `legal` (8.5in x 14in), `ledger` (11in x 17in).
62+
63+
### marks
64+
65+
Добавляет обрезку и/или регистрационные отметки в документ.
66+
67+
```css
68+
@page {
69+
/* Keyword values */
70+
marks: none;
71+
marks: crop;
72+
marks: cross;
73+
marks: crop cross;
74+
}
75+
```
76+
77+
Значения:
78+
79+
`crop`
80+
: Будут напечатаны отметки для обрезки
81+
82+
`cross`
83+
: Будут напечатаны крестики
84+
85+
`none`
86+
: Никаких отметок не будет напечатано
87+
88+
### bleed
89+
90+
Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.
91+
92+
```css
93+
/* Keyword values */
94+
bleed: auto;
95+
96+
/* <length> values */
97+
bleed: 8pt;
98+
bleed: 1cm;
99+
```
100+
101+
## Пример
102+
103+
```html tab="HTML"
104+
<!DOCTYPE html>
105+
<html>
106+
<head>
107+
<meta charset="utf-8" />
108+
<title>@page</title>
109+
<link rel="stylesheet" href="/example/css/print.css" media="print" />
110+
</head>
111+
<body>
112+
<h1>Метод ловли льва в пустыне</h1>
113+
<h2>Метод последовательного перебора</h2>
114+
<p>
115+
Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика
116+
носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего
117+
пустыню разбиваем на ряд элементарных прямоугольников, размер которых
118+
совпадает с шириной и длиной льва. Учитывая, что лев может находиться не
119+
строго на заданном участке, а одновременно на двух из них, клетку для
120+
ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому
121+
мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва
122+
или, что хуже, только его хвост.
123+
</p>
124+
<p>
125+
Далее последовательно накрываем каждый из размеченных прямоугольников
126+
пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в
127+
клетке, процедура поимки считается завершенной.
128+
</p>
129+
</body>
130+
</html>
131+
```
132+
133+
```css tab="print.css"
134+
body {
135+
font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
136+
}
137+
h1,
138+
h2,
139+
p {
140+
color: #000; /* Черный цвет текста */
141+
}
142+
@page :first {
143+
margin: 1cm; /* Отступы для первой страницы */
144+
}
145+
@page :left {
146+
margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */
147+
}
148+
@page :right {
149+
margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */
150+
}
151+
```
152+
153+
## Спецификации
154+
155+
- [CSS Logical Properties and Values Level 1](https://drafts.csswg.org/css-logical/#logical-page)
156+
- [CSS Paged Media Module Level 3](https://drafts.csswg.org/css-page-3/#at-page-rule)
157+
- [CSS Level 2 (Revision 1)](https://www.w3.org/TR/CSS2/page.html#page-selectors)
158+
159+
## См. также
160+
161+
- [:blank](:blank.md)
162+
- [:first](:first.md)
163+
- [:left](:left.md)
164+
- [:right](:right.md)
165+
166+
## Ссылки
167+
168+
- [@page](https://developer.mozilla.org/ru/docs/Web/CSS/@page) на MDN

0 commit comments

Comments
 (0)