There have been some big changes in the browser world in the last year. Google's Chrome has continued to make tremendous gains, and IE9 has started to supplant the older versions of Microsoft's much-maligned browser. Mobile browsers have also started to take a big bite of the overall browser market.

Web developers need to know about browser usage in order to make rational choices for browser testing and for choosing which features to rely on. With jQuery's recent choice to phase out legacy IE support and the continued mainstreaming of mobile browsers, there's a renewed focus on which browsers it makes sense to support.

The hot topic in web development right now is how to gracefully handle images when building a responsive website. Images that change based on media queries are known as responsive or adaptive images. The W3C is currently trying to sort out competing specifications and ideas from the community. While the debate continues, many clever developers are coming up with JavaScript-based solutions. But there's a way to provide responsive images without using any JavaScript at all.

If you don't like the srcset solution being proposed, or you simply need something that works in today's browsers and doesn't use JavaScript, read below for a potential solution to the responsive image problem.

In a previous post on using Sass with the 1KB CSS Grid, I reviewed in depth the concept of using Sass and Compass to remove unnecessary classes from your HTML markup, and recommended usimg mixins instead. After using this grid on my own projects for the past year I've finally created a Ruby Gem called compass-grid-plugin and I've updated the GitHub repository to include a fluid grid option as well. For now I'm calling it “Grid” because that's what I've been calling it. The fluid grid will be documented below.

• Grid on Github
• Grid on Ruby Gems

Like many things involving open source development, the jQuery project is designed to be worked on in a Unix-like environment such as OS X. Most regular people have a Windows machine (around 90%) but developers aren't regular people. Regardless, I primarily develop on Windows and I recently wanted to work with the jQuery code base and found the instructions for setting up your environment on Windows to be a little outdated. Thankfully the open source world is getting much friendlier for Windows developers. This article covers the official jQuery instructions and my preferred setup.

When creating JavaScript libraries, it's difficult to support the full range of units and most developers settle on just supporting pixels. CSS supports several units for length as explained in this MDN article but supporting them with JavaScript can be tricky. This post explains the basic technique for converting units and the inherent browser bugs that need to be overcome. This post also introduces a new Units library I've created and posted to GitHub.

If you have some weird reason to handle arbitrary units in your JavaScript library, the code demonstrated below should offer the most complete solution possible in the smallest possible package.

In a previous post exploring rounded corner methods, I covered a technique using absolute positioning for faking rounded corners in browsers greater than IE6. One issue with faking rounded corners is the amount of HTML markup required as well as the hassle of crafting the accompanying CSS. I have created a jQuery plug-in for adding the required markup and a complementary Sass/Compass @mixin for generating the required CSS. The markup generated utilizes jQuery UI theming for the CSS class names. The code is available on GitHub

A challenge all web developers face is converting Photoshop documents into real, functioning web pages. Often this is a simple matter of measuring things and picking colors, but in the case of drop shadows recreating them in CSS3 can be challenging. For some reason I have yet to find a tool that will simply translate the settings from the Photoshop Layer Style Drop Shadow dialog into proper CSS3 — so I decided to create one in Compass. I created a Sass @mixin that relies on Compass to easily create CSS3 box-shadows from the values found in Photoshop.

UPDATE: a Github repo and Ruby Gem have been created.

Since the release of Internet Explorer 9 earlier this year, the browser landscape has continued to change rapidly. In early 2012 Internet Explorer 10 will be released — the second IE release in about a year — with a number of important advancements. Firefox will have fully adopted the same release cycle as Google Chrome with version 6 and 7 due by years end. Firefox 6, due August 16th, will be the third version of Firefox released this year! Browsers are getting released early and often and upgrades are now automatic in Chrome and Firefox, often without the user's knowledge.

Often overlooked in the hype over the browser wars is the role that the OS plays in all of this. Windows 7 is now the most popular OS in the United States; it passed Windows XP in April. It's set to become the number one operating system in the world sometime in October or November this year. Many commentators chastised Microsoft for not releasing a version of IE9 for Windows XP but that doesn't seem to have been a bad strategy for Microsoft. IE9 is already making impressive market share gains although Windows XP is likely to be a major operating system on the worldwide market for some time, it will likely still have around 30% market share by the time of the 2012 presidential elections. That means that the long tail of decline for the older IE versions is likely to be kept alive by the stubborn decline of Windows XP.

jQuery has a really strong animation library built in that makes it very easy to animate a CSS property with very little JavaScript. However, it's not well suited to animating complex things that are not directly related to CSS. In particular, tweening an element along a curve or animating a canvas — which doesn't use CSS at all — is more difficult.

To solve these issues I've created two new jQuery plug-ins: jQuery Tween and jQuery Curve.

CSS3 introduced a new text-shadow property that allows for, well, shadows to be placed on text. As of February 2011, text-shadow is only supported in 48% of browsers in use. Internet Explorer 8 and below do not support text-shadow; surprisingly Internet Explorer 9 doesn't either. Because the majority (90%) of non-IE browsers already supports text-shadows natively, it's most interesting to try and polyfill IE. I've created a Textshadow jQuery plug-in for just this purpose. Read below for an overly thorough explanation of hacking IE filters to get a convincing text shadow.