CSS Data Type - <number>
CSS <number> data type represents a scalar value, typically used for numerical quantities. It is a generic term for any numerical value and can include integers, decimals, negative numbers, and scientific notation.
CSS <number> - Valid Syntax
Following is the list of valid numbers:
| Number | Description |
|---|---|
| 21 | A raw <integer> is also a <number>. |
| 3.03 | Positive Fraction |
| -264.22 | Negative Fraction |
| 0.0 | Zero |
| +0.0 | Zero, with a leading +. |
| -0.0 | Zero, with a leading -. |
| .55 | Fractional number without a leading zero. |
| 11e6 | Scientific notation. |
| -5.3e-4 | Complicated scientific notation. |
CSS <number> - Invalid Syntax
Following is the list of invalid numbers:
| Number | Description |
|---|---|
| 32. | At least one digit must follow a decimal point. |
| +-45.2 | There can be only one leading +/-. |
| 14.5.6 | There can be just one decimal place. |
CSS <number> - Check Valid/Invalid
In the following example, enter the value and check if the entered number is valid or invalid
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
}
#input {
padding: 10px;
margin: 20px;
font-size: 16px;
}
#result {
font-size: 18px;
margin-top: 10px;
}
.valid {
color: green;
}
.invalid {
color: red;
}
#submitBtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Enter the number to check if it is valid or invalid</h1>
<label for="input">Enter a number:</label>
<input type="text" id="input" placeholder="Enter a number">
<button id="submitBtn" onclick="checkNumberValidity()">Submit</button>
<div id="result"></div>
<script>
function checkNumberValidity() {
const inputElement = document.getElementById('input');
const resultElement = document.getElementById('result');
const inputValue = inputElement.value.trim();
// Regular expression for validating numbers
const numberRegex = /^([+-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?|[+-]?Infinity)$/;
if (numberRegex.test(inputValue)) {
resultElement.textContent = 'Valid Number';
resultElement.className = 'valid';
}
else {
resultElement.textContent = 'Invalid Number';
resultElement.className = 'invalid';
}
}
</script>
</body>
</html>
CSS <number> - cubic-bezier() Function
The <number> datatype is used in the cubic-bezier() function in the following example to specify control points along a Cubic-Bzier curve.
The x and y coordinates of these control points are determined by the four <number> values, which range from 0 to 1, and they influence the transition effect's acceleration and timing.
<html>
<head>
<style>
.number {
transition-property: font-size, color;
transition-duration: 1.5s;
font-size: 24px;
color: blue;
margin: 10px;
padding: 10px;
display: inline-block;
transition-timing-function: cubic-bezier(.17, .67, .83, .67);
}
.number:hover {
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<span class="number">Hover over this text!</span>
</body>
</html>
Advertisements