Category Archives: CSS

Using CSS to Replace Content for JavaScript Disabled Browsers

Using CSS to Replace Content for JavaScript Disabled Browsers

If you’re like me, you love embellishing your projects with fancy JavaScript to give them pizzaz. But, chances are, you’ve also had some trouble finding a comfortable solution for replacing that JavaScript content for users who have (for one reason or another) disabled JS in their browser. After playing around with many possible fixes, I’ve come up with a standards-compliant, low bandwidth and easy to implement solution. And it’s probably something you weren’t expecting… CSS!

That’s right… by making use of the display:none CSS property we can serve alternate content to our non-JavaScript users without sending them to alternate pages on our site (a common, but outdated and clunky solution). So, get ready to turn off that JS in your browser (did I really just say that?) and start developing for true compatibility.

Continue reading »
Easy Single Image Rollovers with CSS Image Sprites

Easy Single Image Rollovers with CSS Image Sprites

With the advent of Style Sheets came the promotion of standards-based code that functions seamlessly across multiple browsers and displays correctly on most every machine out there. But, I often come across high-end websites that are based on outdated (and somewhat unreliable) CSS methods to produce an effect as simple as the common image rollover. Most older methods can give an otherwise professional site an amateur feel because they:

  • use Javascript where not necessary
  • cause the image to flicker on the initial rollover
  • aren’t accessible to some mobile browsers or systems with JavaScript disabled
  • create a rollover by using multiple images, which take longer to load and uses extra bandwidth

No need to worry though– there is a standards-compliant way to use a single image to create that flicker-free, non-JavaScript rollover that will work on any system. It uses what is known as an image sprite and its easier than you might imagine.

Continue reading »

Subscribe via email