Z-index Blocking

What it is

If you have worked with absolutely positioned elements then you should be familiar with z-index. Z-index is a CSS property that allows you to stack elements much like layers in Photoshop. This can quickly get confusing if you have no structural base to work from. Deciding what elements supersede other elements and how your website displays important information can be a cumbersome task and one that if not handled properly can cost you a lot of time and money in bug fixes later on.

Z-index blocking is a simple way to help you quickly organize and debug site issues that are related to improper stacking.

Lets use primary navigation as an example. If you have a hover menu then you want that menu to display overtop your main content. If you randomly set that to 500 and then later need a modal window that has an error message display and you set that to 450 the modal will display below the primary navigation and will look like a visual glitch.

With z-index blocking you assign spectrums with a range of 100 blocks in each range. You then assign labels to each spectrum and that will help you quickly understand where to place elements.

How to use it

I have built a basic example using 0-1000 as my global spectrum that I them break down into 10 sub-spectrums.

901-1000 – Error Message Windows (if modal)
801-900 – Modal Windows
701-800 – Primary Navigation
601-700 – Page Based Error Messaging
501-600 – Open
401-500 – Open
301-400 – Open
201-300 – Open
101-200 – Promotional/Advertising
1-100 – General Content

Conclusion

This is still a new concept but one that I think will help in the long run. It’s always important to plan early and test often.

jQuery’s .delegate()

This weekend I saw a really good talk by John Resig on the .delegate() function in jQuery. It allows you to apply one event to the parent element rather than applying multiple functions to several children elements.  This can be very useful for a number of reasons.  Traditionally I’ve used the .bind() method for adding events to my code, but .delegate() gives you the ability to listen to new elements added to the page.  This has be very helpful for projects that are more ajax based where I have new elements created at run time.  I’m no longer setting and resetting events!

The Javascript

In the example provided in the jQuery documentation they use a case where you would have multiple table cells nested within a table element.  The beauty of this is you apply the event one time rather than once for each child node.

$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

If you look at my CSS3 Chessboard example this would be a great way to add the drag/drop support and also save me from looping through all my elements.  I’m still working with the function and trying to do some speed tests to see how much this can save on performance.  If you have any tips post them in the comments.

CSS3 Chess Board

Notice: I have gotten a few requests to use this code in personal projects. My short answer is ABSOLUTELY! Please use this code however you need to and if you can figure out a way to link back to this site that doesn’t make your project look silly then please do. Enjoy!

I was browsing the web today and found something exciting.  I noticed that there are unicode characters for chess pieces.  Always looking for ways to play with CSS3 I decided to try and build a chess board using my new best friend :nth-child and some unicode characters.

The Characters:

♔ = ♔
♕ = ♕
♖ = ♖
♗ = ♗
♘ = ♘
♙ = ♙
♚ = ♚
♛ = ♛
♜ = ♜
♝ = ♝
♞ = ♞
♟ = ♟

I always get excited when I find cool characters to play with and these are no different.  Now that I had all the pieces I needed I started to build out the chess board.

The HTML:

First I created a quick table to hold all the chess cells and then added my chess pieces as anchors so I could add some fun drag/drop support.

<table id="chess_board" cellpadding="0" cellspacing="0">
	<tr>
		<td id="A8"><a href="#" class="rook black">&#9820;</a></td>
		<td id="B8"><a href="#" class="night black">&#9822;</a></td>
		<td id="C8"><a href="#" class="bishop black">&#9821;</a></td>
		<td id="D8"><a href="#" class="king black">&#9819;</a></td>
		<td id="E8"><a href="#" class="queen black">&#9818;</a></td>
		<td id="F8"><a href="#" class="bishop black">&#9821;</a></td>
		<td id="G8"><a href="#" class="night black">&#9822;</a></td>
		<td id="H8"><a href="#" class="rook black">&#9820;</a></td>
	</tr>
	<tr>
		<td id="A7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="B7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="C7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="D7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="E7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="F7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="G7"><a href="#" class="pawn black">&#9823;</a></td>
		<td id="H7"><a href="#" class="pawn black">&#9823;</a></td>
	</tr>
	<tr>
		<td id="A6"></td>
		<td id="B6"></td>
		<td id="C6"></td>
		<td id="D6"></td>
		<td id="E6"></td>
		<td id="F6"></td>
		<td id="G6"></td>
		<td id="H6"></td>
	</tr>
	<tr>
		<td id="A5"></td>
		<td id="B5"></td>
		<td id="C5"></td>
		<td id="D5"></td>
		<td id="E5"></td>
		<td id="F5"></td>
		<td id="G5"></td>
		<td id="H5"></td>
	</tr>
	<tr>
		<td id="A4"></td>
		<td id="B4"></td>
		<td id="C4"></td>
		<td id="D4"></td>
		<td id="E4"></td>
		<td id="F4"></td>
		<td id="G4"></td>
		<td id="H4"></td>
	</tr>
	<tr>
		<td id="A3"></td>
		<td id="B3"></td>
		<td id="C3"></td>
		<td id="D3"></td>
		<td id="E3"></td>
		<td id="F3"></td>
		<td id="G3"></td>
		<td id="H3"></td>
	</tr>
	<tr>
		<td id="A2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="B2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="C2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="D2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="E2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="F2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="G2"><a href="#" class="pawn white">&#9817;</a></td>
		<td id="H2"><a href="#" class="pawn white">&#9817;</a></td>
	</tr>
	<tr>
		<td id="A1"><a href="#" class="rook white">&#9814;</a></td>
		<td id="B1"><a href="#" class="night white">&#9816;</a></td>
		<td id="C1"><a href="#" class="bishop white">&#9815;</a></td>
		<td id="D1"><a href="#" class="king white">&#9813;</a></td>
		<td id="E1"><a href="#" class="wife white">&#9812;</a></td>
		<td id="F1"><a href="#" class="bishop white">&#9815;</a></td>
		<td id="G1"><a href="#" class="night white">&#9816;</a></td>
		<td id="H1"><a href="#" class="rook white">&#9814;</a></td>
	</tr>
