By no means do I assume that everything in this article is etched in stone and error-free, but I think this will be a good starting point for this topic, and I will be happy to add to or amend any points that anyone feels need adjusting or clarification.

Consider this a starting point for discussing best practices for CSS3, especially since there don’t seem to be many articles available yet that exclusively discuss CSS3 best practices.

Think Progressive Enhancement

The most accessible and widely-supported websites are those created with progressive enhancement in mind. Standards proponents have for years discussed the benefits of accessible, backwards-compatible content – specifically in relation to JavaScript and Ajax-based websites and applications.

The same principles apply to CSS3 development. Website and app visuals that are critical to the user experience should not be dependent on CSS3. CSS3 should be used to enrich and enhance an already fully-functional experience.

Since CSS3 has now crossed into a gray area of event-driven features, more care needs to be taken to ensure that non-supporting browsers do not greatly hinder the user experience.

Organize and Comment Vendor-Specific Syntax

Unfortunately, since many CSS3 features are supported with different proprietary syntaxes, this means that some parts of your CSS code will become bloated. But you can still keep those areas of your code organized by inserting comments indicating the browser version that the code is for, and also by keeping the different lines of code in a recognizable order with the standard format listed last.

It’s also best practice to list your CSS3 items last in the CSS declaration. So, for example, if you’re rotating an item with CSS3, your code might look something like this:

#rotation {
	float: left;
	width: 200px;
	-webkit-transform: rotate(-5deg); // chrome, safari
	-moz-transform: rotate(-5deg); // firefox
	-o-transform: rotate(-5deg); // opera
	transform: rotate(-5deg);
}

In the example above, I don’t believe the standard syntax is supported by any browser, but this code just serves as a way to theoretically demonstrate the method of listing CSS3 properties last, and the standard property at the end of the declaration. Keeping the CSS3 properties last will also ensure that any “fallback” properties are in their correct place. Which brings us to the next point.

Use Fallbacks for Background-Related Enhancements

Some of the new CSS3 features require that the background property be used. The background property is nothing new to CSS, but the possible values have been upgraded with CSS3, allowing use of RGBA, HSLA, gradients and even multiple background images.

In most cases, a non-supporting browser will still display a similar feature, and the lack of an HSLA or RGBA color will not affect the result. But with a gradient, you may need to declare an IE-only fallback in a separate stylesheet, or a background color that it will fall back to if a gradient is not supported.

So, you might need something like this:

#element {
	background-image: url(images/bg-transparent.png);
	background-color: rgba(98, 135, 167, .5);
}

In the case of multiple backgrounds, be sure to list the most important element first, so it serves as the fallback.

For most situations, I don’t think this particular practice will be necessary, but it’s good to keep in mind the possibility that a fallback color or background image may be needed.

Use Rotations, Animations & Scaling Sparingly

Although WebKit-based browsers have opened up some incredible possibilities with CSS3, we don’t want to get carried away. Subtle, tastefully selected events and animations are usually the best choice.

There’s a reason that Flash intro pages became a tiresome practice; they were often self-indulgent and pretty pointless, doing nothing but slowing down the user and making them download more resources than necessary.

To prevent the web from becoming filled with CSS3 trash, let’s use the new features carefully and in a dignified manner that doesn’t harm or slow down the user experience.

Be Careful With Typography

Making enhancements on text with CSS3 has become more common, and many sites are now employing the @font-face technique to use custom fonts.

Make sure that any typography-related enhancements do not affect the readability of the site. Sometimes, as designers, we take an overall view of a website’s layout, and try to make every little detail as beautiful as possible, but forget the most important thing: That the content should be accessible and readable.

So, if you’re considering using shadows, gradients, or transforms on typographical elements, think twice about it, and strip out any unnecessary enhancements that cause undue harm to the readability or accessibility of the site.

Test in All Browsers With Fallbacks Enabled

Testing of course is one of the most important parts of successfully adding enhancements. But the advent of CSS3 features may add more pressure in this area.

Don’t be content to just test the enhancements at full-throttle in the most supportive browsers; test in the non-supporting browsers while temporarily removing some of the enhancements, maybe one by one, to see the experience with fallback options enabled.

This makes commenting and organizing code even more important, and will likely add more quality assurance testing to many design teams’ schedules.

What Did I Miss?

Surely this is not a complete list. Add your comments below if you feel there are important CSS3 enhancements that require a best practice method or technique, and I’ll be happy to add to a few end-points to this article to round it out.

Source: impressivewebs

Be aware that you may not be able to see some of the demos. To know what elements of HTML5 your browser supports, take a look at this chart.

1. APIrocks HTML5 slideshow

If you only have time to watch one of the demos suggested in this article, take a look at this great slideshow by APIrocks. It is not the most spectacular demo in the list, but it gives some cool examples with explanations and code examples.

2. Sublime Video: a HTML5 video player

Ready to see some videos in your browser with no plugin or flash required? If so go take a look at SublimeVideo. I’m not even mentionning how gorgeous the player is or how cool the full-window functionality is.

