css archive

joaquin's picture

When it comes to Mobile Development, Stop Worrying about Bandwidth

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…

robbie's picture

Front End tools to make you a more productive and lazy developer

One of my favorite things about the development community is how lazy it can be. What I mean is that most developers I know would rather make a tool to automate a task, than constantly keep a queue of from-scratch processes in mind. Let your tools do the work, if you can. Clear that mental cache - outsource those thoughts to software! That’s why when I come across tools that make frontend development easier I become elated.. and thankful. Thank you, Thank you, THANK YOU development community for these useful tools. Recently, while working on a webkit-only project (I know, right?) I came across a few sites that made my toolbox much more versatile. Let’s share: Read More…

scott's picture

How we made the Metal Toad site more mobile-friendly with media queries

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…

scott's picture

How to use @font-face to avoid faux-italic and bold browser styles

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…

scott's picture

optimizeLegibility does not work with @font-face

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…