Posts in the "CSS" Category

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.

Continue reading

Upper- or lowercase hex codes in CSS?

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?

The answers to the “Looking for a good interface developer?” questions

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

Looking for a good interface developer? Here’s what to ask to make sure you’ve got the right person

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

IE 7 – is catching up good enough?

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

Lightbox feature added to JaS – JavaScript Slides

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

CSS shortcomings

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

The true meaning of CSS?

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

Get the rendered style of an element

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.

JaS – like your own mini-Flickr

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!

IE makes me want to stop using CSS

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.

CSS floating and clearing

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.

Posted in CSS

Web browser vendors are also responsible for accessibility

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.

Speaking performances

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!

AJAX-S, release 2!

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? 🙂

Proudly presenting AJAX-S!

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. 🙂

CSS Reboot Fall 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!

Posted in CSS

Redesign!

I’m sitting here; just sipping some nice red wine and eating chocolate, celebrating that the last seven days are over now. I’ve been working double shifts for about a week, doing my hours as a consultant daytime, and working on redesigning this web site nighttime.

So finally: redesign! And I wanted to get done with it as fast as possible, I couldn’t stand making a live redesign spread over a longer amount of time, like one of my friends does. There have been a number of reasons I wanted to create and implement a new design for this web site, and the factors and choices have mainly been these:

Write the code myself

When I launched robertnyman.com, I installed WordPress and looked around for themes written for it. My previous design was a theme designed by Shawn Grimes, that I tweaked a bit to personalize it. But with me ranting about how web sites should be developed, I ought to live up to what I preach at my own web site. You know, the shoemaker’s children and all…

Also, someone (in a jokingly way) teased me saying that I couldn’t create my own design. 🙂

The design

I wanted something that was really easy on the eyes, something that looked good and also being original to get some attention for that as well. All image material used here is from pictures I’ve taken myself. And since it’s an Easter Island theme, naturally there has to be an Easter egg; if you find and hold down a certain key combination, you will get to see a freaky picture of me! 🙂

Accessibility

I want this web site to be an example of being accessible to everyone:

  • With or without JavaScript enabled.
  • With or without CSS switched on/supported.
  • With a wider or narrower window.
  • With a smaller or larger text size setting in the visitor’s web browser.
  • With or without using a mouse.

Technology

Since I work full-time with web development and also have it as a hobby, this web site should be a showcase of how I think a web site should be. Therefore, the layout is elastic and works in most web browser window sizes. I also use AJAX for the search functionality, thus not requiring a post back of the whole page to see the search results.

But naturally, everything should downgrade well too. The search has a fall back that works without JavaScript and all JavaScripts used are unobtrusive, meaning that all events are applied externally from a JavaScript meaning. The effect of this is that no elements have any inline event handlers whatsoever.

It’s possible to easily navigate through the web site just using the keyboard, leaving out the dependency on using a mouse.

Something that will interest certain people out there, and definitely Anne van Kesteren, is that this web site is using strict HTML, not XHTML. The reasons? First, I’m tired of everyone using XHTML without knowing the reasons why. They just do it because their tool/-s deliver it, they’ve heard it’s cool etc.

Second, XHTML should be served as application/xhtml+xml. In my previous design, that was the case first, but since WordPress wasn’t fool-proof and I still wanted it to be user-friendly to write comments on my posts, this ended up in me having to check the web site all the time just to make sure that nothing bad had gotten through. I then went to using text/html with XHTML for that design, according to Appendix C, but knowing that my code should be valid so I could switch to application/xhtml whenever I wanted to, I hadn’t used anything intentionally that should break.

However, now I use innerHTML in my AJAX script and Google’s ads use document write; two things that don’t work with application/xhtml+xml. So, my decision to use plain old HTML is definitely thought through and a very deliberate one. Maybe some day this web site will use XHTML again, but only the future can tell.

Testing web standards