3. Blowing up HTML5 video

This will probably not only blow a video in your browser, it will also blow your mind. It’s very experimental and hard to see a use for this, but it’s good to see that technical limits will be pushed.

4. HTML5 canvas games

The screenshot that you see under this text is taken from the Tetris 3D created in javascript by Ben Joffe using the HTML5 canvas element. Don’t miss his other games and demos, it’s just amazing.

5. Canvasmol

Another HTML5 demo using canvas, it shows you some molecules in a rotation.

And much more

On the HTML5 demo site, go take a look there.

Source: designer-daily

All designers at some point in their career go through the process of encountering a weird display issue, searching for a resolution, and discovering a trick, technique, or hack could have saved them hours of frustration—if they had only known when they started.

We’ve put together a list of the most frustrating and time-consuming CSS headaches and, more importantly, their solutions (along with examples and further resources). I hope this list will help you save some gray hairs. As for me, I think I feel some coming in right now…

Resets & Browser Inconsistencies

Not all browsers are created equal. In fact, every browser is different. What is the default margin, padding, or font-size of a <p> element? You might be surprised at the wide range of values. To handle the differences between browsers, many of us want to level the playing field and start from scratch, by using CSS reset styles.

The early stages of resets, designers dealt with differing margin and padding values, using a global reset:

* { margin: 0; padding: 0; }

But, as more people used and discussed resets, it became clear that resetting only margin & padding wasn’t enough (and, applying the above rule to every element is taxing on the rendering engine). Thanks to the work of Eric Meyer and other CSS pioneers, a better, more complete collection of reset rules was created:

html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, font, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* remember to define focus styles! */
  :focus {
	outline: 0;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
  table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,  q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}
  

As important as it is to note which elements are included in the most popular CSS reset available today .It’s also important to note some of the elements that are deliberately excluded from this list:

• input
• button
• hr

These elements were excluded because their cross-browser differences are so vast that you would have to completely unstyle them to create a "bulletproof" element. They’re so weird, that even then, there’s no guarantee.

Resources for Resets

• Eric Meyer’s Resets and the reasoning behind them
• Smashing article: “Design from Scratch”
• Google BluePrint CSS & Resets
• Yahoo YUI CSS Resets

Box Model — Margin, Padding & Borders

The box model is the basis for all layouts. It governs the dimensions & spacing of the elements on a page. To understand it, we have to understand the difference between block-level elements and inline elements.

Block-level elements, by default, take up the entire width of their containing element and the height of the default line-height. They will stack up underneath each other, top-to-bottom. Therefore, by default, they will take up their own line on a page. Some block-level elements are: <div>, <pre>, <p>, <ul>, <ol>, <li>, etc.

Inline elements are, just as their name implies, in-line. They will stack up next to each other, left-to-right. When given content, they will take up the exact width and height of that content. Given no content, they will collapse down and have no width or height. Some in-line elements are: <img>, <em>, <strong>, <a>, <span>, etc.

All HTML block-level elements have five spacing properties: height, width, margin, padding, and border (inline elements have them too, they just work a bit differently). Width and height are tricky attributes, as they require a bit of calculation. When measuring an element’s width, designers must consider the entire box.

In the example below, the box has a total width of 260px. The margin, padding, and border are 30px each (remember, that’s 30px on top, 30 on bottom, 30 right, and 30 left). So, in this example, the margin takes up 60 pixels of the box’s width. Likewise, the border and padding consume 60px each. All together, the margin, border, and padding amount to 180 pixels of the box’s total width.

We know that the box’s total width is 260px, but in CSS the width attribute refers to the content area on the inside of the box. So, for this example, we have to subtract 180 pixels (for margin, border, and padding) from 260 (total box width), leaving us with a content area of 80px. Therefore, our CSS looks like this:

div {
	margin:30px;
	border:30px solid yellow;
	padding:30px;
	width:80px;
	height:80px;
    }

Extras

1. All of the examples and rules we’re discussed for the width property also apply to height.
2. margin can support negative values. Use them cautiously but they can prove to be very strong design elements.
3. Don’t forget the units with the box model. Only a zero-value (margin:0;) can be written without a unit specified.

Resources for CSS Box Model

• W3C CSS Specifications
• HTMLsource Box Model tutorial by Ross Shannon
• “Beginner’s Guide to Margins and Paddings” at Web Designer Notebook

Dimensions — Width, Height, Min & Max

Now that we understand how to use width and height in unison with the box model, let’s look at some of the flexibility of CSS dimensions. Modern browsers support min- and max-width (and the same for height), allowing us to get creative with dimensions and create flexible layouts.

Width/height specify the space an object should occupy. They can be measured in pixels (10px), ems (10em) and percentages (10%), as well as a few other units. Defining a width or height for an element will force that element to keep those dimensions, regardless of the content inside it. So, if our content is too big for its container, it will be cut off, hiding the bottom of our content (or just look really messed up).

