CSS3 Animations
I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations (CSS Animations Module Level 3 specification).
Posts in the "CSS" Category
Using CSS3 Transitions and Transforms to mimic Mac OS X Stacks behavior
The other day when I wrote Using CSS3 Transitions To Create Rich Effects I was thinking of nice ways to apply this. One of the things that came up was creating the Mac OS X Stacks behavior entirely in CSS!
Using CSS3 Transitions to create rich effects
There has been discussions about allowing CSS to help developers create smooth transitions of CSS properties for elements, and it’s something being specified in CSS3 in W3C CSS Transitions Module Level 3. Here I’m going to show you how to implement it in Firefox, Google Chrome, Safari & Opera.
Using CSS instead of images when coding your web design
As an Interface Developer, it has always been a challenge to make the designers’ dreams come true, especially when it comes to shadows, gradients and various level of transparency. Slicing images till no end, trying to make it look good. Nowadays, though, a nice alternative is to do it with CSS.
CSS pointer-events to allow clicks on underlying elements
Ever placed an element on top of another element, but wanted the one under to be clickable? Now it’s doable, with CSS pointer-events!
Testing the Internet Explorer Platform Preview (IE9) – reviewing the good, the bad and the main letdown
At MIX10 yesterday, Microsoft announced IE9 and spoke about its upcoming features. And, lo and behold, they released a Internet Explorer Platform Preview for anyone to download and play around with!
Drop shadow with CSS for all web browsers
One of the most common CSS effects is using shadows in various ways. Before, we needed to resort to images, but now we can offer this to all major web browser with CSS!
Do hidden elements load background images?
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.
CSS display: inline-block: why it rocks, and why it sucks
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.
CSS files downloaded twice in Internet Explorer with protocol relative URLs
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.
CSS gradients for all web browsers, without using images
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.
Tools for concatenating and minifying CSS and JavaScript files in different development environments
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.
How to reduce the number of HTTP requests
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
CSS background transparency without affecting child elements, through RGBa and filters
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.
Testing Object-Oriented CSS (OOCSS) for easier CSS development
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.
Apple to patent CSS transformations and animations
It seems like Apple is about to go down a road which is completely against the spirit of the web.
Help making Firefox better – share your thoughts!
Last weekend, I had the pleasure of being invited by Mozilla to Prague to, amongst other things, discuss the future of Firefox.
Firefinder 1.0 released – code collaboration with the FriendlyFire feature, better integration with Firebug and more
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 is released – information about having multiple Firefox versions and web developer extension compatibility
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.
Geek Meet Charity June 4th 2009 was a success!
Yesterday we had Geek Meet Charity in Stockholm, and in my opinion, it was a great success!
Serious memory leak issue with 24-bit PNG images with alpha transparency in Internet Explorer
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.
Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or XPath expressions
I am very happy to say that an idea I’ve had for a while has finally been implemented: Firefinder for Firebug.
Stop developing for Internet Explorer 6
This proposal might seem a bit drastic, but please allow me to present my case.
New version of Inline Code Finder, with event filtering – and a download record
I have just released a new version of my Firefox extension Inline Code Finder and made a personal download record! 
How to solve :first-child CSS bug in IE 7
Yesterday, IE 7, once again, pushed me to the brink of going postal. Refusing to give up, I finally managed to find the problem.
What was your first hex code?
I remember it like it was yesterday: my first hex code!
How to develop a Firefox extension
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!
This article/topic is also available as a presentation on SlideShare.
Inline Code Finder Firefox extension – find inline JavaScript events, inline styling and javascript:links
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!
IE 6: now coming to a cell phone near you
Something was brought to my attention which, to say the least, left me a little baffled: IE 6 is coming to mobile phones…
Why inline CSS and JavaScript code is such a bad thing
Available is also a translation in French of this article.
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.
CSS includes with the title attribute might be ignored
Yesterday I ran into a little unexpected behavior when adding title attributes to a couple of link elements.
You want CSS opacity to go with that? Well, suit yourself
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.
How to hide and show initial content, depending on whether JavaScript support is available
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.
Do you validate your CSS?
We all heavily evangelize the validating of HTML code and think it’s just a given, right? But how about the CSS code?
Full Acid3 support in Opera and WebKit (Safari etc)
First out was Opera, and then WebKit (which Safari and some other web browsers are based on), to pass the Acid3 test.
Should we continue to use relative units vs. relying on page zooming?
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.
Styling BUTTONS, and achieving sliding doors with them
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…
IE 8 beta 1 available for download – some quick takes
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.
A CSS class hero
I thought I’d share a web developer’s rendition of Working Class Hero.
How web browsers handle rounding when it comes to values set in percentage
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.
Can’t make links (appear ) clickable in IE
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.
@media Ajax – the presentations
As promised in my @media Ajax – Journeys and stories post (now updated with pictures!), this one will focus on the presentations during the conference.
Stop using poor performance CSS expressions – Use JavaScript instead
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.
YSlow – a nice performance plugin to Firebug
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!
Don’t over-specify your CSS code
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.
The coloring of visited links
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?
How to clear CSS floats without extra markup – different techniques explained
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.
Indentation of code
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.
A HaRd challenge – styling an HR element
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…
How to specify dynamic font sizes consistently with CSS
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.