Re-Education

Before jumping to the solution, we should first re-review the font-weight CSS property. Historically speaking, we've used font-weight: bold; and occasionally font-weight: normal; to reset an element's font-weight. Eventually numeric values were added that allow us to pick font-weights ranging from 100 to 900.

Numeric font-weights definition from Mozilla's development network is as follow:

Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Font-Weight Keyword Values

Like other property values in CSS, there are also keywords that can be used for font-weight. Historically, we've all been using bold as the de-facto font-weight, but each keyword behind the scenes maps to a numeric value.

font-weight: lighter

One font weight lighter than the parent element (among the available weights of the font).

font-weight: normal

The normal keyword corresponds to the numeric value of 400

font-weight: bold

The bold keyword corresponds to the numeric value of 700

font-weight: bolder

One font weight darker than the parent element (among the available weights of the font).

The Solution: Reseting Element's Default Font Weight

Historically, there have been a handful of elements in HTML that are rendered as bold by default. In IE9, if you happen to nest any of these elements within another bold element, the double-bold font effect occurs.

Below we have a TH element with a H3 nested inside of it. This will trigger the double bold effect in IE9:

View Example of This In IE9 »

What appears to be happening in IE9 when nesting bold elements, is it's changing their font-weight from bold/700 to bolder/900.

To overcome this undesired effect, simply reset all of the standard bold elements back to font-weight: bold:

Voila! Problem solved!

Further Reading

• Bugzilla - strong and b are cumulative with Arial
• W3C - New: b and strong should be font-weight: bolder, not font-weight: bold. IE9 RC, Firefox 4b11, and WebKit all agree, with only Opera differing.
• Mozilla Developer Network - font-weight

View Comments [8]

View the Nth-Child Visual Calculator »

Simply Algebra

Using nth-anything in CSS takes many of us back to our 9th grade Algebra class. The reason for this is the formula used for nth-child uses "variables". These are represented as n. The example below is an example:

Nth-Child Iteration Table

Below is a table illustrating how our formula above works. It will loop until there are no more elements to loop through using the base selector ol li

The selector ol li:nth-child(2n+1) will therefore select every odd element in the ordered list.

Keywords

CSS also has some keyword values that can be used for nth-child to make writing the formulas easier for common nth-child selectors:

Common Nth-Child Selectors

A quick shortcut to remember if you want to select every "x" element is to take the number you're looking for and multiply it times n.

Other Nth-Child Selectors

Nth-Child also accepts negative numbers and subtraction as well as single numbers to select a specific element by its index.

Still Confused?

Check out the handy nth-child visual calculator I created and enter in some of the examples I've provided in my article. It will visually run and select the elements from your selector.

Further Reading

• Sitepoint.com Article
• CSS-Tricks.com Article

View Comments [42]

I recently read an excellent article by Peter Gasston about creating an image shimmer/swipe effect on a website he was working on. I really liked the effect and after tinkering with how it worked I found that it used an image sprite to achieve the effect.

This inspired me to create a similar effect without the sprite, using only CSS. My goal with pretty much everything I develop is to never have to open Photoshop to edit something and this seemed like a good opportunity to try that out.

The Swipe Effect

Below is an example of the effect for browsers that don't support CSS Transitions. Otherwise check out my demo to see it in action.

How It Works

The effect is pretty simple. It moves a DIV with a CSS gradient as a background-image from left: -100% to left: 100%. Below I've highlighted the DIV with a red background to show it better:

HTML Setup

In my particular instance I wanted to use the effect on our site's logo. Here is the HTML I used:

Container Setup

The H1 container is setup to hold the child elements. It also uses overflow: hidden to hide the DIV with the gradient background when it isn't being shown.

Setting Up the Child Elements

One issue I ran into was when the DIV was sliding over the logo/anchor, the anchor was behind the DIV and wasn't clickable. I fixed this by positioning the anchor absolute and giving it a higher z-index than the DIV. I also gave both elements a height and width of 100% so it was dimension independent, something that I find in front-end development to be very important.

The Hidden DIV

The DIV is positioned left: -100% and given a CSS background-gradient. I also used background-size on it. This could be tweaked to make the gradient and effect look different really easily. The gradient can also be quickly modified by importing the CSS into this CSS gradient generator app which is one of my favorite tools on the web.

The Animation/Tween

Finally, the real secret behind all of this is the code below. It moves the hidden DIV to the left: 100% and uses a CSS transition to tween the movement of the DIV.