Min-width & min-height

Giving an element a min-width or min-height will set the element to our exact dimension by default. But, since we only provided a minimum dimension, as the content grows, the containing element will allowed to stretch and all of our content will remain visible.

Min-width & min-height can he useful for form elements like <input /> and <textarea>. We can define them with a minimum width/height and let them expand as the user types.

In IE6, "height" acts the same way "min-height" does in modern browsers as a container will grow with content (something to be aware of when using building for IE6).

Max-width & max-height

If we give an element a max-width or max-height, it will collapse down to the size of our content by default. As our content grows, the container will stretch—until it reaches our maximum. Then our remaining content will be cut off or look really weird hanging of the bottom of a content block.

Max-width & max-height can be useful for browsing long lists (if you correctly manage your overflow – create scrolling if the list goes too long).

Using Max & Min width in IE6

Min & Max width are both great tools to have in your design arsenal, but unfortunately they don’t work in IE6, so what do we do? We usually lock down the width of our site instead of creating the ideal fluid layout we want, sacrificing user experience for out of date browsers.

Luckily, we can use a short JavaScript command targetting IE to accomplish a nice fluid layout with max & min widths in IE6:

#page-wrap{
	min-width:800px;
	max-width:1000px;
	width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}

In the above example, you can see that the smallest width for this page is 800px, and the largest is 1000px; not much of a flex, but the concept can be applied to any element.

And if you only wanted to use min-width:

#page-wrap{
	min-width:800px;
	width:expression(document.body.clientWidth < 800? "800px": "auto" );
}

Resources for dimensions

• Top 10 CSS Tricks from SitePoint
• Cross Browser Min-height
• Min-width for Internet Explorer
• CSS Dimension Properties

Floats & Clearing

A float will place an element outside the normal flow of elements and moves the element right or left until it reaches the margin or padding of another block-level element. Float and clear are some of the most powerful—and the most misunderstood—properties in CSS. To understand it, we must refer back to block-level vs. inline elements.

Applying float to an element will automatically make it a block-level element. This means two things: 1) by default, all floated elements (even <span> and <strong>) will behave like block-level elements, 2) Giving an element both float:left; and display:block; is redundant and unnecessary. Also, using display:inline on a floated image is actually a very popular method of fixing many cross-browser quirks.

Floating a div to clear a div

Floating a div to clear a div is one of those things you stumble upon with some experimenting and frustration. What basically happens is that you can apply a float to a parent element that contains other floated elements and they will all equalize and clear properly:

HTML

<div class="parent-element">
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
     <div class="floating-element"></div><!--/.floating-element-->
</div><!--/.parent-element-->

CSS

.floating-element   { float:left;width:33%; }
.parent-element     { float:left; }

And, of course you’ll need some content in there to fill out the divs.

There are a lot of clearing techniques you can use to clear floated divs. Some require extra markup, some don’t work in IE 6 and some are great, but don’t apply to every situation. What did I wish I knew about clearing floats when I started? Everything.

Resources for clear and float

• CSS Float Theory
• CSS Float Property
• Clearing Floats
• Using Floats for Layout

Conditional Comments

Back in 2004, when I really got into full-time Web design I used a lot of IE hacks and techniques to patch together sites in an attempt to achieve some level of cross browser compatibility. This can cause very bloated and slow loading style sheets. Everyone was doing it, heck, there were even articles about how to best organize your IE hacks.

Little by little the design community discovered a hidden gem buried within the functionality of the Triton rendering engine (Internet Explorer). You could use IE specific HTML to target specific versions of the browser and then load a special style sheet just to deal with those issues.

<!--[if IE]>
Target all versions of IE
<![endif]-->

<!--[if lte IE 7]>
Target all versions of IE that are less than or equal to "7"
<![endif]-->

<!--[if IE 6]>
Target IE 6
<![endif]-->

Using conditional comments to target IE and cut out your hacks, will slim down your main style sheet, and help load the page quicker in browsers that don’t need the correction code.

Resources for Conditional Comments

• Conditional Comments
• How to: CSS Conditional Comments
• About Conditional Comments from Microsoft

Overflow & Zoom

Like many designers, if there’s time to be wasted on a project, it usually gets wasted dealing with IE 6 and some of it’s weirder quirks. This is where overflow and zoom have helped me a great deal.

Overflow

Many-a-times when I’ve encountered a serious layout issue, a simple application of overflow:hidden on the offensive div would solve the problem. It’s difficult to pin point specific issues for this, but it can happen in any browser (I just had it happen in Safari a couple weeks ago) and the overflow property can provide a quick solution to your cross browser woes.

Zoom

To my surprise, the zoom property is not very well know, but a very powerful tool in dealing with cross browser issues; particularly IE 6/7. Zoom is a proprietary IE property that actually does effect the zoom level of a page (if you set the zoom to 2 you’ll see everything get bigger). As a site effect it also triggers hasLayout on the offending element, and fixes a lot of layout issues. Try it out, it actually saves a lot of time.

