Attr() returns the value of an HTML attribute to be used as a value in stylesheet.
This was first introduced in CSS2.1 with the syntax:
attr( attribute-name ) could only be used with content and only returned string values.
In CSS3 the syntax changed to:
attr( attribute-name, [ <type> ], [ <value> ] ) it can be used with all properties and many types can be returned.
Calc allows you to calculate values using mathematical expressions with addition +, subtraction -, multiplication *, division /. You can combine values with different unit values such as em, px or %.
You can use calc where ever length, angle, frequency, time or numbers are used.
The result must be within the allowable range for the property.
Space is required around plus + and minus - symbols.
Great potential for calculating widths in layouts where one value is fixed and others are unknown.