Ractoon - Web Development and Design

7 CSS Tips to Reduce Development Time and Stress

ractoon — Wed, 08 Apr 2009 04:53:14 +0000

CSS is one of the first areas that aspiring web gurus encounter on their journey. It can prove to be a brutal test of dedication to the craft, browser quirks and compatibility issues can be enough to push one to a purely Flash based path. It’s not all bad though. Browsers continue to improve support with each iteration, and the web community has created solutions to fill in the gaps. Still, it’s good to be mindful of some of the lingering snags.

Below are seven things to keep in mind to reduce development time and stress when dealing with CSS.

1. Use a CSS Reset

Browsers have defaults for the basic HTML elements, and each browser is different. A reset will get them all on the same page. It’s best to use a targeted approach instead of something like:

* { margin: 0; padding: 0; }

The above has to parse through each element of the DOM and is rather inefficient. A couple of tried and true solutions include Eric Meyer’s Reset Reloaded and the YUI Reset CSS. With these if you need a specific default styling you can simply delete it from the reset code and continue on.

2. Standardize Font Sizes

A discussion on the various font units can be found at Max Design. Though the post is several years old the concepts still apply. This solution is assuming you will be using em units on your fonts. Percentages are used to set the default font size, then it’s all ems from there.

First we’ll set the font-size of the html element:

html { font-size: 100.01% }

The 0.01% on the end is for older version of the Opera browser that had some size inheritance glitches. Other browsers will simply round off to 100%.

body { font-size: 62.5%; }

Setting the body to 62.5% allows us to work with a 10px base size, much friendlier for ems ( default browser font-size is 16px – 62.5% of 16px is 10px ). It is also easier to visualize the sizes now. For example, to get a 12px font-size in paragraphs using ems:

p { font-size: 1.2em; }

3. Use a doctype

Declaring a doctype will improve the CSS support of your documents. Use it! Preferably the Strict doctype, but if you must, the Transitional type will do. A rundown of the pros and cons of each doctype was covered in a previous post. Paste one of these at the very top of your HTML:

Strict HTML Doctype:

Transitional HTML Doctype:

Strict XHTML Doctype:

Transitional XHTML Doctype:

4. IE6 Doubles Margins on Floats

One of many IE6 quirks is the doubling of margins on the floated side of the element. For example, if you have a container floating left with a left margin of 20px:

div.root-beer { float: left; margin-left: 20px; }

The margin applied would actually be 40px. To avoid this you can simply apply margins to the opposite side only, or use a separate stylesheet ( using IE conditional comments ) and divide the margin by two. More IE6 quirks and solutions can be viewed on this post by Kyle Neath.

5. Transparency in IE = Filters

Most browsers support the opacity attribute to modify the transparency of specified elements. IE requires use of browser specific filters:

div.make-me-transparent { filter: alpha(opacity=50); }

6. IE < 7 Does Not Support position: fixed

Ah, another IE < 7 bug. Positioning an element as fixed will act like position: absolute on browsers below version 7. Luckily market share of IE6 is decreasing in favor of more standards friendly browsers.

7. IE < 7 Does Not Support PNG Alpha Transparency

The PNG image format includes an alpha channel that allows for more flexible transparency compared to GIFs. Unfortunately IE6 doesn’t recognize the alpha channel by default. Workarounds exist in the form of JavaScript snippets such as the Unit PNG fix.

Comparing Mootools and jQuery Animation

ractoon — Fri, 27 Mar 2009 03:53:22 +0000

An early form of the new Ractoon site included Flash navigation to create the effect you now see up there. Although it was straightforward, and performed as desired, the idea of a Flash navigation worried me.

My main concern was that it was a bulky solution to get an effect that, although nice, was not necessary for the user experience. In addition, creating the various stages of degradation would require additional CSS and graphics that the majority would not ever see, but was necessary for those that would.

After awhile I realized the effect I was going for was not so complex. Some tweens, a little opacity and a couple graphics could accomplish the same goal using a JavaScript library such as Mootools or jQuery. This would also create a graceful degradation from JavaScript to CSS and finally HTML. I chose Mootools simply because I had used it before, and only after completing the site did I find that this saved me some headaches.

Shortly after starting development of the new navigation I ran into a wall – the effects weren’t clearing properly. It was around this time that Dave Shea posted an article on A List Apart titled: “CSS Sprites 2 – It’s JavaScript Time” which examined a solution using jQuery. Reading through his article helped me identify the problem with my script and continue on.

