One thing I have always pondered about is whether elements that are hidden will load any images associated with it, either inline or through CSS, directly at page load. And apparently, my colleague Jonatan Larsson has as well.
Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.
I think we can all agree that performance of web sites matters a lot, and slow web sites are very annoying both for developers and, more importantly, end users. Therefore, we need to talk about a newly discovered problem: Internet Explorer, protocols and inclusion of stylesheets.
One thing that is quite nice is that we now have the ability to create gradients in our pages just from CSS code, and without the use of any images.
To follow up on the topic of cutting down the number of HTTP requests that I mentioned in my posts How to improve your web site performance – tips & tricks to get a good YSlow rating and How to reduce the number of HTTP requests, I wanted to put together a good list of tools and approaches to concatenate and minify CSS and JavaScript files in different developing environments.
As you might be aware of, I believe web site performance is truly a critical success factor, and I have written about it before in How to improve your web site performance – tips & tricks to get a good YSlow rating
Looking at the design of most web pages today, almost exclusively all of them include some semi-transparency of elements. However, getting the desired effect in CSS is harder than one might think.
Let’s face it: developing CSS that should work across various web browsers and platforms is hard, and could prove to be quite a challenge. This is where Object-Oriented CSS (OOCSS) steps in.
It seems like Apple is about to go down a road which is completely against the spirit of the web.
Last weekend, I had the pleasure of being invited by Mozilla to Prague to, amongst other things, discuss the future of Firefox.
When I released Firefinder back in May, I had some ideas with what more I wanted to do with it. Now I can happily say that I have implemented those ideas!
Firefox 3.5 was released yesterday, and it has already reached 5 and a half million of downloads (at the time of writing). Therefore, I thought I’d answer some common questions, especially from a web developer perspective about the new version and which web developer extensions which will work with it.
Yesterday we had Geek Meet Charity in Stockholm, and in my opinion, it was a great success!
In my day job (i.e. the one paying the bills), I encountered a very serious problem in Internet Explorer, which turned out to be a show-stopper in my current project.
I am very happy to say that an idea I’ve had for a while has finally been implemented: Firefinder for Firebug.
This proposal might seem a bit drastic, but please allow me to present my case.
I have just released a new version of my Firefox extension Inline Code Finder and made a personal download record! 
Yesterday, IE 7, once again, pushed me to the brink of going postal. Refusing to give up, I finally managed to find the problem.
I remember it like it was yesterday: my first hex code!
Admit that you have always wanted to know how to develop a Firefox extension but never had the time to learn. Here I will walk you through and at the end of the article we will have created a fully functional Firefox extension!
When I first coded and released Obtrusive JavaScript Checker, I had some more ideas with it, as well as some great feedback I have received and wanted to see to. The result is Inline Code Finder, which looks for inline styling as well as what the Obtrusive JavaScript Checker offered, and it comes in two versions!
Something was brought to my attention which, to say the least, left me a little baffled: IE 6 is coming to mobile phones…
When I review web sites, and also in my own projects with a number of different team members, I almost constantly stumble across something web developers should really refrain from: inline styling and inline JavaScript code.
Yesterday I ran into a little unexpected behavior when adding title attributes to a couple of link elements.
Personally, I like opacity when it is used well in a web site. And instead of some static images, I prefer, when possible, that it is achieved through CSS.
Many people ask me how I choose to address an situation where all content in a web should be available without JavaScript, but certain parts hidden if JavaScript is enabled.
We all heavily evangelize the validating of HTML code and think it’s just a given, right? But how about the CSS code?
First out was Opera, and then WebKit (which Safari and some other web browsers are based on), to pass the Acid3 test.
Looking at the upcoming releases of different web browsers I started to wonder whether specifying fonts in relative units, such as ems etc, will be a common approach in the future.
As you all know, form elements aren’t that easy to style, especially not consistently. At a first glance, the button element seems like a sure winner, but once you delve into it…
For those of you who have missed it, IE 8 beta is now available for download. Let’s take a quick look on what’s in it.
I thought I’d share a web developer’s rendition of Working Class Hero.
Ever had the problems with width set in percentage, and every web browser seem to treat it differently? Elements falling down in IE, ruining your layout? I sure have, and John Resig explains how it really works.
We all know that Internet Explorer hasn’t been the best of the bunch rendering CSS properly, and while IE 7 got better, it’s far from perfect. I have an example here where I can’t make links (appear) clickable, no matter what.
As promised in my @media Ajax – Journeys and stories post (now updated with pictures!), this one will focus on the presentations during the conference.
Since the CSS support in Internet Explorer, especially in versions prior to Internet Explorer 7, has been lagging quite substantially, clever web developers have started using CSS expressions to mimic CSS functionality. However, few realize how this affects performance.
I’m sure you follow web standards, write semantic HTML and separate content (HTML) from presentation (CSS) and interaction (JavaScript). It’s all accessible and lean at the same time. So, what’s the next step. Performance, I tell you!
When I started writing CSS, I wanted every CSS rule to be as specific as possible. This was to get an instant overview as well as making sure that the desired style was applied to exactly the element I wanted.
For some reason it just hit me that it really was a long time ago since I used any specific color for visited links in a web site. How so?
When using floats in CSS, without a doubt you have encountered the interesting effects it will have on the following content. Here I will show you different ways to clear floats without any extra mark-up.
One thing that I’ve always taken for granted how to do is the indentation of code. Sure, people place characters like { either on the same line as the CSS rule/JavaScript function name, or on the following, and that’s just fine. But what I mean here is how to accomplish the actual indentation.
One of the web sites I’m currently working on has a lot of line dividers, and they had been added somewhat inconsistently. Therefore, I decided to go the semantic route and throw out all div and p elements, and replace them with one single class-free hr. Oh man, did I open up a can of worms…
This artice is also available in a French translation.
When developing web sites, we naturally want to offer our end users the option to freely resize the text size in their web browser of choice to their liking. What I would like to do here is present what I’ve found to be most consistent way to achieve this with CSS.
So, 2006 is almost over and it’s time to look ahead at 2007. Will it be an exciting year? No doubt, we have to wait to see just how riveting it can get! I thought I’d go through some notable things that happened in 2006, not just web-related, and scribble down some words about them…
When you write your CSS code, do you use upper- or lowercase hexadecimal codes? I.e., does it look like this: #F2F2F2 or this: #f2f2f2? Personally, I used to go the uppercase route but has now officially switched to lowercase.
What’s your preference?
When I wrote Looking for a good interface developer? Here’s what to ask to make sure you’ve got the right person, I wasn’t sure if I should reveal the answers to you or just let you do the research yourselves. However, I came to the conclusion that this web site is really about sharing knowledge, and also that some of you might have some good extra input on my answers.
So, here are some answers and links to more information about the questions:
Are you perhaps looking for a talented interface developer? You’ve heard that web standards and perhaps accessibility is good to have experience with, but you don’t know how to determine the applicants’ experience.
Don’t worry anymore, I’ve put together a check list of what to ask to make sure they’re suitable and in the loop with proper and modern web interface development.
Every time a new web site is to be designed; every time I open a magazine about building web pages; every customer I meet. It’s always there, the ridiculous question:
How big monitors do people have nowadays?
Oil Condition Monitoring by Hydac Australia
It seems likely that at the end of 2006 Internet Explorer 7 will be released. First, let me say that the IE team has undoubtedly done some great work when it comes to fixing the numerous flaws in IE 6 as well as adding a heap of new CSS support (more detailed in Details on our CSS changes for IE7), although I think it’s a joke that display:table still isn’t supported.
But, my main question is: is catching up good enough?
After doing some extensive testing, due to some error reports that the overlay layer didn’t cover all parts of the web page if it had a scroll, I’ve now updated the script to take that into consideration as well. A positive effect of this is that, during a slideshow, it will automatically adapt the overlay size if the user resizes the web browser window or scrolls within it.
Also, one of the biggest upsides to this is that I’ve eliminated the need to add CSS specifically for Internet Explorer to handle overflow scenarios. The CSS code below has been updated accordingly.
So, I sincerely ask of you to download the example package (ZIP file link) to get this important fix, or if you already have your own custom CSS, to re-download the JaS JavaScript file and simply replace your current one.
Looking at nice features like Lightbox JS and what my friends at Particletree did with Lightbox Gone Wild!, I found it to be a given to add this functionality to JaS – JavaScript Slides. Now the image view, as well as the slideshow feature, supports it in different combinations.