Autonomous Machine

Posts tagged with CSS

Hiding parts of a view while in development

Most of my recent projects have involved working with a front end developer, who would provide HTML/CSS templates with dummy content to be integrated into a Rails backend. During the process of wiring up the views, I often wish to hide a section of a template or partial until the models and controllers are setup to support them.

I've started using this little view helper to hide code in a view, while providing a console message to remind me to go back and address the issue when the time is right:

def hide(&block)
  if Rails.env == 'development'
    match, file, line = caller.first.match(/([^:]+):(\d+).+/).to_a "** Hiding content on line #{line} of #{file}"

It's simple to use, especially in HAML:

- hide do
  = some_view_code_that_will_not_execute

The helper will print something like this to your console:

** Hiding content on line 14 of /Users/jimb/Projects/demo/app/views/objects/show.html.haml
  • September 11, 2009
  • Article
  • CSS, Rails, Ruby

GIF, the PNG fallback

About a year ago I was working on the front end of one of those new fangled Web 2.0 websites, with pages full of curvy drop shadowed gradients. I stumbled into a fairly obvious technique for dealing with IE6's lack of proper PNG support- replace said PNGS with the closest possible GIF in my IE6-specific stylesheet. Yes, this means that the edges of some page elements aren't going to look as nice, but most of the time, it's close enough for such an old browser.

My typical CSS skeleton construction process is now:

  1. Semantic markup
  2. CSS and optimal background images (PNG if needed)
  3. IE Compatibility Check for layout
  4. IE Compatibility Check for PNG/GIF substitution

Step 4 is where I go through and replace any trouble PNGs with GIFs. I no longer use any of the various filter/IE specific PNG hacks; all of the ones I've tried don't work correctly with tiled background images, which something I end up needing frequently.

  • December 16, 2008
  • Article
  • CSS