Yesterday I came across this post (via Ajaxian), it talks about how you might be able to end up with smaller file sizes (after gzipping) if you help gzip a little bit by sorting the CSS properties and values in stylesheets, so they are as similar and close to each other as possible. Now obviously […]

What can your tired old page, once loaded and used and read, can do for your user? It can preload components needed by the next page, so when the users visit the next page, they have the new scripts, styles and images already in the cache. Next page loads faster and the user’s happy. On […]

CSS hacks ⇓ skip if you already know about the star and underscore hacks For most CSS tasks, there are only two hacks that are straighforward to use, easy to spot and maintain (delete down the road), easy to understand. The star hack that targets IE6 and 7 and the underscore hack that targets IE6. […]

UPDATE: It’s very important to have a closing separator in the MHTML document, otherwise there are known issues in IE7 on Vista or Windows 7. The details are here. In the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with […]

Gotta love the Firebug console, how can anyone not love the Firebug console. It makes testing random pieces of JavaScript a breeze and best of all – you’re playing with the live page. Your page or any page for that matter. Two nice shortcuts you can use in the console are $ and $$. The […]

CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases when the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite […]

Some smart guys picture the distinction of content (HTML), presentation (CSS) and behaviour (JavaScript) as a three-legged stool. This is totally fine, but can’t we draw a more heroic picture of today’s Front-end developer? I found the image here, if anyone knows the original author, let me know so I can give proper credit. BTW, […]

Just deleted about 3 gigs of files uploaded to csssprites.com because I’m running out of disk space. I keep the .html results though, just for stats purposes. So ls | wc -l says that there are 3170 files meaning over 3000 sprite images were produced already, nice. The tool is very primitive, I admit, its […]

Added: – generation of a GIF sprite in addition to the PNG – small client-side only check if at least two files are updated – link to a Yahoo search for “css sprites” – note begging people not to upload huge files Only the first thing is a feature, the other three are to raise […]

Let’s go ahead and optimize our phpBB installation for front-end performance. I’ll follow Yahoo’s 14 optimization rules, but only implement the ones that apply for phpBB. During this short workshop there will be no changes to the phpBB code, we’ll create a new template instead, so that in case something bad happens, your board will […]

Here’s my last weekend’s project – a web-based tool to generate images for CSS sprites: http://www.csssprites.com. Cool domain name, eh? I couldn’t believe it was not taken. CSS Spr…what? This is a simple technique used for page load performance purposes. Since HTTP requests are the most expensive thing you can do in regards to front-end […]

We ofter complain about browsers, browser inconsistencies, quirks, hickups, the list goes on. Let’s say something nice to them, and hope for good karma 🙂 It happens as your web app grows in size and team members that some parts of the stylesheets become obsolete, no one remembers why they were there in the first […]

So you have two stylesheets on your page, like this: <link type="text/css" rel="stylesheet" href="screen.css" media="screen" /> <link type="text/css" rel="stylesheet" href="print.css" media="print" /> The first one is used to render the page on screen, the other one is used for printing the page and print previewing it. Good. The thing is, when it comes to performance, […]

Here’s one solution to centering an image both horizontally and vertically, when you know the height of the container. Tested in FF, IE6, IE7 The markup: <div class="container"> <img src="pearbook.png" /> </div> Styles for normal browsers: .container { height: 200px; width: 300px; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid red; } .contain img […]

Let’s say you want to quickly try out some small stylesheet changes, but you don’t want to (or prefer not to, or for some reason temporarily you just can’t) modify your application’s CSS file(s). In FF it’s easy – you have Firebug and you can play with styles until blue in the face. And in […]

Have you looked at the HTML markup of the new Yahoo homepage? Then you should. The markup (although it won’t validate) is a piece of semantic art. Lists are lists, tabs are lists, only one table to be seen (obviously plugged-in coming from a different site) The total number of markup elements on the page […]

The question is – what will a browser do, given a page with several stylesheets, each of them probably overwriting definitions from the previous ones? Will the browser render the page using the first received css file, while downloading the other ones and after that partially re-rendering where required? The answer is: no, the browser […]

Here’s a JavaScript that let’s you style an iframe just like its top parent. The script is basically just a proof of concept I did after talking to a friend about similar problem he has had in the past, so feel free to modify and use if you like it. So I have a page, […]

I’ve been just toying with the CSS opacity to make fancier image thumbnail rollovers, it’s actually quite easy. The idea is when you have a thumbnail photo gallery to make the thumbs semi-transparent and, on mouse over, to remove the transparency and show the real image as is. All it takes is this little piece […]

Ever wanted to use un underline on a web page that looks like a spelling mistake in Word? You know, the curly red underline. It’s actually very easy. Here’s an example. All you need is: A small piece of the wavy line, like this (it’s stretched here for the demo purpose) A style that uses […]

Some ideas on how to make CSS files more organized, easier to maintain and more semantic.