I’ve haven’t had access to an Apple computer during this whole design face. It has been coded using web standards code, well-tested CSS approaches and object detection in JavaScript. My testing in Firefox and Opera 8, two of the most standards-compliant web browsers out there, leads me to believe that it should work automatically in Safari too. Apple user? Please let me know!

 

So, get going now! Resize your web browser window, increase/decrease your text size setting, turn off using any CSS, try navigating using only your keyboard, turn off JavaScript and test it!

When that’s done, and your eyes have feasted on the new layout, please let me know what you think of it! 🙂

 

PS. Don’t miss the two new cool map functionalities; they can be found at the bottom of the left column. DS.

PS 2. A big thank you to Henrik Box for helping me evalute my design sketches. DS.

An IE/ordered list challenge

I came across a problem yesterday that I just couldn’t seem to solve, so I though it would be a challenge to you, my dear readers. The scenario is that I want to have an ordered list where the list items are floated. However, for some reason, IE refuses to show the numbers then.

When having such a list and the list items aren’t floated, the solution is to add padding to the ol element to see the numbers, but I don’t know how to solve it when I want them floated. I tried with position: relative, tricks like height: 1% to get the element to render correctly with the hasLayout problem etc, but it just doesn’t work!

The HTML code is extremely simple, so the problem doesn’t lie in there:


<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

Any ideas?

Better Control and Cost Savings with Style Sheets

Recently, ElektroPost, the company behind the Content Manamement System EPiServer, asked me to write an article to be part of their Expert Panel in their Usability section. It’s targeted at project managers, editors and web developers who don’t work full-time with web interfaces. The article is titled Better Control and Cost Savings with Style Sheets (Swedish version), and I’ve also decided to publish the full article below to take comments. A big thankya to Henrik Box and Jeroen Mulder for reading my first drafts and giving me valuable feedback. Also, a thank you to ElektroPost for professional proofreading.

Here goes:

 

When the Web first became available to the public, everything was in the markup language HTML: the content, the presentation and the interaction. Since then, we’ve seen the advent of content management systems, which offer editors the possibility to publish content on the Web without any previous coding knowledge. The content they produce is saved in a database and then dynamically generated into its corresponding page.

All this has helped the Web to grow enormously, but it has often resulted in controlled chaos. Many Web sites had to be rebuilt from scratch as soon as any changes were to be introduced or if any new Web browser was released. How can we change that scenario?

The next step now is to make sure that you separate your content from your design and the way you want your pages to look. Style sheets, also known as Cascading Style Sheets (CSS), have been around for some time, but their usage has grown most rapidly during the last two years. The general recommended approach to producing a Web site is to collect all visual presentation in one or several style sheets. For instance, there you specify:

  • all the colors that are used,
  • which font should be used, and if it should be scalable to cater to people with various sight disabilities,
  • images used for design purposes,
  • boundaries and placement of all elements used.
So What Are the Biggest Selling Points?

The style sheet is the central place where you control the look and feel of every page on your Web site. This leads to a consistency that greatly improves the usability for the end user. What this also means is that you don’t need to update every page if you want to change something in the layout; this is done in one place and it affects every page. This is one of the major reasons you should never apply things like padding, margins, widths, etc. in the HTML, as it results in you having to go through all the files to make any updates.

It is also a way to gain better control of how to adapt the layout to cover for different screen resolutions and different sizes of the end user’s Web browser window.
When it comes to increasing the performance of your Web site, you should be aware of the fact that the style sheet files get cached in the visitor’s Web browser. This means that they will only need to download it for the first page they visit on your Web site. From there on, the only data that will be sent to them for the following pages they visit is the HTML code. This is one of the really good reasons to move all the presentation from the HTML file.

This means, for an ordinary Web site, that by using style sheets, it is possible to save 25% in the data that needs to be sent to the visitor for their first page visit, and then up to 50% for the pages after that.