body { zoom:1; }

Since hasLayout won’t trigger in any other browser, it’s generally thought to be safe to put zoom in your main style sheet, but it you’re doing IE specific work anyway, I’d advise putting it in with the rest of the IE CSS just in case there are any problems in the future, "future proofing".

Resources for Overflow & Zoom

• Web Master World Forum
• The Power of Zoom
• About Overflow from QuirksMode

When CSS isn’t the Answer

Believe it or not, CSS is not always the answer. Especially now when we live on a Web that is in the middle of the biggest browser war to date. Sometimes CSS just doesn’t do everything we want on as many platforms as we need it to.

Spending hours searching for a CSS solution to a non-critical element that can be easily fixed with JavaScript usually just isn’t worth it. Now that we have great libraries like jQuery readily available to us, anyone well versed in CSS can quickly pick up JavaScript. And let me tell you… if I new more about JavaScript when I started it would have saved me a lot of time and frustration.

Conclusion

There are a lot of little idiosyncrasies with CSS that you’ll encounter over time with experience and frustration, but we’re looking for ways to minimize that frustration. The best advice I can give someone in dealing with CSS is the same advice someone gave me when I was in college: go to class. If you read the blogs, keep up with all the information and learn everything you can you’ll save a lot of time when you do encounter the inevitable rendering problem. To be honest, half the battle is knowing what a bug is called so you can Google it.

But of course an article like this always poses the question: What do you YOU wish you knew when you started?

Source: Noupe

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.

One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

Old Opacity Settings

Here are the old opacity settings that were required for older versions of Firefox and Safari:

#myElement {
	-khtml-opacity: .5;
	-moz-opacity: 0.5;
}

The -khtml-opacity setting was for older versions of the webkit rendering engine, and was necessary in order to get older versions of Safari to work. This proprietary property is now obsolete and is no longer needed unless you know that you have a significant amount of web traffic coming from visitors using Safari 1.x., which is highly unlikely.

The next line uses the proprietary property -moz-opacity, which was aimed at very early versions of the Mozilla rendering engine, and dates back even to Netscape Navigator. Firefox stopped requiring the -moz-opacity property since Firefox 0.9. Firefox 3.5 (now using the Gecko engine) has dropped support for this property.

CSS Opacity in Firefox, Safari, Chrome, and Opera

Here is the simplest and most up to date syntax for CSS opacity in all current browsers except Internet Explorer:

#myElement {
	opacity: .7;
}

The syntax above will set an element to 70% opacity (or 30% transparency). A setting of opacity: 1 would make the element opaque, whereas a setting of opacity: 0 would make the element completely invisible. This is easy to remember if you keep in mind that the word “opacity” comes from the word “opaque”, which is the opposite of “transparent”. The lower the opacity (or “opaqueness”), the closer you’ll be to transparency.

The opacity property can be set to two decimal places, so a value of “.01″ would be different from a value of “.02″, although the visible difference would be very hard to notice. Generally, it’s best to stick to one decimal place, using values like “.3″ or “.7″.

CSS Opacity in Internet Explorer

As usual, Internet Explorer doesn’t play well with others, and since there are currently three different versions of Internet Explorer in common use, the transparency settings are different, and sometimes require additional CSS to get them to work.

#myElement {
	filter: alpha(opacity=40);
}

The above css uses the proprietary filter property to get transparency to work in Internet Explorer versions 6-8. There is one caveat for IE6 and IE7: In order for the transparency settings to take effect, the element in question needs to “have layout”. An element can be given layout using a number of CSS properties, including width and position. For details on the Microsoft-only hasLayout property, and how to trigger it, see this article.

Another way to set transparency via CSS in Internet Explorer 8 uses the following syntax (note the comments that indicate which versions):

#myElement {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	/* first line works in IE6, IE7, and IE8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=4)";
	/*second line is IE8 only*/
}

(note that the second line defines opacity at “4″, but this is only to correct a problem with the code highlighter; the value should be “40″)

The first line will work in all currently-in-use versions of IE, and the second line works only in IE8. Notice the differences between the two lines: In line two, there is a -ms- prefix attached to the filter property, and there are quotations around the entire value declaration, both of which are necessary for that syntax to work.

To be honest, I really have no idea why you would even need either of the “progid” methods, since the filter property works on any element that has layout in all versions of IE using the syntax alpha(opacity=40), as shown in the first example in this section.

Setting and Changing CSS Opacity with JavaScript

You can access the CSS opacity property in JavaScript using the following syntax:

document.getElementById("myElement").style.opacity = ".4";
// for most browsers
document.getElementById("myElement").style.filter = "alpha(opacity=40)";
// for IE

The above lines of code could be used inside of a loop or other dynamic function that alter the values in an incrementing fashion. Of course, you would first identify the client capabilities using feature detection in order to decide which line of code to use.

Setting and Changing CSS Opacity with jQuery

