This article is about the preliminary optimization to be done on a website before you go up for traffic building methods and Optimizing for search engines, if you are here to know what Search Engine Optimization is, you are wrong you did't notice Optimization:before i think, but its recommended to go through this before you go for SEO.

Do you have a website, there is no doubt that you don't want to rank #1 on Google for whatever keywords that is possible, don't worry it's natural. I agree with Paul Boag (as he mentioned in his article The Inconvenient Truth About SEO for Smashing Magazine) not to spend money on SEO not unless it's necessary (I don't want a battle going on here as it went on Smashing Magazine, I do agree SEO companies are needed). People spend a lot to optimize their website to rank well in searches to increase traffic & sale; but most of them often forget the before optimization tasks (Optimization:before in designer language) which is a key ingredient of the so called process named Search Engine Optimization.

Spending a lot of money on Search Engine Optimization without considering the condition of the website (whether it's ready to welcome user or not) will definitely end in vain, though it could bring in more traffic as may increases the search performance it definitely may not increase sales, there are a lot of modification to be done to increase sale as well. In here we will take a look the tasks that fell in Optimization:before check list.

User reaching your website via search can leave out even if you are ranked #1 for the keyword they searched, for a lot of reasons & a few are:

• Your website design doesn't look professional.
• Poor Usability.
• Dead Links.
• Poor focus on contents.
• Lack of Strategy.
• Not Mobile Optimized (for mobile users).

The first impression counts so getting your web site look professional is a must, if you have an amateur looking website even rank #1 in search won't matter. Regarding the usability, there is nothing else to compromise, poor usability definitely won't get you through. Dead Links without a 301 redirect will get eliminated from the search engines soon, before they are dropped they can bring in catastrophe too, a 404 page always disappoints the user and lose him may be forever.

Poor focus on contents.

Lack of focus on content which invited the user in will definitely annoy them & like the Dead Links problem you lose them forever, even the next time the user reaches you he will hit the back button rather than checking the content.

Lack of Strategy

Strategy is a high level plan to achieve goals under uncertain conditions, here the "user's actions" are always uncertain this makes a Strategic plan necessary, once users reach your website what they look for depends on the type of website and the page, getting the users' attention to the key elements is the goal, achieving it requires a set of plans, these has to be done before the construction of the website.

Going Mobile

At present a mobile optimized website is becoming inevitable, without a mobile optimized version you could be losing a lot of sales because 3 out of 4 mobile searches is known to trigger up actions (Google Mobile Ads report) and Conversion rate for mobile search are twice than Desktop searches. Many businesses fail to develop a mobile website because they don't understand how it can benefit them. While there are many benefits of a mobile website, one stands out more than others.

Whether to go for a separate mobile website or Responsive Web Design its up for, Large organizations can adopt server-side device detection to deliver a better experience, while RWD strategies can (and should) be adopted by companies.

Conclusion

Without completing the basic functionalities of a website, search engine optimization will not work even if you manage to get position #1 in searches, though it can bring extra traffic but they get converted to bounces 90% of the time if the website fails to invite them properly, SEO eats your budget than bringing in sales. Before you call up for an SEO campaign or hire a SEO firm make sure you have these few steps completed because you are the one who is an expert at this than other.

Build to separate the document content (murk-up language) from document presentation, CSS has evolved within time and now there is nothing on the web that isn't possible with it from present different styles according to the screen resolution, for print to animations, gradient backgrounds and a lot more. CSS has changed the way the web was being designed.

Use of CSS in form elements other than the submit button & text is not common, designers still use images & CSS to style form elements, when it can be achieved with CSS alone. Styling with CSS reduces the page load and bandwidth consumption as well. In this article we will style the following form elements using CSS properties:

• Text area.
• Text fields.
• Submit buttons.
• Check boxes.
• Radio buttons.
• Select boxes.
• File upload buttons.

We will be using CSS Selectors to do the magic, if you don't have a good hand on it, you can check out the article on CSS Selectors

Before we get to style the elements according to our needs we must have the default styles added by the browser removed. most browsers add a few pixels of margin & padding by default and some properties to the text, therefore it's necessary to have them eliminated.

input, select, textarea {
  margin:0; 
  padding:0; 	
  font-family:Arial;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  box-sizing:border-box;
}

The box-sizing will let us have padding and border for <textarea> & other elements that cut into its 100% width instead of expanding it.

Text Fields & Text area

Styling these elements is a very common and most designer use these to get some good look for the form, but just in case you don't, here's the code.

HTML

<input type="text" placeholder="Default text" />
<textarea placeholder="Default text" >

CSS

input, textarea { 
    width:12em; 
    border-radius:2px; 
    border: solid 1px #ccc; 
    padding:0.4em; 
    background-color: #f5f5f5; 
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
}
textarea { 
    width:100%;
    height:10em; 
}

Making textarea larger than the other text inputs will give the user a straight idea about the field and also lets them see what they have typed, at least 5 lines will do fine. As far as usability considered it's necessary to let the user know the difference between the input he is focusing on with the rest.

input:focus, textarea:focus {
      border-color:#e8e07f;
}

HTML5 Elements

The new text attributes in HTML5 form elements like email, tel, etc can be styled like normal input fields; using CSS3 attributes selectors though you cannot style HTML5 date and number.

input[type="email"], 
input[type="tel"] {
    .
    .
}

Buttons

For form buttons like submit, reset it is essential to make them eye catching and push-able in order to increase revenue on an e-commerce website.

Styling them is just like styling the HTML5 Form elements using the CSS3 attributes selector. If you are in need of few other buttons other than reset & submit, you can have a class with same set of CSS property.

HTML

<input type="reset" value=" reset ">
<input type="submit" value="submit"> 
<a href="#" class="button">Button</a>

CSS

input[type="submit"], input[type="reset"] { 
        border: solid 1px #ccc; 
        padding:0.4em 0.7em; 
	color:white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
 /*To make the state change a little real*/
	-webkit-transition: background-color 200ms linear;	      /*Safari and Chrome*/
	-moz-transition: background-color 200ms linear; 	      /*Firefox*/
	-o-transition: background-color 200ms linear;	      /*opera*/
	-ms-transition: background-color 200ms linear;
	transition: all 200ms linear;
	background-color: #16a6b6;
	cursor: pointer;
	text-align: center;
}
input[type="submit"]:hover, input[type="reset"]:hover  , .button:hover{
	background:#ee6557;
}
input[type="submit"]:active, input[type="reset"]:active, .button:active{
	background:rgba(255,51,0,1);
}

As mentioned above in the input box styling, letting users know when they focus on an element will improve its usability, in this case we have 2 events hover & active states.

All the fields mentioned above were compact-able with most browsers, the form elements that are being discussed from now on need a Webkit supported browser, at present Google Chrome and Apple Safari supports it, Mozilla is expected to support it with the next release until then the Mozilla & other users will see traditional style.

Select List

After styling some fields without using a single image it's time to get complex, but still we will not be using any image as it's.

  <select> 
  <option>Option 1</option> 
  <option>Option 2</option> 
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option> 
</select> 

Styling the drop down button isn't possible so the tweak is to hide the button using -webkit-appearance and replace it with a custom arrow in the background image. Since we don't want to use the image as it is, we will use a 64base image.

select { 
    background-image: url('data:image/png;base64,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') ; 
    background-repeat:no-repeat;
    background-position:right;
    -webkit-appearance: none /* this is required for Webkit browsers */; 
    -moz-appearance:    none /* this is not supported currently */;
    appearance:         none;
    background-color:#e6e6e5;
    min-width:12em; 
     box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.1); 
    border: solid 1px #ccc; 
    border-radius:5px; 
}

Check Boxes and Radio Buttons

File Input is another HTML5 form element, styling is similar to styling Select List, We will hide the default appearance of the element using -webkit-appearance and replace it with the new styles.

HTML

<input type="checkbox" id="box" /><label for="box">Checkbox</label>
<input type="radio" name="choice" id="radio1" /><label for="radio1">Radio 1</label>
<input type="radio" name="choice" id="radio2" /><label for="radio2">Radio 2</label>

Like the Select List drop down button, the Check Boxes & Radio buttons cannot be styled, but have the tweak, hide the button using -webkit-appearance and override.

CSS (Check Boxes)

input[type="checkbox"] {
	-webkit-appearance: none;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05);
	display: inline-block;
	position: relative;
	top: 3px;
	margin: 0 10px;
	padding: 8px;
}

