Topic: css

LESS – an overview of the CSS preprocessor

Here is a presentation I did that is an overview of the LESS preprocessor. If you’ve been thinking about using a CSS preprocessor and are curios about how LESS works, this is worth a look. It goes over the basic features of LESS including code samples. This talk does not cover Sass nor Stylus which are the other 2 CSS preprocessors out there.

You can also view this presentaion on SlideShare.

Responsive Website Design – Presentation and Demo Project

I’m sharing the slides from my talk at South Bay Mobile User Group this week hosted at Honda on Responsive Web Design.

Responsive Websites on SlideShare. A quick introduction to developing responsive websites including best practices, testing tools, and a sample project by Joe Seifi

You can also download and play with the code for this presentation on Github at
https://github.com/joeshub/responsive-web-node-less

The sample code uses LESS to make calculations easier in flexible layouts.

You can start the app with Node.js very simply. From the root folder just run > node app.js and browse to http://localhost:3000
For a more detailed step by step approach, go to http://localhost:3000/html/

How to force CSS background images to print in web browsers

Here’s a trick you can use when you want the printed version of a webpage to include the background images you have in your CSS.

First of all you’ll want to have a specific print css file that targets the print media type. You can easily create one and include it within the head.

Then you will override the container which hosts your background image in the print style file and change the display style of the element to list-item and attach the background image here again as a list-style-image. To make sure you don’t need to deal with margin or padding issues, you’ll also place the image inside your mock list.

I’ve tested and verified this method in the latest versions of Safari, Chrome, Internet Explorer, and FireFox. Please let me know if you find any inconsistencies during your testing.

Here’s the sample code:

Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

Here is the background image called in your main css file used in browsers.

.bg {
    background: url("http://fpoimg.com/250x250") top left no-repeat;
    width:250px;
    height: 250px;
}

And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.

.bg.print {
    display: list-item;
    list-style-image: url("http://fpoimg.com/250x250");
    list-style-position: inside;
}

Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.

Yummy Yummy, New Delicious Design

Looks like the long awaited web 2.0izing of the del.icio.us website is finally here. Very sleek and sexy is my first impression.

Take a look at some of the older user interfaces to get a sense for how del.icio.us has evolved until now. Aside from the new look there are new features as well. The delicious dev team has supposedly completely rewritten the code base, to allow for a more scalable and spry tool.

New features:

Navigation: New simple CSS tabs with onclick drop down menus make is simple to find your tasty bookmarks. The navigation structures seems to borrow from Flickr. Search also comes with a simple drop down option list to find stuff in your bookmarks, network or everyone.

Bookmarks: You have Title view, regular view and Full View options here. View your popular bookmarks to filter the good stuff and filter down more by choosing fresh only.

Sidebar: is updated to show a relative set of tags related to your left content pane.

Action Box: This light blue box in the sidebar shows the common tasks for the given page.

Search URL: This is a reverse search for bookmarks and pulls in the ones with the given URL along with tags used for that URL by each user, broken down in chronological order. You can also view the notes added by each user to the given URL.

Settings: The settings page is laid out with all the actions listed on one page, similar to a sitemap.

Forums: There is a support forum that looks more like a categorized list of links than a forum. I like the non-cluttered design. Reminds me of Drupal.

As in the past their API is still available for developer consumption.

Understanding & Taming Collapsing Margins in CSS

The concept of collapsing margins is very simple but to fully understanding its behaviors in CSS can be tough at first. When 2 or more vertical margins hit each other, they are combined (collapsed) to form just one margin. The largest of the margins is the one rendered in the flow. The formula in theory then, for the bottom or top margin of the adjoining boxes will be:

margin-top | margin-bottom: max( marginbox 1 ... marginbox n)

When it comes to the real world there are 3 major categories of margin collapsing. So let’s figure out how these 3 types of collapsing work and how to tame them.

1) Adjoining boxes of sibling elements:

The bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

 <div>
  <div>content</div>
  <div>content</div>
 </div>

While margin collapsing is great for written text such as paragraphs and headings etc., it can get somewhat tricky if you’re trying to get pixel perfect spacing between your boxes, so there might come a time when you want to disable margin collapsing. Take a look at these examples that suggest ways of uncollapsing your margins.

