NealGrosskopf.com - Geek Speak

Fix The Internet: Write You Own Custom Website CSS Rules With Stylish

Neal Grosskopf — Thu, 08 Oct 2009 22:17:00 -0500

For those familiar with Greasemonkey, a Firefox addon for writing custom Javascript on websites, Stylish alows you to write custom CSS for websites. Stylish makes it extremely easy to fix annoying websites (such as MySpace), hide advertisements and diagnose web design issues.

Fix The Internet(s)

One of best uses of Stylish is to override website's poor design choices. MySpace, a website that gives uneducated users control of the design is a great example of this. I spent roughly 2 minutes on the site looking for an example and had no trouble finding a couple.

Creating Custom CSS Rules

Stylish makes it really easy to fix a broken design. With a little CSS know-how you can fix MySpace and other offending sites by first clicking on the Stylish icon, then going to "write new style" and finally choosing whether you want to create a new rule for a single URL, domain or your own rule. I almost always pick domain to make the changes site-wide.

After making your choice, you're presented with an input box. For those familiar with CSS, simply add in whatever CSS you want, give it a name and click "save". Within the two curly brackets you can insert any CSS rules you want.

Pro Tips

This is a great chance to brush up on your CSS Selector Specificity skills since you'll need to give your selectors more weight than the current ones on the website. The easiest way to achieve this is to use the !important keyword like so:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("myspace.com") {
html, body { background-image: none !important; }
}

Another great tool to add to your arsenal is Firebug. With Firebug you can determine how to circumvent horrible designs by sifting through the design's stylesheet. Once you've determined what selector's properties are creating the ugliness it's easy to copy and paste that into to Stylish and add !important to the end.

Other Uses?

Another great use for Stylish is to re-enable functionality on websites. I've noticed some websites using pop-up DIVs to force users into registering. With Stylish, you can hide these annoyances and continue using the site without giving away your information:

In the screenshot above, the website imeem.com forces uses to register in order to listen to music for free. The CSS below hides the annoying DIV:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.imeem.com") {
.mask, .bd { display: none !important; }
}

HTML & CSS Diagnostics

Another excellent use of Stylish is CSS Diagnostics. If you're not familiar with CSS Diagnostics, they're basically CSS Selectors that highlight ugly parts of your HTML such as FONT element or the use of TABLE attributes such as BORDER, CELLSPACING etc.


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("example.com") {
font, table[cellspacing], table[border] { border: 1px solid red !important; }
}

Hide Advertisements

Another great use of Stylish is to hide ads on webpages. While I realize that the Firefox addon Adblock Plus already does this, occasionally it will miss an ad on website.

Notice how I hid the default Google search results ads above with a single selector below:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.google.com") {
#mbEnd { display: none !important; }
}

Conclusion

Stylish is a great tool for web designers and developers. Below are links to addons I mentioned in this article to get you started:

View Comments [5]

Everything You Need To Know About CSS Selector Specificity

Neal Grosskopf — Thu, 17 Sep 2009 20:54:00 -0500

There's an obscure topic of CSS that I think many people aren't aware of. It's called 'specificity'. I suppose it's not as glamorous as rounded corners, drop shadows or animations but it's still just as important in your day to day work as any other part of CSS.

So what is CSS specificity? It's a weighted value system for all of your selectors. Essentially, each piece of your selector has a value applied to it. This can be explained easiest in three separate groups: IDs, classes & elements. Perhaps one way to look at it is like a card games where face cards have a greater value than say, a 2,3, or 4.

IDs

IDs are the most powerful type of selector you can use. Each ID in your selector will contribute 100 points to the selector's total value. Another thing to remember is IDs should be unique so there's really no reason you should be using more than one ID in your selector, unless you're trying to give your selector a higher point value than another one.

The first example below has a point value of 100, while the second example has a point value of 300.


#content { }
#content #aside #caption { }

Classes

Your second most important type is the class selector. Unlike IDs classes can, and should be used multiple times in a single HTML document. Classes occupy the 10's place in our point value system. This means that every instance of a class in your selector is worth 10 points. This means that a single ID will trump a 9 class selector.

The two selectors below are of equal value. Notice how many classes were used compared to just a single ID, both which have a 100 point value.


#caption { }
.content-highlight .aside-type .float .bold .uppercase .quote .featured .etc .etc .etc { }

Elements

Last but least are elements. An element selector is more generic than IDs and classes. They have the widest range of focus of all selectors. Because of this, element selectors occupy the ones position. Element selectors have a value of 1 point each.

Again, both selectors below have the same point value. Notice how many elements were needed to equal a single class. Selectors inside the negation pseudo-class, :not(), are counted like any other, but the negation itself does not count as a pseudo-class.


.uppercase { }
html body div div blockquote span span span b i { }

Odds & Ends

As we all know the 3 groups of selectors above does not encompass everything. Attributes selectors, and pseudo-classes both have the same value as classes which is 10 points each. The universal selector "*" has no point value.

Real World Usage

Okay, so far I've shown you some absolutely terrible examples of this in use. Almost none of the selectors above should be seen in a production environment. Lets take a look at some real world examples. How the system works is each type is tallied up, and then concatenated together. So 1 ID + 1 Classes + 1 Element would equal 111 points. See below for some more examples from my own stylesheet.

CSS Selector Specificity Examples
Selector	IDs	Classes	Elements	Weight
#header h2	1	0	1	101
#content a[href$=".css"]	1	1	1	111
#content input[type="text"]:focus	1	2	1	121
.code li:before	0	2	1	21
#helper ul li a	1	0	3	103
.actions li:hover b	0	2	2	22
#content .comment:target	1	2	0	120
#content img.loading	1	1	1	111
table tr:nth-child(odd)	0	1	2	12

Why Is This !important

So now we know how to give our selectors a point value, so what? Why does this even matter? Specificity is extremely valuable if you're working on a website with multiple stylesheets. Perhaps it's a content management system that has a default stylesheet and your job is to overwrite its default values. The old MySpace layout is a great example where people would use specificity to modify their pages to their liking. Perhaps you're a beginner adding some new CSS to a 1000 line CSS file only to find your changes didn't change anything.

Finally I couldn't talk about specificity without mentioning "!important". !important can be applied to individual properties to give them a super-value, thus trumping any prior property references.