input[type="checkbox"]:checked{
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0 0 10px rgba(0,0,0,0.1);
	background-position:center;
	background-image: url(data:image/png;base64,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);

}

Just to prevent things from getting a mess, the CSS for Check Box & Radio buttons has been split.

CSS (Radio Buttons)

input[type="radio"] {
	-webkit-appearance: none;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05);
	display: inline-block;
	position: relative;
	top: 3px;
	margin: 0 10px;
	padding: 8px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;	
}

input[type="radio"]:checked{
	background-color: #ededed;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0 0 10px rgba(0,0,0,0.1);
}

File Input

File Input is another HTML5 form element, styling is again similar to styling a standard input, using the CSS3 attributes selector to get the magic done.

HTML

In here the only thing possible is to change the look of the choose file button, although it's possible to change the entire element using images, but in order to stay with the policy of no image the "choose file" button is the only available option. The -webkit-file-upload-button selector rocks..!.

CSS

input[type="file"] { 
    margin:0 0 0 0.5em; 	
}
input[type=file]::-webkit-file-upload-button { 
    background-color: #f5f5f5; 
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
    -webkit-appearance: none; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    -webkit-border-radius: 5px;
}

Conclusion

Just like HTML5 new tags, these methods are not being used by developers just to support earlier browser versions, with Mozilla Firefox and IE failing to support a bundle of attributes, these image free styling methods are being ignored completely, using CSS than images will decrease the bandwidth consumption and Load time drastically. You are just left with one question, whether to prioritize performance or browser support, it's up to you to decide which one depending on the client and the project, as developers all we can do regarding this matter is to request user to upgrade their browsers.