A good example of how to totally redesign an entire Web site through style sheets is css Zen Garden, where the HTML code is the same for every page, and the only thing changed is the style sheet file.

What Should You Keep in Mind?

The power of using style sheets for your layouts should be combined with semantically correct HTML code in your templates and correct elements in your content. The usage of heading elements for headings, paragraph elements for paragraphs of text and list elements for different listings such as menus etc., will result in:

  • Pages that are more accessible to everyone.
  • Better search-engine ranking by making it easier for them for understand the weight of the text you’ve used in your pages, and by not having an
    unnecessary clutter of presentational code mixed with the content.
  • Easier maintenance of page templates and page content by focusing solely on the content, instead of having to think of the presentation as well.
Conclusion

By using style sheets you will gain better control, achieve easier maintenance and increase performance while saving bandwidth. Together with correct semantic code, you will also reach a better search-engine ranking and automatically increase your Web site’s accessibility.

The struggles of having an elastic layout

For the moment, I’m working on a fairly big project where the interface design will be elastic. What do I mean by elastic? Basically, there are three ways one can choose to design the interface’s relation to the visitor’s resolution and web browser window size:

Fixed
The layout is fixed in pixels and won’t take any consideration to the resolution or the window size.
Fluid
The layout flows to fill the whole window, no matter how wide or narrow it is. This layout can be set in pixels, em or any other desirable unit.
Elastic
This is, in my opinion, the best one. It isn’t fixed, but it also stops from getting too wide for, for instance, wide-screen users. You can specify a maximum width and a minimum width and then you let it flow between those two values depending on window size. The units for this type can also be either one that suits best: pixels, em, percentages etc.

Since I want my font to be scalable, and consequently the width and height of some elements resizable to go with that, I’ve chosen to use the em unit for most cases. This is to make it work in the different versions of Internet Explorer in Windows, since they can’t handle user resizing of a pixel-based font (as opposed to Firefox, Opera and Safari, amongst others).

It’s really invigorating to create something that’s so scalable and flexible, and I really do believe this will help targeting more end users and will make the web site become more usable and accessible for them. All the people involved in the project who have seen my HTML prototypes have really liked it and they think it is a great approach.

But naturally, creating a this isn’t without gripes. My biggest annoyance is web browser bugs, where number one on that list is rounding errors. If I have, for instance, a background color on an element and the font is resized, some elements will have a different height in Firefox than in Internet Explorer. This is because the em unit calculates the elements’ boundaries depending on what fontsize is used, transforms it to pixels to render, and inevitably this leads to different rounding sums. Firefox definitely seems to be the worst at this.

The key to solving this is to find a certain unit where all (read: most) web browser seem to agree on the rounding for different sizes. So, for the moment, I’m on top of things and I really like the web site I’m working on. But it’s an everyday control task, to make sure that it’s consistent.

CSS constants

Last week I was asked by one of my colleauges what I think of something that is referred to as CSS constants. So, let me start with a couple of example solutions:

Shaun Inman‘s CSS Server-Side Constants
The way this is made possible is through pre-processing the file on the server through PHP (and adjusting some server settings), which then replaces the refererence to the constants in the CSS file with their actual value.
Chris Heilmann‘s CSS Constants
Chris’ solution is also PHP-based, and pretty similar to Shaun’s.
Using ASP/ASP.NET
Above solutions could easily be written in an ASP as well. Another simple option is to just serve the page as a server-side page:


<link rel="stylesheet" type="text/css" href="css/my-css.aspx" />

and then write out the values in the CSS file like this:


div#container{
	background: <%= backgroundColor %>;
}

So, what’s my opinion then? I think it shouldn’t be done that way; I think it ruins the idea of CSS being stand-alone and not dependant on server-side languages or server settings.

When it comes to customers using a CMS, I heard a suggestion that the editors should be able to set such variables with colors etc through an admin interface. From my experience, most editors don’t have the feel for using colors and fonts, they don’t understand the importance of a web site being consistent, they’re usually not trained in what effects it will have on usability and accessibility.