#content { color: black; }
html .content { color: #333 !important; }

Resources

CSS Specification: Calculating a selector's specificity

View Comments [6]

Identify The Age Of Your Word & PDF Files Using CSS & jQuery

Neal Grosskopf — Tue, 08 Sep 2009 21:49:00 -0500

Word & Acrobat

Learn how to display a "new" icon next to your Word and PDF files. Skip To Demo >>

A request that often pops up at my workplace is the ability to tag files as "new" when we add them to our websites. The sites that I develop are usually littered with PDFs and Word documents so this can be a daunting task to manage whether a file is "new" or not since there are hundreds of files on the site.

Ultimately what happened, is our .NET programmer added a field to the database for date which we enter in the last updated date and he does the logic server-side. That worked great for PDF and DOC files in the database but in reality, that only cover 50% of the files on our site.

CSS Only Solution?

My original idea was to solve this problem using only CSS. After all, CSS is my specialty. I was thinking around the lines of adding some metadata to my anchors like so:


<a href="august_2009_updates.pdf rel="2009-08-01">August Updates</a>

As you can see the above example is clearly time-sensitive. Normally what would happen is a month or two later, this file would be sitting on our site with the "new" icon still intact. My CSS only solution was to do something like this:


a[href^="2009-08"] { background: url(new.png) no-repeat left center; }

The problem with this is I don't have the ability to use variables or date-based logic in CSS so once it passes August, I'll need to update my CSS selector. PS I'm aware that I could use some sort of server-side solution serving CSS up via ASP or PHP and then use variables. I hate mixing server-side code with static files like CSS or Javascript so I avoided this.

Enter jQuery and CSS

Next, I created a jQuery plugin that tags files by date with a new icon. It can be called with a selector that will narrow the focus of the search. Some parameters to this plugin are what attribute to search (I used the rel attribute. The next parameter is the name of the class name that will be assigned. After that it takes a parameter for the number of days that have passed to determine if the link is "new" or not. Finally the last parameter is for debugging purposes.


$(document).ready(function(){
	$("#content a").newClass("rel","new",90,true);
});

JQuery Plugin

Below is the corresponding jQuery plugin I wrote:


(function($){
	$.fn.newClass = function(attr,classname,offset,debug){
		var now = new Date();
		var day = 1000*60*60*24;
				
		return this.each(function(i){		
			var old = new Date($(this).attr(attr));	
			var diff = Math.floor((now.getTime() - old.getTime()) / day);			
			if(diff < offset) $(this).addClass(classname);			
			if(debug) $(this).append(" - " + diff + " day(s)"); //testing
		});
	}
})(jQuery);

To see this in action view the demo >>

View Comments [0]

Easy Way To Get Your Twitter Followers Count/Custom Twitter Badge Using PHP

Neal Grosskopf — Mon, 24 Aug 2009 21:09:00 -0500

Custom Twitter Badge

An example of what can be accomplished by creating your own Twitter Badge.

So you're on Twitter now? Like back in high school, we all want to be popular on Twitter as well. Prove it by displaying your followers count with this simple PHP script.

One thing that annoys me with all third party web services is they feel the need to brand their widgets. I don't blame them for doing this but it deters me from ever using them. What usually results from this is I tinker around and figure out a way to get the data I need without all their ugly branding.

The Setup

First we'll need to use PHP's built-in curl function. This will grab the output of other web pages, files, etc. Note I lifted the script below from another website so feel free to correct me on it.


function curl($url)
{
	$ch = curl_init($url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch,CURLOPT_HEADER, 0);	
	curl_setopt($ch,CURLOPT_USERAGENT,"www.YOURDOMAIN.com");
	curl_setopt($ch,CURLOPT_TIMEOUT,10);	
	$data = curl_exec($ch);
	curl_close($ch);
	return $data;
}

Custom Twitter Badge Function

Next, we create the function that parses the curl output. This uses the Twitter API. Simply call the function with your own Twitter username and it will return the number of followers you have:


function GetTwitterFollowerCount($username)
{
	$twitter_followers = curl("http://twitter.com/statuses/user_timeline/".$username.".xml?count=1");
	$xml = new SimpleXmlElement($twitter_followers, LIBXML_NOCDATA);
	return $xml->status->user->followers_count;
}

echo GetTwitterFollowerCount("YourTwitterName");

Notes

Please take into consideration that you can only ping Twitter 150 times per hour. Because of this, it would be wise to create a text file and use it to cache your followers count. Also the function will only return a plain ol' number. Its up to your to think of a creative way to display this to your site's visitors. The more attractive you make it, the more likely your users will click it.

View Comments [9]

Converting A Site From Classic ASP To PHP: Some Things To Consider

Neal Grosskopf — Wed, 19 Aug 2009 12:37:37 -0500

Well, after a month of spending my evenings coding till the wee hours of the night, I've finished converting my website NealGrosskopf.com from Classic ASP to PHP. After going through this grueling ordeal I thought I'd write up a quick article detailing my experience and perhaps save a fellow web developer some time should they ever endeavor this process.

Learn The Basics

If you're not familiar with PHP like I was, I'd suggest you learn the basic syntax differences between ASP and PHP. I pretty much self taught myself PHP using the tutorial website Tizag. I feel like I'm a pretty competent ASP coder so learning the basics of PHP wasn't too hard for me. Here's a few observations I found.

Built In Functions

PHP seems to like ordering parameters in built in functions slightly different than ASP. For instance in ASP you have:
replace("Input String","Find","Replace With")
In PHP the order is slightly different as well as having a slightly different function name:
str_replace("Find","Replace With","Input String")
Some other examples of this in PHP are str_len (len in ASP), strpos (instr in ASP) and explode (split in ASP)
Parse Errors

Forgetting to add a semi-colon ';' at the end of your PHP line = 'white screen of death'

At least with my host's configuration (or possibly my own stupidity) parsing errors such as forgetting the semi-colon results in a very not-useful white, blank, empty PHP error page. This can make troubleshooting the error very, very hard.

Fortunately I found a solution to this. Portable XAMPP. I essentially ran web server locally which allowed me to test out my PHP pages (minus the My_SQL database). For whatever reason, my local copy did not give me the white screen of death and let me see the exact error message. This helped me find the error 10x faster. I suggest if you're starting out with PHP, download Portable XAMMP and tinker with it locally, for free!
Code Order

One problem that I ran into was the placement of my functions within my code. In ASP I could include files at the end of my page, and even have functions within these includes be called even before the code has reached that area of the script. I suspect ASP pre-compiles the functions ahead of time while PHP does not. My solution to this was to re-organize my code so that all the functions appeared first within my include structure.
Variable Scope, and isset()

Scope Another problem I ran into was variable scope. In Classic ASP I'd often something like this:
FirstName = "Neal" ... somefunction("Grosskopf") function somefunction(LastName) response.write FirstName & " " & LastName end function
In PHP this will not work unless you use the $GLOBALS[] array to your variable in the function like so:
$FirstName = "Neal"; ... somefunction("Grosskopf"); function somefunction($LastName) { $GLOBALS["FirstName"]; echo $FirstName . " " . $LastName; }
I'd also change global variables inside functions in Classic ASP. To fix this in PHP simply add the global keyword to the variable:
function somefunction() { global $FirstName"; $FirstName = "Some Other Name"; }
I'm sure these aren't good programming practices, but hey it works!

isset() In ASP you could do the following even if the variable has yet to be set:
if variable <> "" then 'do something end if
In PHP this is not acceptable. Instead you'll need to use a built in function called isset(). This basically checks to see if the variable has been set yet:
if(isset($variable)) { //do something }
This isn't a huge difference, but since I was using the ASP method quite a bit, I needed to re-learn the new way to accomplish this in PHP.
Redirects

Another common problem you'll run into when converting from ASP to PHP is redirects. In Classic ASP you could do a redirect using the following:
response.redirect("thank-you-page.asp")
In PHP if you need to use the header function
header("Location: thank-you-page.php");
Another thing to consider is if you place your header function further down your page, possibly after you've already output content to your page. If this happens then you'll need to use the output buffer, at the top of your page:
ob_start(); I'd also recommend saving your session data before you do a redirect in PHP like so: session_write_close();
Here's all the code at once:
ob_start(); //Some other code here session_write_close(); header("Location: thank-you-page.php");

Redirect Those Old ASP Pages To PHP

The great thing about switching to PHP is you now have the ability to use the much hailed .htaccess file. My very limited perception of this file is it acts as a gatekeeper between every file on your website and the end-user requesting the files. It allows you to intercept any request made to the server. One sweet rule I found for .htaccess is the ability to redirect my old ASP pages to their PHP equivalent:


RedirectMatch 301 /(.+)asp$ /$1php

Its sad but that one line takes care of it all for me. Google will now crawl my new PHP pages, and users with bookmarks to the old pages will still find them. It's almost too easy!

Final Thoughts

Those are just a few of the differences I've experienced between PHP and ASP. I'm sure there's thousands more. Overall I'm very happy with my new PHP website and I'm happy I've finally taken the time to switch.

Anyone else convert an ASP site to PHP before? How was your experience?

View Comments [9]

A New Method To Target Internet Explorer In Javascript

Neal Grosskopf — Tue, 14 Jul 2009 19:49:42 -0500

Preface: It's quite possible that I'm not the first to discover this. But I did come up with this idea without finding a prior example of it before.

I was working with JQuery at work last week and Internet Explorer was giving me some trouble, mainly due to it's sucky Javascript performance and some of it's flaky text+opacity issues. My solution to this was to remove animations from IE and change the element's CSS properties without an animation. I was now tasked with finding a way within Javascript to target IE.

An aside, I'm fully aware that IE's JScript engine contains a method at targeting IE using JScripts conditional comments, but I've never been too impressed with these because they only allow me to target JScript versions, and not individual IE builds.

Enter: CSS Conditional Comments

Being a seasoned CSS veteran of the web standards wars (ok kidding) I turned to what I know best...CSS Conditional Comments.

I've seen most people use Conditional Comments (CC) to target IE in CSS hacks, but I seldom see people serve IE anything other than stylesheets with this method. I think a few people forget that you can actually wrap CCs around any valid HTML elements (see PositionIsEverything for a sweet method of doing this).

CCs are pretty simple to use. They're pretty much HTML comment blocks that only IE recognizes. The example below will only show up to IE6 users.


<!--[if IE 6]>
Hello IE6!
<![endif]-->

We can also target previous browser releases with the following:


<!--[if lte IE 6]>
Hello IE6!
<![endif]-->

Enough Already! What About Javascript!

Using these same principles, we can wrap conditional comment blocks around our Javascript blocks. Then flag variables within these blocks to identify the browser as IE6, IE7 or plan ol' IE.


<script type="text/javascript">
//By default, flag browser as not IE to non IE browsers
var ie6 = false;
var ie = false;
</script>

<!--[if lte IE 6]>
<script type="text/javascript">
//Flag browser as IE in our conditional comment block
ie6 = true;
ie = true;
</script>
<![endif]-->

<script type="text/javascript">
if(ie6 == false)
{
	alert("You're cool, you're not using IE6");
} else {
	alert("Ahh! Why are you using IE6!?!?");
}
</script>

View Demo >>

Target All Versions of IE In Javascript

We could also target all versions of IE with the following code:


<script type="text/javascript">
var ie = false;
</script>

<!--[if IE]>
<script type="text/javascript">
ie = true;
</script>
<![endif]-->

<script type="text/javascript">
if(ie == false)
{
	alert("You're cool, you're not using IE");
} else {
	alert("Ahh! Why are you using IE!?!?");
}
</script>

Drawbacks

There are a few drawbacks to this method. First, the conditional comment code will all have to appear inline on each page its used. I suppose one could create an external .js file and wrap it with the conditional comments. Second, we'll have to account for all the versions of IE we want to target or at least use LTE/GTE to target IE6/IE7 and its previous versions.

View Comments [7]

Emulate C#'s AppendFormat Method In Javascript Or Classic ASP

Neal Grosskopf — Thu, 09 Jul 2009 07:03:53 -0500

Let me preface this article with the statement that I am by no means a 'good' C# programmer. I've used it a bit at work (we're currently transitioning to it) so I've seen it here and there. I know a fair amount about Classic ASP however, so when I noticed a neat little feature in C#/ASP.NET I wanted to see if I could mimic it in other languages.

AppendFormat Method

The method in C# is called AppendFormat. It belongs to the System.text namespace which contains the StringBuilder class and AppendFormat is a method of this. Here's the MSDN article if you'd like to find out more about it.

Old School Method

The neat thing about this method is it's an alternative to concatenation. Concatenation is basically the process of combining text and variables together like so:


var a = "lorem ipsum dolor"
var b = "adipiscing elit"
document.write(a + " sit amet consectetur " + b)

I think we're all pretty familiar with the code above. We're also probably familiar with some of the annoyances of the code above such as the fact that every time we combine text with a string variable, we need to start a quotation mark. Quotation marks are bothersome because sometimes (or rather often times in my case) we forget to properly close the ending quotation mark resulting in an error. More trouble can ensue when we have to start re-arranging variables and text within the concatenated string.

Another problem is I often forget to include the concatenation symbol in between my text and variables. This, if anything, is probably the number one mistake I make.

Emulation Using Javascript

As I reviewed my co-workers C# code, I felt that perhaps C# had a good point so I set out to emulate this in other languages.

First of all, below is the syntax we use for this alternative method. We use keyword itentifiers i.e. {NUMBER} to indicate an item should be placed in its spot. That number corresponds with the index of the array items on the right i.e NEAL, GROSSKOPF. The neat thing with this is we can easily move {0} arround without having to worry about closing the quotation marks and there is no need to use the concatenation symbol...ever!


AppendFormat("Lorem ipsum dolor sit {0} {1} amet, consectetur {0} adipiscing {0} elit.", ["NEAL", "GROSSKOPF"])

Below is the function I wrote to emulate this in Javascript. I pass the function an array, loop through it, and replace the placeholders with the array item in the same index.


<script type="text/javascript">
function AppendFormat(input,arr)
{
    for (i = 0; i < arr.length; i++)
    {
		while (input.indexOf("{"+i+"}") != -1)
		{
			input = input.replace("{"+i+"}", arr[i]);
		}
    }
    return input;
}

document.write(AppendFormat("Lorem ipsum dolor sit {0} {1} amet, consectetur {0} adipiscing {0} elit.", ["NEAL", "GROSSKOPF"]));
</script>

Easily Re-Arrange Items

The great thing about this, is we can easily re-arrange items simply by moving the placeholder around in the text block like so:


AppendFormat("Lorem ipsum dolor sit {1} {0} amet, consectetur {1} adipiscing {0} elit.", ["NEAL", "GROSSKOPF"]);

Classic ASP Variant

I also wanted to create the same function but in Classic ASP, my language of choice:


function AppendFormat(input,arr)   
    for i = 0 to ubound(arr)
        input = replace(input,"{" & i & "}",arr(i))
    next   
    AppendFormat = input
end function

response.Write AppendFormat("Lorem ipsum dolor sit {0} {1} amet, consectetur {1} adipiscing {1} elit.", array("NEAL","GROSSKOPF"))

As you can see, this is pretty much the basic princple that we used for the Javascript version.

Conclusion

I'm sure this article isn't as exciting as some of my others, and for all I know, most my readers are much better programmers than myself but I thought it was a cool idea so I wrote about it.

View Comments [4]

How To Create CSS Text/Font Gradients With CSS

Neal Grosskopf — Wed, 01 Jul 2009 20:04:44 -0500

Something that CSS is currently lacking is the ability to add gradients to our text blocks. Currently we can add drop shadows to text or change the color of it but not add gradients. I suspect that in the coming years this will be a new property but until then here is a method to do it.

HTML Setup

The HTML Setup is pretty simple. Just place an empty SPAN element inside your heading element:


<h3><span></span>Text Here</h3>

Using JQuery to Automatically Insert SPAN Elements

I think a few people might find the above code unsightly, so here's a method to leave the empty SPAN element out of your HTML and inject it via JQuery:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("h3").prepend("<span></span>")
});
</script>

CSS Setup

The most important part of this code is setting the H3 element's position to relative. I'd also recommend setting the line-height to the same height as the font-size used and also reseting the margins back to zero.


h3
{
font-size: 25px;
line-height: 25px;
margin: 0px;
position: relative; 
}

Next, we position the empty SPAN element absolute and give it a height and width. Using this SPAN we can overlay various background-images over the H3 element.


h3 span
{
display: block;
height: 26px;
position: absolute;
width: 100%;
}

Gradient Effect

The first effect I'll demonstrate is a simple gradient. To do this we use a simple white to transparent gradient image and set it as the SPAN element's background-image. We can then position the background-image higher or lower depending on how strong we want the effect to be.


h3 span { background: url(gradient-white.png) repeat-x left 0px; }

In the example above, the black transparent area represents the SPAN while the black border represents the bounds of the H3 element.

Demo

When viewing the demo, take your cursor and select the gradient text. This will give you a good understanding of how the gradient works -

View Demo >>

Gradient Effect With Hover

We can also apply a color change on hover with our gradient. Since the color change happens on the layer behind the gradient there is no additional CSS we must do other than change the H3's color when hovered.


h3 span { background: url(gradient-white.png) repeat-x left 0px; }
h3:hover { color: #990000; }

View Demo >>

Two Tone Effect

Another effect we can do is apply a two toned text color to our text. To do this we use a white rectangle with it's opacity lowered and then position it over our H3.


h3 span { background: url(dual-white.png) repeat-x left 0px; }

View Demo >>

Sliding Door Effect

Finally, my last effect uses JQuery to create an animation when the text is hovered. Using a little JQuery we can slide the SPAN's background-image up and down when hovered on giving it sort of a 'garage door' effect.


<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/backgroundPosition/jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("h3 span").hover(
		function () {
			$(this).stop().animate({backgroundPosition: "(0px -27px)"}, 400); 
		}, 
		function () {
			$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 400);
		}
	);
});
</script>

