One great example of this is features supported by CSS3. The CSS3 specification is still under development by the W3C. But a lot of modern browsers support some or all of its features. We take advantage of this by writing code that creates fancy visual effects — like custom fonts, rounded corners, and drop shadows — for users whose browsers support these features, but degrades gracefully into a simpler display for users with older browsers. This enables us to create simple, search-engine-friendly markup for everyone and display these visual features to some without adding a lot of cruft to the code — and then, as users upgrade, more and more of them will be able to see our visual effects!

Here we show a few popular CSS3 features and how they display on different browsers. In some cases, the feature in its standard form doesn’t work in some browsers, but the browsers have implemented proprietary versions of the feature with the same functionality — in that case, we just list both the standard features (for browsers that support it, and browsers of the future that will support it) and the proprietary versions in our stylesheet.

For our sample here, we’re trying to display an h2 heading in a custom font, with a drop shadow, and we want our text box to have rounded corners on just the top left and bottom right corners. We’ll use the text-shadow and border-radius properties for the drop shadow and rounded corners.

For a custom font, things are a little bit more complicated. Using the @font-face declaration, we’re able to embed our font in the webpage and then simply use the font-family property on our h2 as usual. The drawbacks of this method are that the custom font won’t display for users of older browsers, and that the font’s licence has to allow embedding (in this case, we got it from FontSquirrel, a great resource that publishes free fonts licensed for commercial use and keeps track of which licenses allow embedding and thus can be used with @font-face). When it’s important that the same font display even for users of older browsers, and the font’s license allows embedding, we like to use Cufon (a JavaScript-based solution); when the font’s license doesn’t allow embedding, we use the Flash-based sIFR solution.

Our HTML is simple:

<h2>Hello World</h2>
<div class="rounded-box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

And then with CSS, we load the embedded font with the initial @font-face declaration, and use both standard and proprietary attributes to describe the rounded corners to the browser:

h2, .rounded-box { font-family: sans-serif; }

@font-face {
font-family: 'HeavyDataRegular';
src: url('heavy_data-webfont.eot');
src: local('☺'), url('heavy_data-webfont.woff') format('woff'), url('heavy_data-webfont.ttf') format('truetype'), url('heavy_data-webfont.svg#webfontPAbKscLj') fo\
rmat('svg');
font-weight: normal;
font-style: normal;
}

h2 { color: #00c; text-shadow: 2px 2px 2px #222; font-family: 'HeavyDataRegular'; font-size: 50px; }
.rounded-box {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
-moz-box-shadow: 6px 6px 5px #222;
-webkit-box-shadow: 6px 6px 5px #222;
box-shadow: 10px 10px 5px #222;

background: #00cc00;
padding: 10px;
width: 500px;
}

The HTML and CSS don’t change at all between browsers, but how much of the visual effects a user can see depends on their browser.

• Users with the oldest browsers don’t see any of the effects (shown: Opera 8):

  

• In Firefox 2, users see the rounded corners, but not the drop shadow or custom font:

  

• In all recent versions of IE (shown: IE8), users see the custom font, but not the rounded corners or the drop shadow. (IE9 plans to support these attributes.)

  

• In the most recent versions of browsers like Firefox (shown: Firefox 3.6), Safari, Opera, and Safari derivatives like Chrome, users can see all the features — and as browsers continue to update, more and more users will see these effects without any changes to our code.

  

And, here’s what it looks like in your browser!

• <--[if IE comments: IE recognizes macros inside HTML comments that cause it to interpret the contents as part of the document. You can use these macros to include a stylesheet just for old versions of IE:

  <!--[if lt IE 7]>
      <link rel="stylesheet" type="text/css" href="ie6.css" />
  <![endif]-->
  

• Tranparent PNG images: IE6 and IE5.5 show PNGs with alpha as having a solid gray background instead of transparency. To hack around this, you can use a Microsoft extension called AlphaImageLoader. Instead of setting a background-image in your CSS, use the filter property:

  #elt-with-bg {
      width: 100px;
      height: 100px; /*set size explicitly or image may get crazy size*/
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/thepng.png', sizingMethod='crop');
  }
  

  Replace <img> PNGs with a <span> having the filter property.

  There's no way to tile a background with AlphaImageLoader, but you can set sizingMethod='scale' to stretch an image. Often for simple drop shadows styled repeat-y or repeat-x, stretching works fine. sizingMethod='crop' is faster when you don't need to tile an image.

  You can use JavaScript to rewrite your document to use AlphaImageLoader dynamically. We like this jQuery pngFix plugin.

• min-width and max-width: IE6 and IE5.5 don't support CSS min-width, however you can use a Microsoft extension to include JavaScript expressions in your IE6 CSS.

  #menubar {
      /* width: 100% */
      /* min-width: 980px; */
      width: expression(document.body.clientWidth < 980 ? "980px" : "100%");
  }
  

