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;
}

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

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

#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+ 和未來的瀏覽器 */
}

#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;
}

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!