Thanks for reading an make sure to check out my demo to see it in action.

Further Reading

• Peter Gasston's Article
• CSS Gradient Generator
• W3C Spec on CSS Transitions Including All Properties
• Mozilla Article on CSS Transitions
• CSS Transition Timing Functions

View Comments [4]

I'll admit it, I've been living in a CSS 2.1 world for too long. For almost my enter career as a developer I've only needed to use four CSS background properties - background-color, background-image, background-repeat & background-position...until now.

I've been aware of the CSS3 property background-size for quite awhile now but I could never think of a useful scenario to implement it. I was working on a project at work that listed out social media icons two times on the same page, but in different sizes. I thought to myself "gez, it would be nice if I could just re-use the same CSS sprite twice for the same set of icons?" With CSS this is possible.

My CSS Sprite

I'm still a big fan of CSS sprites as they cut down on unnecessary requests to the server and keep the server free of extra image files. Below is the CSS sprite I originally used for the footer area of the page.

Header Example

Below is an example, to scale, of what the header area of the page looks like with it's social media icons.

Footer Example

Below is another example, to scale, of what the footer area of the page looks like with it's social media icons.

As you can see, both areas are identical, other than one is larger than the other.

HTML Structure

Below is the HTML structure I used for each list of social media icons. The only thing needed to be tweaked from one size to another is the ID attribute.

Scaling The Image

The CSS to scale the sprite from one size to another is quite simple. Below I assign the background-image and set the background-size: 100%.

Positioning the CSS Sprite

Next I position the CSS sprite hooking into my classes. Originally I had used fixed-height pixel dimensions but I discovered that I could use percentages and save myself 5 lines of code per use.

Below is an example of my old code which I was able to get rid of by using the code above. My code above makes it much more flexible!

Controlling the Size

Finally the only real customization we need to do to our unordered list is setting the height and width. By simply changing these values, the sprite will automagically resize itself to fill the bounds of the anchor.

Outcome of Our Code

The above code would generate the following below -

Check out my demo to see this in action >>

What About Browsers That Don't Support Background-Size?

If you need to support browsers that do not have this functionality, simply use Modernizr to target them and serve them up a resized image.

This works nice, by giving users of a more modern browser a better experience while quasi-punishing users who refuse to upgrade.

Use in Responsive Designs

I found another way to use background-size was in responsive designs. The site I was working on required this functionality so I decided to see if I could use this to scale a background-image as the browser window become smaller.

Below is my code I used for all screen sizes. This is a simple anchor nested within an H1 with a height and width set.

Below is my code used for the responsive design. This uses CSS Media Queries to determine when the browser window is narrower than 180px; When the window becomes smaller than that, the logo automagically resizes to the width of the window. This stops it from being cutoff.

Further Reading

• Modernizr
• Scaling background images - MDN
• background-size - MDN

View Comments [75]

I've already emulated their photo tagging functionality so while I was working on that project, I thought, why not steal their image preloading idea as well.

You may have noticed that when browsing photo albums on Facebook, images seem to load super fast when clicking the next/previous buttons or hitting left/right on your keyboard. There's a reason for this. Facebook is preloading the previous and next image.

On To The Code...

The code in it's simplest form is easy, especially with jQuery.

setTimeout Explanation

The reason I wrap this in setTimeout is to take it out of the linear flow of JavaScript as Steve Sounders explains -

use setTimeout to kick off long executing code - If you have a function that takes a long time to execute, launching it via setTimeout allows the page to render and resources to download without being blocked.

Further Reading

• Positioning Inline Scripts - Steve Souders
• Stackoverflow Thread On Preloading Images

View Comments [5]

View Demo » Download Demo ↓

Ever wonder how many of users watched an embedded YouTube video all the way through? How about how many simply pause the video halfway through out of boredom? This is all possible thanks to YouTube's Javascript API (JSAPI).

The Setup

First and foremost in order to do JavaScript callbacks from the video a few parameters need to be added to the embed code. Specifically enablejsapi=1. Also there's another parameter which will need to match the ID of the OBJECT element playerapiid=video1.

One thing to note: In order to get Internet Explorer to play nice, the default YouTube embed code didn't work for me. I needed to modify it to the above to successfully track my video in ALL browsers. I suspect this is related to Non-IE browsers using the EMBED element and IE using OBJECT. My above example uses OBJECT without any extra elements needed. For more on this see my article titled Embedding Flash Without Click To Activate Using Valid HTML

