If every person on our blue Earth watched this video, the world would be a much better place. At least for a few minutes. Listen closely to Carl Sagan’s words till the end. It won’t fail to get you teary.-JD More »

  

CSS’ barrier to entry is extremely low, mainly due to the nature of its syntax. Being clear and easy to understand, the syntax makes sense even to the inexperienced Web designer. It’s so simple, in fact, that you could style a simple CSS-based website within a few hours of learning it.

But this apparent simplicity is deceitful. If after a few hours of work, your perfectly crafted website looks great in Safari, all hell might break loose if you haven’t taken the necessary measures to make it work in Internet Explorer. In a panic, you add hacks and filters where only a few tweaks or a different approach might do. Knowing how to deal with these issues comes with experience, with trial and error and with failing massively and then learning the correct way.

Understanding a few often overlooked concepts is also important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work.

The notion of a “cascade” is at the heart of CSS (just look at its name). It ultimately determines which properties will modify a given element. The cascade is tied to three main concepts: importance, specificity and source order. The cascade follows these three steps to determine which properties to assign to an element. By the end of this process, the cascade has assigned a weight to each rule, and this weight determines which rule takes precedence, when more than one applies.

Please consider reading our previous related article:

• CSS Specificity: Things You Should Know

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

1. Importance

Style sheets can have a few different sources:

1. User agent
   For example, the browser’s default style sheet.
2. User
   Such as the user’s browser options.
3. Author
   This is the CSS provided by the page (whether inline, embedded or external)

By default, this is the order in which the different sources are processed, so the author’s rules will override those of the user and user agent, and so on.

There is also the !important declaration to consider in the cascade. This declaration is used to balance the relative priority of user and author style sheets. While author style sheets take precedence over user ones, if a user rule has !important applied to it, it will override even an author rule that also has !important applied to it.

Knowing this, let’s look at the final order, in ascending order of importance:

1. User agent declarations,
2. User declarations,
3. Author declarations,
4. Author !important declarations,
5. User !important declarations.

This flexibility in priority is key because it allows users to override styles that could hamper the accessibility of a website. (A user might want a larger font or a different color, for example.)

2. Specificity

Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

Upon assessing a rule’s importance, the cascade attributes a specificity to it; if one rule is more specific than another, it overrides it.

If two rules share the same weight, source and specificity, the later one is applied.

2.1 How to Calculate Specificity?

There are several ways to calculate a selector’s specificity.

The quickest way is to do the following. Add 1 for each element and pseudo-element (for example, :before and :after); add 10 for each attribute (for example, [type=”text”]), class and pseudo-class (for example, :link or :hover); add 100 for each ID; and add 1000 for an inline style.

Let’s calculate the specificity of the following selectors using this method:

• p.note
  1 class + 1 element = 11
• #sidebar p[lang="en"]
  1 ID + 1 attribute + 1 element = 111
• body #main .post ul li:last-child
  1 ID + 1 class + 1 pseudo-class + 3 elements = 123

A similar method, described in the W3C’s specifications, is to start with a=0, b=0, c=0 and d=0 and replace the numbers accordingly:

• a = 1 if the style is inline,
• b = the number of IDs,
• c = the number of attribute selectors, classes and pseudo-classes,
• d = the number of element names and pseudo-elements.

Let’s calculate the specificity of another set of selectors:

• <p style="color:#000000;">
  a=1, b=0, c=0, d=0 → 1000
• footer nav li:last-child
  a=0, b=0, c=1, d=3 → 0013
• #sidebar input:not([type="submit"])
  a=0, b=1, c=1, d=1 → 0111
  (Note that the negation pseudo-class doesn’t count, but the selector inside it does.)

If you’d rather learn this in a more fun way, Andy Clarke drew a clever analogy between specificity and Star Wars back in 2005, which certainly made it easier for Star Wars fans to understand specificity. Another good explanation is “CSS Specificity for Poker Players,” though slightly more complicated.

Andy Clarke’s CSS Specificity Wars chart.

Remember that non-CSS presentational markup is attributed with a specificity of 0, which would apply, for example, to the font tag.

Getting back to the !important declaration, keep in mind that using it on a shorthand property is the same as declaring all of its sub-properties as !important (even if that would revert them to the default values).

