rem with Sass

Update 02/08/15: I should pay attention to how things should be written, I used to write it as SASS when it should have been Sass. I will be updating the codes below in a day or two but I need to test them first. Thanks to Hugo Giraudel for being so nice as to educate me from my Sass-y sins :D

At this point, you’ve probably figured out that despite the fact that we basic idea of breakpoints per device, your layouts would still pretty much flop because your font sizes are too small or you find yourself fixing the font sizes manually on each device widths. And it is te-di-ous! DRY is shaking its head.

Enter rem, I’ve always had a soft spot for em over pixels. During the elastic vs. fixed vs. fluid debacle, I’ve always been in camp elastic but the problem with em is it can get pretty confusing, specially with nested elements with different font sizes. Not having Sass or LESS to ease the computation is a factor, too, of course. But rem just makes it all so much better.

rem stands for root em (read up more from Jonathan Snook because I’m horrible at explaining things), in a nutshell, it has all the goodness of em but it will only depend on one factor, the base font size that’s declared on your body and/or html element. I’ve used it in a number of projects in the past with Sass, and it has made making sites more readable on mobile so much easier. No more multiple font-size declarations (most of the time)!

I’m sure there are tons of resources available for this particular topic, but I’d rather dump all of my notes in this site so I can get back to it easily. So let’s get down to business, shall we?

Making a variable out of the base font size is optional, but I prefer having one because my laziness knows no bounds! This way, I don’t have to declare the base font size twice, once in the body (you’ll see below) and in the function’s formula. The function’s pretty basic and self-explanatory, to use it, all you have to do is write @rem-calc(14px) as value, for example:

h1 {

our function will then convert it as (if the base font size is 18px):

h1 {

Don’t forget the px or it will throw an error. Honestly, I would have liked forpxto be optional but I’m so used to typing the values with either apx or % and, frankly, it’s a habit that I’d rather not break. Moving forward! Declare theinitial font sizes, one for the desktop and another for mobile, I haven’thad the chance to target anMBP retina but based on when I last used it, you won’t have a need for a separate font size for it.

It’s important to note that once you start with rem, you will have to use it for every element and every declaration where you’re using pixels, specially with height and width! Otherwise, there will be awkward situations where your text is much, much bigger than its container.

Well then, there you go. If you have a much better and easier way to use rem, feel free to leave a comment and let’s chat!

Using dl for a Semantic Form

Wufoo’s login form

Semantics in forms are one of the things that needs to be talked about, in my opinion, since they are one of the most important parts of a web site. You create/edit user accounts, create/edit blog posts, submit a comment, gather information from your audience, and lots more through them. However, apart from fieldset, we don’t really have a semantic way of marking up a pair of form elements.

There are different ways in marking up one’s form: div, p, ul or ol and dl. Because using dl, or definition list, to mark up a form is still unusual even though it’s not exactly a new idea, I will be talking and boring you, unfortunate people, about it here.

Understanding the dl element

dl is one of the most overlooked element in HTML since, I assume, people mostly associate it with just definition lists, aka glossary. But it can be much, much more as was shown by Mike Robinson in his article about the dl element in HTML5 Doctor. The HTML5 draft describes definition list as:

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements).

HTML5 Working Draft: The dl element

The key to why dl is the mark up that makes most sense (at least to me) is the name-value groups phrase. Form elements are all about pairing as you have the label which is the name and the corresponding value which is the input or textarea or select.

Continue reading

The CSS3 Carousel Experiment

When I first read about CSS Animation, I thought that they shouldn’t be messing with the separation of logic and style. In my mind, it should be clear that logic (animation, rotation, even the alternating row styles) should be in javascript, all the styles should be in CSS, and the document structure in HTML.

One time, while working on our internal project, I thought I’d try a little -webkit-transition-duration because I wanted the color of the links to gradually change to something else on hover. But when I hovered on our main navigation that was using a sprite image, the background scrolled from one background position to the next every time we hover on it because of the delay! It was really amusing.

CSS3 Carousel

I experimented a little bit with transition and descendant selectors, but apparently, p ~ p doesn’t work with :hover or :active or :focus very well (browser notes below) and came up with this CSS3 carousel experiment.

To do this, you should have the following markup:

<div class="carousel">
  <a href="#" class="first-image">1</a>
  <a href="#" class="second-image">2</a>
  <a href="#" class="third-image">3</a>
  <a href="#" class="fourth-image">4</a>
  <img src="main-background.jpg" alt="" />

It’s really rather plain, it’s because we’ll be choosing the image using CSS’ child selectors to move the image and it won’t work if we enclose the links at in a div or list.

And this CSS:

  img { -webkit-transition: all 5s; -o-transition: all 5s; }
  .carousel { width: 500px; height: 372px; overflow: hidden; }
  a.first-image:hover ~ img { margin-left: 0; }
  a.second-image:hover ~ img { margin-left: -500px; }
  a.third-image:hover ~ img { margin-left: -1000px; }
  a.fourth-image:hover + img { margin-left: -1500px; }

New child selectors: the ~ symbol is used to select all fellow child elements, in this case, an image. If you add another image, it will be selected by this, too. The + sign on the other hand is to select a descendant that directly follows it. It’s really exciting, go nuts! 1

Some people would obviously rather use a div and apply the image as background, all you have to do is replace img with div or the class you assigned to it.

Browser (in)compatibilities:

  • For some reason, webkit-based browsers doesn’t interpret this very well, the second and third link can’t be triggered unless you hover on the fourth link first.
  • Firefox interprets the child selectors perfectly but not transition because it will only be implemented in Firefox 4.
  • The experiment works perfectly in Opera 10.6 and it gives me a warm fuzzy feeling inside. :D

Further Reading:

Random CSS tips and tricks

I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I’ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it. :(

  • There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it).

    Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

    And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

  • There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

    All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

  • List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:
    { overflow:hidden; list-item-position:inside; }

    The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

  • Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

    Here’s what I usually do:


    <div class="parent_element">
      <div class="autocomplete">
          <li>Value here</li>


    .parent_element { position:relative; z-index:99; overflow:visible; }

    What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.

min-height in IE 6

Would you look at this, while everyone has finally decided that they will be dropping support for IE 6, that’s when I decided to create a tutorial for implementing min-height for the browser. Anyway, onto the post.

We all know that the min-height property doesn’t work in IE 6. Instead, the height property acts as both the element’s height and min-height. Its role will ultimately rely on the value of your overflow property.

If the overflow property is set to hidden then the height of the element is its max-height. If set on visible, however, then it will be its min-height.

Overflow: Visible

The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for overflow-y (vertically) or overflow-x (horizontally) (your CSS document won’t validate for CSS 2.1 though, but it’s valid once tested against CSS 3).

So your CSS (for IE 6) will look something like this:

div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }

The Complexities that hasLayout Brings

There are some instances when you have to define the height and overflow properties of an element (usually applicable to lists) to meet the demands of the hasLayout curse in IE. In these instances, you will have to add a bogus height and overflow:hidden thinking that it will not bring harm to your design.

That is until you wanted to add a min-height to the parent div.

If your bogus height is set to 1%, you element will collapse. Setting the height to auto will render your layout worse than before because that means that your element “will not have a layout” (ie, your hasLayout is nonexistent in IE).

Setting the height to 100%, however, will then expand your element to the height of its parent div (or element).

You can solve this dilemma by changing your overflow value from hidden to visible and setting the height of your element (usually, list items) to 1% just to retain the bogus height.

Lessons learned in dealing with IE 6

I’ve been “battling” with IE for more than 3 years now and I just felt that it’s finally time to not only bash the poor beloved browser and instead pay homage to the good things that it was able to instill on me.

There is no such thing as one tweak fix all

If there’s such a thing, the guy (or girl) who was able to find that tweak would’ve been a bajillionaire by now. That or he/she’s, unfortunately probably a Microsoft employee by now.

Patience is a virtue (and a very important skill)

There was a time before when I was able to “fix” a specific IE bug in one of my dreams. I can’t remember what that bug was though, but I’m sure that happened, because that also happened when I was trying to play with WordPress before.

Anyway, I think IE is a great therapy for people who need to manage their angers. I used to be very explosive when I’m angry or when I can’t find a solution to a problematic rendering error. Sure, you can say that I matured a little but I think that if IE’s following my every whim all the time, then I don’t think I would be used to seeing any design screwed up in the blasted beloved browser.

If it fixed your problem…

Chances are that it opened a LOT of seemingly unrelated problems waiting to be discovered. I fixed a height problem and the next thing I know, the other elements (who are important at that!) are not showing up anymore. So be wary, be very, very wary about that hacks and fixes.

With IE, anything is possible

I honestly have a feeling that the Murphy’s Law was created with IE in mind, no kidding! If you think that there’s no way that any element will collapse specially if you already specified its width and height, then expect IE to crush that belief of yours.

If you’re dealing with IE, it’s OK to be paranoid

And check, and check, and check. There was a time when an office mate and I was checking the same site in IE, just different machines and it’s rendering differently. Seriously.

If your element collapsed in IE, chances are that it doesn’t have a haslayout

And that usually means you need to add a height and width to your element and if that still did not work, add an overflow:hidden. Sometimes that still won’t work so you have to add a display:block. That usually does the trick. If you don’t want to add a specific height however, you can add 1% or 100% as its value, anything as long as it’s not auto or a pixel or em. Be careful though, if you add a height to its parent div, it’ll take the height of its parent.

I could never stress this enough — haslayout is everything in IE

If your element is inline, then it’s fine, but if it’s a block-level element we’re talking about, grab the IE dev toolbar and hunt for that ever-elusive haslayout property.

Sidenote: Want to run 2 IE in the same machine? Download IE 6 and then download a copy of IE 7 standalone, yes, it’s necessary that it’s in that order and not the other way around because last time I had IE 7 as my default browser and got the IE 6 standalone, IE dev toolbar no longer worked which is one of the things that enabled me to keep my sanity back then.

Before using an IE hack, check out if you can solve the problem without it.

