Attr()
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()
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.