If you are using imported style sheets (@import) in your CSS, you have to declare them before all other rules. Thus, they would be considered as coming before all the other rules in the CSS file.

Finally, if two selectors turn out to have the same specificity, the last one will override the previous one(s).

2.2 Making Specificity Work For You

If not carefully considered, specificity can come back to haunt you and lead you to unwittingly transform your style sheets into a complex hierarchy of unnecessarily complicated rules.

You can follow a few guidelines to avoid major issues:

• When starting work on the CSS, use generic selectors, and add specificity as you go along;
• Using advanced selectors doesn’t mean using unnecessarily complicated ones;
• Rely more on specificity than on the order of selectors, so that your style sheets are easier to edit and maintain (especially by others).

A good rule of thumb can be found in Jim Jeffers’ article, “The Art and Zen of Writing CSS”:

Refactoring CSS selectors to be less specific is exponentially more difficult than simply adding specific rules as situations arise.

3. Inheritance

A succinct and clear explanation of inheritance is in the CSS3 Cascading and Inheritance module specifications (still in “Working draft” mode):

Inheritance is a way of propagating property values from parent elements to their children.

Some CSS properties are inherited by the children of elements by default. For example, if you set the body tag of a page to a specific font, that font will be inherited by other elements, such as headings and paragraphs, without you having to specifically write as much. This is the magic of inheritance at work.

The CSS specification determines whether each property is inherited by default or not. Not all properties are inherited, but you can force ones to be by using the inherit value.

3.1 Object-Oriented Programming Inheritance

Though beyond the scope of this article, CSS inheritance shouldn’t be confused with object-oriented programming (OOP) inheritance. Here is the definition of OOP inheritance from Wikipedia, and it makes clear that we are not talking about the same thing:

In object-oriented programming (OOP), inheritance is a way to form new classes […] using classes that have already been defined. Inheritance is employed to help reuse existing code with little or no modification. The new classes […] inherit attributes and behavior of the pre-existing classes. …

3.2 How Inheritance Works

When an element inherits a value from its parent, it is inheriting its computed value. What does this mean? Every CSS property goes through a four-step process when its value is being determined. Here’s an excerpt from the W3C specification:

The final value of a property is the result of a four-step calculation: the value is determined through specification (the “specified value”), then resolved into a value that is used for inheritance (the “computed value”), then converted into an absolute value if necessary (the “used value”), and finally transformed according to the limitations of the local environment (the “actual value”).

In other words:

1. Specified value
   The user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.
2. Computed value
   The specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.
3. Used value
   The used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).
4. Actual value
   This is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer).

If you look at any CSS property’s specification, you will see that it defines its initial (or default) value, the elements it applies to, its inheritance status and its computed value (among others). For example, the background-color specification states the following:

Name: background-color
Value: <color>
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: the computed color(s)

Confusing? It can be. So, what do we need to understand from all this? And why is it relevant to inheritance?

Let’s go back to the first sentence of this section, which should make more sense now. When an element inherits a value from its parent, it inherits its computed value. Because the computed value exists even if it isn’t specified in the style sheet, a property can be inherited even then: the initial value will be used. So, you can make use of inheritance even if the parent doesn’t have a specified property.

3.3 Using Inheritance

The most important thing to know about inheritance is that it’s there and how it works. If you ignore the jargon, inheritance is actually very straightforward.

Imagine you had to specify the font-size or font-family of every element, instead of simply adding it to the body element? That would cumbersome, which is why inheritance is so helpful.

Don’t break it by using the universal selector (*) with properties that inherit by default. Bobby Jack wrote an interesting post about this on his Five-Minute Argument blog. You don’t have to remember all of the properties that inherit, but you will in time.

Rarely does a CSS-related article not bring some kind of bad news about Internet Explorer. This article is no exception. IE supports the inherit value only from version 8, except for the direction and visibility properties. Great.

4. Using Your Tools

If you use tools like Firebug or Safari’s Web Inspector, you can see how a given cascade works, which selectors have higher specificity and how inheritance is working on a particular element.

For example, here below is Firebug in action, inspecting an element on the page. You can see that some properties are overridden (i.e. crossed out) by other more specific rules:

Firebug in action, informing you how specificity is working.

In the next shot, Safari’s Web Inspector shows the computed values of an element. This way, you can see the values even though they haven’t been explicitly added to the style sheet:

With Safari’s Web Inspector (and Firebug), you can view the computed values of a particular element.

5. Conclusion

Hopefully this article has opened your eyes to (or has refreshed your knowledge of) CSS inheritance and specificity. We encourage you to read the articles cited below, as well as Smashing Magazine’s previous article on the topic.

Even if you don’t think about them, these issues are present in your daily work as a CSS author. Especially in the case of specificity, it’s important to know how they affect your style sheets and how to plan for them so that they cause only minimal (or no) problems.

Resources And Further Reading

• Assigning Property Values, Cascading, and Inheritance, W3C
• CSS3: Cascading and Inheritance, W3C
• Selectors Level 3: Calculating a Selector’s Specificity, W3C
• The Cascade, SitePoint
• Inheritance and Cascade, Dev.Opera
• CSS Inheritance, Dorward Online
• Cascading Order and Inheritance in CSS, David’s Kitchen
• Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade, Van SEO Design
• Specifics on CSS Specificity, CSS-Tricks
• Link Specificity, meyerweb.com
• Redundancy vs. Dependency, mezzoblue

(al)

© Inayaili de Leon for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS

The company has had a lot of success in helping companies who startup in the cloud and start to achieve scale. It already has a host of hot startup companies including Posterous, Bump Technologies, and Urban Airship. Through listening to users, the company decided to offer local server support to merge its view of all server assets for these organizations.

Sponsor

What is CloudKick?

Cloudkick enables a company to manage internally hosted servers and run the Cloudkick’s agent and report into the same console as your cloud computing infrastructure from AWS, RackSpace, SliceHost and others. When installed, the CloudKick agent will respond to status checks from the Cloudkick monitoring solution, which itself is a distributed cloud application. Cloudkick supports a host of cloud provider solutions and shares a report of feature.

We met with the company at their offices in San Francisco. Upon entry to the warehouse, called “The Farm” near the Mission District, we realized that was a true technology startup, founded by system administrators trying to make their jobs easier. The team participated in Y-Combinator and has received an initial capital infusion by Avalon Ventures.

The Cloudkick system offers consolidated server reports and shows server events by polling registered clients in cloud (and now data centers) and piping them to Cloudkick’s multi-tentant event aggregator.

The tools are modeled after administrative tools like Cacti, Nagios, and Munin, but are delivered on on top of an agent-driven real time view of the underlying assets of server infrastructure.

When checking out the demonstration, we also noted that the browser is updated in real-time as events are polled. This keeps the information fresh without having to re-check and brings the best of browser based real-time communication to system administrations.

Cloudkick’s implementation is simple and elegant. The young company is demonstrating product leadership by living the mantra of simplicity and utility.

Here’s a sample of the graphs from CloudKick’s feature inventory.

Monitoring Every Server

The goal of this release is to bring servers from the datacenter to power of cloud monitoring. It allows a larger and larger region of infrastructure to rely on outside controls to monitor it’s health and well being.

One feature we we intrigued by with Cloudkick was the ability to tag and filter groups of hosts, and to then set rules across them. For example, tagging all servers “web apps” allows a rule to quickly set custom rules for checking up time.

The company offers an API for its services and uses 2-legged OAuth for API authentication. OAuth is “an open protocol to allow secure API authorization in a simple and standard method from desktop and web applications.”. The company also offers a proxy service that streamlines and secures the connections for hosts that will connect to the Cloudkick services.

Cloudkick is a cloud company monitoring clouds and shows us in many ways the architecture of the future. In one of the blog posts from company, they share “love affair with cassandra” and how multi-master database technology is an enabler for co-location of server assets in infrastructure clouds.

Where does Cloudkick go from here?

Discuss

  

Many developers and designers want to release their work into the world as open-source projects. They want others to be able to build on and share their code. The open-source community is vibrant because of this. Open-source software is available for virtually any application you could think of. Most designers use open-source software or code on a regular basis (WordPress, Drupal and many other CMS’ are open source).

But many developers and designers don’t have a clear picture of what the different open-source licenses really mean. What rights are they relinquishing when they choose an open-source license? Without knowing exactly what the licenses mean and how they’re best applied, developers can’t make informed decisions about which is best for their work.

[By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.]

What Is Licensing?

