Are CSS property values ​​applicable to a unit of value with zeros added equivalent to the corresponding non-zero values?

I was looking at some stylesheets when I noticed one that I used linear-gradientwith rgba()color stops, in which numbers rgbaused multiple instances of 0 instead of one 0

background-image:linear-gradient(to top left, rgba(000,000,000,0.1),rgba(100,100,100,1));

I have not seen several zeros (instead of one zero) occupying one slot in the rgb / a color space before, but confirmed in CodePen, this is valid. Then I looked at the definition of the W3C number here .

To make a long story short, after some pushing and digging, I did not understand that I could bring an indefinite number of zeros to length and get the same result as without zeros, like this:

/* The two squares generated have equivalent width and height of 100px - for giggles, I also extended the same idea to the transition-duration time */

<style>

div.aaa {
    width:00000000100px;
    height:100px;
    background-image:linear-gradient(to top left,rgba(000,000,000,0.1),rgba(100,100,100,1));
    transition:1s cubic-bezier(1,1,1,1)
}

div.bbb {
    width:100px;
    height:000000000000000000000000000000000100px;
    background-color:green;
    transition:0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001s cubic-bezier(1,1,1,1)
}

div:hover { background-color:red } 

</style>

<div class="aaa"></div>
<div class="bbb"></div>

It is difficult to directly verify that these numbers are equivalent representations, since using the scripting language:

/* PHP */
$x = 100;
$y = 00000000000100; // problem is PHP treats this as an octal number

echo ($x == $y) ? 'true' : 'false'; // echoes the string ---> false

/* Javascript */
var x = 100;
var y = 00000000000100; // also treats this as an octal number

var res = (x == y) ? 'true' : 'false';
alert(res); // alerts ---> false

These examples tell me that CSS does not process, for example. 0000100 as an octal number, but rather as a decimal (or at least not octal numbers), since the value width, heightand transition-durationfor the elements generated above, the html seems to be the same.

CSS , , , - CSS, , , - ?

+4
1

, .

https://www.w3.org/TR/CSS21/syndata.html

css 2 :

num     [0-9]+|[0-9]*\.[0-9]+

, 000000000000000037.3 , 0 9, a. 0 9.

css 3 spec: https://www.w3.org/TR/css3-values/#numbers

4,2. :

<number> , .

, , (.), , "e" "E", . CSS [CSS3SYN]. , - +, .

https://www.w3.org/TR/css-syntax-3/#convert-a-string-to-a-number , , , css css :

4.3.13.

, . .

. , , . , CSS .

, :

: U + 002B PLUS SIGN (+) U + 002D HYPHEN-MINUS (-) . s - -1, U + 002D HYPHEN-MINUS (-); s - 1.

: . , , base-10 integer; - 0.

: U + 002E FULL STOP (.) .

: . , f - , base-10 integer d - ; f d 0.

: U + 0045 LATIN CAPITAL LETTER E (E) U + 0065 LATIN SMALL LETTER E (e) . (-) . t - -1, U + 002D HYPHEN-MINUS (-); t - 1.

: . , e - , -10 ; - 0.

s · (i + f · 10-d) · 10te.

, -10.

, , 0 , , , , , :

https://www.w3.org/TR/css-syntax-3/#escaping

, . escape- CSS (\) :

Unicode, . .

, . , . escape-, "" .

"& B" \26 B \000026B.

"" escape- .

, , , 0 , .

CSS , . , , , 10, , - .

, , , , 0, , , , , , css , , .

. , , , , css - , "" , php javascript, , , , , .

, , , , .

+2

Source: https://habr.com/ru/post/1672393/


All Articles