Archive for the ‘CSS’ Category

CSS Gradients Support in WebKit

Tuesday, April 15th, 2008

WebKit, the development version of Apple’s Safari web browser now supports another advanced CSS feature, which keeps blowing it way ahead of the competition…

Competition?

For more info on the subject, visit Surfin’ Safari Blog.

The Highly Extensible CSS interface

Thursday, April 3rd, 2008

There are tutorials and there are Tutorials coming from great web authors like Cameron Moll. The Highly Extensible CSS interface is a great collection of resources divided into four distinct parts, which guide you into creating a neat and sophisticated web page. Each part provides you with a working online demo, downloadable files, and links to articles and books related to each step of the tutorial.

  • Part one builds a resolution-dependent page layout and demonstrates the use or a reset style sheet.
  • Part two demos the use of CSS selectors and dives into the realm of scripting and adds some neat effects using the jquery library.
  • Part three covers the integration of ajax technology and starts up with a shout-out on resolution dependence.
  • The fourth and last part in this series is about testing for extensibility with 8 benchmarks to thoroughly bulletproof your site.

Overall this is a carefully written Tutorial worth spending time on. Thumbs up!

Development Diary: 4 Tips on Working With Fluid Layouts

Wednesday, March 12th, 2008

Recently at my daily job I had the opportunity to work on a 100% fluid layout for a project management web application. During the process of cutting it up in XHTML and CSS, I learned a lot and definitely had a lot of fun moments while making it backwards-compatible with IE6. This article is a collection of insightful ideas and those moments I collected through the development of the project.

(more…)

5 CSS Tips to Make IE (You) Happy

Tuesday, December 25th, 2007

If I could, I’d give you a special present this christmas - I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks - as does IE on Windows - so I can only offer to share with you a couple of CSS tips to ease the pain of working with that piece of crappy software.
(more…)

The Miserable Future Of The Web is Hot!

Monday, December 17th, 2007

It seems the future of web innovation is a popular topic nowadays, as Alex Russel points out in his scortching hot “The W3C Cannot Save Us” Article. In the article, Alex pours down hot oil on standards working groups and incites browser vendors to stand out with new non-standard features as a means to get them recognized and standardized eventually.

Along those lines goes James Bennet with his elaborate essay The future of web standards, and I am pretty sure we are not over with the drama yet.

Now let us just cross our fingers and hope that all that stirring actually produces something edible in the foreseeable future.

CSS Tip #2 - Accessible Image Replacement Technique

Tuesday, December 11th, 2007

Sometimes you need to use fancy fonts to represent a title or name a section on your web site and the usual bunch of browser-available fonts won’t do, because it is too limited. Traditionally you would create a good looking image in a graphics program and include it into the code as an image and append an alt attribute to it containing the title itself. While this is probably the most straightforward way of doing it, it has several disadvantages:

  1. Images do not scale when you increase the text size
  2. With images disabled in the browser, the meaning of the graphics gets lost most of the time, the alt tag helps of course, but is often not enough.
  3. Somewhat related to the previous point, to the browser an image is just that — an image. It does not convey any information on what it represents, like for example, an html title element (h1, h2, h3, …) does.
  4. Graphics-based text is not searchable.
  5. Graphical text is not selectable.

(more…)

CSS Tip #1 - Avoiding Hacks With IE Conditional Comments

Thursday, December 6th, 2007

I am pretty sure that every web designer found himself stuck with one or more of Internet Explorer’s annoying bugs and usually he ended up using css hacks to isolate the problem(s). Well, I believe hacks should be used with caution, if used at all, since you never know what adverse effects it may have on your web site with future browser updates.

Fortunately IE developers provided us with a neat solution to this problem with conditional comments. Just what are conditional comments? Basically they are common html comments with an extended syntax. They are completely transparent to all non-IE browsers, so they validate and are much more future-proof than hacks will ever be.

(more…)