A lot of confusion is out there about what exactly licensing means. When you license your work, you’re not giving away any of your rights. You still hold the original copyright (or patent if you have one) on that work. What a license does is grant specific permissions for others to use that work.

Licensing is a great alternative to just releasing your work into the public domain or granting permissions on a case-by-case basis. By releasing into the public domain, you relinquish any copyright, and no one is obligated to list you as the original author or contributor. In the latter case, you may end up spending more time dealing with individual permissions than designing or developing.

Open-source licenses make it easy for others to contribute to a project without having to seek special permission. It also protects you as the original creator, making sure you at least get some credit for your contributions. It also helps to prevent others from claiming your work as their own.

GNU General Public License

The GNU General Public Licence (GPL) is probably one of the most commonly used licenses for open-source projects. The GPL grants and guarantees a wide range of rights to developers who work on open-source projects. Basically, it allows users to legally copy, distribute and modify software. This means you can:

• Copy the software.
  Copy it onto your own servers, your client’s servers, your own computer, pretty much anywhere you want. There’s no limit to the number of copies you can make.
• Distribute the software however you want.
  Provide a download link on your website. Put the software on a bunch of thumb drives and give them away. Print out the source code and throw it from the rooftops (please don’t, though, because that would waste a lot of paper and make a mess).
• Charge a fee to distribute the software.
  If you want to charge someone to provide the software, set it up on their website or do anything else related to it, you can do so. But, you must give them a copy of the GNU GPL, which basically tells them that they could probably get the software elsewhere for free. Best to be up front about that, and about why you’re charging them.
• Make whatever modifications to the software you want.
  If you want to add or remove functionality, go ahead. If you want to use a portion of the code in another project, you can. The only catch is that the other project must also be released under the GPL.

Please note that it is very important to see source and binaries distribution as two very different things. Also, there are issues and restrictions with some licenses when used with applications released under “each other”. You can dive into more details in the detailed article Practical Guide to GPL Compliance (via @PierreJoye). To use the GPL, you have to include certain information in the software’s code, along with a copy of the license.

GNU Lesser General Public License

You should be aware of another GNU license: the Lesser General Public Licence (LGPL). It grants fewer rights to a work than the standard GPL. Generally, the LGPL is appropriate for libraries that want to allow linking from non-GPL and non-open-source software. Because the GPL requires that other software with parts of licensed code to also be licensed under the GPL, developers cannot use GPL-licensed code for paid and proprietary software. The LGPL negates this by not requiring other projects with parts of the code to be similarly licensed.

BSD License

BSD licenses represent a family of permissive free software licenses that have fewer restrictions on distribution compared to other free software licenses such as the GNU General Public License. Among different versions of the license two versons are particularly important: the New BSD License/Modified BSD License, and the Simplified BSD License/FreeBSD License. Both have been verified as GPL-compatible free software licenses, and have been accepted as open source licenses by the Open Source Initiative.

The New BSD License (”3-clause license”) allows unlimited redistribution for any purpose as long as its copyright notices and the license’s disclaimers of warranty are maintained. The license also contains a clause restricting use of the names of contributors for endorsement of a derived work without specific permission. The primary difference between the New BSD License and the Simplified BSD license is that the latter omits the non-endorsement clause.

MIT License

The MIT License is the shortest and probably broadest of all the popular open-source licenses. Its terms are very loose and more permissive than most other licenses. The basic provision of the license (minus the information that it is provided without warranty, which comprises the final paragraph) is as follows:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

What this means is that:

• You can use, copy and modify the software however you want. No one can prevent you from using it on any project, from copying it however many times you want and in whatever format you like, or from changing it however you want.
• You can give the software away for free or sell it. You have no restrictions on how to distribute it.
• The only restriction is that it be accompanied by the license agreement.

The MIT License is the least restrictive license out there. It basically says that anyone can do whatever they want with the licensed material, as long as it’s accompanied by the license.

Apache License

The Apache License, Version 2.0, grants a number of rights to users. These rights can be applied to both copyrights and patents. Because some licenses can be applied only to copyrights and not patents, this flexibility would be an obvious factor in a patent developer’s choice of license (read this article on How Stuff Works for an explanation of the difference).

Here are some more details on what the Apache License allows:

• Rights are perpetual.
  Once they’ve been granted, you can continue to use them forever.