Pseudo Code

Since the Javascript required to accomplish this is about 60 lines long, I'll only explain a top level view of the code. When an action occurs on the YouTube video it will call the onYouTubePlayerReady function along with the ID of the OBJECT element. The details of each video are then stored in an anonymous function (correct me if I've got the wrong terminology on this) using youTubePlayerLoggers[id].

View Demo » Download Demo ↓

Viewing The Data In Google Analytics

Below are the reports that will be generated in Google Analytics. The data can be accessed in the Event Tracking report which is found under the Content category.

Further Reading

• YouTube JSAPI Documentation
• YouTube Player Demo

View Comments [9]

Preface

I'll start out this article by stating that it won't work in Internet Explorer, and that this is really just a proof of concept. It would, however, work in Internet Explorer had it supported the :target pseudo selector. It should be noted that IE9 will support this selector as well as quite a few others.

Clickable Transparent Background

The first thing people come to expect from a lightbox/shadowbox solution is the ability to click a semi-transparent background and have the window close. I accomplished this by absolutely positioning an anchor on the page with an href of #close I'll go into more detail on how this works later.

Below is the CSS for our semi-transparent background. You'll notice that it spans the entire viewport and that it has a default opacity of 0 to hide it.

Modal Window

The next major piece of a lightbox/shadowbox solution is the media itself. Most people come to expect the modal window to be centered both vertically and horizontally. From what I can tell, the method I used to accomplish this was created by BlueRobot.com which uses negative margins which are exactly half of the height/width of the modal window.

Opening our Lightbox

And now probably the most interesting part of the code. The part that actually makes it open! This part uses one of my favorite additions to CSS3, CSS Transitions. Currently, they are supported by all Webkit browsers (Safari & Chrome for example) Opera 11, and the soon-to-be released Firefox 4.0.

The code works by animating the transition of values in specific properties. For instance if an element, by default, has an opacity value of 0.0 and it's animated value is 0.8 it will create a transition effect from 0.0 to 0.8 in the specified amount of time you pick. In my case I chose .2s which means .2 seconds.

Displaying the modal window works in a similar fashion. Like Shadowbox, I wanted my modal window to have a size increasing effect upon opening. I did this by transitioning the height and width of the window. By default I set these values to 0px and then increased the size to 550px

Close

The close effect is very similar to the open effect except it does the reverse action. For the close effect I created transitions for opacity, height and width.

The :target Pseudo Selector

As promised in the beginning of the article, I'll explain more about how the :target pseudo selector is being used. The :target selector is an interesting part of CSS in that it's capable of being aware of what hash is currently present in the browser's URL. A has is something like this: /page.php#hash

In the CSS I'm able to apply different CSS styling to elements based on what has is currently being used. In this case I have a hash for #window1, #window2, #window3 and #close, the two states of my CSS only lightbox.

The HTML needed to accomplish this looks something like this:

The CSS I use to target these specific hashes looks like this:

Notice the :target in there? That's the magic.

Further Reading

Well, if you've made it this far down my lengthy article I congratulate you. Here's a few links for further reading on topic if you're interested in tinkering with this on your own:

• W3C Spec on CSS Transitions
• CSS Transition Using Webkit
• CSS Transition Properties
• CSS Vertical & Horizontal Centering
• :target Pseudo Selector
• Stay on Target - ThinkVitamin.com
• Shadowbox
• Lightbox

View Comments [8]