Progress Bar is shown for actions such as loading resources, downloading content, progress of an activity like shopping, Registrations or any process that can take time. It won't be new, unless you came to earth in the 21^st Century. Gone are those days where people enjoy watching progress bars, at present users prefer to find an alternative (if exist) when you show a progress bar even if its a network issue, it is necessary that we developers find innovative methods to keep the user engaged.

One easy way to make the user experience (UX) better is to show a progress bar during longer operations but with a secret recipe to make them stay. Progress bars are Annoying in one and Effective in another so it's necessary to use them only when Required.

When should i use a progress bar

As Progress bars generally annoy users it's important to make sure they are used only when required. Progress bars are used not only to ask the user to "Be Patient", they are also used to indicate other progress of a task like survey also, like the details that you filled on a networking website, show the tasks you have completed during a shopping or any other. This concludes that progress bars are used to show progress mainly in two different situations.

1. To notify user about a process that takes time.
2. To show the progress of an activity like shopping, Online Survey & more.

Both have a different effect with Progress Bar, in first one users can get irritated and result in losing them, since the latter doesn't cause the user to run away for no reason and it's a key to keep engaged the user, we will have a look at the effect of having progress bars in both cases.

Progress Bar for process

Progress bar isused in process to inform its working and time it needs, on web its used for

• Web Page Loads.
• Ajax Loads.
• File Uploads & Downloads.
• Few other applications...

These are few tasks where you have to show a progress bar to inform the user things are going fine. But the key lies in the type of progress bar you use. Commonly used progress types are

• Infinite loaders (Circular and Horizontal).
• Loaders with Progress indication.
• Animations.

Though all of the above does the same function i.e. requesting the user to wait, but the loaders with no progress indication sucks. It will end up in losing users that.

Why i should't user Infinite loading progress bars

Loaders without progress indication are useless as they don't keep the user engaged since it does not provide any indication about the progress of the task. It can make to user to think the application is not responding especially the circular loaders. It can make to user to think the application is not responding especially the circular loaders If the user encounters a network problem, the loader will load forever, if its cause becomes unknown to the user and he gets another application loaded fine because it was a short time problem, you lost him forever.

If you have some awesome users who don't have any other options, congratulations you can go ahead, else it's recommended that you don't stick with this one.

