The CSS language useful for formatting and organizing the way page elements appear on a website is enriched with support for trigonometry functions such as sine, cosine, tangent, and others; it is the result of a decision that the CSS group of the World Wide Web Consortium (W3C) made at the end of last month.
The new functions approved and in the process of joining the CSS standard are: sinus - sin (); cosine - cos (); tangent - tan (); arccosinus - acos (); arcsinus - asin (); arctangent - atan (); arctangent (of two numbers x and y) - atan2 (); square root - sqrt (); square root of the sum of the squares of its arguments - hypot (); power - pow ().
These functions are in addition to existing CSS support for mathematical functions which already includes: calc () - for calculating basic expressions; min () - to get the smallest value within a series; max () - to get the largest value within a series of numbers; clamp () - to determine the average value of numbers between a lower limit and an upper limit.
The CSS group of the World Wide Web Consortium has approved the addition of these new math functions at the request of several web developers who have requested a simple way to control animations using native CSS syntax instead of JavaScript. For example, the exercise of displaying a tree like the one in the following figure required until now to rely on the JavaScript language for the angle calculations.
|
< 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 >
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 >
|
|
/ * Just setting the page vars * /
html {
--font-mono: Consolas, Monaco, 'Andale Mono' , minivan ;
--color-magenta: # f06 ;
--color-green: yellowgreen ;
--color-aqua: hsl ( 191 , 100 %, 40 % ) ;
min-height : 100 vh;
}
body {
margin : 0 ;
min-height : 100 %;
display : flex ;
flex-flow : column ;
align-items : center ;
justify-content : center ;
padding : 2.5 rem;
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: 5 rem;
}
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 :. 3 em var ( --dx ) ;
font-size : 75 %;
}
ul .tree span {
padding : .3 em .5 em .15 em;
background : var ( --color-green ) ;
border-radius : .4 rem;
text-shadow : 0 0 3 px 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 ( .15 rem + .05 em ) ;
transform : translateY ( - 50 % ) skewY ( calc ( var (--angle, 0 ) * 1 deg ) ) 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 ) ;
}
|
|
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 & # 952 ; = angle * 180 / Math .PI;
span.style. setProperty ( "--angle" , & # 952 ; ) ;
span.style. setProperty ( "--cos-angle" , Math . cos ( angle ) ) ;
} ) ;
} ) ;
|
The World Wide Web Consortium's CSS discussion group has decided, where possible, to align with the naming conventions of mathematical functions in JavaScript. He also specifies that the mathematical operations will relate to quantities whose types stick with the rules defined in the current model of objects that can be manipulated in CSS.
On the web, the announcement of the addition of these functions divides. What can be considered conservative believes that the CSS language does not need such additions. “Why the hell does CSS have to be used this way ?! Why introduce such capabilities ?! I thought CSS was for applying styles to HTML documents. Calculations, etc. must be done in JS. We are swimming once again in the Electron, ”they point out. However, the group of progressives is of the opinion that CSS is better than JavaScript in some aspects. "CSS is much faster than JS when it comes to performing calculations," we learn. It is therefore for the latter that the addition of these functions can only be a good thing.
These functions are not currently available for any browser. We are waiting for dates or announcements on a case-by-case basis.
