css archive

When it comes to mobile development, I've seen a lot of buzz recently on how CSS3 can help people eliminate images and cut the bandwidth requirement for their websites, however if a good mobile experience is important to you, you may want to think twice before deciding how to retrofit your website. The Good Old Days The Future is Now Your Screensize May Vary Don't Forget the CPU Oldschool Techniques What About Bandwidth? The Need for Speed Read More…

There’s been a lot of buzz lately about Responsive Web Design, and in particular about CSS3 Media Queries. When our CEO recently asked me to make our site easier to view on his mobile phone, I jumped at the chance to retrofit our fixed-width layout using these new techniques. In a nutshell, media queries allow you to define alternate styles that are applied to certain screen sizes. The obvious example is to pass a mobile stylesheet to small screens, and your regular stylesheet to large screens. Read More…

Did you know that if you declare a custom font using @font-face, the browser will try to fake the bold and italic styles if it can’t find them? This is a clever little feature that avoids a scenario where a themer specifies a font and is then confused that bold and italics don’t work, but it can be very confusing if you actually have a bold or italic version of the font. In this article, I’ll walk you through how to properly load your font files to avoid the browser’s faux-italic and faux-bold styles. Read More…

Recently, twitter was buzzing with news of a CSS technique called optimizeLegibility that enables better kerning and font ligatures. It's enabled by default in Firefox above 20px text, so you may have already seen it in action. I'd noticed the effect on my Talk Like Warren Ellis site (warning: possibly not safe for work language). I happily added it to my stylesheets, and was pleased to see the effect start working in Safari and Chrome as well. However, when I created the new Metal Toad site, it wasn't working. Read More…

Like any Drupal themer, I've done my share of grumbling about the frequently ridiculous level of nested divs with dozens of classes. I'd heard some people mention a module called Semantic Views, but I never really understood what it was for until I found this video. If you don't understand what the big deal is either, take the four minutes to watch. It's a total "ah-ha!" moment. I'm happy to say that I just used Semantic Views for the first time on a client site, and it's just as awesome as everyone says. It saved me a ton of work and let me get exactly the markup I wanted, even while working around Chuck's nested views. Read More…

Our new site design is live, so if you're reading this in a feed reader, please click on through! In a nutshell, we wanted to redesign to take advantage of Drupal 7, HTML5, and dramatically improve the readability and usability of the site as a whole. Read More…

The codec wars around the HTML5 video element might be settled sooner than you think: Basically, Google just open-sourced VP8, a video codec. VP8 is being combined with the Vorbis audio codec to create a new video format called WebM. Read More…

When you first start creating a Drupal theme, you might be frustrated by the large number of stylesheets that are included by default in your theme -- especially if you're creating a Zen sub-theme. Most of the documentation suggests that you override these styles in your own themename.css file. You can certainly do this, but it can make managing your CSS a nightmare, trying to keep straight what lines are your own code, and which are just there to override some default Drupal style you didn't want. Read More…