Then, you would say, just give the editor some fixed options when it comes to setting these constants. My response to that would be: just deliver some different CSS-based skins to the customer with the suitable fonts, colors and so on, and then the editor will have the option to choose between tested skins, not single colors and their likes.

Some web developer arguments, and my reply to them:

It’s so much work having to change the same value in so many places
Use an editing tool that supports find and replace, if that’s your biggest gripe.
It gives a much easier manageability to edit all these values in one place
I aggree with that, and I think, as does Eric Meyer, that constants in CSS is a good idea and that they should’ve already been in it. But I don’t think it should be done by the cost of having to use a certain server-side solution or a specific server type.
And also, in most cases where people ask for this, they don’t have the necessary knowledge of CSS and fail when it comes to using its potential and full cascading possibilities, and then start screaming for server-side solutions to cover up for their lack of stylesheet skills.

 

So, go crazy if you think it rocks your world. But I’ll advise people not to use it, until it’s a feature in CSS.

Posted in CSS

Explaining width and height

Many people have written about this, one way or the other, but I thought it was about time to explain how to handle width and height in CSS, and how it’s actually supposed to work.

There are three properties for width and height that allows you total control of the rendering, and their names are pretty self explanatory for how they work:

width/height
Sets the width/height of the element. It will be exactly this wide/high, no matter if its content fits or not.
min-width/min-height
Sets the minimum width/height of the element. It will be at least this wide/high, but will expand if its content requires it.
max-width/max-height
Sets the maximum width/height of the element. It will be as wide/high as its content needs, but never more than the set value.

Crystal clear, isn’t it? So is it that easy?

Of course not. Enter IE, who handles width/height as if it were min-width/min-height, and who doesn’t have any support for min-width/min-height or max-width/max-height.

What this means is that if you want the correct behavior in IE for width/height (i.e. a fixed size for an element, no matter what), or want to use max-width/max-height, you need to resort to one of these:

Dynamic expressions
Preferably used in an IE-specific stylesheet included with conditional comments, see RobLab’s CSS page‘s first item for more info.
JavaScript
You can either write the script yourself, or take a look at Dean Edward‘s IE 7 project (inevitably time for a name change now, right Dean? :-))

Related reading

The Real Reason Microsoft Won’t Support CSS2 in IE7 by Dean Edwards.

Lowercase your darlings

Personally, I’ve always disliked uppercase tags in the code. Uppercase characters in digital format is often perceived as screaming, and if that’s true, boy, have I’ve been screamed at by a lot of code I’ve seen. It looks bulky and feels like working with skyscrapers when doing a cut-and-paste operation, one expects the computer to start screaming from the effort.

Estethics aside, there’s also a good technical reason for not using uppercase tags: it’s not allowed in any flavor of XHTML. To quote the XHTML 1.0 specification:

XHTML documents must use lower case for all HTML element and attribute names

As a follow-up to this, if your XHTML/HTML is indeed lowercase, make sure that your tag-specific rules in your CSS is lowercase too. Otherwise, you might not get the behavior you expect (you will not get it to work with lowercase XHTML tags and uppercase references in your CSS, if it’s sent with the MIME type application/xhtml+xml).

So, if you like and use uppercase tags, please lowercase your darlings. For me, and for the future.

The most important CSS rule

I thought I’d share the CSS rule that’s most important to me (at least for the moment). Here goes:

*{
	margin: 0;
	padding: 0;
}

Why do I love it? Since the universal selector (*) applies to all elements in the web page, hence removing all unwanted margins and paddings and helps me getting rid of inconsistent space and rendering in different web browsers and platforms. From there on, I totally control how code will handle every aspect of space (well, almost, form elements are still hell…).

I think the first place where I saw it was Eric Meyer’s web site, but I’m not sure of who wrote it first.

So if you aren’t using it already, I really recommend trying it out!

Posted in CSS

