2 pièce(s) jointe(s)
CSS s’enrichit du support des fonctions trigonométriques jusqu'ici accessibles via JavaScript
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:
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:
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:
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 ?
:fleche: Que pensez-vous de l’ajout de ces fonctions ?
:fleche: Quels usages entrevoyez-vous ?
:fleche: Quels pourraient être les inconvénients d’intégrer ces fonctions à son code ?
:fleche: D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?
:fleche: Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?
Voir aussi :
:fleche: Next.js 8 est maintenant disponible avec une réduction de l'utilisation de la mémoire au moment de la construction
:fleche: Quelles sont les nouvelles fonctionnalités qui pourraient débarquer dans JavaScript en 2019 ? Un tour d'horizon des candidats pour ES2019
:fleche: 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
:fleche: 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