• min-height: IE6 doesn't support min-height, but you can emulate it with the following CSS hack:

  #content {
       /* min-height: 350px; */
       height: auto !important;
       height: 350px;
  }
  

• Empty <div>s have height: IE6 treats empty <div>s as if they contain a line of text, so gives them a height. To avoid this, style empty <div>s:

  div.empty {
      line-height: 0px;
      font-size: 0px;
  }
  

• DOCTYPE switching: IE6 added "Quirks mode" which switches back to the IE5.5 rendering engine if you don't include a modern DOCTYPE in your (X)HTML. Now all modern browsers dumb down their rendering in a similar way, so be sure to include the correct DOCTYPE unless you're targeting 10+ year old browsers!

• Percentage layout issues: IE6 has lots of problems with percentage widths in CSS, but the most glaring occur when you try to make a layout that adds up to 100%. If you're not careful, you may find your sites' columns dancing around when you resize your window!

  Suppose you put two width:50% <div>s, A and B next to each other floated left inside a width:100% parent. If the parent's width is a multiple of 2 pixels, A and B will be side by side. But if the parent's width is odd, IE6 will place B beneath A!

  The issue is IE6 does layout on a 1-pixel grid, and rounds widths like 2.5px to 3px, so it will happily try to stuff two width 3px (2.5px) children into a width 5px parent and overflow the parent. However, precision issues such as this are not unique to IE6. Solutions: choose widths that add to less than 100% and include copious padding; use JavaScript to reflow your site dynamically (ick); or use a pixel-based layout. Pixel-based layouts are still the easiest way to ensure your site looks watertight across a wide range of browsers.

First, we needed a way for visitors to search for user profiles simply by the fields that are in the database. Easy! Searchlogic has this built-in.

In the view:

<% form_for @search, :html => {:method => 'post'} do |f| %>
Username: <%= f.text_field :login_like %>
First Name: <%= f.text_field :first_name_like %>
Last Name: <%= f.text_field :last_name_like %>
Bio: <%= f.text_field :bio_like %>
Career: <%= f.text_field :career_like %>
Education: <%= f.text_field :education_like %>
<%= submit_tag 'search' %>
<% end %>

And in the controller, where the real savings happens:

if request.post?
 @search = User.search(params[:search])
 @users = @search.all
else
 @search = User.search
end

Searching on all the user’s fields, with just a couple lines of code!

In searching posts, we needed some slightly more complicated searches; we’re using acts_as_taggable_on_steroids and wanted users to be able to search for posts with particular tags, and we also wanted a way to use the post’s belongs_to association to allow users to search for posts entered by a particular user. Since Searchlogic allows us to define our own named scopes, we just need to add a couple of lines to the model to be ready to use the same tricks we used searching on database fields:

named_scope :has_tags, lambda {  |tags|
    Post.find_options_for_find_tagged_with(tags, :match_all => true)
  }
named_scope :poster_login_like, lambda { |c| { :joins => ["LEFT OUTER JOIN users ON (users.id = posts.poster_id)"], :conditions => ['users.login LIKE ?', c]
  }}

We also wanted searching for post content to include a search of the post body. So the view looks like this:

<% form_for @search, :html => {:method => 'post'} do |f| %>
Containing:  <%= f.text_field :content_like %></p>
<p>Tagged with: <%= f.text_field :has_tags %></p>
<p>By Username: <%= f.text_field :poster_login_like %></p>
<%= submit_tag 'search' %>
<% end %>

And the controller has the same super-simple:

    if request.post?
      @search = Post.search(params[:search])
      @posts = @search.all
    else
      @search = Post.search
    end

This is one of the things I love about working with Rails — thanks to all the great gems and plugins out there, we can do complex stuff with just a few lines of code rather than re-inventing the wheel.

We’ve also added this blog, where we’ll be posting tips and tricks we discover or invent in the course of our work, and keeping you updated on the projects we work on.