I couldn't find a precise definition of legal syntax for CSS3 colors, either as regular expression, BNF or whatever strict formal definition there might be. Some info can be derived from the verbal description in the CSS3 Color Module (for example that comma separated lists may contain whitespace), but I don't see whether e.g. leading zeros in something like
rgb(010,005,255)
rgba(050%,1%,01%,0)
are actually legal, or omitting leading zeros of decimal fractions, like
rgba(100,100,100,.5)
I'm not talking about what is tolerated by browsers, I'm asking whether this is officially legal CSS3 syntax as I'm interested in the use of these color definitions in non-browser applications as well.
As you found already, the CSS3 Color Module specification says
The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'
But you then need to look in basic data types section of CSS 2.1 to find out what an integer or a percentage value is and it says...
Some value types may have integer values (denoted by ) or real number values (denoted by ). Real numbers and integers are specified in decimal notation only. An consists of one or more digits "0" to "9". A can either be an , or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.
So integers and numbers can have leading zeros.
Then later on basic data types says
The format of a percentage value (denoted by in this specification) is a immediately followed by '%'.
So percentages can have leading zeros too.
Related
I have searched the internet and it seems very hard to find this info.
When I do
div {
width: calc(1e-10 * 1e12px);
}
It sets the width to 100px. But when I do
div {
width: calc(1e-1000 * 1e1002px);
}
It fails. Clearly, 1e1002 is out of range.
What is the valid range of numbers in CSS? Does it depend on the unit? Is it browser specific?
It is up to each browser to pick limits for CSS real numbers. The spec supports a theoretically infinite range but relies on vendors to provide 'reasonable' support.
4.1. Range Restrictions and Range Definition Notation
Properties can restrict numeric values to some range. If the value is outside the allowed range, then unless otherwise specified, the declaration is invalid and must be ignored.
[...]
CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions. Range extremes that are ideally unlimited are indicated using ∞ or −∞ as appropriate.
Soruce: https://www.w3.org/TR/css-values-3/#numeric-ranges
See also:
4.3. Real Numbers: the <number> type
Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.
When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the <number-token> production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.
Source: https://www.w3.org/TR/css-values-3/#numbers
I was scanning some stylesheets when I noticed one which used a linear-gradient with rgba() color-stops in which the rgba numbers used multiple instances of 0 instead of just a single 0:
background-image:linear-gradient(to top left, rgba(000,000,000,0.1),rgba(100,100,100,1));
I hadn't seen multiple zeroes (instead of a single zero) occupying a single slot in the rgb/a color space before, but confirmed on CodePen this is valid. I then looked up the W3C definition of number here.
To make a long story short, after some more poking and digging, I didn't realize I could prepend an indeterminate number of zeroes to a length and get the same result as with no zeroes prepended, 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's difficult to directly verify these numbers are equivalent representations, because using a 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 suggest to me that CSS does not treat e.g. 0000100 as an octal number, but rather as a decimal (or at least as non-octal numbers) since the magnitude of the width, height, and transition-duration for the html elements generated above appear to be identical.
Extending this CSS approach to any property and any unit, e.g., time,
Is any unit-containing CSS property value prepended with any positive number of zeroes syntactically equivalent to the same value without any prepended zeroes?
I have to admit I found this question interesting.
https://www.w3.org/TR/CSS21/syndata.html
The css 2 syntax spec says:
num [0-9]+|[0-9]*\.[0-9]+
Note that 000000000000000037.3 meets this rule and definition, a series of numbers between 0 and 9, optionally followed by a . and a further series of numbers from 0 to 9.
The css 3 spec goes on:
https://www.w3.org/TR/css3-values/#numbers
4.2. Real Numbers: the type
Number values are denoted by <number>, and represent real numbers,
possibly with a fractional component.
When written literally, a number is either an integer, or zero or more
decimal digits followed by a dot (.) followed by one or more decimal
digits and optionally an exponent composed of "e" or "E" and an
integer. It corresponds to the production in the CSS
Syntax Module [CSS3SYN]. As with integers, the first character of a
number may be immediately preceded by - or + to indicate the number’s
sign.
https://www.w3.org/TR/css-syntax-3/#convert-a-string-to-a-number
This I believe roughly explains how a css parser is supposed to take the css value and convert it to a number:
4.3.13. Convert a string to a number
This section describes how to convert a string to a number . It
returns a number.
Note: This algorithm does not do any verification to ensure that the
string contains only a number. Ensure that the string contains only a
valid CSS number before calling this algorithm.
Divide the string into seven components, in order from left to right:
A sign: a single U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-), or the empty string. Let s be the number -1 if the sign is U+002D
HYPHEN-MINUS (-); otherwise, let s be the number 1.
An integer part: zero or more digits. If there is at least one digit, let i be the number formed by interpreting the digits as a
base-10 integer; otherwise, let i be the number 0.
A decimal point: a single U+002E FULL STOP (.), or the empty string.
A fractional part: zero or more digits. If there is at least one digit, let f be the number formed by interpreting the digits as a
base-10 integer and d be the number of digits; otherwise, let f and d
be the number 0.
An exponent indicator: a single U+0045 LATIN CAPITAL LETTER E (E) or U+0065 LATIN SMALL LETTER E (e), or the empty string.
(-), or the empty string. Let t be the number -1 if the
sign is U+002D HYPHEN-MINUS (-); otherwise, let t be the number 1.
An exponent: zero or more digits. If there is at least one digit, let e be the number formed by interpreting the digits as a base-10
integer; otherwise, let e be the number 0.
Return the number s·(i + f·10-d)·10te.
I think the key term there is a base-10 number.
Note that for other possible situations where the starting 0 is meaningful, you have to escape it for it to function as something other than a simple number, I believe, if I read this spec right:
https://www.w3.org/TR/css-syntax-3/#escaping
Any Unicode code point can be included in an identifier or quoted
string by escaping it. CSS escape sequences start with a backslash
(\), and continue with:
Any Unicode code point that is not a hex digits or a newline. The escape sequence is replaced by that code point.
Or one to six hex digits, followed by an optional whitespace. The escape sequence is replaced by the Unicode code point whose value is
given by the hexadecimal digits. This optional whitespace allow
hexadecimal escape sequences to be followed by "real" hex digits.
An identifier with the value "&B" could be written as \26 B or \000026B.
A "real" space after the escape sequence must be doubled.
However, even here it appears the starting 0's are optional, though it's not crystal clear.
The CSS specs were while obtuse fairly clear, which isn't always the case. So yes, numbers are made from strings of digits, and can have decimals as well, and are base 10, so that means the leading zeros are simply nothing.
I speculate as well that because the specs further state that no units are required when the number value is 0, that in fact, a leading zero may mean null, nothing, internally, though obviously you'd have to look at css parsing code itself to see how that is actually handled by browsers.
So that's kind of interesting. I think that probably because css is a very simple language, it doesn't do 'clever' things like php or javascript do with leading zeros, it simply does what you'd expect, treat them as zeros, nothing.
Thanks for asking though, sometimes it's nice to go back and read the raw specs just to see how the stuff works.
I'm trying to reduce the number of decimals of a JS operation and use the result to set a transform: scale(x) inline CSS to an element.
I can't find any reference to know how many decimals are allowed by such CSS function.
I want to know how many numbers are allowed (and used by the browser in the transformation) after the comma. (0.0000000N)
The specification defines the value for scale as a <number>, which is defined as:
A number is either an <integer> or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the <number-token> production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.
Note the lack of how many "more" decimal digits are allowed. So any limit will be imposed by the browser, which will obviously vary by browser.
As it seems it could be useful for others and amending the accepted question by extending it I'll upgrade my comment to an answer:
In the last term, the number of decimals you'll get depends mainly on the browser implementation so, depending on your targets you'll need to do some more research. Here you have an excellent post and a good starting point:
Browser Rounding and Fractional Pixels
I'm trying to create a validator for a string, that may contain 1-N words, which a separated with 1 whitespace (spaces only between words). I'm a newbie in a regex, so I feel a bit confused, cause my expression seem to be correct:
^[[a-zA-Z]+\s{1}]{0,}[a-zA-Z]+$
What am I doing wrong here? (it accepts only 2 words .. but I want it to accept 1+ words)
Any help is greatly appreciated :)
As often happens with someone beginning a new programming language or syntax, you're close, but not quite! The ^ and $ anchors are being used correctly, and the character classes [a-zA-Z] will match only letters (sounds right to me), but your repetition is a little off, and your grouping is not what you think it is - which is your primary problem.
^[[a-zA-Z]+\s{1}]{0,}[a-zA-Z]+$
^ ^^^^^^^^
a bbbacccc
It only matches two words because you effectively don't have any group repetition; this is because you don't really have any groups - only character classes. The simplest fix is to change the first [ and its matching end brace (marked by a's in the listing above) to parentheses:
^([a-zA-Z]+\s{1}){0,}[a-zA-Z]+$
This single change will make it work the way you expect! However, there a few recommendations and considerations I'd like to make.
First, for readability and code maintenance, use the single character repetition operators instead of repetition braces wherever possible. * repeats zero or more times, + repeats one or more times, and ? repeats 0 or one times (AKA optional). Your repetition curly braces are syntactically correct, and do what you intend them to, but one (marked by b's above) should be removed because it is redundant, and the other (marked by c's above) should be shortened to an asterisk *, as they have exactly the same meaning:
^([a-zA-Z]+\s)*[a-zA-z]+$
Second, I would recommend considering (depending upon your application requirements) the \w shorthand character class instead of the [a-zA-Z] character class, with the following considerations:
it matches both upper and lowercase letters
it does match more than letters (it matches digits 0-9 and the underscore as well)
it can often be configured to match non-English (unicode) letters for multi-lingual input
If any of these are unnecessary or undesirable, then you're on the right track!
On a side note, the character combination \b is a word-boundary assertion and is not needed for your case, as you will already begin and end where there are letters and letters only!
As for learning more about regular expressions, I would recommend Regular-Expressions.info, which has a wealth of info about regexes and the inner workings and quirks of the various implementations. I also use a tool called RegexBuddy to test and debug expressions.
I am using regular expressions for matching only digits, minimum 10 digits, maximum 14. I tried:
^[0-9]
I'd give:
^\d{10,14}$
a shot.
I also like to offer extra solutions for RE engines that don't support all that PCRE stuff so, in a pinch, you could use:
^[0-9]{10,14}$
If you're RE engine is so primitive that it doesn't even allow specific repetitions, you'd have to revert to either some ugly hack like fully specifying the number of digits with alternate REs for 10 to 14 or, easier, just checking for:
^[0-9]*$
and ensuring the length was between 10 and 14.
But that won't be needed for this case (ASP.NET).
^\d{10,14}$
regular-expressions.info
Character Classes or Character Sets
\d is short for [0-9]
Limiting Repetition
The syntax is {min,max}, where min is a positive integer number indicating the minimum number of matches, and max is an integer equal to or greater than min indicating the maximum number of matches.
The limited repetition syntax also allows these:
^\d{10,}$ // match at least 10 digits
^\d{13}$ // match exactly 13 digits
try this
#"^\d{10,14}$"
\d - matches a character that is a digit
This will help you
If I understand your question correctly, this should work:
\d{10,14}
Note:
As noted in the other answer.. ^\d{10,14}$ to match the entire input