It doesn't mean you should completely avoid it, there are situations where you should use these loaders, including the internet giants like Facebook, Google+ use these loaders for a lot of purpose like uploads and other stuffs.

Loaders with Progress indication.

Loaders which inform the progress are more successful that the one which does not in getting the user involved. They definitely show the progress and let users calculate the estimated time for completion which keeps them engaged.

Progress bars need not always give the progress in numeric values even pictorial representational works fine. It's up for you to select one best suits.

The progress bar is a simple but effective way to inform user that things are going well or not & to keep them engaged. Proper use of a progress bar can help it look fluid and responsive, which will improve the usability. Keeping the user in-front of progress bar for long is bad, however interesting it is, you will end up losing them. Make sure you don't scare away the users. User once lost is lost forever.

Animations.

After all your efforts, still the application needs a little more than 4-5 seconds to load then creative animations is the only solution you have, creative animations will get the user involved with its creativity, which can give you enough time interval to load the stuffs. It can make the user reload to enjoy the loading.

Progress indication can also be looped intelligently so it will puzzle out the user & get him engaged hoping to finish loading this time. Letting it repeat for more than a couple of time will make it worse.

Progress Bar for Progress of Activity

For activities like Shopping, Registrations , Online Survey users want progress bars. They so powerful & effective in keeping the user engaged. Research on progress indicators for surveys conducted by Lightspeed Research and Kantar in 2012 revile that Progress indicators do increase survey satisfaction and respondent engagement. They are also called completeness meter.

Why Progress Bars are Effective For Activities like Survey...?

It's definitely a question, here each step are based on completion of tasks, as humans we feel good once we complete task, that is the secret recipe for the effectiveness.

Lightspeed Ahead also reveals that a progress indicator neither impacts the data nor changes business decisions.

Conclusions

The truth is Progress bars are an efficient way to inform the user to stay patient, but asking for too much will end in losing them once in for all, when it comes to type of progress bar make the right decisions, it's always recommended that you don't use the infinite loading progress indicator which informs nothing, unless you are the only one in the industry.

This article was inspired from Amrit Sanjeev (co-organize Bangalore Android User Group), during his speech on "Getting Started with Android App Development" at Google Developer Group Cochin.

In some ways, the world of typography is a lot like the fashion industry. There are timeless looks that never go out of style, but it's the hot newcomers that really know how to turn heads. Read on to learn about these 6 latest typography trends revolutionizing the design world.

Go Large to Improve Readability

Up-sizing your text is a great way to make an impact. Large text isn't just for headers anymore either. A decade ago, 8-point fonts were commonly used for body type. However by 2009, 13-point body text became the most popular. It also isn't unusual to see 16 and 18-point type creeping into websites. Large fonts are easy to read and, emphasize key phrases.

With more 45% of users preferring mobile devices for reading, it makes sense to improve readability on smaller screens. Large fonts don't get lost on widescreen desktop monitors.

Keeping it Personal with Handmade Typefaces

Many designers are opting for handmade typefaces to set their work apart. These customized fonts are unique, and they give the work a personal, intimate feel. They also draw the eye and engage users with the content. Although these fonts won't suit many traditional businesses, they're ideal for grassroots operations like indie films, non-profit organizations, and small boutique stores.

Rediscovering White Space to Let Fonts Breathe

Design school drilled into us the importance of white space, yet so many designers ignored this rule after they graduated. Today, more designers are celebrating white space and giving their fonts room to breathe. White space isn't just about returning to basic design principles. Modern designers are playing with the concept and using it to create dramatic, minimalist looks.

The trend makes a lot of sense as web started to move onto a smaller portable devices. This highly readable style won't give you a headache, even if you're browsing on a smart phone, netbook, or on laptops. It's also easily scannable, so it plays into the way modern browsers consume online content.

Employing Literary Style for that Retro Goodness

Books might be going digital, but their old-world charm is making a major comeback in the world of typography. This trend, which celebrates serif fonts and monochromatic colors, returns us to a time when we were thumbing through the pages of our favorite paperback rather than reading a screen. In particular, this principle seems to fit well with urban "hipster" trends. And they appeal to the same sensibility that enjoys using vintage camera filters and wearing old-timey clothing.