• Rights are worldwide.
  If the rights are granted in one country, then they’re granted in all countries. For example, if you’re in the US and the original license was granted in India, you’re not prevented from using the code under the license.
• Rights are granted for no fee or royalty.
  Not only will you not be charged any kind of up-front usage fee, but you will not be charged fees on a per-usage or any other basis either.
• Rights are non-exclusive.
  You can use the licensed work, and so can anyone else.
• Rights are irrevocable.
  No one can take these rights away once they’re granted. In other words, you don’t need to worry that down the road, when you’ve created some awesome derivative of the licensed code, someone will swoop in and say, “Sorry, you can’t use this code anymore.” (A clause in the license states that if you sue someone over patent infringement on anything under this license, then your license is terminated, but that only applies to patented work, and as long as you don’t sue anyone over the work, you won’t have to worry about it.)

Redistributing code also has special requirements, mostly pertaining to giving proper credit to those who have worked on the code and to maintaining the same license.

Creative Commons

Creative Commons (CC) licenses aren’t quite open-source licenses, but they are commonly used for design projects. A wide variety of CC licenses is available, each granting certain rights. A CC license has four basic parts, which can be enacted individually or in combination. Here’s an overview of the parts:

• Attribution
  The author must be attributed as the creator of the work. Beyond that, the work can be modified, distributed, copied and otherwise used.
• Share Alike
  The work can be modified, distributed and so forth, but only under the same CC license.
• Non-Commercial
  The work can be modified, distributed and so on, but not for commercial purposes. The language about what constitutes “commercial” is a bit vague (no express definition is provided), so you may want to clarify this in your own projects. For example, some might interpret “non-commercial” as simply meaning that you can’t sell the work. Others might take it to mean that you can’t even put the work on a website that has advertising. Still others might consider something is “commercial” only if it makes a profit.
• No Derivative Works
  This means you can copy and distribute the licensed work, but you can’t modify it in any way or create work based on the original.

As mentioned, these parts of the CC license terms can be combined. The most restrictive license would be the “Attribution, Non-Commercial, No Derivatives” license, which means that you can freely share the work, but not change it or charge for it, and you must attribute it to the creator. This is a good license to get your work out there but still maintain more or less complete control over how it is used. The least restrictive would be the “Attribution” license, which means that as long as people credit you, they can do whatever they like with the work.

CC licenses are used more for design work than development, but nothing bars you from using it for the latter. Just be aware of exactly what is and is not covered under each part.

Further Resources

• Creative Commons Licenses
  The official page, with descriptions of the CC licenses and links to the legal copy of each.
• Open Source Initiative
  A fantastic website that has information on the vast majority of open-source licenses.
• Open Source Licenses Comparison
  A chart comparing major open-source licenses.
• Understanding Open-Source Licensing
  A pretty thorough overview of what open-source licenses are and what they’re good for.
• HOW TO: Pick an Open Source License
  An overview of what to consider when choosing an open-source license.

(al)

© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 44 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

  

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

[By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]

Calendars and Timelines

jDigiClock – Digital Clock (HTC Hero inspired)
jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

jQuery Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date / Time Picker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

JavaScript Debugging and Validation Tools

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

CompanionJS
Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

How to Test your JavaScript Code with QUnit
QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s written by members of the jQuery team, and is the official test suite for jQuery. But QUnit is general enough to test any regular JavaScript code, and it’s even able to test server-side JavaScript via some JavaScript engine like Rhino or V8.

JS Bin – Collaborative JavaScript Debugging
JS Bin is an open source collaborative JavaScript debugging tool.

Forms, Buttons & Navigation

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Layout tools

jQuery {css}designerGrid Plugin
{css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

css-template-layout
JavaScript (jQuery) implementation of the CSS Template Layout Module

How to create a fluid grid with jQuery
Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

closure-templates
Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They are easy to learn and customizable to fit your application’s needs. Closure Templates support JavaScript and Java and use a data model and expression syntax that works for either language. You can also use the built-in message support to easily localize your applications.

Useful jQuery Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

jParse – jQuery XML Parse Plugin
jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable).

jQuery Quicksand plugin
Reorder and filter items with a nice shuffling animation.

typeQuery, change website typography with jquery
typeQuery gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id=”tag” and the font-family value at select object with id=”family”: $($("#tag").val()).css("font-family", $("#family").val());

