CSS Globe | Web Standards Magazine

CSS do's and dont's Part 2- Markup

Tue, 24 Jun 2008 11:34:00 -0500

If you truly get into web standards you'll soon find out that the most important thing is - markup. A good, solid, well structured markup. Html, XTHML, tags, attributes, structure... That's what it's all about actually. We tie in the terms CSS and web standards. Term CSS has become almost a synonym for standards. I often use the term "css designer" or "css this", "css that" to quickly explain what methods and approach I am talking about. But the real truth is, CSS would mean NOTHING if your markup structure is wrong. Markup is the king.

Structuring a document

The key to web standards compliant document is it's structure. It must be meaningful and logical. Document should follow a certain flow and it must be readable and understandable without any css styling.
Most documents have different sections (navigation, main content, side content, copyright area, contact area etc.) User, human or non-human. should be able to understand those sections as well as sections importance from the first look at it. The most important section should be as high up in the flow as possible, but importance of a certain section is also defined with heading tags (h1, h2, h3, h4, h5, h6). In a way headings define documents structure.

Structural and Presentational Tags

In web standards world you often hear a syntagm "separating presentation from content". What does it mean? Basically it means that no html elements should exist for presentation purpose only. You should try to avoid having empty divs for drop shadows or something similar. Let all your markup has its structural meaning and exist as a logical part of a document.

Tag choices

There are many tags to choose from and you should embrace that variety. Don't rely on divs alone for container elements. Sometimes a simple paragraph with some child spans or ems is enough to get what you want. We all use ordered and unordered lists, but we also have another type of lists that I don't see used that often - definition list. DL is ideal in many cases because of it's "2-dimensional" structure. Also why not use ADDRESS tag for contact info that we place in a footer? Take a pick!

Validation

Validation has its importance in analyzing your code. But validating alone doesn't mean that your document is built according to standards. You can have entire document made of divs with class names. That would validate, but would it be meaningful? Not to everyone, and certainly not to search engines.

Do

pay extra attention to document's structure. It's the most important thing.
think semantics, use tags in a meaningful order, create a logical html "flow".
use variety of tags, choose appropriate one for a certain type of content.
well, practice... try to think outside the box in order to achieve certain effect.
try to use as few html elements as possible for the same design effect, you'll feel better about yourself.
compromise in terms of design. Well up to a certain point that is. Sometimes it's better not to use certain design effect and have cleaner markup.

Don't

think that if something is valid it is automatically web standards compliant.
overuse certain tags, like divs.
use presentational tags, or at least keep it to the minimum.
don't avoid using certain elements thinking that they are not "web standards" (yes, I am talking about tables).
compromise in terms of markup.

Easiest Tooltip and Image Preview Using jQuery

Thu, 08 May 2008 15:40:00 -0500

I love jQuery and the way it makes developer's life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can't deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.

Download all 3 tricks in a bundle

Features and Principle

What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Here are couple of examples where you can see this script in action.

Example 1: The Simplest jQuery Tooltip Ever

The script takes a title attribute of an A tag and place it inside the popup element.
Html looks like this:

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

View this script in action

Example 2: Image Preview Gallery

Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Html:

<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>

or if you want to use caption add a title attribute:

<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>

View this script in action

Example 3: Links With URL Preview

This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you'll need here is a small size screenshot of the target url. You'll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Like so:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

again, if you wish to use caption add a title attribute:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

View this script in action

Download all 3 tricks in a bundle

4 Uber Cool Css Techniques For Links

Thu, 24 Apr 2008 15:25:00 -0500

I thought of writing a series of tutorials for various link techniques. When I start writing I realized that they are pretty simple (yet effective :) ) and it might be better to have them summarized.
Links (A tags) are one of the most important elements on your document. There wouldn't be any navigation without it, would it :)? The main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.

Download link techniques

Pure Css Tooltip

To make this work you'll need markup like this:

<a href="#">Title <span>Tooltip</span></a>

Anchor is given position:relative and span is placed absolute and styled separately. We initially hide the span element and show it only when user hovers the link (using a:hover span selector).
Here's the css:

a{
	z-index:10;
	}
a:hover{
	position:relative;
	z-index:100;
	}			
a span{
	display:none;
	}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;			
	}

See this technique in action

Pure Css Image Gallery

In this trick we'll show large images when thumbnails are rolled over. We're using unordered list. In each list item we'll place an anchor eith two images, one thumbnail and one full size. Full size image is placed inside an span that we initially hide. When thumb is rolled over we set display block to hidden span and that way we display a large image.

