CSS s'enrichit du support des fonctions trigonométriques jusqu'ici accessibles via JavaScript

Après l'approbation du World Wide Web Consortium

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
<ul class="tree"> 
	<li> 
		border 
		<ul> 
			<li>border-width 
				<ul> 
					<li>border-top-width</li> 
					<li>border-right-width</li> 
					<li>border-bottom-width</li> 
					<li>border-left-width</li> 
				</ul> 
			</li> 
			<li>border-style 
				<ul> 
					<li>border-top-style</li> 
					<li>border-right-style</li> 
					<li>border-bottom-style</li> 
					<li>border-left-style</li> 
				</ul> 
			</li> 
			<li>border-color 
				<ul> 
					<li>border-top-color</li> 
					<li>border-right-color</li> 
					<li>border-bottom-color</li> 
					<li>border-left-color</li> 
				</ul> 
			</li> 
		</ul> 
	</li> 
</ul>

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
/* Just setting the page vars */ 
html { 
	--font-mono: Consolas, Monaco, 'Andale Mono', monospace; 
  
	--color-magenta: #f06; 
	--color-green: yellowgreen; 
	--color-aqua: hsl(191, 100%, 40%); 
	min-height: 100vh; 
} 
  
body { 
	margin: 0; 
	min-height: 100%; 
	display: flex; 
	flex-flow: column; 
	align-items: center; 
	justify-content: center; 
	padding: 2.5rem; 
	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%); 
	color: white; 
	font-size: 180%; 
} 
  
ul.tree { 
	font: bold 160%/1 var(--font-mono); 
	--dx: 5rem; 
} 
  
ul.tree, ul.tree ul { 
	margin: 0; 
	padding: 0; 
} 
  
	ul.tree > li { 
		margin: 0; 
	} 
  
	ul.tree li { 
		position: relative; 
		display: flex; 
		align-items: center; 
		margin: .3em var(--dx); 
		font-size: 75%; 
	} 
  
	ul.tree span { 
		padding: .3em .5em .15em; 
		background: var(--color-green); 
		border-radius: .4rem; 
		text-shadow: 0 0 3px rgba(0,0,0,.4); 
		white-space: nowrap; 
	} 
  
		ul.tree li  li span::before { 
			content: ""; 
			position: absolute; 
			top: 50%; 
			right: 100%; 
			width: var(--dx); 
			height: calc(.15rem + .05em); 
			transform: translateY(-50%) skewY(calc(var(--angle, 0) * 1deg))  scaleY(calc(1 / var(--cos-angle, 1))); 
			transform-origin: right; 
			background: inherit; 
			background-image: linear-gradient(to right, var(--parent-color), transparent); 
		} 
  
		ul.tree > li li span { /* Second+ level */ 
			background: var(--color-magenta); 
			--parent-color: var(--color-green); 
		} 
  
		ul.tree > li li li span { /* Third+ level */ 
			background: var(--color-aqua); 
			--parent-color: var(--color-magenta); 
		}

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
var $ = Bliss, $$ = Bliss.$; 
  
$$("ul.tree").forEach(ul => { 
	// Wrap each text node with a span 
	$$("li", ul).forEach(li => { 
		if (li.childNodes[0].nodeType == 3) { 
			$.create("span", { 
				around: li.childNodes[0] 
			}); 
		} 
	}); 
  
	// Calculate angle 
	$$("li li > span", ul).forEach(span => { 
		var li = span.closest("ul").parentNode; 
		var lineCS = getComputedStyle(span, "::before"); 
  
		var top = span.parentNode.offsetTop + span.parentNode.offsetHeight / 2; 
		var parentTop = li.offsetHeight / 2; 
		var dy = top - parentTop; 
		var dx = parseInt(lineCS.width); 
  
		var angle = Math.atan2(dy, dx); 
		var θ = angle * 180 / Math.PI; 
		span.style.setProperty("--angle", θ); 
		span.style.setProperty("--cos-angle", Math.cos(angle)); 
	}); 
});