I was looking to test if a certain browser (I'm looking at you Internet Explorer) supported CSS opacity while writing some jQuery code the other day. While I was aware that you could set CSS properties in Javascript, I never bothered to see if you could also feature test those same properties in Javascript. I found a nice snippet I thought I would share since I hadn't seen this before.

To test if a browser supports a specific CSS property in Javascript is pretty simple. To do so, simply create a temporary element using document.createElement("div") and then use the typeof operator on it like so:

CSS Opacity

Most likely you'll need to use this to test for the many flavors of opacity like I did. Below is an excerpt from my code:

Browser Prefixes

We can also test for specific browser implementations of CSS properties in Javascript like so:

CSS Hacks

If you got clever with these, my example above could probably be used for CSS hacks testing for the presence of various rendering engines. Using alittle DOM manipulation you could assign classes to the BODY element based on what browser prefixes are supported.

Further Reading:

• Feature testing CSS properties
• Scripting Opacity With Internet Explorer 9

View Comments [3]

Recently, I was thinking about creating a media queries for my website. Specifically for users on small screen devices and users on the iPad. This is relatively easy using media queries and can be accomplished using the following CSS:

The Problem?

My biggest concern with doing this was the current version of my website is very image heavy, especially with the large background-image I'm using. I was worried that code I presented above would actually load the smaller iPad-friendly image, even to users who were on larger monitors, since the image references appear in the stylesheet.

I had previously delved into this underground (see: 'boring') topic in a previous article of mine called CSS Image Preload - :hover Pseudo Selector Parent Of display: none Element where I discovered that browsers do no load background-images on child elements if the parent element is set to display: none;

Having somewhat of an interest in the topic of browsers loading background-images used in stylesheets, I decided to create an full-blown data table on the topic for everyone to enjoy.

Who Cares If The Browser Loads An Image Or Not?

Your users for one. The large background-image on my site is 63kb in size. If a user doesn't actually see that image on their screen, then why waste their time downloading it? Furthermore, if you run a heavily trafficked site, think if a million users had to request that image, only to never see it on their screen.

The Data

I was able to capture whether or not a browser downloaded the background-images in CSS using an external program called Fiddler. Fiddler captures all HTTP traffic on your computer, regardless if it's a browser or an update service running requesting the image. Originally I was going to use each browser's web inspector such as Firebug but I decided to use Fiddler to get the data from a single source.

1. [1] Both Firefox and Opera will not load a background-image of an element if it is set to display: none. This means that if the element's display property is later changed to block or inline, the browser will need to fetch the image after page load has occurred.
2. [2] Internet Explorer seems to break from the trend of the other browsers here by loading the background-image of an element that is nested inside of another element that is display: none;
3. [3] Both Safari and Chrome load background-images from both the media query & the non-media query element background-image.
4. [4] Both Safari and Chrome load background-images from both media queries even when the background is trumped by a media query further down in the stylesheet. The image for the non-media query element background-image was also downloaded
5. [5] Both Firefox & Opera only downloaded the background-image used in the media query. If more than one media query was used, it only requested the last image.

Analyzing My Results

What I found was very interesting. Even amongst the more 'modern' browsers there are differences in how they handle image loading. I'd like to note that the browsers I tested were simply the ones I had installed on my machine at the time of testing.

Default (control data)

My first test, was simply a control. Yeah...I'm a fan of the scientific method.

Element - display: none

Next up I tested elements that are set to display: none i.e.

What I found was interesting. Both Firefox & Opera did not load the image while Safari, Chrome & IE7 did. This might sound like a minor browser difference but consider the following:

When the DIV is hovered over, both Firefox & Opera need to quickly fetch the image. This causes the evil image flicker. Drawing a conclusion on this is tough. Would you rather have the image ready to use on hover at the expense of your bandwidth or saving some bandwidth and download time for your site's users?

Element - visibility: hidden

I found the results for elements set to visibility: hidden to be the same across all browsers. Every browser downloaded the background-image immediately on page load. This is a key difference between display: none and visibility: hidden for many browsers.

Element - :hover

I found the results for background-image hovers to be the same across all browsers. Every browser waited to download the background-image until the element was hovered on.

Single Media Query

For this test I added a single media query to my page along with a background-image for all users:

The data below breaks down how each browser reacted when I loaded my test page in a browser window that met the requirements of the media query (i.e. the browser window being smaller than 600px.

Notice the differences? Firefox & Opera reacted much differently than Safari & Chrome. Both Firefox & Opera decided not to bother downloading my original background-image. By doing so, should the browser window become larger than 600px, Firefox & Opera would need to quickly download the new background-image.

Multiple Media Queries

The results for this test were similar to the single media query. The only difference is Safari & Chrome downloaded all media query background-images regardless if they were being used or not.

Takeaway

When using media queries and designing sites for multiple devices, take into consideration how many images your incorporate into your alternate stylesheets. You could potentially force users to download excess files depending on which browser they are using.

View Comments [86]

What Is CleanCSS

CleanCSS allows you to take existing CSS and format it to a much more pleasant format. An example of this was a CSS file I was working on that appeared to have multiple contributors i.e.

As you can see, when multiple developers get working on a single file, over time, the formatting of the file loses consistency. Tabs may be ignored, alpha-numeric property sorting may be ignored and some developers might uppercase things while others many not.

CleanCSS offers many quick options to easily format your CSS. On the flip-side it will also compress your CSS if your overly concerned about filesize like my former co-worker and semi-famous friend Tim Kadlec is.

Our Example CSS Cleaned Up

After running the above CSS through our cleaner, it outputted the following nicely formatted code:

Feel free to give CleanCSS a spin on your next project at http://www.cleancss.com/

View Comments [3]

By default Google Analytics will track the exit page, or last page a user views while on a website. What it won't track is what link that user clicked to leave the site. With a little jQuery this can become a reality.

The Old, & Wrong Way

I've seen it time and time again, developers using the pageTracker._trackPageview function to track things that aren't pages. While pageTracker._trackPageview will do the job it creates false page views and inflates reports.

I would argue that a user clicking a link to leave a website is really a page view on the external site, not the developer's site. Below is the old method to achieve this:

The Right & New Way

Google Analytics has a new method of tracking all things that aren't page views. This new technique uses the pageTracker._trackEvent method.

First import Google's hosted jQuery library:

Next, within the $(document).ready function which is triggered when a page is finished loading, use the following Javascript:

This will target all link hrefs starting with "http" and add an onclick event handler to them.

Dissecting pageTracker._trackEvent

The following is taken directly from Google's guide to pageTracker._trackEvent

• Category (required) - The name you supply for the group of objects you want to track.
• Action (required) - A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
• Label (optional) - An optional string to provide additional dimensions to the event data.
• Value (optional) - An integer that you can use to provide numerical data about the user event.

And again, as it would appear in Javascript

While Google specifies what each of the variable placeholders should be they can certainly be named whatever you want. Action does not need to be a verb (as you can see in my original example). Feel free to use each of the placeholders however you see fit. One thing to note is the last variable (Value) must be an integer.

How the Data Looks in Google Analytics

Below is how the report will look in Google Analytics once some data is collected. This data can be sliced and diced using Advanced Segments just like any other dimension in Google Analytics.

Further Reading

• Google's pageTracker._trackEvent Guide

View Comments [4]

Many sites nowdays self promote content deep within from the home page. In many ways this should be considered an internal campaign. On larger websites with multiple stakeholders involved, it becomes even more important to measure how successful internal campaigns are peforming. By default Google Analytics has the ability to track external campaign links pointing to your website, however it does not come with built in functionality to track internal campaigns.

One solution is to use custom variables to track internal campaigns. By using these campaign variables, you can slice and dice your visitor's movement on your website easier. If you're not familiar with campaign link tagging I suggest you click through a couple links in your RSS feeds (Slashdot, specifically uses them) and you'll notice that there are several query strings appended to each link.

Example Tagged Link:

http://science.slashdot.org/story/10/07/14/2222239/The-Chicken-May-Have-Come-Before-the-Egg?from=rss&utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Slashdot%2Fslashdot+%28Slashdot%29&utm_content=Google+Reader

Each of these query strings translates into a dimension in Google Analytics. Below is the anatomy of our URL:

I'm not going to go into too much depth on the built in external campaign tracking for Google Analytics since that's been covered by every blogger in existence already. Google provides an quick and easy form with explanations for each query string value here anyway - http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55578

Using utm_* Query Strings For Internal Campaign Tracking?

NO! Never do this! I suspect many people first consider this when attempting to track internal campaigns but here's why you shouldn't. Each of these query strings is written to a cookie within Google Analytics. If a user searches "Internet Explorer hacks" on Google the following would happen:

Enough Already, Just Tell Me How To Do This!?!?

Ok, sorry for the long intro but I needed to get that out of the way before moving any further. Instead of using utm_* query strings let's use our own custom query strings, say one that starts with int_

The Following URL:

http://www.yourdomain.com/landingpage/?utm_source=advertiser.com&utm_medium=bannerad&utm_campaign=summerpromotion&utm_content=horizontal

Becomes:

http://www.yourdomain.com/landingpage/?int_source=advertiser.com&int_medium=bannerad&int_campaign=summerpromotion&int_content=horizontal

Hidding Query Strings Within Google Analytics

Next, configure the Google Analytics profile to exclude these new query strings. Otherwise the URLs are going to look different within the reports depending on the refering page and it will render your stats very useless.

1. Navigate to Analytics Settings > Profile Settings > Edit Profile Information
2. Under 'Exclude URL Query Parameters:' include the following query strings int_source, int_campaign, int_medium, int_content (or your own)

Configuring Your Google Analytics Tracking Code For Internal Campaigns

Finally, you'll need to slightly modify your tracking code to send these custom variables to Google. This uses Google's pageTracker._setCustomVar function. The names (i.e. Internal%20Campaign) can be named to whatever you like.

Further Reading

• Google Analytics Custom Variables
• Google Analytics External Campaign Tracking

View Comments [6]

I was recently working on a project that required users to input numbers, formatted as currency into textboxes and then calculate said numbers with other formatted textboxes. My client-side calculator had 34+ textboxes. I was a bit worried that I'd need to create javascript variables for each of these textboxes and possibly as a number & formatted variable. Another requirement was if a user backspaces all of the numbers in a textbox, that it should return to it's original number.

Say Goodbye to Variables With jQuery's .data() Method

Having read up on jQuery's .data() method briefly in the documentation a few times in the past, I wondered to myself it that would be a possible solution. It a nutshell, the .data() method allows developers to store data inside elements in an array format. In the past I might have done something like this to store data:

While this worked great there was a few drawbacks. For one it was improperly using attributes in a way the W3C spec never intended. Second I was limited to the amount of unique data I could store due to limits to the number of attributes at my disposal

Enter .data()

Going back to my original problem, with .data() I can now store data inside elements like so:

To retrieve that data it's as simple as this:

Shorthand

jQuery also offers a shorthand method of assigning multiple values to a single element. Below is a shorthand variation of my above statements:

To retrieve these values it's also a bit different since they're now included in a single array called numbers

Removing Values

Below is jQuery's method of removing data:

Final Words

I found this technique to be easier to understand while I developed the application. Also, since I was already querying the element to get the user's input it was just another line of code to get other values I stored inside the element.

Further Reading

Feel free to check out jQuery's documentation on the .data() method. I also found a Firebug plug that allows you to inspect values assigned to elements which makes debugging easier.

View Comments [31]

I've been following the Google vs. China fiasco online, mostly through my RSS feeds, and I've begun to ponder on what a Google-less China would be like. China has 1.3 billion people, or 20% of the earth's population, and is poised to overtake the US as the #1 country in internet users. While China flat-out blocking Google.cn is a big deal (and I suspect this would include all of Google search such as Google.com), what if China blocked all of Google's online services?

What Makes Google?

To start out with, go and take a look at all the services Google offers >>

Let's say China decides to block everything that is Google i.e. all of Google's online services. Think of all the services you use that are hosted on Google's servers? Here's a list of just a few things I can think of that would be troublesome to web developers:

• Google Hosted Javascript Libraries such as jQuery, MooTools etc.
• YouTube videos & specifically all those embedded videos around the internet.
• Chinese users would no longer be tracked in Google Analytics.
• You website would lose all the Chinese traffic Google was sending to it via Google search.
• Feedburner would no longer work in China. You would lose any Chinese RSS feed subscribers.
• Embedded Google Maps would stop working.
• What about all the Gmail users in China?
• Using the Google Site Search feature on your website? Not in China you aren't.

Other Problems

I don't have specific cases for these products but I'm curious as to how a 100% Google blockade would affect these Google services since they can be embedded in external websites:

• Google Checkout
• Picasa Embedded Galleries
• Google Translate Widget
• Blogger

So What?

I did a quick search and if China decided to block Google and its services this won't be the first time so perhaps this would only be temporary. Another argument might be that Google isn't a big player in China like their native Baidu search engine. Statistics would help this argument, but even if Google Search isn't a big player in China, I have a feeling many of their ancillary services are even if only behind the scenes.

Aftermath

If China decides to go through with this, I'm predicting that a schism will occur in the internet. There will be the People's Internet of China and the rest of the world's. If China gets away with this, it will be a lot easier to for them to block other, smaller, websites.

Other Takeaways

One takeaway I got from this brainstorming exercise was how reliant many of our websites are on third party providers. Its difficult to build a website nowadays without linking to a resource from another site. Will that site/service be there 5-10 years from now? What happens when it's discontinued? Maybe its web developer job security and I should stop complaining?

What do you think about it? Speak your mind below -

View Comments [1]

Facebook has once again decided to redesign their home page. These types of changes usually result in millions of users joining groups titled "I hate the new design" or something similar. Being a web designer I sympathize with Facebook.

One thing they changed with the recent redesign was removing the "status updates only" option on their home page. I'm now forced to sift through every group, fan page, image and application post my friends have made. Facebook does give me the option to hide specific applications but with 1000's of apps out there, it isn't practical to hide each and every one. Enter Stylish.

Hacking Facebook's CSS

Using a Firefox addon called Stylish I was able to sift through Facebook's HTML & CSS and determine if they did a good job giving their home page elements proper class names and IDs. For whatever reason Facebook uses custom HTML attributes. One of these was called data-ft. The first value in that attribute is a number that represents various home page types. The example below uses "46" which is plan ol' vanilla status updates:

Show Status Updates Only

By adding the code below into Stylish it will hide ALL types of updates on the Facebook home except for regular status updates:

Below is an example of this would be entered into Stylish:

Other Update Types

You could also substitute the number 46 above with one of the below to show only these types of updates by default:

To Each His Own

Some people may love seeing everything their friends do on Facebook. I'm more interested in what they have to say and the rest just feels like noise. Feel free to take this code and make it your own.

View Comments [6]

I found this Firebug extension a couple weeks ago and thought it was worth talking about. CSS Usage shows up as a tab within Firebug so if you don't have that extension yet, head over to Mozilla's addon site and download it - https://addons.mozilla.org/en-US/firefox/addon/1843

The jist of CSS Usage is to scan your stylesheet selectors and HTML to determine if each selector is used. Used selectors are colored in green while unused selectors are colored in red. Selectors previously found on other pages are colored in dark green

By default it will only analyze a page if you hit 'scan' but I like to turn on the auto-scan feature and just browse around my site for about 20 pages to give it a good mix of selectors. After that I had only a handful of selectors that were left unused. I took those selectors and did a site wide search to try to identify if they were used.

Cons

There are a few drawbacks with the addon. Currently it will only scan pages you visit. It does not have the ability to scan your entire site. Sites with 100's of pages may be difficult to scan with this tool. I also found the line numbering to be a bit flaky (as seen in my screenshot above).

Pros

Some great pros of this addon include cleaning up your stylesheets and reducing filesize. You can also save a little bandwidth by making them smaller in size.

Download

Head over to the CSS Usage page on Mozilla's addon site and give it a try.

View Comments [13]

Firefox 3.6 is set to be released January 21st and is packing several new and exciting properties in it. Perhaps we can rename Firefox 3.6 to Firefox: Background Edition since the majority of those properties are background related.

CSS Background Gradients

Backgrounds gradients are something I've been requesting for a long time now. It looks like the browser vendors finally listened! To use CSS gradients you'll need to use them within the context of a background-image.

This example will create a horizontal white to black gradient.

Advanced Gradients

Firefox also supports more advanced gradients such as radial (circle) gradients and linear gradients at an angle (i.e. diagonal gradients) much like one would create in Photoshop or Fireworks. It will also support color stops which are midpoints in your gradient.

Each of these topics are worthy of their own full length tutorial so I'm not going to dig too deep into them right now. Just be aware that they are now supported by Gecko (Firefox) and Webkit (Safari, and later Google Chrome) based browsers.

To learn more about CSS gradients check out the Mozilla Developer Center page on CSS Gradients.

Multiple Backgrounds in CSS

Multiple backgrounds are what we've all been waiting for. Gone are the days of nesting DIVs like this:

We can now use a single element if our page requires multiple backgrounds using the code below:

To learn more about multiple backgrounds check out the CSS Spec on Multiple Backgrounds.

CSS Background Scaling

Another background related addition to Firefox 3.6 is the -moz-background-size property. This allows us to resize background images, that are perhaps too big or too small for the element they are in.

If the our image image.png default size is 150px x 75px this would scale the image up larger:

Try It Yourself

Head over to http://www.mozilla.com/firefox/ and grab a copy for yourself.

View Comments [11]

HTML Structure

Here's the barebones HTML structure:

CSS Code

The UL gets collapsed by floating the LI's left. One thing I'd recommend is giving the LI's a fixed height. Otherwise the list will be growing taller and shorter as users hover over it causing content on the rest of the page to shift around. Also the padding-top should equal the same amount of pixels as the margin-top in the jQuery code.

jQuery Code

This is actually quite simple. I used a custom animation since jQuery's built in effects cannot accomplish this. In my example below, I changed the marginTop & opacity properties on hover. Also, I added .stop() so that if a user hovers over the elements quickly it won't be lagging behind on the animations.

CSS Transitions

This same effect can be accomplished using CSS Transitions in browsers that support it:

Demo

Click to see a live demo of this effect >>

View Comments [5]

I find myself converting Photoshop files to HTML & CSS quite frequently. Whenever I find myself repeating a task I look for ways to make that task more efficient and therefore waste less of my time. One way my time is wasted during this process is when I rip out all of my inline CSS into an external stylesheet (or most likely an embedded stylesheet in the HTML document temporarily). Usually this involves identifying the IDs and class names of all my HTML elements as well as any inline styles I may have applied in the short-term.

Because of this, I set out to write some javascript that would parse my HTML, look for any elements with and ID or class name. The code also pulls out the inline styles and sorts them by property name. Finally, it also builds unordered list's CSS because whenever I have a unordered list within my template, it almost always needs further styling (think, navbar, footer etc.)

Import jQuery

As with any project, I import Google's hosted jQuery library. This will hopefully be cached in a users browser already:

jQuery Pseudo Code

Below is a quick overview of the jQuery:

Variables

Below are globally scoped variables which are outside the $(document).ready function. output is used for the final CSS. selector is really just a helper variable which can used to narrow the search for IDs and classes. This means you could look for elements only within another element i.e #content [id], #content [class]. Finally tclasses is used to store the names of classes so there are not duplicate class names in the stylesheet.

The rest of the code is wrapped within the $(document).ready function below. This basically checks to see if the DOM is loaded. Next it loops through elements that have an ID or class and finally sends the output to a textarea.

Weed Out Duplicate Classes

Next up, the ID/class names are pulled from the element list being looped through. Class names are then added to a global array. Finally since I find myself styling UL and LI elements frequently, I added some code in to create placeholder CSS for these i.e:

Here's the code that creates that:

Extracting Inline CSS

Next, the inline CSS is extracted from the elements. I'll explain later why this is tricky between different browsers:

Sending the Results to a Textarea

Finally the results of the above code is dropped in a textarea:

Browser Variances

I found the inline CSS returned from Javascript could vary by browser, especially when working with CSS shorthand notation. Internet Explorer prefers to seperate out border: 1px solid #000; to the following:

While Firefox does the following:

Webkit based browsers such as Safari & Google Chrome seem to be more web developer friendly by leaving the original CSS intact:

Other Browser Variances

This gets further complicated when using the background property especially in Firefox:

Fortunately, Safari and Google Chrome again, keep the original CSS intact:

Because of this, you may consider using my tool in Google Chrome or Safari as they seem to keep the original code the same.

Check out the final results >>

A Bookmarklet

Finally, I created a Bookmarklet that can be used on any webpage or website on the internet. This means you can add this as a bookmark/favorite and run it on any website.

Thoughts?

So what do you think? Does this look like something that could help you speed up your development time? Leave your thoughts below >

View Comments [11]

Importing the jQuery Library

As with all my examples using jQuery, I link to Google's hosted version. If a user already has the file in their browser cache, it cuts down on another HTTP request thus saving your users time.

HTML Setup

Below is all the HTML needed for my image tagging example. I dynamically insert much of the other needed HTML via jQuery. Originally I planned to make this a jQuery plugin. This could still easily be accomplished by taking the code within $(document).ready & adding it into a standard plugin code block.

CSS Setup

Unlike many of my other articles, there is a lot more code needed to achieve the desired effect. Because of this I probably won't walk you through line-by-line. Instead I'll give a brief description for some of the main elements in the DOM.

#tag-wrapper - This is wrapped around the IMG element and is given a relative position. This allows us to position other elements absolute.

#tag-target - This is a DIV which boxes in the target which a user has clicked on within the photo.

#tag-input - This is a DIV which contains a label, input box & submit/reset buttons. It is attached to the #tag-target DIV.

.hotspot - Finally after a tag has been assigned, a .hotspot DIV is created and positioned over the desired location on the image.

Global Javascript Variables

Below are the global Javascript variables used. targetX & targetY plot coordinates for where the user clicks on the image. tagCounter is used to give each of the tags a unique ID

$(document).ready Javascript

In the main code block I've liberally added comments to explain each line of code:

Functions

Finally, here is a few functions I use for adding/removing tags:

Above & Beyond

I did add a few effects that Facebook does not have. For instance I added fading effects on pretty much everything I could. I often find that adding a fade or slide effect gives applications a more "polished look". I also added an animation if you click a new location for the target tag. Once again, here's a link to the finished product >>

View Comments [68]