</table>

The CSS:

a {
	color:#000;
	display:block;
	font-size:60px;
	height:80px;
	position:relative;
	text-decoration:none;
	text-shadow:0 1px #fff;
	width:80px;
}
#chess_board { border:5px solid #333; }
#chess_board td {
	background:#fff;
	background:-moz-linear-gradient(top, #fff, #eee);
	background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
	box-shadow:inset 0 0 0 1px #fff;
	-moz-box-shadow:inset 0 0 0 1px #fff;
	-webkit-box-shadow:inset 0 0 0 1px #fff;
	height:80px;
	text-align:center;
	vertical-align:middle;
	width:80px;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
	background:#ccc;
	background:-moz-linear-gradient(top, #ccc, #eee);
	background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
	box-shadow:inset 0 0 10px rgba(0,0,0,.4);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}

I started by using some CSS3 gradients, which I recently posted about, but the exciting thing here is the really cool use of the :nth-child pseudo selector. At first I just used the :nth-child(odd) on the table cell, but that created an evenly distributed zebra stripe effect. I was able to flip it and reverse it nth-child style by applying the reverse on the table row.

#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd)

What this gives me is the staggered tiling of the rows.  From there I added some box-shadow properties to make the darker tiles seem depressed and the white tiles I added a 1px inset white shadow to act as a highlight.

I can not say enough about box-shadow, text-shadow and gradients.

Going to the jQuery Conference

Next weekend I’ll be going to my first conference and it will be in Mountain View, CA! Needless to say I’m pretty excited. You can count on a lot of random tweeting from the event and hopefully some interviews with a few of the speakers. Worst case I’ll be writing a review as a sort of postmortem.

If you are also going to the conference hit me up and we’ll grab a beer!

@sethaldridge on twitter.

CSS3 Gradients!

I’ve been doing a lot of work lately with CSS3 and all that it offers. Gradients have really been fun to work with but can be a little confusing at first if you are unfamiliar with them. This is mostly due to the fact that not all browsers support them and you have to work a little voodoo magic to get them to look the way you want.

The more I work with them the more I like them. Today I’m going to focus on the basics and how you can quickly start working with CSS3 Gradients.

Cross browser support

The first and most important thing to think about when delving into the new world of CSS3 is making sure you provide a consistent user experience from browser to browser. I’ve argued that the majority of your users will never notice, meaning a user who uses IE7 probably doesn’t often use Firefox or Chrome, but to me cross browser support is like a puzzle and one that I love to work on.

On a side note if you use IE at your office and run Windows feel free to install Firefox because it doesn’t write to your registry and therefor will more than likely pass your companies IT securities. Do this at your own risk. It’s always good to check with your corporate IT policy before installing anything, but as they say it’s easier to ask for forgiveness than permission. :)

The CSS

To start we will create a basic gradient that will fill the body and act as our background.

body {
	/* IE and none awesome browser support */
	background:url(path/to/image.jpg) 0 0 repeat-x;
	/* Firefox support */
	background:-moz-linear-gradient(top, #ccc, #eee);
	/* Chrome/Safari support */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));
}

In the above example I specify background 3 times. The first is a standard CSS2.1 use where we display an image. This will be displayed to anyone using a legacy browser.

Mozilla (Firefox)

The second example is for Mozilla Firefox and is by far the easiest to use:

background:-moz-linear-gradient(top, #ccc, #eee);

The first thing to note is how you reference the gradient.

-moz-linear-gradient();

With Firefox you specify that the gradient will be linear, meaning from one point to another in a straight line.  If you are familiar with javascript then this surprisingly starts to look like a function — which only occurred to me recently as I’ve learned more about Javascript and PHP style languages, but I’m slower than most people.

The next part specifies the “top” property meaning we are starting our first color from the top and moving downward.  From there we specify our starting color and ending color.  In our example our starting color is “#ccc” and our ending color is “#eee”.

Webkit (Chrome/Safari)

The third example is for Webkit based browsers.  This typically covers Google Chrome, Safari, and Mobile Safari.

background:-webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#eee));

The Webkit version is a little more complex, but arguably gives you more fine control over the gradient position.

-webkit-gradient();

You should notice that calling the style is different than the Firefox version in that you specify “linear” as a parameter rather than in the name.  After specifying which type of gradient you want you then list out the points “Left Top” and “Right Bottom”. Similar to the firefox version you next specify the “from()” color and “to()” color.

In Closing

I have really enjoyed playing with gradients on the web, and while they aren’t supported in earlier version of modern browsers or IE, it’s always a good idea to get familiar with these new concepts. If there is one thing I’ve learned it is always important to get ahead of new information and not be struggling to pick it up when it’s in demand.

I’ll make sure to go deeper into this topic in the future so keep checking back for updates.  Also, if there is something specific you are interested in learning let me know in the comments.