Now why did I continue using Mootools rather than copy/paste Dave’s elegant solution in jQuery? One of my criteria when switching from Flash to JavaScript was that it should perform identically. The Flash implementation used the Tweener library to create smooth fade effects that would resume if you took your cursor of the navigation item.

If you play with the demo menus at the top of the CSS Sprites 2 article ( particularly present on the sliding ones ), you’ll notice that if you mouseover and mouseout quickly the images begin to jerk around. It seemed like jQuery did not maintain the animation state between mouse events. The Mootools implementation, however, performed identically to the original Flash prototype.

A direct comparison between the article demo and a Mootools equivalent can be viewed here. gonchuki has even gone so far as to develop a Sprites2 class for Mootools to make future implementations easier.

This post is not meant to fuel the debate of which JavaScript library reigns supreme. But to illustrate that these libraries do differ, and may have strengths and weaknesses in areas that should be considered to choose the right tool for the job.

IE8 and Safari 4, the Next Wave

ractoon — Tue, 17 Mar 2009 04:15:19 +0000

The next step in browser evolution is almost here, and it’s bringing good news for developers!

As IE8 RC1 and Safari 4 Beta emerge on the scene it finally seems like web developers are getting some attention from all the major players. Both browsers are now offering developer tools that feature similar capabilities to Firebug, among other exciting improvements.

They also implement performance improvements for both JavaScript and HTML processing, and build upon the standards friendly trend that has been sweeping modern browsers, and easing the lives of developers.

Internet Explorer 8

Likely the most exciting news is how the IE development team has stepped up to try and offer a more standards aware browser.

One of the largest thorns in the side of modern development is the IE6 browser, due to differing interpretations for various elements, as well as lack of support for several features. Though IE7 brought many improvements, and converted some users, IE6 still remains the browser of choice for a not insignificant audience. Some have opted to disregard this audience, but others have not been so fortunate to have the option. Hopefully, with the release of IE8, this final lingering element will fade away, and developers can breath a collective sigh of relief.

Through the IE Blog the IE dev team has been interacting with the community leading up to the release, offering up tidbits of information and features here and there. It looks promising and I’m glad they have taken the time to listen to some of the grievances aired by the community.

It looks like we will still be needing conditional comments for some time to come, but at least steps are being taken in the right direction.

Safari 4

Not too much has changed for developers in Safari 4 beyond the addition of the developers toolkit and improved JavaScript and HTML performance. The new browser introduces cover flow to site history and bookmarks, tweaks tab functionality and placement, and adds a “Top Sites” section similar to the Opera implementation of Speed Dial. Also, when using Safari 4 on windows it will not look so out of place with the Mac OS X styling as it now adopts a native Windows theme.

CSS support remains top notch, and it’s good to see improved integration for Windows users.

The Future

The good news for developers is that it seems across the board browsers are adopting a more standards friendly approach in their development. CSS2, CSS3 and HTML 5 support is improved with each iteration and it seems just over the horizon where cross browser compatibility issues will be a thing of the past. We can only hope.

Resources

CSS browser support
IE8 developer tools
Safari 4 developer tools

The Great HTML Debate

ractoon — Tue, 10 Mar 2009 05:41:27 +0000

The original focus for this post was to discuss the advantages and disadvantages of validating your website. However, Jeff Atwood at Coding Horror has just recently visited this topic in a well thought out post – which I believe covers it nicely. Take a look at the comments as well for more points of discussion, including how a valid site may help with Google rankings.

Instead this post will be devoted to discussing the topics of XHTML vs. HTML, and Strict vs. Transitional doctypes.

A substantial portion of modern sites are built using the XHTML doctype. But beyond being the default doctype of many web IDEs, is there an advantage to using it?

The Differences

HTML is derived from SGML, while XHTML is dervied from both HTML and XML – resulting in a more structured language. This also produces the following differences from HTML:

Tag and attribute names must be written in lower case
Elements must be nested
Tags must be closed
Empty elements must be terminated
Attribute values must be quoted
Attribute value pairs must be expanded

What does this mean when creating sites?

Well, your documents may end up being well-formed ( if you create a valid XHTML document ), and the resulting code neater. Some argue that it will also become more future proof as XML becomes more prevalent.

For compatibility purposes the majority of XHTML websites are rendered using the HTML media type (text/html), as opposed to the official media type for XHTML (application/xhtml+xml). Even though many browsers are compatible with the application/xhtml+xml media type, IE is not. So since sites are not rendered as XML, what are we missing out on?

