Mozilla – Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.12 Firefox to implement calc() in CSS3. http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/ http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/#comments Mon, 14 Jun 2010 19:28:18 +0000 http://www.no-margin-for-errors.com/?p=522

Related Posts

No related posts. ]]>
I’ve just read last week that Firefox would implement calc() in their new version of Firefox. It’s not out in any publicly released version yet but it is coming as they talked about it on their developers blog.

Why should you care?

Ever had an element that needed to have a percentage width with padding? Up until now, because of the way the box model works in Firefox modern browsers, you had to wrap the content in a container to which you’d apply the padding. That’s because when you define padding to an element the value is added to the width, which is the proper way of doing it.

Now the thing is that percentage width don’t mix well with fixed padding values, that where calc() comes into play.

Lets say you have a box with the following css rules:
#box {
padding: 20px;
width: 60%;
}

If that box is in a container 1000 pixels wide, the box would be 640 pixels wide total, that’s not what you want, that’s not 60% wide! You coud use calc() to achieve the desired result:
#box {
width: -moz-calc(60% - 40px);
}

You can even be wild and do basic calculations in there:
#box {
width: -moz-calc(60% - 2 * 20px);
}

Taking it further

What would be even cooler is if you could get the actual padding values as a variable in calc(). Something like:
#box {
width: -moz-calc(60% - (padding-left + padding-right));
}

This way you could even forget about updating your width value when you play with your padding.

Oh well, one day maybe, now let’s just see if other browser vendors implement something of the like. Let’s not forget this is not part of the W3C CSS3 specs.

Is it a feature you were waiting for?

]]>
http://www.no-margin-for-errors.com/blog/2010/06/14/firefox-to-implement-calc-in-css3/feed/ 12
pointer-events, a property I wish we had now. http://www.no-margin-for-errors.com/blog/2009/12/01/pointer-events-a-property-i-wish-we-had-now/ http://www.no-margin-for-errors.com/blog/2009/12/01/pointer-events-a-property-i-wish-we-had-now/#comments Tue, 01 Dec 2009 22:10:31 +0000 http://www.no-margin-for-errors.com/?p=234

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Mozilla announced it’d support pointer-events in Firefox 3.6. While the specification has apparently been part of SVG for a while, I never really heard of it before today.

The pointer-events CSS property basically specifies if the mouse event should be sent to the current element, or the element underneath it. Might not look very useful at first, but it makes a whole lot of sense when you’re working with “complicated” designs.


Real world example

Lets say you have that fairly simple design, a content area and a sidebar. The content area has a drop shadow that goes over the sidebar area. Something that look like the following.

design_drop_shadow

The problem with the design is that in order to display the shadow over the sidebar, you have to bring it’s z-index up and since it goes a bit over the sidebar, there’s a small part of the content area that goes over the link and blocks the click. See below outlines in yellow.

design_drop_shadow_sizes

Up until now, you really didn’t have much choices. In order to enable the click on the link, you’d have to include the shadow as a background image in the sidebar. The content area wouldn’t go over the sidebar anymore, but the drop shadow would’nt be over the content as the designer intended it to be.

Well with the pointer-events, you just have to see the value to “none” in the CSS and that means any click event sent on that element will automatically go to the element underneath it, in that case, the link in the sidebar.

.content {
  pointer-events: none;
}

What now?

Unfortunately, this isn’t part of any CSS specification (yet). Mozilla decided to implement it in Firefox 3.6 and they are the only one right now. However, that’s a nice step forward and I really do hope others starts implementing it, because it’s really small, but can save quite some time in the long term.

]]>
http://www.no-margin-for-errors.com/blog/2009/12/01/pointer-events-a-property-i-wish-we-had-now/feed/ 1