Flip! A jQuery plugin v0.9.9
Flip is a jQuery plugin that will flip easily your elements in four directions.

Data Encryption With JavaScript: jCryption
jCryption is a jQuery plugin for encrypting POST/GET data submitted by forms. It uses public-key algorithm of RSA for the encryption & has a PHP file for handling the decryption of data.

Minimalist jQuery: 11 useful plugins under 4K
jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

Undo/Redo in jQuery
An easy-to-use plugin for adding undo/redo capabilities to a jQuery application. It is based loosely on the Objective-C/Cocoa way of doing things.

editease
editEase – jQuery CMS | no fuss, no database, no worries

jsHub
jsHub is a single piece of JavaScript (a “tag”) that can handle reading different sorts of page information and then send them to many different vendors’ products. One piece of code to send to Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel. Instead of one piece of JavaScript per vendor, jsHub has a single piece of code (the “hub”) and plugins that know how to translate into the required wire protocol for each vendor. Vendors only maintain the plugin for their product.

Educational JavaScript Resources and Tutorials

Caffeinated Simpleton
JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. One of those quirks is this, and how it’s not necessarily what you expect it to be. this isn’t that complicated, but there are very few explanations of how it works on the internet. This article is an attempt to explain how this works and how to use it properly.

What You Need To Know About JavaScript Scope
This article discusses how JavaScript handles scope and how various JavaScript libraries provide methods for dealing with it and how they smooth out a few bumps. We’ll also look at how you can get back to basics and do some interesting scope wrangling without a library, a useful approach if you’re writing code that needs to stand alone.

Learning Advanced JavaScript
A very nice tutorial to learn JavaScript, containing code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

Highlight search terms automagically with JavaScript and mark
Script surrounding the search term(s) with the mark element rather than a span, although the class searchword is retained in case you want to style these marks differently from others. In the CSS, the rule article mark is just added to turn it a gentle shade of pink.

10 Really Helpful Traversing Functions in jQuery
With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we’ll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

Using keyboard shortcuts in Javascript
If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

Code Conventions for the JavaScript Programming Language
This is a set of coding conventions and rules for use in JavaScript programming.

jQuery – Select element cheat sheet
This cheat sheet helps you to find the index of a selected option, set the selected option by value, set the selected option by text, insert a new option before or after another and get the text or value of the selected option.

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

Park your Horse, Code Cowboy: Professional JavaScript Workflows, Part 1
In this series, we’ll talk about tools & techniques you can use to cover those No’s, and cut a lot of strife & embarrassment from your JavaScript experience.

JavaScript Reference examples (example source code)
JavaScript Reference examples, organized by Objects, Properties, Methods & Collections. Some Event Handlers Reference are also available.

JavaScript best practices
A compilation of best practices and good advice I’ve amassed over the years, much of it learnt the hard way (experimentation and suchlike). Take the advice below to heart and keep it in a part of your brain that has a quick access route so you can apply it without thinking about it. I am sure you will find things to disagree with, and that is a good thing – you should question what you read, and strive to find better solutions. However, I have found that following these principles has made me a more effective developer and allowed other developers to build upon my work more easily.

wtfjs
JavaScript is a language we love despite it giving us so much to hate. This is a collection of those very special irregularities, inconstancies and just plain painfully unintuitive moments for the language of the web.

Related Posts

You may be interested in the following related posts:

• 50 Fresh JavaScript Tools That Will Improve Your Workflow
• 45 Powerful CSS/JavaScript-Techniques
• 70 Useful AJAX And JavaScript Techniques

Poll

What programming language should we cover in next round-up?surveys

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 63 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: AJAX, javascript, jquery

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words.

Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the more you draw over it:

The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.

You can also save images using data URI encoding.

As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.

(Thanks FND)

Of course, it’ll still work without sticking to a surface, as it’s still a normal GorillaPod above the feet. But if you feel the need to have your camera attached to the side of your car door, well, now you’ve got the ability to. It’ll be available in April.

Infinitec has created a USB stick that contains an 802.11n module capable of creating an ad hoc network through any device’s USB port. But on the receiving end, it appears as nothing more complicated than a flash drive.