Combining Artistic Type with Large Photos

These days more designers are choosing aesthetically pleasing fonts over large images. Perhaps in this modern design landscape it's time to rethink the old adage that a picture tells a thousand words!

Using A Collection of Fonts in the Same Space

Gone are the days when a document contained just one font. Modern designers enjoy breaking the rules and using two, three, or even four typefaces on their websites. They're also playing around with various heights, weights, and kerning.

That doesn't mean contemporary designers have thrown out the rulebook completely though; this effect only works if the fonts complement one another. Otherwise, the look clashes and seems busy rather than appearing cutting-edge.

Whether you're just researching the latest fonts or creating your next design masterpiece, keeping abreast of design trends such as these will only aid you in your efforts. What other trends are you seeing these days?

CSS selectors are not a new topic, nor the one to be posted now, but it's something I'm really interested in and have been working on this for a while.

CSS selectors will not be new to most of us, the more basic selectors are type (div), ID (e.g. #container) & class (.sidebox). Besides the usual type, class and ID selectors, CSS offers several pseudo-class and pseudo-element selectors that allow us to target HTML elements based on their positions in the document, some even target virtual elements and generate content from the CSS. Uncommon ones include the pseudo-classes ( :hover) and more complex ones such as :first-child or [class^="grid-"].

The key lies in using CSS selectors efficiently to maximize performance and minimize load time, though this efficient usage matters only for website with thousands of DOM elements and the speed is the key for the existence in the market.

CSS selectors

CSS selectors have an inherent efficiency, the order of high to less efficient CSS selectors with examples :

• ID, #header
• Class, .promo
• Type, div
• Adjacent sibling, h2 + p
• Child, li > ul
• Descendant, ul a
• Universal, *
• Attribute, [type="text"]
• Pseudo-classes/-elements,

We will get a detailed look at these selectors with an example soon though you many not need it but definitely a newbie will, many of the selectors mentioned in this article are part of the CSS3 specifications, and are only available in modern browsers.

Combining selectors

Before we start with selectors i would like to mention a few words on Combining them, and how the browsers interpret it. You can have standalone selectors such as #menu, which will select any element with an ID of 'menu', or you can have combined selectors such as #menu a which will match any anchors within any element with an ID of 'menu '.

We Humans read these CSS left-to-right. We look out for #menu and then any a elements inside there. Browsers read these differently; browsers read selectors right-to-left.

When combining more than one selector the right-most part of a larger CSS selector is called key selector. It's more efficient for a browser to start with the key selector and work its way back up the DOM tree than to start up the DOM tree and take a journey down as it might not even end up at the key selector most of the time.

Where we see a #menu with an a in it, browsers see an a in a #menu. This subtle difference has a huge impact on selector performance, and is a very important to know these.

CSS selectors

ID Selector

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.

#main{  
   width: 960px;  
   margin: 10px auto;  
}   

ID selectors are rigid and don't allow reuse. If possible, first try to use a tag name of HTML5 elements, or even a pseudo-class.

Class Selector

Prefixing the period or Full-stop (.) symbol to a selector allows us to target by class. Mainly used to for styling a group of elements.

.red-border{  
   border:2px solid red;
}   

The difference between #id and a .class is that, with the latter, you can target multiple elements.

Type Selector

A type selector used to target all elements on a page, according to the type without an id or class.

a { color: red; }   // Apply red color to all Anchor tags
ul { margin-left: 0; }   // Apply margin-left 0 to all un-ordered list

Adjacent Sibling Selector

An adjacent selector will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each h2 will have bold text.

h2 + p { 
      font-weight: bold;
 }   

Child Selector

A Child selector target the elements which are direct children of the parent element. It will not target Child of the Child elements.