2 child boxes inside a parent box, all 3 boxes have 20px margins, parent has 1px border to avoid ancestor collapsing
2 child boxes have their top and bottom margins collapsed. Therefore the middle margin is 20px and not 40px. Most of the time this is what we want.
2 child boxes inside a parent box, all have 20px margins, parent has 1px padding to avoid ancestor collapsing
2 child boxes are this time floated left and cleared. Additionally clearing divs are added for Internet Explorer support. This method gives us 40px in the middle by disabling margin collapsing of the two siblings.
2 child boxes inside a parent box, all have 20px margins, parent has 1px padding to avoid ancestor collapsing
This time we give the 1st child box a display of inline-block which is supposed to make its margins not collapse. While this inline-block behavior works like a charm in compliant browsers, unfortunately it does not work in IE7.
2 child boxed inside a parent box, all have 20px margins, parent has 1px padding to avoid ancestor collapsing
Finally this we use a display of inline-table on the first child box. This behavior works in IE7 and FF2 and above. Although inline-table does not break out of collapsing in IE7. You may also try overloading both properties on the element as a fail safe like: display:inline-block;display:inline-table;

So it seems the only way to break out of collapsing that works in both IE and FF is our second example by using floats and clear combined. You might have noticed the above 4 boxes themselves also have 20px margins which have collapsed to form 20px margins within our 3 adjoining sections in the middle.

2) Adjoining boxes of ancestor elements:

The top or bottom margins of contained elements will always collapse together to form one margin. If the element’s margins are collapsed with its parent’s top margin, the top border edge of the box is defined to be the same as the parent’s. Below is the sample HTML and diagram and explanation of how to avoid this.

 <div>
  <div>content</div>
 </div>


Remember that collapsing only happens if the margins actually touch one another. In this case the inner box’s margin ends where the outer box’s margin starts, therefore they are touching. One easy way to avoid this type of margin collapsing is to add either vertical borders or vertical padding to the parent box. Take a look at these examples:

2 nested boxes, both have 20px margins, parent div has no border or padding. Note how the margins of both boxes collapse. The parent box takes over the margin of the child.

You might be wondering, so why does the margin stick out of the outer div instead of being applied to inner div? Remember that the height of containers are calculated based on the the height if their children, and a block level element’s height is measured from its top border edge to its bottom border edge. So the outer div only honors the content height of its children when calculating its own height, and since margins are already collapsed, the inner margins will appear to protrude out of the parent.

2 nested boxes, both have 20px margins, parent has a 1px border, which disables the collapsing.
2 nested boxes, both have 20px margins, parent has a 1px transparent border for an invisible solution.
2 nested boxes, both have 20px margins, parent has 1px padding again for making it less visible in our UI.
2 nested boxes, both have 20px margins, parent div has its overflow hidden. Great: Now we don’t have to add 2 extra pixels to our layout, but note that this method only works with ancestors.
nested boxes, both have 20px margins, parent div is floated left. Works great if you are capable of using floats in your current flow.

3) Self collapsing boxes:

Empty block level elements result in a special case of margin collapsing. Their top and bottom margins actually touch each other and they basically self destruct based on the rules of margin collapsing. According to the W3C: An element’s own margins are adjoining if the ‘min-height’ property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a ‘height’ of either 0 or ‘auto’, and it does not contain a line box, and all of its in-flow children’s margins (if any) are adjoining.

 <div>
  <div>content</div>
  <div></div>
  <div>content</div>
 </div>
3 child boxes inside a parent box, all have 20px margins, parent has 1px borders to avoid ancestor collapsing
there are 3 child boxes inside, but the middle child box collapses on itself, and then the surrounding 2 boxes collapse on its margins again, so the end result is that our empty box is not visible and basically does not affect the flow at all. Empty block level elements are often used for DOM manipulations and Ajax data storage and now we know why they don’t affect the layout.

Another obvious way to break out of collapsing is changing the display to absolute. Finally, note that the margins of the root element box in any document never collapse. There are a few rules for negative margins when it comes to collapsing. I will try to write another post on this later.

I’ve created a demo page here with the above examples.

References and Acknowledgments

W3C Box Model Collapsing Margins,
Andy Budd No margin for error,
Research Kitchen CSS Autoheight and Margin Collapsing,
Complex Spiral Uncollapsing-margins,
La Chatte Noire tests: block formatting context, display:inline-block and margin collapsing