Setting CSS opacity directly using jQuery is much more practical and easier to implement, because the code is exactly the same for all browsers, and you don’t have to worry about an element “having layout” in IE:

$("#myElement").css({ opacity: .4 });
// works in all browsers

You can also animate the opacity of an element using the following jQuery code:

$("#myElement").animate({
	opacity: .4
	}, 1000, function() {
	// Animation complete; works in all browsers
});

Whatever the opacity of the element is when the animation begins, it will animate until it reaches an opacity level of “.4″. The speed of the animation is set using the value “1000″, which is the duration of the animation in milliseconds. The final property listed is an optional callback function that will run some code when the animation is complete.

If the opacity of this element is already set to “.4″ in the CSS, then you won’t notice any difference when the animation runs, so the animated value has to be something significantly different.

Transparency Through RGBA

Another CSS3 technique that is supported by a few newer browsers (namely Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+) is setting opacity by means of an alpha channel in RGBA. Here is the syntax:

#rgba {
	background: rgba(98, 135, 167, .4);
}

In the above declaration, the background is given a color in RGB (the first three numbers), then an alpha setting is given last, to implement transparency on the given color. This alpha setting works the same way as the opacity property, with any number accepted from 0 to 1, up to two decimal places. The higher the number, the closer the color will be to full opacity (opaqueness).

Transparency Through HSLA

Similar to the previous declaration, CSS3 also allows the ability to set a color along with an alpha value using HSLA, which represents Hue, Saturation, Lightness, and Alpha. Here is an example of HSLA transparency:

#hsla {
	background: hsla(207, 38%, 47%, .4);
}

For a further explanation on HSLA colors, see this article on W3.org. As is the case with RGBA transparency, the last number represents the transparency setting, and works the same way as RGBA.

Effects on Validation of CSS

If you’re using any opacity settings in your CSS, your CSS code will not validate according to current W3C standards. Many developers are not as concerned about CSS validation as they are about HTML validation, but it’s something to keep in mind. This can be partially resolved for Microsoft-specific styles by placing them in separate stylesheets using conditional comments, but other browsers’ opacity styles (specifically the opacity property) would still be in your main stylesheet, causing validation errors.

The CSS opacity property is part of the CSS Color Module Level 3 (which is part of CSS3), and is (as of this writing) in the last call phase on the specification track, so although it is well supported, there is still some time before it is an official standard.

I hope I’ve covered the most important facts and code for cross-browser CSS opacity. If I’ve left out any important information, or made any errors, feel free to comment and I’ll gladly make any corrections or additions.

Resources

• CSS Color Module Level 3
• W3.org
• animate the opacity

Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer!

1. CSS3 Selectors Test

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

2. CSS3 Please!

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

5. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

6. Border Radius

Allows you to create rounded edge rectangles.

7. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

8. CSS3 Generator

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.

9. CSS3 Previews

Many new CSS3 feature previews and demos.

10. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

11. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

12. Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

13. Font Drag

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

14. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

15. Sizzle

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

16. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

17. CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

19. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

20. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

21. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

22. HTML5 Gallery

A showcase of sites using HTML5 markup

Source: 1stwebdesigner

Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code.

Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing, as shown in the example below:

<div id="header">
  <div id="sub" class="first left">
    ...
  </div><!-- #sub.first.left -->
</div>
<p>
  <!-- #header -->

Use a CSS reset

Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all element have no particular style so you can define your own without the risk of many cross-browser rendering issues.

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Don’t use @import

CSS files can be included using the @import directive. This can be useful when, for example, you want to include a stylesheet into another. Another common practice is to include CSS file in html documents using the following:

<style type="text/css>
  @import url('a.css');
  @import url('b.css');
</style>

While it works, the @import directive is much slower than the other way to include stylesheets into a html document:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

It will not make a difference on low traffic websites, but if you have the chance to own a popular website, don’t waste your visitor’s time using @import.
Source: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” your images

Being a developer, I always found that optimizing my images for the web wasn’t easy. I tried the good old “Save for web” Photoshop command, but most of the time, I ended up with images that were either too big or without a sufficient quality.
As a result, I had the bad habit of using unoptimized images on my websites. This isn’t a problem when you don’t have to care about your site’s bandwidth, but after my recent switch on my vps.net virtual private server, I had to be careful with image sizes.

At this time, I found a very cool tool named Smush It: You enter your unoptimized image url, and Smush It will create a perfectly optimized image for you. You can save up to 70% of the file size, while keeping the original quality.

Don’t mix CSS with HTML

As a markup language, the right use of HTML is to organize documents by defining a header, a footer, lists, blockquotes, etc. Some time ago, front-end web developers often used now deprecated HTML attributes to style a particular element.

Nowadays, the style attribute allows developers to insert CSS directly into a html document. This is very useful for testing or when you’re in a hurry. But the style attribute is bad practice, that goes completely against the CSS philosophy.

The following example illustrates how dirty and hard to read a simple line of code can become, with the style attribute:

<a href="http://www.610design.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">610 Design</a>

Don’t mix Javascript with HTML

Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your html documents. The following bad practice illustrates an onclick event:

<a id="cwc" href="http://www.610design.com" onclick="alert('I love this site!');">610 design</a>

The same result can be achieved using unobstructed Javascript. In this example, I’m using the popular jQuery framework:

$(document).ready(function() {
  $('#cwc').click(function() {
    alert('I love this website');
  });
});

This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keep your html document clean.

Use conditional comments

You know it, IE sucks, and some clients suck even more by requiring you to create webpages which are compatible with this obsolete browser. To target specific versions of IE, you can use the well known IE hacks, as shown below:

height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */

Those hacks are extremely useful sometimes, but they are not the best way to target a specific version of IE, and it will cause your CSS validation to fail.

Instead, you should use the conditional comment shown below to target IE6.

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Place Javascript file at the bottom

A popular practice of the late 90′s/early 2000′s was to place Javascript files within the <head> and </head> tags. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after.

By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed.

    ...
    <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
  </body>
</html>

Use HTML semantically

HTML is not a programming language. It is a markup language, used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, and more.

If you started to create websites in the good old 90′s or in the beginning of the century, you know how dirty the markup was at the time. But happilly, it has evolved.
Among other things, it is important to use html element semantically. As an example, a navigation menu should always be an unordered list:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
  </ul>
  

Test WHILE you build to avoid cross-browser issues

One of the biggest mistake I ever made when developing html, CSS, and javascript, was not to test my pages on multiple browser while I was writing them. Instead, I used to write all my code and just view in Firefox to see how it was rendered.

In theory, this should be good. But as you know, cross-browser issues are a major problem for front-end developers, especially due to IE. If you test your documents on Firefox/IE/Chrome while your writing it, cross-browser rendering problems will be much easier to fix. I have lost hours not doing it, so I hope this final tip will help you saving your precious time. To test on multiple versions of IE, I use this very handy tool.

Source: Cats who code

CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout.

In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process.

ul li:nth-child(3) {
  background-color: #333;
}

ul li:nth-child(2n+1) {
  background:#dfe6ec;
  color: #333;
}

2. The :target pseudo-class