Html structure looks like this:

<li>
	<a href="#">
		<img src="images/02_1s.jpg" alt="gallery thumbnail" />
		<span><img src="images/02_1.jpg" alt="gallery image" /></span>
	</a>
</li>

and css:

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
	}
ul#gallery{
	width:400px;
	height:375px;
	position:relative;
	background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
	}			
ul#gallery li{
	float:left;
	display:inline;
	margin-top:300px;
	}								
ul#gallery a span{
	display:none;
	}
ul#gallery a:hover{
	background:none;
	z-index:100;
	}	
ul#gallery a:hover span{
	position:absolute;
	width:400px;
	height:300px;
	float:left;
	top:0;
	left:0;
	display:block;
	}

See this technique in action

Pure Css Image Resizer

I once wrote about thumbnail resizing where image's visible area was resized. This trick will display larger image on mouse over and give an effect of real resized image. To achieve this we'll use similar set up as in previous example - two images, one small and one large, inside one anchor tag. Larger image is initially hidden, showed only on roll over. Since the large image is placed on top of the small one, it looks like the image has been scaled up.

Html:

<li>
	<a href="#">
		<em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>
		<span><img src="images/02_1m.jpg" alt="gallery image" /></span>
	</a>
</li>

Css:

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
	}
ul#gallery{
	margin:2em 0;
	}			
ul#gallery li{
	float:left;
	display:inline;
	margin-right:5px;
	}								
ul#gallery a{
	float:left;
	display:inline;
	position:relative;
	}	
ul#gallery a:hover{
	background:none;
	z-index:100;
	}	
ul#gallery a span{
	display:none;
	}
ul#gallery a:hover span{
	float:left;
	display:block;
	cursor:pointer;
	}
ul#gallery a:hover em{
	display:none;
	}				
ul#gallery a img{
	border:1px solid #999;
	padding:2px;
	background:#fff;
	}	
ul#gallery a:hover img{
	border:1px solid #000;
	}

See this technique in action

3D Button Effect

This is a simple effect of a button being pushed. We need an anchor with nested span. Top and left borders are "lightened" while right and bottom are "shaded". To add more shading we'll add right and bottom border to the span as well. On mouse over we invert the border colors. Changing borders will offset the nested span one pixel to the down and to the right.
Note, In my example I have used floated anchors to get desired height, but this can be done on inline anchors as well.

Html looks like this

<a href="#" class="button"><span>Roll over here</span></a>

and css

a.button{
	float:left;
	font-size:110%;
	font-weight:bold;				
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	color:#333;		
	width:auto;
	}	
a.button:hover{	
	border-top:1px solid #333;
	border-left:1px solid #333;
	border-right:1px solid #999;
	border-bottom:1px solid #999;	
	color:#333;					
	}	
a.button span{
	background:#d4d0c8 url(images/bg_btn.gif) repeat-x;			
	float:left;
	line-height:24px;
	height:24px;	
	padding:0 10px;							
	border-right:1px solid #777;
	border-bottom:1px solid #777;					
	}		
a.button:hover span{
	border:none;						
	border-top:1px solid #777;
	border-left:1px solid #777;		
	background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;	
	cursor:pointer;	
	}

See this technique in action

CSS do's and dont's Part 1: CSS Selecting

Thu, 10 Apr 2008 12:37:00 -0500

Css Globe is starting a series of lightweight articles named "CSS do's and don'ts". This series is aimed at pointing out some of the bad habits when it comes to css and web standards in general. We'll try to provide answers to some of the most common css questions.

Part 1: CSS Selecting

Selecting an element is the basis of the css styling process. If you can't target an element you can't style it, right? This article could help you to fix some of the errors you might have been doing and perhaps to answer some questions about what is the best way to use css selectors.

As you know, there are several types of css selectors. What we'll focus on is a practical use of some of them.

Classes & Id's

<p class="signature">...</p>
<ul id="nav">...</ul>

Don't use descriptive class names like "red", "blueDot" or "roundedTop". I wouldn't go even with class names like "left", "right" or "large". Why? Well, imagine that you coded 2 column site, one column named "left" and the other "right" and at one point you have to switch columns positions. Your client might not like your blue color scheme and wants it changed, you're stuck with button class="blueSmall"...
Class names should describe the meaning and purpose of the content not it's appearance. So instead of div id="left" add div class="main" or even class="primary".
Try to use same class name on various elements, in various situations. Names don't have to be attached to one type of element only. You can use class="first" on first menu item as well as on first paragraph in your content.
When deciding between using class name or id, try to determine if the element you're about to style is really unique. If so, use id. If it's not that unique use classes. That keeps you away from tons if ids used only for styling.