RobLab – How to find out the Text Size setting in IE

If you’re reading this, you’re probably interested in making your CSS-controlled layouts em-based, to be able to adapt the font, width of elements etc to the text size setting the user has in his/her web browser.

A colleauge of mine recently had the problem that the customer of one of the web sites she had worked on got around ten e-mails per day from complaining web site visitors that they couldn’t read the text, since it was to small.
The text size was controlled using em.

After doing some investigation, she found out that all of the complaints were from people using IE that had their Text Size setting set to Smallest. This was probably due to the users having incidentally held down the Ctrl key while scrolling with the mouse wheel (which changes the text size in many web browsers and other programs).

And since most of the web site layouts out there use a px-based font, that IE doesn’t handle correctly when it comes to text resizing, this were the only web site where they saw this “error” occur.

So she asked me if there’s any way to find out the user’s Text Size setting, to optionally warn them and to serve them an alternate style sheet where the font would be a little bit increased. I pondered about this, and came up with a pretty basic JavaScript solution for finding out the Text Size setting.

RobLab addition – Dynamic column width without tables

I regularly express my opinions here about how things should be developed, and now I thought it was time to share something I recently created.

In my current project, I came across the need to have a dynamic column width, i.e. a minimum width but if the editors enter some content that would be wider than it is supposed to be (through their CMS“), it should react as a table does and dynamically resize itself and its sibling column.

Personally, I still wanted the control through CSS, therefore I created a CSS-based dynamic column width solution that I put in RobLab.

I also have a question: do you think it was worth it? Would you’ve done the same or resort to using tables?

 

PS. Thanks to Kristin VÃ¥gberg for being a good discussion partner while creating this. DS.

Is image replacement really worth it?

I’ve been wondering if image replacement and the promotion of it is really a good idea. But let’s start from the beginning: what is image replacement?

Image replacement is a common name for a technique to use images for headings and their likes from an external CSS file, as opposed to in the XHTML/HTML. The general approach is to hide the text content (one way or the other) of the element and instead show an image through CSS.

An example (Note: this is not the most sophisticated way to do it, but an easy one to get an overview of the basic idea):

HTML

<h1>
	<span>Some text...</span>
<h1>

CSS

h1{
	width: 138px;
	height: 40px;
	background:url(images/my-logo.png) no-repeat;
}

h1 span{
	display: none;
}

Many more alternatives/techniques can be found in Dave Shea‘s Revised Image Replacement.

There are some general arguments why to use image replacement, and I though I’d respond to them here:

You can add images for a rich typography or logo
Reply: You can do the same thing with an inline img tag.
Images referenced in the CSS file are cached
Reply: As far as I know, images referenced through inline img elements are cached in most, if not all, major web browsers.
Easier maintenance with a single file to edit
Reply: In pretty much every web site, the content is dynamically generated through ASP.NET, JSP, PHP or something similar. Then you just have a WebControl/include file witht the content of your header and the tag is still just in one file. And if you have a hard-coded site, basically any tool offers search and replace functionality to easily change the content of every file.
For accessibility reasons, it’s good to have a fallback text in the document
Reply: You get the same thing using the alt attribute on the img tag.

Another major reason for not using image replacement is that, to my knowledge, there’s still no way to handle the scenario where the user have a web browser setting with images off and CSS on, then they won’t see the text nor the image. There is, however, ways to use JavaScript-enhanced image replacement, but to me being dependant on JavaScript isn’t an option either.

So, use image replacement if you want to. I know I won’t (at least not until someone convinces me of any advantage of it over using an img tag).

Introducing RobLab

Today is the launch of my lab web site, RobLab (yes, it’s a corny name), where I will have code, tips and tricks for anyone to use. For the moment, it only has a few things and I don’t know with what frequency I’ll be adding stuff, but that totally depends on the reception it gets. I hope the web site will act as a resource to you, and will be of use.

Now, take a look, why don’t you?