Extra Functions
- turned_in_notExtra Functions
attr()min()max()calc()var()
attr( )
It gets the specific attribute value used in an element
Syntax
attr(attributeName)- You can use custom attribute also, but all attribute names must be called within that specific element, whether custom or pre-defined
- It's called under content property
Hope you remember that: ( content is called under : :before and : :after of an element )
Hello friends,
It will set the value of id attribute mention within its 'h1' element
h1::after {
content:" My id : " attr(id);
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<style>
h1::after {
content:" My id : " attr(id);
}
</style>
</head>
<body>
<h1 id="idValue">Hello friends,</h1>
</body>
</html>min( )
Used to set the minimum value from specified values to an element
Syntax
min(value1, value2, ..., valueN)- You can use it to customize unit based css properties as per your logical design
Resize, to check my font size
It will set the minimum font-size among 2vw, 30px to 'h1' element
h1 {
font-size:min(2vw,30px);
/* 100vw = 100% width of window */
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<style>
h1 {
font-size:min(2vw,30px);
}
</style>
</head>
<body>
<h1>Resize, to check my font size</h1>
</body>
</html>max( )
Used to set the maximum value from specified values to an element
Syntax
max(value1, value2, ..., valueN)- You can use it to customize unit based css properties as per your logical design
Resize, to check my font size
It will set the maximum font-size among 3vw, 30px to 'h1' element
h1 {
font-size:max(3vw,30px);
/* 100vw = 100% width of window */
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<style>
h1 {
font-size:max(3vw,30px);
}
</style>
</head>
<body>
<h1>Resize, to check my font size</h1>
</body>
</html>calc( )
Used to calculate the values for the properties using some units(like in: em, px, %, etc) as its value
Some property names which uses some units as its value:
width, height,
padding, margin, font-size,
top, bottom, left, right,
max-height, min-height,
max-width, min-width- you can use basic math operators (
+ - * /)
Syntax
For using operators + - , single space must be their between values & operator
calc(value1 - value2) //For - operator
calc(value1 + value2) //For + operator
calc(value1 * number) //For * operator
calc(value1 / number) //For / operator#abc{
position:absolute;
left:20px;
top:20px;
width:calc(100% - 40px);
height:calc(100% - 40px);
border:2px solid red;
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<style>
div {
border:2px solid black;
position:relative;
height:100px;
box-sizing:border-box;
width:80%;
margin: auto;
}
#abc {
position:absolute;
left:20px;
top:20px;
width:calc(100% - 40px);
height:calc(100% - 40px);
text-align:center;
border:2px solid red;
}
</style>
</head>
<body>
<div>
<div id="abc">
I am div with id abc
</div>
</div>
</body>
</html>
var( )
Used to call a defined css variable inside an css property
/*Syntax-To declare css variable name*/
--variableName:value;- Just add 2 dashes before a name
Variable names are case-sensitive
- turned_in_notCSS Variable types
- labelGlobal Variable
Syntax
body { --cssVariableName:value; }
- labelLocal Variable
Syntax
specific_Selector { --cssVariableName:value; }
- Local variable is preferred over Global if names are same in both
Syntax
var(cssVariableName, optionalValue)If cssVariableName is not available then optionalValue will get assigned to the specific css property
Checkout text color !
p{
--var1:red;
color: var(--var1,blue);
text-align:center;
}<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
<style>
p{
--var1:red;
color: var(--var1,blue);
text-align:center;
}
</style>
</head>
<body>
<p>Checkout text color !</p>
</body>
</html>- If a Local variable is not declared then it will check for that specific variable to its parent element and even it's not found then it will check for variable to its parent's parent element and so on. At the end if variable not found then it will assign optionalValue if mentioned inside
var()else default value for that specific css property
So,