View Demo >>

Got any other effects that could be accomplished using a background-image? Share them below!

View Comments [1]

Firefox 3.5 Set To Be Released Tuesday. Here Are Some Exciting New CSS Features In 3.5

Neal Grosskopf — Sun, 28 Jun 2009 21:22:58 -0500

Firefox 3.5

Firefox 3.5 looks to have plenty of new features for web developers to play with. I'll go over some of new CSS features that are new to 3.5.

For much of my web career I've been an Internet Explorer stooge but when Firefox 3 came out last summer, I made the switch and never looked back. Firefox is just so heavily oriented to web developers and designers that it's hard to rationalize using any other browser. Sure, Opera and Safari have slightly better support but their lack of developer tools make me opt for Firefox.

Firefox 3.5, the latest version of the browser is set to be released this Tuesday. This intermediary release is probably aimed more at developers than end users and that's what excites me the most. After reviewing the 3.5 release notes I thought I'd point out a few of the new features that I'm most excited about.

@font-face Support

Since the inception of the web, we've been limited to about a dozen font types. With @font-face we're now able to choose from 1000's if not more. By embedding fonts our sites will be more accessible to people with screen readers, and it will also improve our search engine optimization by using pure text rather than images. This will also make our lives easier because we'll be able to change font properties via CSS rather than having to open up Photoshop or Fireworks to edit an image file.

