A fairly big one that almost slipped under my radar is that they shipped an initial implementation of CSS calc: "Support for
-moz-calc has been added. This lets you specify " (see https://developer.mozilla.org/en/CSS/-moz-calc).Support for calc is kind of a big deal as it allows you to do things that are annoying as hell to accomplish today. For example, perhaps you'd like to have three columns, left and right fixed width and center resized to fill available space:
[200px][100% - 400px, minimum 250px][200px]
The problematic bit is the middle column - it's actually fairly arcane to setup mixed unit calculations presently. calc makes it easy:
<!DOCTYPE html>
<html>
<head>
<title>-moz-calc</title>
<style type="text/css">
body { margin: 0px }
#container {
min-width: 650px;
width: 100%;
}
#left {
width: 200px;
background-color: #F0F0F0;
float: left;
}
#center {
min-width: 250px;
width: -moz-calc(100% - 400px);
background-color: #A0A0A0;
float: left;
}
#right {
width: 200px;
background-color: #F0F0F0;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left!</div>
<div id="center">center!!</div>
<div id="right">righter!</div>
</div>
</body>
</html>
This snippet produces fixed-width left and right columns with a center column whose width is dynamically calculated using a mixture (% and px) of length units. The container div is used to prevent the left/center/right divs from dropping to the next line if the browser is sized down far enough the min-width on the center kicks in (we don't want it infinitely narrow!). Images below show the result before/after resizing the browser window:
The ability to easily (the ease being the key here; it was possible to pull off similar results before but not easily) create page structures using mixed-unit calculated sizes is an AWESOME improvement. Now all we need is a full implementation in Firefox and the other browsers :) Oh and user adoption sufficient to justify use on significant sites.
Posts
2 comments:
This is very helpful information author clearly describe this topic. i have also some links to share mcafee.com/activate
www.mcafee.com/activate
"Interesting read! The exploration of mixed-unit calculations in Firefox 4 sheds light on a common issue many developers face. It’s great to see practical examples that clarify how to handle these calculations effectively. Thanks for sharing!"
Digital Marketing Course In Ameerpet
Post a Comment