Archive for the ‘CSS’ Category

h1

Super easy zebra-striped tables using CSS selectors

October 16, 2013

I read about this trick in an article in the October 2013 issue of Australian Personal Computer (‘Powerful styling with CSS selectors’ by John Allsopp, p98-100) and thought I’d give it a try.

Wow! Super simple! Much better and cleaner than using JavaScript or coding each table row with an odd/even class.

The result

Here’s the result (ignore the ugly colors — they were just for testing the code):

zebra_tables01 The CSS

Here’s the code in my test CSS file that created the differently colored rows for odd and even rows (yes, I comment my code, especially where I can’t figure out what a color is by the hex value):

zebra_tables02

How simple and elegant is that! Basically just two lines of CSS and you’re done. Of course, substitute your own colors.

One caveat: If you have a TH row at the top of the table, it gets ‘counted’ as Row 1 (an odd row), so the color striping is ‘out’ by one.

The HTML

And here’s the bare bones HTML code I used for my test file:

zebra_tables03

Thanks for the article, John!

(John’s article has more on how this all works, and how to assign different column colors using math in the CSS, but for this post I just wanted to share the simplicity of the doing ‘zebra’ striped tables with CSS.)

h1

Test fonts before adding them to your website’s CSS

September 30, 2010

There are many font testers around that show you what a font will look like before you apply it to your website, but I think that Font Tester is one of the easiest to use.

You enter the parameters for the font and can see the example text change immediately to match your selections.

Once you’re happy with what you’ve chosen, you click Get CSS Code and a new window opens that contains the CSS for the selections you made, gives you the option of setting the HTML element to which it will apply, allows you to name your own class or ID, and shows the HTML of how that CSS class/ID etc. should be written.

Neat. And useful for any web designer who doesn’t already have such a tool in the HTML editor they use. Oh, and it’s free to use!

[Links last checked September 2010]

h1

Browser support for HTML5 and CSS3

June 23, 2010

As HTML5 and CSS3 support grows, you might need to know which browsers support the various new features.

While there are many tables that give this information in text form (see http://caniuse.com/ for an example), some of you might find that a graphic explains it better.

The screen shot below is from http://html5readiness.com/ — when you go to that website, hover over the radiating points to see which feature is support by the various browsers; the screen shot shows that none of the Internet Explorer (IE) versions support HTML5 Forms:

See also:

[Links last checked June 2010]

h1

Practising what you preach

April 27, 2010

Bottom line: If you’re going to write articles and create a website all about the user experience (UX), especially the UX of websites, then at least make the site usable and readable for as many users as possible.

One of my RSS feeds displayed an article from the 52 Weeks of UX website. The problem: I could hardly read the article — the image on the left took up much of the space, and the text column on the right was not fluid, i.e. it didn’t reflow the text as I resized the browser window.

I thought the problem was with my feed reader, so I opened the page in Firefox. Same deal. The right side was cut off. I have dual 19″ monitors rotated into portrait mode, but I still had to stretch the browser window a long way across the two monitors to read the article’s text without using the horizontal scroll bar.

Next I checked the code, looking for a link to the CSS file. And to my absolute surprise, I found that the CSS was incorporated directly into the HTML page. That may be because this is a blog-style website. So next I checked the almost unreadable CSS, finally finding the culprit — a fixed 525 px width for articles (.entry-content div, in case you go looking).

This site would be even worse on a small form factor device, such as a cell phone. That fixed width is the killer.

BTW, I also noticed a typo in the keywords — that’ll make it hard for some search engines to find…

[Links last checked April 2010]

h1

Opera Web Standards Curriculum

March 9, 2010

Over the past couple of years, the Opera browser people have created a course in HTML, CSS and web standards. All 40+ ‘lessons’ are freely available online from: http://www.opera.com/company/education/curriculum/

(On a personal note, two of the articles were written by my friend and fellow technical writer, Frank Palinkas, who now resides in Norway where he works for Opera.)

[Link last checked March 2010]

h1

Working with RGBA colors in CSS3

February 17, 2010

Drew McLellan’s article — Working with RGBA colour — on the 24 Ways website, describes how to use the opacity settings available in CSS3 to set transparency on various colored elements.

It seems you can only use these with RGB colors, not Hex values, so you’ll need to convert your hex values to RGB values if you want to take advantage of this attribute. Most graphics software will display both, so you shouldn’t need to get any other software. However, if you don’t want to open up your graphics software every time you need to grab the RGB values, there are some simple ‘on top’ tools that let you do this, such as ColorPix, which I mentioned on this blog back in March 2009.

That link to the article again: http://24ways.org/2009/working-with-rgba-colour

[Links last checked January 2010]

h1

Still supporting multiple versions of IE?

November 5, 2009

If you still have to support multiple versions of Internet Explorer, then you’ll want to take a look at this Smashing Magazine article about how IE 6, 7 and 8 treat various elements of CSS: http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

And for those who scoff at the idea of anyone still using IE6, I’m currently working for a large global corporate where they’ve only *just* changed from IE6 to IE7. And some people there are still on IE6.

[Links last checked November 2009]