Posts in the "CSS" Category
Published on Wednesday, July 1st, 2009
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.
Continue reading
Published on Friday, June 5th, 2009
Yesterday we had Geek Meet Charity in Stockholm, and in my opinion, it was a great success!
Continue reading
Published on Tuesday, May 26th, 2009
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.
Continue reading
Published on Tuesday, May 12th, 2009
I am very happy to say that an idea I’ve had for a while has finally been implemented: Firefinder for Firebug.
Continue reading
Published on Monday, February 9th, 2009
This proposal might seem a bit drastic, but please allow me to present my case.
Continue reading
Published on Thursday, February 5th, 2009
I have just released a new version of my Firefox extension Inline Code Finder and made a personal download record! 
Continue reading
Published on Wednesday, February 4th, 2009
Yesterday, IE 7, once again, pushed me to the brink of going postal. Refusing to give up, I finally managed to find the problem.
Continue reading
Published on Friday, January 30th, 2009
I remember it like it was yesterday: my first hex code!
Continue reading
Published on Saturday, January 24th, 2009
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!
Continue reading
Published on Tuesday, December 16th, 2008
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!
Continue reading
Published on Friday, November 21st, 2008
Something was brought to my attention which, to say the least, left me a little baffled: IE 6 is coming to mobile phones…
Continue reading
Published on Thursday, November 20th, 2008
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.
Continue reading
Published on Friday, September 26th, 2008
Yesterday I ran into a little unexpected behavior when adding title attributes to a couple of link elements.
Continue reading
Published on Tuesday, September 16th, 2008
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.
Continue reading
Published on Tuesday, May 13th, 2008
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.
Continue reading
Published on Tuesday, April 15th, 2008
We all heavily evangelize the validating of HTML code and think it’s just a given, right? But how about the CSS code?
Continue reading
Published on Monday, March 31st, 2008
First out was Opera, and then WebKit (which Safari and some other web browsers are based on), to pass the Acid3 test.
Continue reading
Published on Wednesday, March 26th, 2008
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.
Continue reading
Published on Thursday, March 13th, 2008
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…
Continue reading
Published on Friday, March 7th, 2008
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.
Continue reading
Published on Friday, February 1st, 2008
I thought I’d share a web developer’s rendition of Working Class Hero.
Continue reading
Published on Thursday, January 24th, 2008
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.
Continue reading
Published on Tuesday, January 22nd, 2008
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.
Continue reading
Published on Saturday, November 24th, 2007
As promised in my @media Ajax - Journeys and stories post (now updated with pictures!), this one will focus on the presentations during the conference.
Continue reading
Published on Tuesday, November 13th, 2007
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.
Continue reading
Published on Wednesday, October 31st, 2007
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!
Continue reading
Published on Thursday, October 18th, 2007
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.
Continue reading
Published on Tuesday, September 4th, 2007
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?
Continue reading
Published on Thursday, April 12th, 2007
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.
Continue reading
Published on Monday, March 26th, 2007
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.
Continue reading
Published on Friday, March 9th, 2007
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…
Continue reading
Published on Tuesday, February 27th, 2007
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.
Continue reading
Published on Friday, December 29th, 2006
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…
Continue reading
Published on Monday, October 23rd, 2006
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?
Published on Tuesday, October 17th, 2006
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:
Continue reading
Published on Wednesday, October 11th, 2006
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.
Continue reading
Published on Thursday, September 28th, 2006
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?
Continue reading
Oil Condition Monitoring by Hydac Australia
Published on Tuesday, September 19th, 2006
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?
Continue reading
Published on Friday, September 15th, 2006
Updated September 17th, 2006
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.
Continue reading
Published on Wednesday, September 6th, 2006
For many web developers, CSS means numerous of ways to create flexible designs, control fonts in a powerful manner and a central location for controlling the entire look of your web site.
Unfortunately, CSS is far from perfect so I thought I’d list the most common disappointments I have, given the current state of CSS support, and I will also go a little into what your options are and what the future holds.
Continue reading
Published on Friday, September 1st, 2006
We’ve all thought that CSS is short for Cascading Style Sheets and that’s all it is to it, but apparently that’s far from the truth. The other day I found another meaning, perhaps the true one, that I think applies to me…
Continue reading
Published on Monday, April 24th, 2006
I guess most of you, one time or another, has had the need to find out what style was actually rendered on an element. The easiest way to do this is through the style property followed by the specific value you’re looking for:
var intPosLeft = document.getElementById("left").style.left;
However, this only works if the CSS has been applied inline on the element. As we all (or at least most of us) have realized, having inline styles isn’t a very good and efficient approach. So then we move all our CSS to an external file and suddenly the style property return no values when checking it.
What the hell happened?
The style property is reserved for inline styles (ridiculous, if you ask me), so you need to find another way to do it. Of course, then, there’s one standard way and one Microsoft way.
I have put together a function named getStyle (yes, the name is supposed to be funny) to solve this issue for you:
I’ve updated one line for IE per zcorpan’s suggestion. The previous code worked fine as well, it’s just a matter of personal preference when it comes to code syntax.
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
It is then called, for instance, like this:
getStyle(document.getElementById("container"), "font-size");
The first parameter is an object reference to the element you want to check, the second is the CSS name of the property you want to know the rendered value for.
Interesting to know is that specific values will return a value even if it was applied by shorthand in the CSS. For example, this will work just fine:
/* Element CSS*/
div#container{
font: 2em/2.25em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
var elementFontSize = getStyle(document.getElementById("container"), "font-size");
An other interesting thing is that Firefox, Opera and Safari will returned the actual pixels of a font size applied with em, while IE only return the value in em.
Web browser compatibility
This script has been tested to work in the following web browsers:
- IE 5.5+
- Firefox
- Safari
- Opera 8.5
The reason that it doesn’t work in IE 5.0 is having a function in the replace method as a second parameter. You might want to put this in a try...catch clause if you expect any users with that version, like this:
try{
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
catch(e){
// Used to prevent an error in IE 5.0
}
Download the JavaScript file
Download the getStyle JavaScript file.
Published on Wednesday, April 12th, 2006
Lightbox feature added September 15th 2006.
Select specific tag add-on added September 21th 2006.
Updated September 29th 2006
I’ve done a very minor change to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.
Updated October 25th 2007
I get a number of e-mails asking how to start the slideshow as soon as the page is loaded. Add this code to the end of the jas.js to make it happen:
addEvent(window, “load”, function(){ setTimeout(” JaS.startSlideshow()”, 1)}, false);
(The setTimeout is to avoid a content parsing bug in Internet Explorer)
Pretty much everyone wants to display and show images to other people, right? So many use Flickr for it, and while I think it’s a great idea and that it has got some wonderful features, my main gripe is that if I present images, I want to do it in my own web site.
People who do it themselves, on the other hand, always think Flash is necessary just to have fading and a nice little slideshow. Not true.
Therefore, I created JaS - JavaScript Slides. It is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images, so the viewers can find the exact images they’re looking for.
Humbly described, it’s like your own little mini-Flickr that you can use wherever you want to, and skin and brand it the way you feel appropriate. It’s also a way to showcase the independence and separation of the interaction and the design of a web page.
So, go take a look at it! Submit your own design to the gallery or vote for which design you like the best.
Enjoy!
Published on Thursday, December 1st, 2005
This might sound depressing, but I think I’ve had enough. Not to exaggerate, but I think I spend at least one third of my working time covering up for flaws and inconsistencies in Internet Explorer. When using something like float or position: relative, text might disappear, get rendered incorrectly or something else that’s horrible.
The code can work in 99 pages, and then something just throws it off in the 100th one. I’m spending way too much time fixing things like this, being worried that it might break. No rules, just sheer luck if correct code works. I know IE 7 is supposed to work fine and support proper CSS, but I don’t know for how much longer I can stand it.
Sure, one can attack the hasLayout problem, but it’s definitely not a 100% guarantee that things will work. Raise your hands, how many of the problems mentioned in Explorer Exposed! have you come across? Let me list the names of them, and it might be a hint for you:
- Peekaboo Bug
- Internet Explorer and the Expanding Box Problem
- Quirky Percentages In IE6’s
- Visual Formatting Model
- IE/Win Line-height Bug
- IE6 Border Chaos
- Disappearing List-Background Bug
- Guillotine Bug
- Unscrollable Content Bug
- IE 6 Duplicate Characters Bug
- IE and Italics
- Doubled Float-Margin Bug
- Duplicate Indent Bug
- Three Pixel Text Jog
- Escaping Floats Bug
- Creeping Text Bug
- Missing First Letter Bug
- Phantom Box Bug
Please give me piece of mind! Maybe I should just use table layouts and some extensive DOM scripting; at least that works.
Published on Wednesday, November 30th, 2005
Recently I ran into a problem and found myself a bit perplexed. I was working on a flexible layout when I ran into an issue with clearing floats. Let me describe the scenario:
It’s a two-column layout with a right-floated column followed by a left column with a flexible width. It looks somewhat like this:
<div id="right-col">
Content...
</div>
<div id="left-col">
Content...
</div>
with this CSS code:
div#right-col{
float: right;
width: 150px;
}
div#left-col{
margin: 0 170px 0 10px;
}
This means that the left column will have a width that’s expanding within its current given area, but that it always has a right margin not to interfere with the right column. So far, so good. But then I started to add floated elements in the left column and then clearing them, I also cleared the floating of the right column.
I guess this is correct behavior since there was no floated container in between, but still tricky, because I had to use floated elements there. After some discussions with Faruk, he gave me the suggestion to use an inner floated container in the left column, thus making sure to achieve just a “local” clearing. So, the new HTML became this:
<div id="right-col">
Content...
</div>
<div id="left-col">
<div id="left-inner-col">
Content...
</div>
</div>
with this CSS rule added:
div#left-inner-col{
float: left;
width: 100%;
}
Works like a charm!
Moral of the story: if you clear floating, make sure you know in what context you do it.
Published on Monday, November 28th, 2005
First, we developed layouts based on pixels. Along came accessibility and scalability, and we started to specify our fonts with ems instead. Then, those of us who wanted to be really out there created whole layouts using ems, so the whole layout would scale accordingly to the user’s current text size setting, giving a more consistent design impression. Hand in hand with this, we also created layouts that were elastic, expanding but with a fixed maximum and/or minimum width.
They way I see it, we break our necks calculating pixels into em, trying to make sure that every value is roundable. Then, of course, when the user changes his/her text size setting, it’s bound to be some rounding errors depending on the new size and things like inheritance of the em value into different elements.
Personally, I think it’s gone to far. The reason people started to use em for fonts weren’t because pixels were a bad unit, but for the fact that Internet Explorer didn’t support resizing of the text size when the font was specified in pixels.
Ever since I was a little kid, playing video games, I’ve been amazed by the fact that no matter what size one has of the TV screen, the game adapts and you can just start playing. When I started to develop web sites, I couldn’t believe the constraints of a fixed size delivered to everyone. Sure, vector graphics aren’t here yet for the web (I can’t believe why SVG isn’t already built into every web browser), but lately I’ve been testing something that gets us as close as possible: the Zoom feature in Opera.
I think it’s outright brilliant! Talk about making it more accessible while keeping the general look of the web site! You zoom a web site to desirable viewing size and it just works. Doesn’t matter if the font is in pixels, or if the web site itself has a hardcoded width. Scale, baby, scale.
My conclusion is that this feature should be mandatory in every web browser. Stop developing with ems, use your beloved pixels, and instead give us tools (read: web browsers) that offer users the features they need.
Let us instead focus on making sure no page demands JavaScript to function and that it’s possible to navigate around using only the keyboard.
Published on Tuesday, November 22nd, 2005
Ok, after the thing we do not speak about, I feel at least a little more stable.
Just wanted to let you know about two upcoming speaking performances for me.
- Know IT, November 24th, 17.00
- This will an internal performance for people working at Know IT in Sweden, but if you’ve missed it, it’s on Thursday this week.
- Swenug, December 1st, 17.00
- I’ll be making a speaking performance at a SWENUG meeting December 1st. Some would label this as fraternizing with the enemy; I regard it as an opportunity to reach out and explain the problems and what to think of when working with .NET and wanting to deliver valid and accessible code. Anyway, it’s free (I think you need to register, but as far as I know, that’s for free too)!
While I’m very happy and grateful to get these opportunities to “spread the word”, I still find it kind of sad that it’s even neccessary to evangelize about such obvious things as the benefits of CSS, semantic code etc. It’s like having a lecture for some handymen explaining about hammers and they’d go:
- Oooohhhhhh. Nice. People use these nowadays?
One would’ve thought by now that the discussion would be about how to make cutting edge things with these tools, not explaining what they are to begin with.
Anyway… I’m glad for the opportunity, and if you feel like it, I’d be happy if you were to show up December 1st!
Published on Friday, November 18th, 2005
After the feedback I got on my initial AJAX-S release, I’ve compiled it and added new functionality and fixes. In release 2 you will find these beauties:
- Incremental rendering.
- Printable version.
- Support for non-JavaScript users.
- Keyboard events fixed so you will stay in the presentation.
Sure, the print design isn’t exactly ground-breaking, but that’s where you come in! Download AJAX-S and test it out with your presentation material and needs, and style it up with your own design. Let me know how it goes!
Go view the updated demo now, ok?
Published on Sunday, November 13th, 2005
The demo and the zip file are updated with a small fix to avoid generating invalid nodes while still offering the possibility to use custom HTML in any page, and the ability to display escaped code for presentations.
Updated the drop down to support pressing the spacebar and enter keys when it has got focus, to navigate directly to that certain page.
Important update!
By popular request, AJAX-S now supports XHTML code in the XML file as well. No escaping, no nothing, just write as you usually do! I think now that it is a real contender to Eric Meyer’s S5!
For some reason unknown to me, the XSLT files failed to work in some Mozilla web browsers on some computers when they had an .xslt extension. I’ve changed the zip file so it now points to XSLT files with an .xml extension. If you’ve downloaded a previous version that didn’t work, please try the new one. Big thanks to Karl and especially Henrik Box for doing some extensive testing for me (Henrik wants to meet the girls behind girlspoke as a thanks… :-))!
Release 2!
After listening to the feedback I got, I’ve now done some major updates to AJAX-S. It now supports incremental rendering, non-JavaScript users and also offers a printable version. Go check the updated demo.
Changed the JavaScript detect for support for the XSLTProcessor object so it asks users that lack that support if they want to go to the printable page instead.
Added check to scroll the current incremental step into view if it wasn’t visible.
Updated with a different look for active increment, past increment and coming increment, and a setting if one wants the first or last increment to be selected when backing from an upcoming page.
Updated with a different look for active increment, past increment and coming increment, and a setting if one wants the first or last increment to be selected when backing from an upcoming page.
Updated with a fix for two glitches in the keyboard navigation.
Add-on available as of September 7th, 2006
An add-on for AJAX-S has been developed, to automatically show/hide the footer of the slides.
I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless.
The idea came to me because I wanted a lightweight slideshow based on HTML, CSS and JavaScript, but I also wanted to separate the data of each page from the actual code that presents it. Therefore, I decided to move the data into an XML file and then use AJAX to retrieve it. The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to).
Naturally, one of my inspirations for creating a HTML-based slideshow are from Eric Meyer and his S5. However, I wanted to take it one notch further, to make it more flexible and also usable for people with no HTML knowledge whatsoever. Another motivating factor was to just transform the data for the current page, as opposed to creating all the HTML needed for all the pages when the page is initially loaded. A leaner end user experience, basically.
It only works in IE 6 and Mozilla-based web browsers as of now. This is because of the need to do on the fly transformations on the client, which means the necessary support for ActiveXObject or XSLTProcessor has to be there. I think Opera 9 will support XSLTProcessor and probably some upcoming version of Safari too, so more widespread support in the future is very likely.
A freaky thing, which I hope is only a very unimportant detail, is that when I run it here at my host provider, I have to use the xml instead of the xslt one. However, most likely a hosting issue only.
But enough of that now. Download AJAX-S or view the demo of AJAX-S. Please let me know what you think, and if there’s any major error in the code. Not a requirement at all, but if you use it and like it, I would appreciate getting credit for it.
Published on Tuesday, November 1st, 2005
Since I just redesigned this web site, I decided to be part of the CSS Reboot. Please go there and vote on this design, and what you think about it. I won’t ask you to give it a good grade, even though I’d be happy for it! Just vote with your conscience.
Also, make sure you also find inspiration in a lot of the other beautiful web sites presented there!