Multiple classes

<button class="image submit">

Multiple class names on single element can be a good way to optimize your css and avoid complex class names in your markup.
I often use class="image" for image replacement technique. That class definition contains global styling for image replacement. Then I add specifics in a different class where I describe what image to use, define the width etc.

Type Selectors

a color:#ff0;

I always use type selectors at the beginning of the stylesheet, to set or reset default styling of certain elements. I personally don't believe in the power of universal selector (unless used further down in hierarchy). If you're going to use resets, use proper ones, i.e. Eric Meyer's reset.

Descendant Selectors

Use these! When you get the hang of it you'll find out that they're so easier to work with then coming up with (and using) 100 class names for each section in the document. I often use something like #main p a to add link underline which I removed in the global reset.

Combinations

#main h2.title span

This type of selector allows you to be very precise in targeting an element.
The principle I use is: I try to determine the lowest container in hierarchy that has non-repeating elements. I add class name to the container and target the elements inside with type selectors similar to example above. If you have a H2 tag that you use for titles, and you have only one span inside it, there's really no need of adding a class name to that span. You can easily target it with combined selector shown above.

Cross browser and cross platform support

Some of the selectors are not supported by certain user agents, so you shouldn't rely on them. i.e, you can't rely on :first-child pseudo element for top rounded corners, when it's not supported in IE6. The bitter truth is that many of users out there still use IE6 and that's something e have to live with.

Summary

Do

When choosing use class names, use class names that describe content's meaning or purpose, not it's appearance.
Use few class names and use them on various elements.
Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
Use multiple class names on single element to optimize your css.
Use combined selectors and precisely target your element

Don't

Don't use descriptive class names like "red", "blueDot" etc.
Don't use complicated class names or id's like "sideIntroSecondaryContentTop". Use descendant selectors instead.
Don't use universal selector for resetting entire document.
Don't use browser dependent selectors.
Don't add unnecessary class names.

Easy Scroll: Accessible Content Scroller

Thu, 03 Apr 2008 09:42:00 -0500

It has been a while since I presented some unobtrusive (hopefully useful) JavaScript function. Recently I have been working on a project that demanded content scrolling, so instead of reaching out for some heavy unobtrusive solutions, I decided to write my own function. As I was developing it I kept simplifying it so I came down to what I am presenting today - Easy Scroll v1.0, an accessible, unobtrusive content scroller.
I am not using any JS libraries with Easy Scroll. Although I enjoy jQuery a lot, I believe that it is important to code in "regular" JS, just not to forget it :)
So, Easy Scroll is standalone, lightweight script that is very easily applicable.

Take a look at the demo | Download Easy Scroll v1.0

Features

Easy Scroll is capable of scrolling any type of content by using unobtrusive JavaScript. It has up and down scroll options and reset button that places your content in the default position.
It also features double speed. When buttons are rolled over, slow scrolling starts. When buttons are pressed, speed increases.

Ok, let's get it going

To start with Easy Scroll download the script, and link it to your document by placing this line of code inside the head tag:

<script type="text/javascript" src="easyscroll/easyscroll.js"></script>

You'll also need a div with custom id (default is "myContent"). Then you should put some content in it of course :)

<div id="myContent">
	<!--  YOUR CONTENT HERE -->
</div>

Believe it or not, as far as the markup is concerned, that's it!

The script takes it over from here.
It creates another div id="easyscroll" and places your content div inside and takes care of the absolute positioning, scroll buttons and scrolling.

Setting things up

You might want to set the variables in the JavaScript. When you open easyscroll.js you'll notice these variables in config area

var id = "myContent";

This id matches the one you have in your html file for content div. If you wish to change it, you must do it in both html and JavaScript

var nav = ["Scroll Up", "Scroll Down", "Reset"];

Text that appears inside of each scroll button.

var navId = ["btnUp", "btnDown", "btnReset"];

These are optional id's for scroll buttons in case you want to apply some specific CSS for each.

var speed = 5;

Movement speed. The larger the number the faster the scrolling will be.

var height = 200;

Desired height of the Easy Scroll area.

Use css to style the content area. Oh yes, buttons are rendered as unordered list. Use css to style those too :)