Yes, even if it drives you insane. It’s daunting, it’s scary, but it’s to be done. I hate to look at an IE6 specific stylesheet that contains more or less 100 lines of code. If it’s a problem with margins, try to see if the changes you need to do will make such a big impact to the other browsers, if it’s hardly noticeable then apply the fix in your main stylesheet. Now if we’re talking about 20-25 pixels (or more) difference then by all means, do it in a separate stylesheet.

IE6 doesn’t want <tr> to have borders

It’s annoying when I realized that. I thought the problem was that the table doesn’t have haslayout (how can a table not have a haslayout when it’s a block-level element by default, yes?!) that’s why the borders won’t show up. Turns out that IE doesn’t render a border when it’s in the <tr> tag, you have to add the border in the <td> tag and don’t forget to add border-collapse:collapse for your table so that the border will look continuous.

Test again and again and again

I told this to you before, remember? You can never be too sure with IE so you must be paranoid. You must be an OC and you must never forget to expect the worst case scenarios.

So there! What IE taught me so far, anyone else want to throw in some ideas too?

One unrelated musing, do you know that I just finally realized that this sign < stands for less than and > stands for greater than. It’s stupid, I know but it’s true! And guess what finally taught me this very “complicated” mathematical symbol.


The less than (<) sign’s equivalent (just in case you didn’t know) is & lt; and the greater than (>) sign’s equivalent is & gt;. Finally, it’s out of my system.

The great IE 6 Hack

As a designer, the biggest problems that I have with IE are the PNG transparency problem and the :hover pseudo class is not working unless it’s used in the a element.

Thanks for HTC which is only understood by IE 5.5 and above browsers — I’ve found some handy “hacks” to work around these 2 limitations on the browser designers/programmers’ love to hate.

Note: calling it in CSS will make your CSS file invalid even though it’s a part of CSS property lists, I tested it against CSS 1, 2, 2.1 and 3 (just to be sure) so… CSS valid-freaks sorry… Maybe it remained to be just a part of the draft?

PNG Transparency

I have to admit that I haven’t really looked that hard for PNG transparency hacks, sure you can use PNG 8 but, isn’t it just a “PNGized” GIF? Anyway, if you’re certain that you won’t be using your image on plain backgrounds and your background does not have patterns on them then PNG 8 will be a good solution.

So, while I was looking for a hack to make PNG work on IE 6, I came across IE PNG Fix of Twinhelix which is a good enough solution for me because it doesn’t complicate things for me and it also works on PNG backgrounds on CSS and images you have to insert into your HTML file. However, this being a “hack”, of course it has some limitations too.

The list is from the author, the ones that with emphasis are mine.

  • Can’t help IE versions prior to 5.5, sorry.
  • Users can’t right-click-save processed PNG images, they’ll save the blank GIF file if they try that. In some cases this might be a feature, not a bug…
  • The script detects the “.png” extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere. Apparently, this is also an issue in RoR, I really don’t know why but the images will still not be transparent unless you specifically call the image using the <img> tag, so say goodbye to your <%= image_tag("path_to_file_here") %> way of calling images (unless it’s a JPG or GIF of course).
  • It’s most reliable on elements with non-‘auto’ dimensions set. So, give images and other elements width/height values; ‘100%’, ’10em’ and ‘200px’ and so on are all OK, otherwise, you will have a heart attack once you’ve seen it in IE, it’s transparent, yes but still, it is not pretty.
  • Background PNG images can’t be tiled. This is a limitation of the IE filter.
  • Similarly, padding and borders don’t indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
  • There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

For it to work, all you have to do is create a blank transparent GIF file (it doesn’t matter what size it is) put the path to it in the htc file and call the htc by adding

* { behavior: url(/path_to/ }

anywhere in your CSS file. Note that you can replace * with img or whatever element you want. Then voila! PNG transparency has been achieved.

Applying :hover pseudo class for whatever element in IE 6

As I’ve said before, another shortcoming of IE 6 is that it only applies the :hover pseudo class on the a element so it’s really hard to create a hover state for menu items using the sliding door technique unless all you have to do is change the menu item’s link color. Unless you love cutting images for specific menu items or your item’s width is fixed and don’t care what it’ll look like once you have increased the font size, then I guess you need not worry about it.

Anyway, this time, I need not look so hard because of whatever:hover yey! All you have to do is put the htc file anywhere in your site, call it in your CSS using the behavior property again like so —

* { behavior: url(/path_to/ }

(again you can change * to whatever element you want) and voila! You can apply the :hover pseudo class to whatever element that you want and you can be absolutely certain that it will be reflected in IE 6. Lovely. :)

Is there a hack for IE 6 that you know? Please do share. :)

Update (April 28, 2008): Joni buzzed me earlier to ask if maybe adding the behavior property in a stylesheet that’s meant only for IE will make your stylesheet valid. I tried it at Last Leaf and it did! So… now you can make your site valid even though you’re using htc. I can’t believe I failed to test that when I’ve been using IE conditionals for more than a year already! hehe Credit to Joni Ang, XHTML/CSS/Wordpress theme designer extraordinaire :) Also, if you’re using wordpress and you added htc within your theme’s folder, don’t forget to add the complete path to your blank.gif and htc, otherwise, it won’t work.