Rendering a web page – step by step

Have you ever thought about what happens when you surf the web? It’s not as simple as it seems: You type an URL into address bar in your preferred browser. The browser parses the URL to find the protocol, host, port, and path. It forms a HTTP request (that was most likely the protocol) To…

Read more...

Position: fixed CSS templates

In 2006 I wrote an article about simulating Frames and Iframes and from time to time, I get questions of how to make modifications to the templates presented. But one big thing has changed since 2006: Perfect support for IE6 is no longer mandatory. So yesterday, when Brandon Cobb of Super Fighter Team asked about…

Read more...

SpriteMe – Combine images and get fewer HTTP requests

Those of you that care about website performance have probably read about combining images, something that’s called “CSS sprites”. The idea is that by using the same (somewhat larger) image several times, you get fewer HTTP requests to your site, and therefore speed it up. Problem is, most of your images are CSS background images,…

Read more...

Techniques to use when IE6 dies

Everyone except Microsoft themselves are talking about the death of IE6. I’ve tried motivating people to drop support, arguing that you at least can show IE6 users a message. Many have replied with “but our IT department doesn’t let us…”, and I can say nothing more than that the IT department is filled with humans….

Read more...

A couple of sites I’ve launched

Lots of opinions here lately, and very few concrete examples of work I’ve done. I thought I’d take a few minutes of your time and talk about those projects here. All of the sites I’ve built are in Swedish. The reason for Swedish is just that they are so much easier to write for. Since…

Read more...

Interface developers and security

You live in a new era, when demanding that people register on your site is no longer enough. There’s far too many other sites out that that you’re already a member of, you don’t need another one. You need to trust people. You also want people to contribute to your sites with content somehow. Text…

Read more...

OpenID, Nofollow removed, Comment counts, and IE7 fixes

I’m added a few features to the site: OpenID support: Instead of typing your name and e-mail you could instead sign in with an OpenID-enabled URL. Or you could completely ignore it, and go on as usual. Nofollow restriction removed: WordPress by default adds rel=”nofollow” to all links that people write in comments. It’s a…

Read more...

IE7 hover bug: z-index ignored (and other properties)

I’m implementing a rather different design right now for an intranet, and have found a bug I thought you’d like to know about. If you restyle things with :hover, you might have to add an extra property for the rule to be applied in IE7. How is this design different? Well, it built on columns…

Read more...

Yellow fade with CSS and a simple image

Via Think Vitamin I find a cool way to highlight the current element. Lots of people do this by calling some kind of javascript library, it’s so common it’s been dubbed the yellow fade technique. But javascript isn’t really needed, you just need CSS and an image. First: you can jump to any id on…

Read more...

The Open Web: Can it deliver?

It’s ringing through my head as Microsoft releases Silverlight, as Adobe forces another version of Flash or Air, and as Sun tries to push JavaFX into the spotlight. It’s a dark whisper when I read how many still use old browsers (hello IE6!), or when I see Javascript being used poorly by otherwise knowledgeable programmers….

Read more...

Why adding variables to CSS is a good thing

Via Simon Willison I find that Bert Bos, one of the creators of CSS, has written an article on why variables shouldn’t be included in CSS3. I thought I’d try to explain why I think they should. Professional perspective Bert posts statistics of stylesheet usage from the W3C site, and means that most stylesheets are…

Read more...

Don’t waste time writing HTML and CSS

When you’ve worked with front-end development for a while, you start thinking about effectiveness. So without further ado, here’s my four best ways to be a more effective front-end developer. Feel free to add more ideas as comments! 1. Do you need HTML or CSS for this? Lots of times when I get stranded on…

Read more...

Upside down text with CSS

Previously I’ve talked about reversing text with CSS by simply setting a few CSS attributes. Today we will try another trick: turning text upside down. It’s actually possible using a simple CSS property and works cross-browser today. The property to use it “text-gravity” with a value of “inverse”. <span style="text-gravity: inverse"> write upside down text…

Read more...

Feed readers should show comments

One thing I’ve noticed lately is that I read fewer comments. It isn’t that strange really: I read blogs using a feed reader and it doesn’t show a links to comments. I see a couple of reasons why comments are not cared for in feed readers: Why not #1: Feeds are meant to be fast…

Read more...

New theme up for friendlybit.com

Hi! If you’re reading this blog through your feed reader, today is a good day to break out of it and have a look at the site. There’s been several little changes throughout, and I invite you to click around and explore things. Let me know if you find anything broken! Comments have moved up…

Read more...

Style tables with CSS

I don’t deal too much with tables. Not because I don’t want to but because clients hardly ever want to use them. My guess is that they are too hard to create with todays WYSIWYG editors, and therefore get left out. It happens though that I have one or two static tables I need to…

Read more...

Documenting CSS

Just like all other programming the CSS needs documentation. I’m afraid I’m rather bad at it: the times I’m lucky I’ve been able to document by simply talking to the developer taking over, and the unlucky times I’ve left no documentation at all. Talking directly is of course superior to everything else, you don’t waste…

Read more...

IE8 and Doctype switching

The topic of this week has been IE8s new rendering mode, and the strange way to trigger it. As usual, I’ve decided not to comment right away, and instead first read what others are saying and try to form an opinion. I believe the best articles that talks about the switch are these: Legacy, by…

Read more...

Sharepoint 2007 from an interface developer’s view

Like Cameron Moll (Skinning Sharepoint and Pointedly unskinnable), I’ve been working with Sharepoint 2007 (aka MOSS) recently, and I hope you don’t mind me posting a few articles about my work here. I’ve found far too few blog posts that really go to the depth in explaining how things really work. I’ll try to do…

Read more...

Future of web standards (my take)

Stuart Landridge sums up the ongoing debate about the future of CSS. My thoughts on this are that we should: 1. Let browser makers run loose with implementing new features, based on feedback from web developers. 2. Have a standard body (or some other group) that look at those existing features and see how they…

Read more...