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.
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?
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.
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.
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…
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
.
This script has been tested to work in the following web browsers:
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
}
Lightbox feature added September 15th 2006.
Select specific tag add-on added September 21th 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.
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!
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:
Please give me piece of mind! Maybe I should just use table layouts and some extensive DOM scripting; at least that works.
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.
First, we developed layouts based on pixels. Along came accessibility and scalability, and we started to specify our fonts with em
s 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 em
s, 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.
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.
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!
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:
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? 🙂
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.
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… :-))!
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.
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. 🙂
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!
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:
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. 🙂
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! 🙂
I want this web site to be an example of being accessible to everyone:
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.
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.
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?
Refrain from using CSS hacks as long as you can. If you need to do something to cover up for flaws in Internet Explorer’s rendering, please use conditional comments to only serve the different versions of Internet Explorer specific CSS, as I’ve stated for a long time.
For more information, read Markus Mielke’ post Call to action: The demise of CSS hacks and broken pages.
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:
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.
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:
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.
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:
em
or any other desirable unit.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.
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:
<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:
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.
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
min-width
/min-height
max-width
/max-height
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:
The Real Reason Microsoft Won’t Support CSS2 in IE7 by Dean Edwards.
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.
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!
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.
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.
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:
img
tag.img
elements are cached in most, if not all, major web browsers.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).
Vorsprung durch Webstandards has a nice collection where people declare their love to CSS. There’s also a short interview with yours truly there.
As always, Tommy keeps on writing interesting posts. Read his thoughts and information about line-height.
By popular request, I’ve set together a test page with many different ways of creating column layouts solely based on CSS. Go read it now! 🙂
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?