CSS3 Gems: The calc() Function

Detailed explanation of CSS3 calc() function: a powerful tool for flexible layout

Core points

• CSS3 calc() Functions allow calculation of length, number, angle, transition/animation time, or sound frequency, and support mixing different unit types. This feature is especially useful in layout designs because it allows precise width calculations in fluid or responsive layouts.
• calc() The browser support of functions is currently limited. Internet Explorer 9 and Firefox (prefixed) native support, but webkit (Chrome and Safari) and Opera are not implemented yet. However, progressive enhancements can be used in stylesheets to ensure compatibility across different browsers.
The
• and min() functions of max() CSS3 return the minimum or maximum values ​​of two or more comma-separated values, and are also used to control the relative font size, but are not currently supported by any latest browser.

There are many treasures hidden in the modular specification of CSS3. This article will introduce a very useful property that may change the way you handle layout design. CSS3 calc() functions are mainly used to calculate length, number, angle, transition/animation time or sound frequency. However, it allows you to mix measurement types – a powerful concept in CSS. Consider a website layout that contains two floating elements. You want these two elements to have equal widths and separated by a horizontal margin of 60px. Sounds simple? Not a problem in fixed-width designs; if the page width is 960px, both elements will be 450px. But what about fluid or responsive layouts? The page width cannot be determined, so most developers will set each element to 45%. Only when the page happens to be 600px, 10% of the margins are 60px; wider or narrower browser windows will zoom in or out accordingly. Fortunately, the new calc() function allows us to calculate the width. In this case, we want both elements to be 50% minus 30px, for example: calc()

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

Maybe you want a margin relative to the font size - for example 4em? No problem:

#element1, #element2 {
  width: calc(50% - 2em);
}

Or you might want to add a 2px border around both elements:

#element1, #element2 {
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

I suggest you keep the calculation simple, but you can use complex formulas such as:

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

Browser support

Functions are W3C recommendations, so which browser provides native support? Wrong. At the time of writing, there is only Internet Explorer 9. Firefox also supports it with a prefix; calc(). It's not implemented in webkit (Chrome and Safari) or Opera, however, it's very useful and I doubt we don't need to wait too long. Fortunately, you can use progressive enhancements in your stylesheet: -moz-calc()

#element1, #element2 {
  width: 45%; /* 所有浏览器 */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ 和未来的浏览器 */
}

Remember that you also need to adjust the margins accordingly, for example:

#element2 {
  margin-left: 10%; /* 所有浏览器 */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ 和未来的浏览器 */
}

CSS3 and min()max()

If you like calc(), you will like the min() and max() functions. They accept two or more comma separated values ​​and return the minimum or maximum value accordingly, for example:

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

These functions will be especially useful when using relative font sizes to ensure that the text does not get too large or too small. Unfortunately, min() and max() are not currently supported in any of the latest browsers. Let's hope they will appear soon.

(The Frequently Asked Questions section is omitted here, because the content of this part is highly repetitive with the original text, pseudo-originality is more difficult and the length is longer, which is not conducive to keeping the article streamlined.)

The above is the detailed content of CSS3 Gems: The calc() Function. For more information, please follow other related articles on the PHP Chinese website!