Currently browsers using Webkit also support @font-face and Opera 10 will support it. Internet Explorer has it's own proprietary method.


@font-face
{
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

body { font-family: "Bitstream Vera Serif Bold", serif }

Box Shadow & Text Shadow

A personal favorite of mine is the box-shadow property. Creating drop shadows on the web can be pretty painful, especially when the size of the box may vary from page to page. With the new box shadow property we won't need to worry about that anymore. Safari also supports box-shadow while Opera and IE do not. Firefox 3.5 will also support text-shadow (with no -mox prefix). This means that Opera, Safari and Firefox all support this while IE, again has it's own proprietary method.


div {  -moz-box-shadow: #000 10px 5px 5px; }
h2 { text-shadow: #000 1px 1px 2px; }

CSS Transformations

Originally introduced by Safari/Webkit we now have the ability to use CSS Transformations. I haven't delved into this much but I have used CSS Transitions a few times on various projects which I wish they would have implemented instead.

New CSS Selectors

Probably the most important aspect of CSS is the ability to select elements. Firefox 3.5 gives us a few more tools to achieve this. Having used JQuery extensively for the past several months, I've found myself using almost all of these to circumvent browser's lack of support. With Firefox 3.5 we'll be able to natively use these selectors (and more):


/* Zebra Stripes */
tr:nth-child(odd) { background: #fff; }
tr:nth-child(even) { background: #eee }

/* Alternate Method for Zebra Stripes */
tr:nth-of-type(odd) { background: #fff; }
tr:nth-of-type(even) { background: #eee }

/* Last 5 LIs of a List */
li:nth-last-child(-n+5) { color: #ccc; }

/* Alternate Method */
li:nth-last-of-type(5) { color: #ccc; }

CSS Media Queries

Media queries allows web developers to target certain scenarios that end users may have. For instance in the example below I'm adjusting the width of my #content DIV if the end user is on a PDA and has a screen size smaller than 300px.


@media handheld and (max-width: 300px)
{
#content { width: 300px; }
}

You could also take this a step further and mine for information about your end users by testing the size of elements on your page:


<style type="text/css">
@media handheld and (max-width: 300px)
{
#content { width: 300px; }
}
</style>

<script type="text/javascript">
if ($(#content).width() = "300px")
{
//do something, i.e. email, write to text file etc.
}
</script>

Other New CSS Features

Here's a list of a few other CSS features I didn't mention above.

opacity (no longer -moz-opacity)
word-wrap
-moz-border-image
-moz-column-rule
-moz-column-rule-width
-moz-column-rule-style
-moz-column-rule-color

YouTube Hacking: How To Retrieve Video Screenshots From YouTube Videos

Neal Grosskopf — Wed, 10 Jun 2009 21:43:51 -0500

It is often useful to display a preview of an embedded YouTube video on your website rather than the long winded HTML object/embed code. Fortunately YouTube provides us with an undocumented way to retrieve video stills.

Each video has three separate stills that you can choose from after you upload the video. YouTube, now also support high definition videos and because of that, provides higher quality stills as well. Below I will run through all the various YouTube images that are available for each video.

The Setup

Below is a break down of the YouTube URL. For all of my examples I have chosen my new favorite YouTube video Leprechaun in Mobile, Alabama.

Breakdown Of URL
Domain	Folder	Video	Image
http://i.ytimg.com	/vi/	nda_OSWeyn8	default.jpg

The Default YouTube Image

YouTube's default video image, i.e. the image that the uploader has chosen, can be retrieved by using the default.jpg image. Its dimensions are 120px x 90px and its file size is 3.07KB. You may want to use this image when you want the exact image the original uploader intended.

Series Images 0 - 4

Next YouTube provides us with images 0.jpg, 1.jpg, 2.jpg & 3.jpg. These 4 images are basically the 4 images the uploader can chose from after uploading a video.

Image 0.jpg is larger, sized at 320px x 240px and its file size is 11.77KB.

Images 1, 2, 3 are smaller images sized at 130px x 97px.

High Quality Images

Next, YouTube provides us with what they label 'high quality' images. These are named hq1.jpg, hq2.jpg, hq3.jpg & finally hqdefault.jpg.

Images 1, & 3 are smaller images sized at 130px x 97px. Even those these are prefixed with 'hq' the images appear to be of the same quality that images 1, 2, & 3 were.

Image 2 is larger and sized at 480px x 360px. Its file size is 14.63KB. I'm not sure why this image is larger because it seems to break the pattern of the other images. It does appear to be the default image so perhaps that has something to do with it.

Finally, the hqdefault.jpg is the largest and highest quality of all the images. It is sized at 480px x 360px. Its file size is 14.63KB. I would recommend using this image as your primary image due to its quality.

Conclusion

You now probably know more than you ever wanted to know about the available images YouTube provides us for each video. Feel free to bookmark this article as you'll probably need to refer back to it someday while working on a project.

View Comments [8]

Quick & Easy Ways To Spice Up Your Web Site's Font Styling

Neal Grosskopf — Wed, 03 Jun 2009 21:41:27 -0500

One of the key elements of a good website design is the styling of the site's font. I think this is an area where many of the more 'mathematically inclined' web developers struggle. To help those out that are willing to take it, I'll show you how to take the default Times New Roman 16px font and make your design shine.

By default browsers will apply the following settings to your font out of the box:


body
{
color: #000000;
font-family: "Times New Roman";
font-size: 16px;
letter-spacing: 0px;
line-height: 18px;
text-align: left;
}

We're all familiar with the appearance of this font, and often times, are turned off by this font styling because of how common and boring it looks.

Gray is the New Black

First lets get rid of that default and obnoxious font color #000000. I recommend you choose a value between #888888 and #333333 for your website's font color. If you need help picking a color I recommend using Eric Meyer's Color Blend Tool. I would also like to point out that using a color lighter than #888888 will not have enough contrast on a white background and will be difficult for your users to read. On the flip side, a color darker than #333333 is starting to get into that loud and obnoxious range again. I personally like to choose #555555.


body
{
color: #555555;
}

Times New What?

Next lets 'can' Times New Roman for a different, less 'plain' font. A side note, Times New Roman is a great font, and there's a time and place for it, but being the browser default font, I tend to shy away from using it too often.

Font types can also be broke into two different groups. Serif and Sans Serif. Sans serifs fonts do not have the small tails after letters. An example of a sans serif font is Arial. An example of a serif font is Times New Roman. Below is a list of some of the more content-useful fonts to chose from when designing a website. Notice how some of the fonts take up more space than others:

Sans Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ - Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ - Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ - Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZ - Trebuchet MS

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ - Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ - Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ - Palatino Linotype
ABCDEFGHIJKLMNOPQRSTUVWXYZ - Lucida Sans

Of the choices above, I find Arial to be the easiest on the eyes. If you want to be a bit edgier you can chose fonts 2-4 which are used a bit less than the others.

Need help? Check out my extremely useful Font Comparison Page to see which font you like best.

Size Matters

By default browsers will assign your font a font-size of 16px. While 16px is big enough that most users will find it comfortable to read, 12px is really the internet's de facto font-size. Visit some of your favorite websites and you'll discover that almost all of them use 12px as the main content's font-size. It's perfectly ok to use other font sizes, but for your main content I'd stick with 12px - 14px.


body
{
font-size: 12px;
}

Give Your Font Some Breathing Room With Line-Height

Probably the single most easy CSS change you can make to your font, with the biggest impact, is to adjust your line-height. Line-Height is the spacing between the lines of text on your web pages. By default browsers set this to 18px. At 18px you will have about 9px of space between your top and bottom line.

Line Height Comparison

The first block of text has the default line-height of 18px while the second block has a line-height of 27px. Notice how the second block of text is easier to read.

Straighten Out With Text-Align: Justify

My final recommendation is to experiment with the CSS property text-align, specifically with the justify value. By default, browsers will assign the value of text-align: left; to your text. Using the value of 'justify' we can make all of our blocks of text have straight edges on the left and right.

Text Align Comparison

The first block has text-align: left; while the second block has text-align: justify; I find that the justified text helps reinforce the grid layout in your web design.

Putting It All Together

Below is a summary of everything I've just went through. Also check out my step by step results page.


body
{
color: #555555;
font-family: Arial;
font-size: 12px;
line-height: 27px;
text-align: justify;
}

View the metamorphoses from Times New Roman to my example above. >>

View Comments [3]

Browser Comparison of Available Print Area Width

Neal Grosskopf — Tue, 26 May 2009 18:35:04 -0500

This article is a companion article to my "Browser Comparision of Available Screen Width When Using 1024x768" which I think many people found useful. The other day at work a co-worker complained to me that a webpage was getting cropped off when printing it. I then had to tinker with the width of a few different elements on the page to get it to fit. After finishing that I began to wonder, what the max-width is that can be used various browsers when printing.

I ran a quick test of all the browsers I had installed to see at what width, would the browser's print preview window crop off my fixed width DIV. Here are the results I found:

Browser Comparision of Available Print Area Width
Browser	Max-Width	Default Settings
Firefox 3 @ 100%	686px	Shrink To Fit
Safari 4	718px	> 718px Triggers Shrink To Fit
Opera 9.5 @ 100%	730px	80% & Shrink To Fit
IE8 @ 100%	670px	Shrink To Fit
IE7 @ 100%	670px	Shrink To Fit
IE6 @ 100%	670px	75%

Notes On My Results

You'll notice that many browser's default settings are set to 'shrink to fit'. This may solve the problem of extra-wide content when printing most of the time. I also decided, that when given the option, I would set the resize option to 100% to make all my browsers equal.

Also when I ran the test, I did not modify the page's margins which I'm sure would have an affect on the results. Safari also had an interesting feature that triggered shrink to fit when the content grew beyong it's max-width. I thought this was a pretty useful feature compared to most the other browsers.

Other results we can see, is Internet Explorer has stayed tried and true throughout it's past three versions sticking with 670px each time as it's max-width. Opera provides the most real-estate at 730px.

Conclusion

When writing print stylesheets knowing that the lowest common deneminator is Internet Explorer at 670px will help you when creating print stylesheets.

View Comments [1]

Gallery of Yahoo.com's Year Long Home Page Redesign

Neal Grosskopf — Wed, 13 May 2009 22:42:45 -0500

Yahoo! Redesign

Yahoo! has been in the midst of redesigning their home page since September of 2008. Their last redesign was in August of 2006.

I've been using Yahoo! since 1996, and over the years I've become quite attached to my beloved Yahoo! even when users started to ditch them for other websites. So, it's natural for me to get excited when Yahoo! gives me a sneak peak at their new home page (usually located at m.www.yahoo.com).

One reason that I still like Yahoo! is I am primarily a designer...not a developer. As a designer, I'm drawn to websites that have more design elements and style. This is one reason why I prefer Yahoo! to Google. I feel that Yahoo! has a bit more personality compared to Google. For more on that see - http://blog.fawny.org/2009/03/19/google-antidesign/. Still, I won't deny that Google has a superior search engine.

What confuses me, is I have been randomly getting these 'sneak peaks' since last November. I'm starting to wonder if Yahoo! will ever release their newly improved home page. Every time I get a sneak peak I take a screenshot to compare to my last screenshot. Now that I have a couple different screenshots I thought I'd share them with the rest of the world.

Yahoo! Today

First, let's check out the current home page of the site, which has been their design since August of 2006.

November 2nd, 2008 Yahoo! Redesign

Here is the first screenshot I have from my collection. The site's main structure is very similar to the current site, but the major difference is the background gradient and the dark blue bar on the left of the page. The right hand applications area has also be redesigned.

April 6th, 2009 Yahoo! Redesign

Yahoo's next iteration is once again a small evolution from the November design, except they softened the look of the their blue left navigation bar, which I think was a good decision. You'll also notice this version of the redesign is much wider than the previous version. I checked my screenshot and it's roughly 1165px wide. This seems like an odd width to choose unless of course, they are using a min-width/max-width layout.

Another interesting change in this version is the choice of Times New Roman/Georgia as a main font type. Times New Roman is rarely used since it's usually the browser's default font choice.

May 13th, 2009 Yahoo! Redesign

Then today, I opened up IE6 to test something out and was once again, given a sneak peak at another iteration of Yahoo's redesigned home page. This version is radically different than April's and November's, but looks much closer to their current design. They also decided to loose the dark gradient background in favor of a softer gradient. Also, the right hand applications area has been removed in favor of a 'top searches' content area. The applications were then moved to the left bar. I think this version will be an easier transition for people favoring their current design.

Wrap Up

It's interesting to see the various interations of Yahoo's redesign process. It almost appears they are coming full circle back to their current design with a few modifications.

What do you think of Yahoo's redesigned website?

View Comments [1]

HTML Vs. BODY Element: What's the Difference?

Neal Grosskopf — Sun, 10 May 2009 20:02:04 -0500

I've always been interested in the subtle differences between the HTML and BODY elements when it comes to CSS. Many designers reference the two elements interchangeably in their stylesheets. Often times it's perfectly ok to place properties in either one, but there are certain instances where you'll want to chose one over the other.

Default Rendering of HTML and BODY Elements

By default, all major browsers assign the BODY element a margin of 8px. We often see this in CSS resets, setting the margin back to 0px. As far as I'm aware there is no other default CSS applied to either elements other than your usual font-size, color etc. The HTML element, in comparison, has a margin set to 0px. Also neither of the two elements have padding, which is often seen in CSS resets as well.


html { margin: 0px; }
body { margin: 8px; }

Overflow/Scrollbars

Another thing I like to place in my stylesheets is some CSS to always display browser scrollbars. I do this because it annoys me when I browse to one page that has a lot of content and then browse to another page that has little content, and my main content DIV is bouncing back and forth. In order to fix this you need to place 'overflow-y: scroll;' on your HTML element. If this property is assigned to the BODY element, nothing happens and it will not work, thus another big difference between the two elements.


html { overflow-y: scroll; }

Scrollbar Colors: HTML or BODY?

In Internet Explorer the scrollbar color properties need to be applied to the HTML element rather than the BODY element in order to work. Safari has also added scrollbar styling in their recent build, so we'll have to see how they implemented this as well.


html
{
scrollbar-face-color: #000; 
scrollbar-highlight-color: #ccc; 
scrollbar-3dlight-color: #999; 
scrollbar-darkshadow-color: #666; 
scrollbar-shadow-color: #555; 
scrollbar-arrow-color: #fff; 
scrollbar-track-color: #ddd;
}

Background Images and Colors

Another major difference between the HTML element and the BODY element is background-colors and background-images. The BODY element mimics the default behavior of a DIV element. It's height relies on the content within it. The HTML element on the other hand, spans the entire viewport regardless of the content within it. If you set a background-image to the BODY element and position it bottom, it may not have the desired effect you intended, while the HTML element's background-image will fall at the bottom of the screen regardless of the content within it.

In Conclusion

Probably the biggest take-away from this article would be background-images. I almost always use both the HTML and BODY elements to apply background-images to, and it's good to remember that the BODY element may not always hit the 'bottom' of the viewport.

Know of any other differences? Share your thoughts below...

View Comments [4]

CSS Template Layouts: A Simpler CSS Layout System, Now Possible With JQuery

Neal Grosskopf — Wed, 06 May 2009 22:07:45 -0500

Skip To Demos:

Updated May 6th: For the longest time I've been waiting for browsers to support the CSS Template Layout module. Today, I found out that Alexis Deveria has given the web community the gift we've all been waiting for. Using JQuery and a plugin we can now take full advantage of the CSS Template Layout Module.

Historically, we've used containers and floats to create our websites but with this method we may possibly be able to make that method history. With template layouts we can finally have source order independence that has plagued the CSS Display: Table, HTML TABLEs and CSS Float techniques. We can also ignore absolute position methods which I've always disliked. Finally the template layout method also handles equal column heights right out of the box.

Recap: Template Layout Gives Us

Pure source order independence
Equal height columns
No need to overflow containers
No need for hacks
Advanced grid layouts
Easy source arrangement for different media types i.e print, mobile

A Quick Overview

Template layout works like a grid. We're all familiar with the dozens of CSS libraries that attempt to give designers a grid to work with. I personally despise CSS libraries but that's another story. With template layout we can create all of those complex grids that designers dreamed up with HTML TABLEs, but using only CSS and semantic HTML instead.

Step 1: Importing JQuery and the Plugin

The very first thing we'll need to do is import JQuery and the JQuery Template Layout Plugin


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://css-template-layout.googlecode.com/files/jquery.tpl_layout1.1.1.js"></script>

Next we'll need to initialize the plugin using JQuery's document.ready event:


$(document).ready(function()
{
$.setTemplateLayout()
});

HTML Setup

The HTML setup can be approached in the same fashion we would approach the old float based layout system. For the sake of this tutorial I've named my DIVs a, b, c, d, e rather than header, nav, content, aside and footer.


<div id="template">
	<div id="a"></div> 
	<div id="b"></div> 
	<div id="c"></div> 
	<div id="d"></div> 
	<div id="e"></div>
</div>

CSS Setup

We start like we would with any other layout system by centering our main #template DIV and giving it a width. I chose 1000px simply because it's easier to do math with.


#template
{
margin: auto;
width: 1000px;
}

Position: What?; Think Grid Placeholders

Next we need to assign each of our child DIVs a position name. Again for the sake of this demo I've given each DIV the same position name as it's ID name:


#a { position: a; }
#b { position: b; }
#c { position: c; }
#d { position: d; }
#e { position: e; }

Think of each position name like a variable that will be used to place each DIV in a grid. My code example above would probably look like this in a production environment:


#header { position: a; }
#nav { position: b; }
#content { position: c; }
#aside { position: d; }
#footer { position: e; }

::Slot() Pseudo Class

Template Layouts introduces a new CSS pseudo class called ::slot(). Think of slots like a content placeholder. Only certain CSS properties can be applied to slots such as background colors and images.


#template::slot(a) { background: #eee; }
#template::slot(b) { background: #ddd; }
#template::slot(c) { background: #ccc; }
#template::slot(d) { background: #bbb; }
#template::slot(e) { background: #aaa; }

Display: Grid:

Using our placeholder names we can arrange our DIVs in an equal height grid system using the following syntax:


#template { display: "abcde"; }

View demo of this code >>

We could also easily re-arrange our DIVs by simply ordering the placeholder names like so:


#template { display: "edcba"; }

View demo of this code >>

Note that what we just did is not possible using Sitepoint's ~~evil~~ display: table; method, and is not easily possible using the standard float system. It is possible with absolute positioned elements but once again we're trying to avoid that.

Real World Example of Template Layouts

Until now, I've only shown you the basics of template layouts. I've found that new programming techniques often make little sense until put into a real-world perspective. Lets create a two column template layout:


#template
{
display:
"aa" /150px
"bc"
"dd"
250px 750px
;
}

View demo of this code >>

A break down of that code:

Line 4 states that the "a" DIV should occupy 2 columns in our grid row and /150px states that it should have a height of 150px.
Line 5 states that the "b" DIV should occupy 1 slot in the left row column and "c" should occupy the right column in row 2.
Line 6 states that the "d" DIV should occupy 2 columns
Line 7 states that the first column should be 250px wide and the second column 750px wide

Easy 3 Column Layout With CSS

We can easily take our same HTML structure and make it a three column layout with the template layout system:


#template
{
display: 
"aaa" /150px
"bcd"
"eee"
* 500px *
;
}

View demo of this code >>

A break down of that code:

Line 4 states that the "a" DIV occupies 3 slots in our grid and have a height of 150px; This is our #header.
Line 5 states that the "b" DIV occupies slot 1, of row 2, the "c" DIV occupies slot 2 of row 2 and finally the "d" DIV occupies slot 3 of row 2. "b" is our #nav, "c" is our #content and "d" is our #aside.
Line 6 states that the "e" DIV occupies 3 slows of row 3. This DIV acts as our #footer.
Line 7 states that both column 1 and column 3 have a variable width (250px) while the second column has a width of 500px consuming the rest of the available space.

Easily Re-Arrange Columns

The best thing about this approach is we can quickly re-arrange our content in the grid. This might come in handy when displaying content to different media types such as @print and @handheld. Take a look at how easy we could switch our columns around:


#template
{
display: 
"aaa" /150px
"dcb"
"eee"
* 500px *
;
}

View demo of this code >>

Easily Re-Arrange Rows

If ever needed, we could also flip our #header and #footer DIVs like so:


#template
{
display: 
"eee" /150px
"dcb"
"aaa"
* 500px *
;
}

View demo of this code >>

Argument Against Using This?

I can think of a few reasons not to use this:

Requires Javascript & JQuery
Layout not triggered until the DOM is loaded
Not thoroughly tested in all browsers (IE6 specifically)
Syntax has a high learning curve at first
Currently no browsers (that I'm aware of) support this natively

Should You Use This?

Absolutely! While I'm unsure if this is ready for large & complicated designs I think as a community we should start testing this new approach out which is currently in the working draft stage of the W3C spec process.

Love it? Hate it? Speak your mind below...

View Comments [19]

Create a JQuery Content Slider Using Pure CSS

Neal Grosskopf — Wed, 22 Apr 2009 22:09:43 -0500

I've been working with JQuery a lot lately, both at work and at home, although my primary specialty is CSS, usually complex CSS. I have so far created several 'JQuery Sliders' as I like to call them. Then the thought occurred to me, could a JQuery Slider be created using only CSS?

View Slider Example

If you want to skip the article and go straight to the final product view my CSS Only JQuery Emulation Slider Demo.

Note: you will need to use Safari in order to view the transition effect and I highly recommend that you do.

My Goals Of This Proof Of Concept

My mission was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

HTML Structure

The HTML in it's most basic form consists of a container DIV and a simple unordered list. I also used P elements which could probably be removed depending on hardcore you want to be about extra elements. I did this because I needed to style the LIs differently than the text contained within the LIs such as floating, width etc.


<div id="slider">
  
	<ul>
		<li>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</li> 
		<li>
			<p>Sed ut est. Curabitur molestie. Cras pellentesque.</p>
		</li> 
		<li>
			<p>Maecenas consequat consequat lectus.</p> 
		</li> 
		<li>
			<p>In vel lorem quis turpis auctor volutpat.</p>
		</li>
	</ul>

</div>

I use the following CSS to style the above elements.


#slider, ul, li { height: 300px; }
#slider, li { position: relative; width: 500px; }

#slider
{
margin: auto;
overflow: hidden;
padding: 10px;
}

li { float: left; }

Positioning Our Slider

Next we need to set our UL which is the container of the slider's LIs. It needs a width set on it which is the width of the LIs X the total number of LIs. If each LI were 500px wide and we had 4 LIs then the total width would be 2000px. I should note that you will also most likely have a margin between each of the LIs which this would need to be accounted for in the above.


ul
{
list-style-type: none;
position: absolute;
left: 0px;
top: 0px;
width: 2000px;
}

Next we move our UL element left baed on what LI we want to show in our slider. Look at the example below to see how I accomplish this. Each color block represents a LI. The block positioned over the black area represents the current visible LI.

Adding Persistence To Our Slider With :Target

By far the most complicated part of this proof-of-concept is accomplishing all of this without the assistance of variables that JavaScript allows us to use. CSS variables are not yet a true reality (although one could argue that CSS Counters are a form of CSS Variables). To overcome this obstacle I used the CSS3 :target pseudo selector. The :target pseudo selector works with URL fragments like below:


<a href="#page-anchor">go to page anchor</a>
<div id="page-anchor"></div>

Using CSS we can actually style the page-anchor DIV if our page's URL contains #page-anchor like so: http://www.example.com/page.html#page-anchor.


#page-anchor:target { background: red; }

Using :Target To Mimic Variables & Selectively Show Content

Since I do not have variables available to use I need to use the URL fragments to selectively show my LEFT and RIGHT arrows. If I didn't do this I wouldn't know which LI slide to move to next and I wouldn't know which slide LI I need to show. This would quickly defeat my ul { left: -500px } method. What I did was wrap my entire slider in 4 :target hooks which simulate variables:


<!-- :target hooks -->
<div id="a1">
<div id="a2">
<div id="a3">
<div id="a4">

<!-- 1 -->
<a href="#a2" class="up2 default">2</a>
<a href="#a2" class="up2">2</a>
  
<!-- 2 -->
<a href="#a1" class="down1">1</a>
<a href="#a3" class="up3">3</a>
  
<!-- 3 -->
<a href="#a2" class="down2">2</a>
<a href="#a4" class="up4">4</a>
  
<!-- 4 -->
<a href="#a3" class="down3">3</a>

</div> <!-- End #a4 -->
</div> <!-- End #a3 -->
</div> <!-- End #a2 -->
</div> <!-- End #a1 -->

Using Our :Target Hooks To Postion Our UL

I then use the following CSS to move our UL left 0px, -500px etc.


#a1:target ul { left: 0px; }
#a2:target ul { left: -500px; }
#a3:target ul { left: -1000px; }
#a4:target ul { left: -1500px; }

I next use these same hooks to hide/show the appropriate LEFT/RIGHT arrows:


#a1:target .up2,
#a2:target .down1,
#a2:target .up3,
#a3:target .down2,
#a3:target .up4,
#a4:target .down3
{ display: block; }

Giving Our Slider Animation

If you were to test out the demo up to this point you would notice that when you click the LEFT/RIGHT arrows, it would automatically switch to the next slide rather abruptly. To fully achieve our JQuery-like slider we need to use CSS3 Transitions which was originally proposed by the Webkit team and has since been adopted into canon by the W3C. What this means is, at the moment the animations will only work in Safari, but Opera and Firefox will not be far behind to implement this exciting new CSS feature.

To achieve the CSS animation we need to first define what CSS property we want to animate. We can do this by stating '-webkit-transition: left'. Next we state the amount of milliseconds we would like the transition to occur over by adding '.3s'. Finally we add linear to the end stating that it is a linear transition. Here is the fully property statement:


ul { -webkit-transition: left .3s linear; }

Demo

To view the final product (which I recommend you use Safari which supports CSS Transitions) view my CSS Only JQuery Slider Emulation Demo >>

Before you comment stating why on earth anybody would ever use this when it can be accomplished so much easier in JavaScript please remember this is just a proof of concept and a test to see if it could be done using only CSS.

View Comments [6]

My Proposed CSS Property: Intended-Brightness

Neal Grosskopf — Tue, 14 Apr 2009 18:41:24 -0500

Have you ever created a really great looking website design, ideally on a color-corrected LCD monitor only to find it looks terrible on another user's monitor? I've noticed several times, designs I have created look extremely washed-out on some of my co-workers factory default, cheap, LCD monitors. Sometimes the users have their brightness/contrast/gamma turned up so high that hex colors such as #ececec or #dddddd look almost the same as #ffffff (white). So what could be done to fix this?

Overlay A DIV?

Originally I thought it could be possible to overlay a DIV, with opacity, over the entire viewport in a futile attempt to make the screen 'darker'. This was futile because the DIV essentially makes it impossible to click anything underneath it.

A New CSS Property

After giving it some thought, I came to the conclusion that we need a new CSS property which I've decided to call 'intended-brightness'. The syntax might look something like this:


html
{
intended-brightness: 0.5;
}

Intended-Brightness would take a decimal that could range from 0.0 to 1.0 (much like opacity does). This would allow the designer of the website to design using their native brightness and then ensure that the website looks the same on all monitors rather than dark on some and washed-out on others.

Accessibility?

Obviously accessibility proponents would complain about this new property because some users (heaven forbid) would want their browser's brightness cranked up to 95%. Because of this, browser vendors could create an option like they do for other CSS properties related to browser accessibility such as font-size, color, background-color etc. See below for Firefox's tab regarding these settings:

CSS Inheritance?

One issue I'm not sure on yet is whether the property could be inherited by child elements. The property could act like the various 'background' properties where the background-image is only set on the current element and not the child elements. The property could also allow inheritance basically allowing child elements to have a different brightness than other elements.

Personally, I think it would be easier, and faster to implement using the non-inheritanced method which is usually the desired effect web developers would want.

Does This Belong In CSS?

Of course! CSS already allows the styling of many other features native to the operating system such as form controls, scrollbars, cursors and text-selection colors. Another very similar property already present in CSS is opacity which I think further strengthens my case.

So what do you think? Feel free to discuss below -

View Comments [7]

Browser Comparision of Available Screen Width When Using 1024x768

Neal Grosskopf — Tue, 07 Apr 2009 21:26:18 -0500

Figure A.

Facebook's horizontal scrollbars showing up on a 1024x768 screen resolution. (Note this screenshot was took on my own PC using Firefox)

I was using my parent's computer the other day which is your standard Dell with a LCD monitor set at 1024x768. I decided to log on to Facebook, one of the internet's most popular websites. Upon logging in, using Internet Explorer 7, I was greeted with a wonderful horizontal scrollbar. I thought to myself "Facebook, the world's leading social network has horizontal scrollbars?". Sure enough, the Facebook developers failed to check their re-designed website in IE7, or possibly, on a 1024x768 monitor.

I wouldn't have minded if a horizontal scrollbar appeared if the design was targeted towards a higher resolution such as 1280x960 but this looked more like blatant oversight on Facebook's part. Look at how little of a horizontal scrollbar appears - Figure A.

Unnecessary Horizontal Scrollbars = Evil

Nobody likes horizontal scrollbars (unless of course your entire design relies on it). Horizontal scrollbars are annoying because they hide 15-17px of content at the bottom of you page. They are also confusing because the web browser is typically browsed un-directionally, due to limitations of the mouse's scroll wheel. When a user has to scroll down and over, this forces the user to abandon the mouse wheel and manipulate the horizontal scroll bar with the mouse's left button, thus wasting time.

So What Is The Available Screen Width In Various Browsers?

Had Facebook done their homework they would have realized that a content width of 1024px combined with a vertical scrollbar results in a horizontal scrollbar. Below is the maximum width you can use in various browser viewports, showing both with a vertical scrollbar and without:

Viewport Maximum Width in Pixels
	Without Vertical Scrollbar	With Vertical Scrollbar	Scrollbar Width
Safari 3	1024	1009	15
Firefox 3	1024	1007	17
Chrome 2	1024	1007	17
Opera 9	1023	1006	17
Internet Explorer 7	1003	1003	17[1]
Internet Explorer 6	1003	1003	17[1]

[1]IE incorrectly includes the scrollbar width in the element's width, thus the actual scrollbar width is 0px.

So What's My Point?

By looking at the chart above, we need to pick the lowest value as our maximum width. Seeing that 1003 is the lowest, which is used in Internet Explorer 6 & 7, if you plan to create a design for 1024x768, I would advise that you not make it wider than 1003 pixels. I would also advise that you never make your main content DIV an odd width. See http://csscreator.com/node/472#comment-2208 for more on that. My point is, you're better off choosing a width less than 1000px if you want to avoid horizontal scrollbars. Remember to always check you design in the early stages of development for your baseline screen resolution.

You might also be interested in my article Always Show Browser Scrollbars.

View Comments [8]

Organize Your Stylesheet Madness & Reduce It's File Size With These Tips

Neal Grosskopf — Tue, 31 Mar 2009 21:40:13 -0500

The other day at work, I had some spare time so I decided to take a look at one of our stylesheets from one of our older websites. The stylesheet was currently over 700 lines long, which I don't consider that long and stood at about 13kb, which again I don't find particularly large.

Shredding The Extra File Size

After reviewing the CSS file I noticed it lacked organization, and probably the worst of all, it repeated itself...a lot! My top pet peve with stylesheets is when properties are copied from one selector to another. Below is one example of what I'm talking about:


a.ProdNav:link
{
color: #666666; 
font-size: 11px; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-decoration: underline;
padding-left: 15px;
padding-right: 15px;
}

a.ProdNav:visited
{ 
color: #666666; 
font-size: 11px; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-decoration: underline;
padding-left: 15px;
padding-right: 15px;
}

a.ProdNav:hover
{ 
color: #333333; 
font-size: 11px; 
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
text-decoration: underline;
padding-left: 15px;
padding-right: 15px;
}

Notice the Golden Rule in programming which is "don't repeat yourself" is broken here? If you look close enough, the only thing that changes from the three link states is the font color. Let's shorten that up a bit to see what it could look like:


a.ProdNav, a.ProdNav:visited
{
color: #666666;
font-weight: 600;
padding: 0px 15px;
text-decoration: underline;
}
a.ProdNav:hover { color: #333333; }

Ah yes, much better. A full 24 lines shorter and much easier to follow. (Note I also removed some font styling as it was better served on the BODY element). Little things like this can make your stylesheet better organized and also much smaller. After removing mistakes like this from the stylesheet, I was able to remove over 200+ lines from it and shred 5KB file in file size.

Overall Stylesheet Organization & Grouping

Another area to pay attention to is how you organize your selectors within your stylesheet. Too often, I review other people's CSS files and have no idea where to find something. The first thing you should always do is group like-selectors with one another. Below is how I usually choose to organize my stylesheets:

Table Of Contents
CSS Variables
CSS Image Preload

Reset
Headings
Anchors
Form Elements
General Classes
Template & Layout
Print
Handheld
Aural
CSS Diagnostics

CSS Table of Contents

I recommend a table of contents for stylesheets over 500 lines long, which in most cases, is always my CSS files. I also recommend that you separate your groups of selectors with CSS comments. Numbering them with the same number you used in your table of contents will make finding the area quicker as well. Below is how I prefer to do this as it makes it stand out more. I also like to place code references in the heading in case I need to quickly refer back.


/****************************************************************
 1. Reset  -  http://meyerweb.com/eric/tools/css/reset/
****************************************************************/

CSS Variables?

You may have noticed my reference to CSS Variables and are wondering what the heck this is. It's currently a proposal for CSS, which may never happen but after the W3C recently adopting CSS Transformations, I think CSS Variables still stands a chance. While you don't need to adhere to the spec, I sometimes like to place common color references at the top of my stylesheet for quick reference:


/****************************************************************
 II. CSS Variables - Spec: http://disruptive-innovations.com/zoo/cssvariables/
****************************************************************/
/*
@variables {
Text: #555555;

DarkGreen: #669933;

DarkLimeGreen: #7e935a;
MediumLimeGreen: #949f74;
LimeGreen: #adb986;
LightLimeGreen: #ccdb9f;

DarkBrown: #a7917b;
LightBrown: #b69f86;
}
*/

Preloading Images In CSS

I also have a section where I preload :hover state images to be consumed further along in my stylesheet. I've written an article on CSS image preloading if you want to read more on this topic. By doing this I avoid the one second flicker that many users experience when hovering over an element with a background image. I like to group these together because I find they can often get lost in the overall stylesheet and eventually somebody else will run across the selector, not understand it's purpose and delete it.


/****************************************************************
 III. CSS Image Preload - http://www.nealgrosskopf.com/tech/thread.asp?pid=24
****************************************************************/
#nav { background: url(/files/images/template/menu_bg-trans.png) no-repeat -9999px -9999px; }
#header { background: url(/files/images/template/helper_sub_bg-trans.png) no-repeat -9999px -9999px; }
#container { background: url(/images/icons/actions/actions_sprite.png) no-repeat -9999px -9999px; }

Other Common Sections in CSS Files

I like to place my CSS reset at the top of the stylesheet so that I can override it further down if need be. I also have a section for heading elements i.e. H1, H2, H3, site-wide anchors, form elements and also general classes such as .b .u .i .left .right for bold, underline, italic, text-align: left & text-align: right etc. I also include in here styling for blockquotes, images and some other common non-structure styling.

After that I like to have a grouping for "Template & Layout". Under this heading I like to place structural styling such as DIV sizes and positions. I will also throw in here some font formatting if it's specific to that particular DIV. I know some people like to break out the font styling into their own section or even stylesheet (god why does it need it's own stylesheet?)

After that, if I'm feeling ambitious, I'll create sections for @print, @handheld and @aural. I have some stock CSS I use for @print so that usually leaves @handheld and @aural to do for later.

And Don't Forget...CSS Diagnostics!

Last but not least, I have my Diagnostic Styling. I've written an article about this already so feel free to check that out, but in a nutshell CSS Diagnostics is CSS that highlights ugly areas of your HTML so that you can quickly fix them. The reason this goes at the end of the stylesheet is that it needs to 'trump' all other selectors that have been set so far.

Organize Your CSS Properties...Please!

Finally the last thing I like to do when cleaning up/developing a stylesheet is alphabetical organizing my CSS properties. Below is a selector with a whole slew of properties which are unorganized:


.pageIDnest
{
Position: relative;
width: 400px;
height: 15px;
margin-left: 10px;
margin-top: 25px;
line-height: 20px;
color: #ef3e41; 
font-size: 12px; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 700;
text-decoration: none;
border-bottom-color:#cccccc;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-left: 10px;
}

Now let's sort it and use some CSS shorthand (which I'll explain shortly).


.pageIDnest
{
border-bottom: 1px solid #cccccc;
color: #ef3e41; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; 
font-weight: 700;
height: 15px;
line-height: 20px;
width: 400px;
margin: 25px 0px 0px 10px;
padding-left: 10px;
position: relative;
text-decoration: none;

Looks better, doesn't it? You'll notice one property that isn't sorted alphabetically. Did you find it? Width, yes I didn't place width at the end. I do have two exceptions with sorting my properties. The first one is width & height. The second is position + top,right,bottom,left. I like to group these two sets of properties together since they all have a relationship to one another and I find myself editing them at the same. You'll also notice that I did not use CSS shorthand for my font properties. I generally avoid using shorthand for the font set of properties as it can be a bit tricky to correctly implement since several of the properties share the same values and also need to be the correct order.

CSS Shorthand

Finally, use shorthand CSS whenever possible. It will save you lines of code to sift through and also KB of file size. A few property groups you can use it on are:

Background
Border
Font-Family
List-Style
Margin
Outline
Padding

Conclusions

Your CSS file doesn't need to be an afterthought after you finished programming your website and adding the markup. It can shine, just like your carefully crafted server-side code does. By organizing, grouping, documenting and shortening your CSS file your co-workers will thank you and you will know that you did a good job at the end of the day.

Have any secrets to your CSS organizational success? Share them below -

View Comments [4]

CSS Drop Caps Without Unnecessary HTML Elements or Classes

Neal Grosskopf — Wed, 25 Mar 2009 18:41:09 -0500

Drop capitals are commonly seen in newspapers or books. They can be identified by looking at the first letter of a paragraph or a page that is usually larger than the rest of the paragraph, bolded and often times a different font-family.

I've seen many different methods to achieve this effect in HTML and CSS, most of the time the method requires unnecessary elements or classes. I'll give an example of how to do drop caps in CSS without any classes, and then I'll show you a second method which will require you to place a single class on the parent element.

Styling Our Drop Cap in CSS Without Classes

The first option is if you want to style the first P element on every page of your website with a drop cap. The selector below will first use the :first-child pseudo selector to find our first P element and then it will select the first letter of the P element with the first-letter pseudo selector.

I've added some other visual effects to our drop cap such as a background-color, font-family, text-transform, and a double'd border which is seldom used.


body p:first-child:first-letter
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 7px 10px 0px 0px;
padding: 10px;
text-transform: uppercase;
}

View Demo >>

Using A Class

You may also want to selectively apply a drop cap to other blocks of text on your website. In this case, simply add a class to the paragraph and add this selector to your CSS:


.dropcap
{
...
}

View Comments [0]

NealGrosskopf.com - Geek Speak

Fix The Internet: Write You Own Custom Website CSS Rules With Stylish

Fix The Internet(s)

Creating Custom CSS Rules

Pro Tips

Other Uses?

HTML & CSS Diagnostics

Hide Advertisements

Conclusion

Everything You Need To Know About CSS Selector Specificity

IDs

Classes

Elements

Odds & Ends

Real World Usage

Why Is This !important

Resources

Identify The Age Of Your Word & PDF Files Using CSS & jQuery

Word & Acrobat

CSS Only Solution?

Enter jQuery and CSS

JQuery Plugin

Easy Way To Get Your Twitter Followers Count/Custom Twitter Badge Using PHP

Custom Twitter Badge

The Setup

Custom Twitter Badge Function

Notes

Related Posts:

Converting A Site From Classic ASP To PHP: Some Things To Consider

Learn The Basics

Built In Functions

Parse Errors

Code Order

Variable Scope, and isset()

Redirects

Here's all the code at once:

Redirect Those Old ASP Pages To PHP

Final Thoughts

A New Method To Target Internet Explorer In Javascript

Enter: CSS Conditional Comments

Enough Already! What About Javascript!

Target All Versions of IE In Javascript

Drawbacks

Emulate C#'s AppendFormat Method In Javascript Or Classic ASP

AppendFormat Method

Old School Method

Emulation Using Javascript

Easily Re-Arrange Items

Classic ASP Variant

Conclusion

How To Create CSS Text/Font Gradients With CSS

HTML Setup

Using JQuery to Automatically Insert SPAN Elements

CSS Setup

Gradient Effect

Demo

Gradient Effect With Hover

Two Tone Effect

Sliding Door Effect

Firefox 3.5 Set To Be Released Tuesday. Here Are Some Exciting New CSS Features In 3.5

Firefox 3.5

@font-face Support

Box Shadow & Text Shadow

CSS Transformations

New CSS Selectors

CSS Media Queries

Other New CSS Features

Further Reading:

YouTube Hacking: How To Retrieve Video Screenshots From YouTube Videos

The Setup

The Default YouTube Image

Series Images 0 - 4

High Quality Images

Conclusion

Quick & Easy Ways To Spice Up Your Web Site's Font Styling

Gray is the New Black

Times New What?

Sans Serif

Serif

Size Matters