The ability to define a custom markup language, able to code documents more precisely
Better searching and navigation of documents with better structure and semantics
Namspaces
Faster parsing

Day to day web creators probably won’t even notice these missing from their product, though they seem nice. Also, the cleanliness and order that XML enforces can be implemented by an attentive coder into HTML.

Strict vs. Transitional

“This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.”
HTML 4 Document Type Definition

HTML and XHTML both offer the ability to code using a Strict or Transitional doctype ( Frameset as well, but we’ll focus on these two for today ). The Strict doctype enforces the separation of design and content that the introduction of CSS enabled. Transitional doctypes were introduced to ease legacy sites into the new age. The differences between the Transitional and Strict doctype for an XHTML page can be viewed here.

There are still a significant number of sites emerging that use the Transitional doctype. Large legacy systems may encounter problems shifting to the Strict doctype, but new sites should not encounter these problems. Of course some features that web creators may rely on, such as the target attribute for links, have been removed – workarounds do exist.

Now it may seem like more work to use a workaround when you can simply continue to use the Transitional doctype, however, using the Strict doctype does have its advantages. Due to the tighter restrictions placed on the coder, cross browser compatibility issues are reduced. This can often save time when creating sites that required cross browser compatibility. It will also reinforce the separation of design and content, allowing your site to be more flexible in the future, making redesigns and modifications far easier.

What’s next?

With new flavors of HTML on the horizon it will be interesting to see which direction the web will flow. The web is becoming more interactive and rich with media content pushing the boundaries everyday, but HTML will still play an important part – best to know what’s out there before the next wave hits.

Wabi-sabi Website Creation

ractoon — Tue, 03 Mar 2009 06:25:38 +0000

Wabi-sabi is the Japanese concept of beauty based around simplicity, modesty, and the natural process. This concept works well with the building of websites to keep the creator in the proper mindset for the online world.

It’s easy to get caught up when creating a website ( either designing or developing ) and forget to look beyond the tree into the forest. The details of a site can easily drive the focus of a project into minute aspects, which may not be necessary in the initial stages. Keeping the concepts below in mind will help in realizing the big picture for your site. Create the function and the form will follow.

Nothing Lasts

The web is one of the fastest moving platforms to build upon. Often it is more important to get something out there, than for it to be perfect initially. Even your own projects are likely to have a finite relevance or impact, before the next best thing comes along. In these cases it is key to focus on what you are bringing to the table, and sprinkle in the details as you go along. Features and technologies will come, go and improve – but your message should be timeless.

“It [wabi-sabi] nurtures all that is authentic by acknowledging three simple realities: nothing lasts, nothing is finished, and nothing is perfect.”

Richard R. Powell

Nothing is Finished

Every project is a work in progress, especially after it is released. In the real world you see the interactions of people and technologies that cannot be manufactured in testing. It is at this point that the most useful improvements can be realized and implemented.

Nothing is Perfect

Perfection is the goal, but good enough is the release date. Along the same vein as the above, with each project perfection should be the ultimate goal, but it is a moving target. Realize that it’s a process, and not a destination, and you’ll stay ahead of the game.

Maintaining Valid XHTML/HTML with Popups

ractoon — Mon, 09 Feb 2009 06:26:37 +0000

One feature that is not accepted as part of a valid XHTML/HTML document is a link that targets a specific window. This is unfortunate, since it is often desirable to have certain links open up in a new window so the user does not have to leave the site.

The sample solution will use Mootools, although any JavaScript library should have the same functionality in one form or another.

Any link that we want to open a new window we will add a rel=”ext” parameter to. For example:

Link to Google

For the JavaScript snippet we will simply need to parse the DOM for any object with a rel=”ext” parameter. In Mootools it would look something like:

$(document.body).getElements('a[rel=ext]').addEvent('click', function(e) {
e.stop();
window.open(this.href);
});

And it’s as simple as that. Valid XHTML/HTML code that degrades gracefully if JavaScript is disabled.

Site Launch

ractoon — Mon, 09 Feb 2009 03:17:53 +0000

After being gone so long, it is good to be back. The current site is the culmination of random sketches, floating ideas, and spare time.

The elemental theme is still intact, though refined. Each section represents one of the four ancient elements – water, fire, earth and air, and the corresponding season.

Enjoy your stay, and thanks for visiting!