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.

Syndicate content