Discussion :

[Patrick Ruiz]

CSS s’enrichit du support des fonctions trigonométriques jusqu'ici accessibles via JavaScript
Après l’approbation du World Wide Web Consortium

Le langage CSS utile pour la mise en forme et l'organisation de la façon dont les éléments de page apparaissent sur un site Web s'enrichit du support des fonctions de trigonométrie telles que sinus, cosinus, tangente, et autres ; c’est le résultat d’une décision que le groupe CSS du World Wide Web Consortium (W3C) a prise à la fin du mois dernier.

Les nouvelles fonctions approuvées et en voie de rejoindre le standard CSS sont : sinus – sin() ; cosinus – cos() ; tangente – tan() ; arccosinus – acos() ; arcsinus – asin() ; arctangente – atan() ; arctangente (de deux nombres x et y) – atan2() ; racine carrée – sqrt() ; racine carrée de la somme des carrés de ses arguments – hypot() ; puissance – pow().

Ces fonctions viennent s'ajouter au support existant de CSS pour les fonctions mathématiques qui inclut déjà : calc() – pour le calcul des expressions de base ; min() – pour obtenir la plus petite valeur au sein d'une série ; max() – pour obtenir la plus grande valeur au sein d'une série de nombres ; clamp() – pour déterminer la valeur moyenne de nombres situés entre une limite inférieure et une limite supérieure.

Le groupe CSS du World Wide Web Consortium a approuvé l'ajout de ces nouvelles fonctions mathématiques à la demande de plusieurs développeurs web qui ont demandé un moyen simple de contrôler les animations en utilisant la syntaxe CSS native au lieu de JavaScript. Par exemple, l’exercice de l’affichage d’un arbre comme celui de la figure qui suit nécessitait jusqu’à présent de s’appuyer sur le langage JavaScript pour les calculs d’angles.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
		}

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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));
	});
});

Le groupe de discussions CSS du World Wide Web Consortium a, dans la mesure du possible, décidé de s’aligner sur les conventions de nommage des fonctions mathématiques du langage JavaScript. Il précise en sus que les opérations mathématiques porteront sur des grandeurs dont les types collent avec les règles définies dans l’actuel modèle d’objets manipulables en CSS.

Sur la toile, l’annonce de l’ajout de ces fonctions divise. Ce que l’on peut considérer comme les conservateurs estime que le langage CSS n’a pas besoin de tels ajouts. « Pourquoi diable le CSS doit-il être utilisé de cette façon ?! Pourquoi introduire de telles capacités ?! Je pensais que CSS était réservé à l’application de styles aux documents HTML. Les calculs, etc. doivent être effectués en JS. On nage une fois de plus dans de l’Electron », soulignent-ils. Seulement, le groupe des progressistes est d’avis que CSS est meilleur que JavaScript sur certains aspects. « CSS est beaucoup plus rapide que JS lorsqu’il s’agit d’effectuer des calculs », apprend-on. Il vient donc pour ces derniers que l’ajout de ces fonctions ne peut qu’être une bonne chose.

Lesdites fonctions ne sont pour le moment disponibles pour aucun navigateur. On reste dans l’attente de dates ou d’annonces au cas par cas.

Source : GitHub

Et vous ?

Que pensez-vous de l’ajout de ces fonctions ?

Quels usages entrevoyez-vous ?

Quels pourraient être les inconvénients d’intégrer ces fonctions à son code ?

D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?

Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?

Voir aussi :

Next.js 8 est maintenant disponible avec une réduction de l'utilisation de la mémoire au moment de la construction
Quelles sont les nouvelles fonctionnalités qui pourraient débarquer dans JavaScript en 2019 ? Un tour d'horizon des candidats pour ES2019
PHP 7.4 devrait être rendu disponible vers la fin de cette année : voici un aperçu des nouveautés qui pourraient y figurer
Parmi les sites CMS piratés en 2018, 90 % sont des sites WordPress et 97 % des sites PrestaShop piratés sont obsolètes, selon un rapport

[Zefling]

Ça ne me dérange pas. Quand on voir la Layout API et la Paint API, il y a déjà un lien de plus en plus fort entre le JS et le CSS. J'avais même fait une proposition de pouvoir accéder à l'index, il y a plusieurs année pour éviter de faire du JS, qui a été refusée. Je devrais peut-être la refaire.

Il faudra que je m'occupe de mettre à jour CSS3test quand ça sera dans le draft. Mais c'est pour CSS Value 5, il y a le temps, déjà que le 4 n'est même pas supporté par les navigateurs.

[Steinvikel]

Pourquoi diable le CSS doit-il être utilisé de cette façon ?! Pourquoi introduire de telles capacités ?! Je pensais que CSS était réservé à l’application de styles aux documents HTML. Les calculs, etc. doivent être effectués en JS.

Que pensez-vous de l’ajout de ces fonctions ?
C'était peut-être vrai pour CSS 1 & 2, mais depuis l'introduction d'animations et de transitions, l'usage de ces fonctions n'a-t-il pas tout son sens au sein du langage ? Je pense que oui.

Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?
non

D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?
j'ai pas d'idée, j'y touche trop peu... mais j'aimerai bien en entendre parler.

[Eagles]

=> Que pensez-vous de l’ajout de ces fonctions ?
Elles sont très pratique, je développe des IHM Web pour systèmes embarqués et pouvoir faire du positionnement/animation plus original en CSS au lieu du JS me semb

=> Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?
Non bien au contraire il faut faire évoluer les technos vanilla afin de ne pas voir se multiplier des framework/polyfill plus ou moins fonctionnels faisant la même chose mais de manière, avec des API différentes, plus ou moins qualifié et surtout ayant une espérance de vie inconnue, quand la pérennité est au coeur de votre développement c'est ingérable.

=> D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?
La concaténation des variables (autre que des string) offrirai de nouvelles possibilités intéressantes comme par exemple la définition d'une couleur de base et pouvoir la décliner avec un alpha différent.

Aujourd'hui il faut faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
:root {
  --base-color: 128, 128, 128;
  --alpha: 0.5;
}
body {
  background: rgba(var(--base-color), var(--alpha));
}

Ce n'est pas très pratique car les éditeurs comme VSCode ou les outils de debug pour proposer des colorpickers mais pas dans cette configuration, alors que dans le code ci-dessous ça serait possible:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
:root {
  --base-color: #A5A5A5;
  --alpha: B2;
}
body {
  background: var(--base-color) + var(--alpha);
}

C'est juste un exemple je pense qu'il y a pleins d'autres contextes ou ça serait pratique

[Golfy]

... les dessinateurs de CommitStrip
http://www.commitstrip.com/fr/2019/0...s-everywhere/?