li > ul { color: #fff; }   

It will not target, that is all the Child's of the Child with specified elements will not have the property. Consider the following markup for detail.

<div id="menu">  
   <ul>  
      <li>Menu 1  
        <ul>  
           <li> Sub Menu 1 </li>  
           <li> Sub Menu 2 </li>  
           <li> Sub Menu 3 </li>  
        </ul>  
      </li>  
      <li> Menu 2 </li>  
      <li> Menu 3 </li>  
      <li> Menu 4 </li>  
   </ul>  
</div>  

A property applied for #menu> ul will target the direct children ul of the divwith id menu. It will not target the ul that is a child of the first li.

Descendant Selector

The commonly used selector after .class is the descendant . Mainly used to increase the specificity.

p a {  
  text-decoration: none;  
}  

The above example targets all the anchors inside paragraph tag and removes the decorations. This is allows to select elements more specifically.

Universal Selector

The Universal Selector as the name indicates will target every single element on the page. Developers use this to zero out the margins and padding.

* {  
 margin: 0;  
 padding: 0;  
}   

It is recommended not to use this in production code as it adds extra weight on the browser and is unnecessary. Instead use type selector.

html, body, header, footer, article, nav, section, asi
de, time, h1, h2, h3, p, a, ul, li, dl, dd, dt, table, thead, tfoot, tbody, th, tr, td{
	border:0;
	margin:0;
	outline:0;
	padding:0;
}

The * can also be used with child selectors.

Attributes Selector

Attributes selects the tags that have the specified attribute. There are seven type available at present. They are:

1. [title]
2. [href="foo"]
3. [href*="nettuts"]
4. [href^="http"]
5. [href$=".jpg"]
6. [data-*="foo"]
7. [foo~="bar"]

[title]

This will only select the anchor tags that has the specified attribute.

a[head] {  
   color: #fff;  
}     

[href="http://nnn"]

The snippet above will style all anchor tags which link to http://nnn .All other anchor tags will remain unaffected.

a[href="http://example.com"] {  
  color: #000; 
}  

[href*="nettuts"]

The star designates that the proceeding value appear somewhere in the attribute's value.All other anchor tags will remain unaffected as above.

a[href*="example"] {  
  color: #000; 
}  

If the anchor tag linked to other domain with the string example in the url, the property will be applied. To be more specific, use ^ and &, to reference the beginning and end of a string, respectively.

[href^="http"]

This works similar to the above one but will check whether http is present in the starting of the string, and apply the action. Designers use these to provide give a different style to external links, even add icon.

a[href^="http"] { 
  color: red; 
}  

Rest of the Attributes selectors works similar to the above one but with ^ and & they are more specific.

Pseudo-classes Selector

This pseudo class will only target a user interface element that has been checked - like a radio button, or checkbox and more. It's as simple as that.The below example gives a green color to anchors when hovered on.

 a:hover {  
  color:green;
}  

There is a lot of Pseudo-classes Selector selectors available, i am not mentioning them with an example and description to keep the article length.

• :active
• :hover
• :visited
• :checked
• :after
• :before
• :not(selector)
• ::pseudoElement - To style fragments of an element like first like in a paragraph.
• :nth-child(n) - To target n^th child element.
• :nth-last-child(n) - Again to target n^th child element but from the end.
• :first-child
• :last-child

Effective Utilization Of CSS Selectors

With the Knowledge of how browser interpret the CSS , we can look a step further to optimize them for speed. The best thing about having nice explicit key selectors is that you can often avoid over qualifying selectors. Which looks like:

html body .main #menu a{}

There is just too much in there, and at least 3 of these selectors are totally unnecessary. The same purpose can be achieved with this

#menu a{}

Well in the first one, that the browser has to look for all a elements, then check whether they're in the element with an ID of 'menu', so on right the way up to the html. This creates too many condition checks that we really don't need.

Overqualified selectors make the browser work harder than it needs to and uses up its time; increase the browser performance by cutting the unnecessary bits out.

Conclusion

With a load of CSS selectors its easier to design a website at easy than earlier, but If you're compensating for older browsers, like IE 6, you still need to be careful when using these newer selectors. But, please don't let that deter you from learning these. You can use external script to bring support for these selectors to older browsers. Always recommend your users to upgrade their browser.

Always try to use these native CSS3 selectors when using Jquery, It'll make your code faster, and let it use the browser's native parsing.

Thank you for taking you time to read one of my longest article. You are welcome to express views via comments.