This pseudo-class affects an element that’s the target of a fragment identifier ( point to a specific element on a page, represented by a “#” and an anchor) in the document’s URL. When we click on a link that ends with a fragment identifier that element we are pointing to becomes the target (hence :target).

How to use the target

For example, if the URI was http://www.610design.com/coding/pseudo-classes-to-the-rescue#nth, the following selector would match the element that had an id attribute of “nth”:

div > div:target {
background:#FFC1E4 none repeat scroll 0 0;
border:3px solid #EF4F7A;
padding:10px;
}

Browser Support:

Internet Explorer has no support at all for the :target pseudo-class. Opera doesn’t support this selector when using the back and forward buttons. Other than that, it has support from the other major browsers.

Further Resources on how to use the target

• - The CSS3 :target Pseudo-class And CSS Animations

3. Use the :focus Pseudo Class

You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the background and border color on those elements like so:

textarea:focus, input:focus {
	background:#FFC1E4;
        border:3px solid #EF4F7A;
}

Browser Support:

Most browsers support the :focus Pseudo Class.

4. The negation pseudo-class: :not()

The :not() pseudo-class is extremely useful when you want to apply a style to a class or group of elements, and want to exclude some element(s).

The code below selects all div elements that do not have .comment class.

div:not(.comment) {
border:1px solid #333
}

You can use a comma to choose more than one class. The code below selects all div elements that do not have .comment or .post classes.

div:not(.comment, .post) {
border:1px solid #333
}

Browser Support:

The :not() pseudo-class is only supported by modern browsers (Firefox, Safari and Opera), but not internet explorer.

5. The only-of-type pseudo-class

The only-of-type pseudo-class matches an element that’s the only child element of its type.

This selector will match an img element that’s the only child img element of its parent element:

.post > img {
	float: left;
	}

.post > img:only-of-type {
	float: none;
	margin: 10px;
	}

Browser Support:

The only-of-type pseudo-class is only supported by modern browsers (Firefox, Safari and Opera), but not internet explorer.

Source: http://devsnippets.com

HTML Mistakes

Forgetting to Close a Tag

This is very common, especially in beginners. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.

<div>Text inside the div.</div>

<img src="images/imagename.jpg" /> 

Incorrect DOCTYPE

HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Improperly nesting tags

It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.

<div><strong>text</div></strong>

Capitalizing tags

This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect.

<DIV></DIV>

Forgetting to open or close quotes

I’ve seen this a lot in beginners and will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.

<img src="images/headerimage.jpg" />

Using Inline Styles

This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:

<a href="link.html" style="color: #000; text-decoration: none;">link name</a>

Not Encoding Special Characters

Characters like “©” and “&” should be shown with the proper HTML code for the character. Here’s a great list of characters and their HTML counterparts that you should use.

Confusing Classes and Ids

Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling. Ids are items that are called in just once, like the header div. Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.

CSS

Forgetting to Close Things Properly

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use:

#divname {
	width: 40px;
	height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.

Source: webdesign ledger

In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues.

What are margins?

Beginning developers often use margins and padding interchangeably, but there’s actually a difference between the two.

Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.

An element can have equal margins on all sides of it, which is simply written as:

element { margin: 5px; }

This gives an equal 5px to every side of an element. (Every element is a “block” or 4 sided square or rectable, regardless of it’s visible shape.) An element can also have different margins, or no margins at all on some or all of its sides. This can be written in the short-hand or long-hand style:

element {margin: 5px 10px 2px 4px;}
/*margin: Top, Right, Bottom, Left*/

element {
	margin-left: 4px;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 2px;
} /*if you don't want margins on a side, just leave it out of your CSS*/

There are a few IE issues with margins that probably cause most of all IE layout problems.

• Double margins – The double margin bug in IE6 is probably the hardest bug developers struggle with. If any element is floated and has a margin in the same direction, IE6 will double that margin. So if you have an element that is floated left and also has a margin of 5px to the left, IE6 will give it a left margin of 10px.
• Bottom margins – All IE versions like to ignore bottom margins, so it’s better to use padding for bottom spacing instead.

What is Padding?

Like margins, padding is the space around an element. However unlike margins, which deal with the space around the outside of an element, padding can effect either the outside or inside of an element.

Padding can also be written in the shorthand or longhand version of CSS:

element {padding: 10px;}

element {padding: 5px 10px 2px 4px;} /*padding: Top, Right, Bottom, Left*/

element {
	padding-left: 4px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 2px;
} /*if you don't want padding on a side, just leave it out of your CSS*/

The way padding is handled in the browser is called the box model. IE6+ (in standards mode), Firefox, Safari and Chrome all handle the calculations of padding the same, while versions of IE5 and lower calculate it completely different.

So how does the box model and padding work? Let’s say the element below is 100px in width and height.

Now, let’s say we give it an equal padding of 10px because we have some nice text inside of it and we don’t want it touching the element’s edges. However as you can see below, the padding didn’t push the text inside the element, it just made the element itself bigger! This is when padding is most similar to margins, as it affects the outside of the element.

This is where the idea of the box model comes in. Adding 10px of padding to an 100px element will increase it’s dimensions to 120px. (100px element + 10px top + 10px bottom = 120px).

So if we wanted to keep the element only 100px in height and width, but push the contents inside the element by 10px, we’d need to adjust the actual dimensions to 80px in height and width. Then our element would look like:

Unlike margins, an element with padding does not need to be floated or positioned relatively for it to work, if it’s dealing with padding on the inside of the element. However, if you’re using padding to move the element (or another element around it), it does need to be floated or positioned.

IE5 and below calculate padding opposite of the rest of the browsers. IE5 simply assumes that when you apply padding, you want it affect the inside of the element. Therefor, if you gave an element of 100px a padding of 10px, it would simply push the inside contents 10px in, so there’s no need to adjust dimensions.

Plenty of space

Margins and padding can be tricky when dealing with cross-browser compatibility, but once you get the hang of it, it becomes much easier to anticipate the reactions of browsers.

spy restudios

Its deceivingly simple answer requires that we overcome some elegant human imperfections. Ironically, the answer came to me from a subculture that has its roots deeply planted in the exploration of the human condition: rap.

Design’s Got a Bad Rap

The early courtship process in a relationship is usually characterized by a healthy curiosity for each other’s tastes: favorite restaurant, type of food, fit of jeans, color, movie, book, music, and so on. Music is always high on the list. If your experiences have been anything like mine, a conversation about musical preferences can get as contentious as a political or religious debate.

I was a bit of a music snob when my wife and I met. “After all,” I would think to myself, “I’ve been playing the guitar for the better part of the last two decades; I must be a better judge of music than the everyday listener.”

So, imagine my plight when my wife (girlfriend at the time) disclosed to me, very proudly and excitedly, that she was into hip-hop and pop, and looooooved Jay-Z, Beyonce, and Usher. My heart sank, but I was determined to “cure” her. No love of mine could enjoy to such heathen music.

“It’s not real music,” I explained. “It’s exactly what’s destroying this generation. I can’t believe you would support such crap.”

In her unwitting wisdom, she responded, “That’s just one way to look at it. I just like the beats and melodies. It makes me want to dance. It’s fun.” Blasphemy. The woman I was intending to marry was trying to compromise my values for some… fun?!

The crux of her argument (which took me a good couple of years to accept after umpteen discussions) was that people listen to and select music in different ways. There is no right way to select music. In fact, you could argue that at a cognitive level, music selects us for varying reasons: we relate to the artist, the beat inspires us to dance, a particular melody reignites a fond memory, the song was recommended by someone we trust, and so on.

Subjectivity in musical taste tracks closely to our orientation toward design. And I mean “design” in the broad sense—inclusive of user experience, visual design, information architecture, and so on—even though it’s going to peeve some of my peer “designers” in the software culture.

Is the Lemon Really Yellow?

Sensory experiences—in this context, experiences stimulated by objects or actions that have an inherent aesthetic quality such as music, art, or visual design—are truly subjective. What you sense when you see a color, for instance, can only be accurately described through your sensation of it. Every other account is an approximation at best. It’s no wonder there is a massive body of literature on the topic of color, which has intrigued everyone from Aristotle to Faust’s author, Johann Wolfgang von Goethe.

Goethe was an influential, mid-18th century polymath: a person whose expertise spanned a variety of subjects such as poetry, drama, literature, science, and so on. Among other works, he produced an extensive study titled Zur Farbenlehre (Theory of Colours), in which he questioned Newton‘s application of the scientific method to color theory (pg xxxviii).

Physics alone, Goethe argued, couldn’t sufficiently explain color. To truly understand color, one must look to its softer, cognitive, and often contradictory attributes. Unfortunately, these are not easily quantifiable; as a result, color remains an intriguing topic for exploration even today.

Betty Edwards‘ book Color: A Course in Mastering the Art of Mixing Colors presents a fitting and eloquent observation that affirms Goethe’s hypothesis even today:

Fortunately, a scientific understanding of color theory is not a prerequisite for appreciating or applying color evocatively. One need look no further than the Kuler gallery to see evidence of this.

This is not to say that everyday color enthusiasts are experts at “painting pretty pixels.” But it does suggest two things about the aesthetics of experience design: picking harmonious colors isn’t a scientific exercise and, more importantly, certain individuals are more proficient at it than others.

It’s Not Personal

Edwards also writes about how our sensations are influenced by cognitive bias. Various brain processes affect our ability to see what is actually there—that is, the true data reflected back to the retina—rather than what our preconceptions tell us we are seeing.

Take the phenomenon of size constancy, a neural process that jumbles perception by actually overriding the direct data hitting our retina, causing us to “see” images that fit our preexisting notions of the situation. This is the reason some of us “can’t draw.” Even though the retinal image of the chair is exactly as shown in the image on the left, our brains convince us to draw the right image because we know the relative dimensions of the chair.

Our personal conflicts with creative representations—whether music or the visual design of a Web page—are just that: personal. And, as size constancy illustrates, these conflicts are deceiving enough to pass undetected, despite their irrational origins. Of course, problems arise when we pretend that our personal and subjective sensations are objective.

The tendency to assume that our views correspond to reality has its benefits. Evolutionarily, it has helped us quickly interpret the world. We know, for example, that a silhouette of an elephant on the distant horizon is an elephant. But paradoxically, we find this very quality at the root of our disagreements about music and design.

Ultimately, it’s this same predisposition that leads us to question our creative counterparts’ aesthetic talents and irrationally promote our own views as fact.

In a sense, you could say that the brilliance of a good designer is not defined by her ability to represent the world as she sees it, but by her trained ability to represent it as others expect to see it.

Again, certain individuals are more proficient at it than others.

Is Design Subjective?

We’ve all heard that design is subjective and that “beauty lies in the eye of the beholder.” Unfortunately, we often misinterpret these aphorisms and use them to rationalize why we don’t like certain designs. When someone argues that our reasoning is faulty, it ruffles our feathers.

Another (redundant) way of putting the point is to say that design is subjective from the perspective of the subject (the beholder). From the perspective of the designer, however, design is as objective as anything else. A designer feels that his product is deterministic—no different from a line of code.

Good designers have an acute, trained, and almost instinctual ability to communicate with an audience through their products. Great designers are so objective that what they produce may not even remotely resemble their personal tastes and intuitions.

It’s Time to Grow up

For a design process to produce an extraordinary product, two conditions must be met: stakeholders and participants must unequivocally accept that they aren’t designers, and trust the real designers’ abilities. This of course requires that the real designers are good at what they do. Bill Buxton provides a great template for identifying good designers.

Simple as this recipe seems, few get it right. Elaine Wherry of Meebo recently wrote a piece on why UX professionals are some of the most professionally unhappy folks she’s encountered. Doug Bowman’s legendary goodbye letter to Google tragically confirms some of her observations. Clearly, our industry is not there yet. But we must persevere, for the rewards are rich.

A good understanding of a designer’s process naturally encourages other behaviors integral to designing good products. It allows clients to let designers do their work without telling them how to do it. It makes it easier for designers to measure their work objectively, not relative to their clients’ personal (and often limited) understanding of the context. It improves how designers and other participants collaborate. It streamlines the design process with an undying focus on the customer experience. It frees up team members to focus on their core areas.

Ultimately, it is this simple recipe of acceptance that transforms a design process into its ideal form—an objective, deliberate activity that furthers the cause of commerce—from its typically subjective, clumsy one, which always seems at odds with the bottom line.