Archive for the ‘CSS’ Category

Progressive Enhacement

Wednesday, October 15th, 2008

Just read this blog post over at Learning jQuery. It is a tip on how to avoid ’style flashing’ on large and complex pages. Read it. Read it to get the explanation as to why just CSS cannot solve this problem. If you have been unfortunate enough to work with me, especially in a JS/design roll you will have heard me bitching about CSS in jQuery. I do not like when this is done. CSS is way better at CSS then jQuery. The benefits of apply the style is this global manner are huge.

  • Speed of CSS
  • <linked> files get cached
  • Your Javacript will be simpler, smaller, faster
  • If you are working with a team a designer can work on it without causing conflicts

And this does not just apply to jQuery either, any framework or script can (and should) utilize this technique. Keep in mind this is not a cure all for progressive enhancement. You still cannot go all willy nilly AJAX without an already working base system. Thanks for the great tip.

Posted in CSS, Developent, HTML, JavaScript, jQuery | Comments Off

Interesting CSS Hack – Imageless arrows.

Monday, April 21st, 2008

While trying to sort out a problem with overflows and floats for work, I came up with am interesting CSS hack. I created right and left pointing, right triangles in pure css.

Yay CSS Arrow

So it is pretty simple. Those two arrow are just divs with float left or right, 1px width, and 1px solid red borders. By embedding these divs into each other over and over again, each one grows larger to accommodate the 1px border of the next child, creating a right triangle. Then I put each in a different div to position them. I have not put too much into this so far, but see some neat uses right away.
I have not tested this in anything but Firefox 3 Beta 4. My guess is IE will totally freak out, but who know, I do not actually care to test it.

Posted in CSS, Firefox | 2 Comments »

Easy flow columns

Monday, February 4th, 2008

One of the big problems in web design I have seen is trying to lay out divs in columns. Here is a cool hint on making nice subdivided columns that flow with screen width changes.

 





x


x






x




x


x
x
x

x
x
x

The really nice thing about this is that you can just continue to nest these pairs into each other and get as many nice divisions as you want. Hope this is useful.

Tags: , , ,
Posted in CSS, HTML | Comments Off