Archive for the 'CSS' Category

MHTML – when you need data: URIs in IE7 and under

Apr 10th, 2009

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 […]

 

>>> $$(selector)

Jan 30th, 2009

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 […]

 

Background repeat and CSS sprites

Apr 3rd, 2008

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 […]

 

The Front-end Cerberus

Oct 25th, 2007

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, […]

 

Quick CSSSprites.com stats

Sep 12th, 2007

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 […]

 

csssprites.com update

Jul 22nd, 2007

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 […]

 

phpBB front-end optimization – 1 hour workshop

Jul 13th, 2007

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 […]

 

CSS Sprites generation tool

Jun 27th, 2007

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 […]

 

Smart browsers don’t download unneeded images

Jun 23rd, 2007

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 […]

 

Delay loading your print CSS

Jun 17th, 2007

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, […]

 

Center an image with CSS

Feb 19th, 2007

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 […]

 

User stylesheet in IE

Jan 20th, 2007

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 […]

 

Y! homepage – CSS sprites in action

Dec 1st, 2006

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 […]

 

Rendering styles

Oct 4th, 2006

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 […]

 

Parent’s styles in an iframe

Sep 3rd, 2006

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, […]

 

Opacity for the thumbs

May 5th, 2006

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 […]

 

Curly underline

Apr 4th, 2006

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 […]

 

CSS coding conventions

Sep 30th, 2005

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