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 […]
Archive for the 'CSS' Category
The art and craft of postload preloads
Aug 27th, 2009What 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 […]
The star hack in IE8 and dynamic stylesheets
Jul 3rd, 2009CSS 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. […]
MHTML – when you need data: URIs in IE7 and under
Apr 10th, 2009UPDATE: 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 […]
>>> $$(selector)
Jan 30th, 2009Gotta 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 […]
Background repeat and CSS sprites
Apr 3rd, 2008CSS 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 […]
The Front-end Cerberus
Oct 25th, 2007Some 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, […]
Quick CSSSprites.com stats
Sep 12th, 2007Just 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 […]
csssprites.com update
Jul 22nd, 2007Added: – 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 […]
phpBB front-end optimization – 1 hour workshop
Jul 13th, 2007Let’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 […]
CSS Sprites generation tool
Jun 27th, 2007Here’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 […]
Smart browsers don’t download unneeded images
Jun 23rd, 2007We 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 […]
Delay loading your print CSS
Jun 17th, 2007So 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, […]
Center an image with CSS
Feb 19th, 2007Here’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 […]
User stylesheet in IE
Jan 20th, 2007Let’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 […]
Y! homepage – CSS sprites in action
Dec 1st, 2006Have 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 […]
Rendering styles
Oct 4th, 2006The 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 […]
Parent’s styles in an iframe
Sep 3rd, 2006Here’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, […]
Opacity for the thumbs
May 5th, 2006I’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 […]
Curly underline
Apr 4th, 2006Ever 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 […]
CSS coding conventions
Sep 30th, 2005Some ideas on how to make CSS files more organized, easier to maintain and more semantic.