In other words, you can stream media to devices that aren’t necessarily so thrilled with you streaming media. Placed in a DVD player, for instance, you need not worry about the player’s supported network standards or your PC’s sharing settings. Just set the Infinitec stick to anywhere from 1GB to 1TB+ (depending on how much storage you expect your player to support), then load MPEG4s right from the stick…streamed from your PC loaded with accompanying software.

I could see several uses for Infinitec's little device—namely, adding a media extender to any room that has a TV with a USB port. That is, if the price is right whenever it eventually comes out. [Engadget]

Alan sez, “A great, but slightly disturbing, look at how pervasive green-screening has become in simply every scene in television these days. Pretty much everything you think is outdoors is faked, at least to some degree. I particularly like the faked ferry fire…”

Stargate Studios Virtual Backlot Reel 2009

(Thanks, Alan!)

  

Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.

This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

CSS Layouts: Techniques And Workarounds

Facebook Style Footer Admin Panel
Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 2.

Adaptable View: How Do They Do It?
This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”

Easy Display Switch with CSS and jQuery
A quick and simple way to enable users to switch page layouts using CSS and jQuery.

Quick Tip – Resizing Images Based On Browser Window Size
In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.

One Page Résumé Site
A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.

Pegs: Automate Display: fixed++
Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.

CSS 100% Height
A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.

CSS3 Drop-Down Menu
A clean, simple a nice navigation menu, designed by Nick La.

CSS Trick for a Scrolling Transparent Background Effect
Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.

Fluid Images
By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?

Scroll/Follow Sidebar, Multiple Techniques
A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.

Vertical Centering With CSS
There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.

Create YouTube-like adaptable view using CSS and jQuery
Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.

How To Create a Horizontally Scrolling Site
If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!

Purely CSS – Faking Minimum Margins
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.

Create Sidebars of Equal Height with Faux Columns
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.

Setting Equal Heights with jQuery
Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.

Quick Tip: Centered Fake Floats
There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.

6 Flexible jQuery Plugins to Control Web Page Layouts Easily
A collection of six jQuery plug-ins to manage page layouts easily.

Four Methods to Create Equal-Height Columns
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.

How to: CSS Large Background
A tutorial with various CSS examples for how to create a large background using either a single image or double images.

A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.

Perfect Full Page Background Image
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.

Smart Columns With CSS and jQuery
In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.

Images And Visual Effects With CSS

A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.

Rolling a coke can around with pure CSS
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!

Grayscale Hover Effect With CSS and jQuery
A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.

Codename Rainbows
Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.

Image Rollover Borders That Do Not Change Layout
With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.

Horizontal Stripes
This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.

Nine Techniques for CSS Image Replacement
Put nine different techniques of image replacement to the test.

Bokeh effects with CSS3 and jQuery
This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

A Stationary Logo That Changes on Page Scroll with CSS
Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.

Silhouette Fade-Ins
To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.

Creating Triangles in CSS
Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.

A parallax optical illusion with CSS: The Horse in Motion
Time for some fun with CSS and optical illusions.

Pure CSS Line Graph
The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.

Zooming with jQuery and CSS
This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.

Create Resizing Thumbnails Using Overflow Property
This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.

Cross-browser drop shadows using pure CSS
Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.

Date Badges and Comment Bubbles for Your Blog
One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.

CSS Tables And Web Forms

UX trick: display form data as tabular data
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.

Tables: Not As Evil As You Think
Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.

Perfect Drop-Down Log-In Box Like Twitter Using jQuery
This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.

Make a Select’s Options Printable
When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.

Twitter-Like Log-In With jQuery and CSS
This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.

Clean and Pure CSS Form Design
This tutorial illustrates how to design a pure CSS form without using HTML tables.

CSSG Collection: Free Comment Styles
This is the second CSSG collection from CSS Globe.

Have a Field Day with HTML5 Forms
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.

Editable/Printable Invoice
Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.

How to Mask Passwords Like the iPhone
Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.

Make Web Forms Suck Less With Labels
We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.

FancyForm: JavaScript checkbox replacement
FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.

jQuery checkbox v.1.3.0 Beta 1
A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.

Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.

Fluid Search Box
Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.

Last Click

Browser Pong
A whole new pong game using three browser windows for the ball and racquets. Clever!

Related posts

You may want to look at similar CSS-related posts that we published last months:

• 45 Powerful CSS and JavaScript Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 5 Useful Coding Solutions For Designers And Developers

(kk) (jb) (vf) (al)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 48 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, jquery