-
Notifications
You must be signed in to change notification settings - Fork 0
/
css_3_variables.html
163 lines (127 loc) · 6.17 KB
/
css_3_variables.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html>
<head>
<title>CSS3: variabili (proprietà custom)</title>
<link rel="stylesheet" type="text/css" href="iw_examples.css"/>
<meta charset="utf-8"/>
<style type="text/css">
:root {
--my-font-weight: bold;
--my-global-font-size: 25pt;
}
.elemento1 {
--my-bk-color: cyan;
--my-fn-size: 20pt;
}
.elemento1-1 {
background-color: var(--my-bk-color);
border: var(--my-border, 2px dashed blue);
}
.elemento1-2 {
background-color: var(--my-bk-color);
font-size: var(--my-fn-size);
--my-border: 3px solid black;
--my-bk-color: purple;
}
.elemento1-2-1 {
border: var(--my-border);
font-weight: var(--my-font-weight);
background-color: var(--my-bk-color);
}
.elemento1-3 {
background-color: var(--my-bk-color);
}
.elemento2 {
font-size: calc(var(--my-global-font-size) * 2);
}
</style>
</head>
<body>
<h1 class="sezione">CSS3: proprietà custom e variabili</h1>
<p >Le proprietà custom di CSS, dette anche variabili, sono una caratteristica non ancora formalmente
approvata dallo standard (si veda <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>), ma supportata ormai da tutti i browser aggiornati.</p>
<div class="esempi">
<div class="esempio">
<div class="rendering">
<div class="elemento1">
ELEMENTO1
<p class="elemento1-1">ELEMENTO1-1, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p>
<div class="elemento1-2">
<p>ELEMENTO1-2, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p>
<p class="elemento1-2-1">ELEMENTO1-2-1, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p>
</div>
<p class="elemento1-3">ELEMENTO1-3, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p>
</div>
</div>
<div class="sorgente">
<h3>CSS</h3>
<p> .elemento1 {
--my-bk-color: cyan;
--my-fn-size: 20pt;
}<span class="commento"> Le proprietà custom o <em>variabili</em> sono soggette alla cascata come quelle standard, quindi spesso si impostano su particolari elementi perchè tutti i discendenti le possano sfruttare (richiamare).</span></p>
<p> :root {
--my-font-weight: bold;
--my-global-font-size: 25pt;
}<span class="commento"> Se vogliamo quindi variabili veramente globali, considerata la cascata dovremmo impostarle sull'elemento radice, cioè HTML. Tuttavia, spesso si preferisce usare lo speciale pseudo elemento :root, che ha una specificità ancora più alta.</span> </p>
<p> .elemento1-1 {
background-color: var(--my-bk-color)<span class="commento"> La funzione var() permette di usare come valore di una proprietà quello di una variabile presente o ereditata dall'elemento </span>
border: var(--my-border, 2px dashed blue);<span class="commento"> Questa variabile non è definita nè ereditata da elemento1-1 (infatti è definita in elemento1-2) Quindi viene usato come valore della proprietà il secondo parametro di var(), che è a tutti gli effetti un valore di dafault </span> }</p>
<p>.elemento1-2 {
background-color: var(--my-bk-color);
font-size: var(--my-fn-size);
--my-border: 3px solid black;
--my-bk-color: purple;
}<span class="commento"> elemento1-2 eredita due variabili da elemento1, ne sovrascrive una (--my-bk-color) e ne definisce una nuova (--my-border). </span></p>
<p>.elemento1-2-1 {
border: var(--my-border);<span class="commento"> qui invece la proprietà --my-border è ereditata da .elemento1-2, quindi è disponibile </span>
font-weight: var(--my-font-weight);
background-color: var(--my-bk-color); <span class="commento"> qui il valore di --my-bk-color è quello sovrascritto ed ereditato da elemento1-2 </span> }</p>
<p>.elemento1-3 {
background-color: var(--my-bk-color); <span class="commento"> qui invece il valore di --my-bk-color è quello ereditato da elemento1, in quanto siamo fuori da elemento1-2 (e quindi non influenzati dal valore sovrascritto) </span>}</p>
<h3>HTML</h3>
<div class="block-container">
<p><div class="elemento1"></p>
<div class="block-container">
ELEMENTO1
<p> <p class="elemento1-1">ELEMENTO1-1, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p></p>
</div>
<div class="block-container">
<p> <div class="elemento1-2"></p>
<div class="block-container">
<p> <p>ELEMENTO1-2, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p> </p>
<p><p class="elemento1-2-1">ELEMENTO1-2-1, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p></p>
</div>
<p> </div> </p>
</div>
<div class="block-container">
<p> <p class="elemento1-3">ELEMENTO1-3, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</p> </p>
</div>
<p></div> </p>
</div>
</div>
</div>
</div>
<h2 class="sezione">La funzione calc()</h2>
<p>La funzione css calc() permette di eseguire operazioni aritmetiche di base su valori numerici direttamente nei fogli di stile.
Non è ancora formalmente approvata dallo standard (si veda <a href="https://www.w3.org/TR/css-values-4/#funcdef-calc">https://www.w3.org/TR/css-values-4/#funcdef-calc</a>),
ma supportata ormai da tutti i browser aggiornati, anche se con alcune limitazioni.</p>
<div class="esempi">
<div class="esempio">
<div class="rendering">
<div class="elemento2">ELEMENTO2, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</div>
</div>
<div class="sorgente">
<h3>HTML</h3>
<p><div class="elemento2">ELEMENTO2, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla</div></p>
<h3>CSS</h3>
<p>:root {
--my-global-font-size: 25pt;
}</p>
<p> .elemento2 {
font-size: calc(var(--my-global-font-size) * 2);
}<span class="commento"> Con la funzione calc() si possono effettuare operazioni sui valori (anche) delle variabili.</span></p>
</div>
</div>
</div>
</body>
</html>