CSS Vendor (browser) Prefixes

CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.  It is temporary.

The CSS browser prefixes are:

• Android: -webkit- 
• Chrome: -webkit- 
• Firefox: -moz- 
• Internet Explorer: -ms- 
• iOS: -webkit- 
• Opera: -o- 
• Safari: -webkit-

Example:
Setting a rounded corner on a box:

• -moz-border-radius: 10px 5px;
• -webkit-border-top-left-radius: 10px;
• -webkit-border-top-right-radius: 5px;
• -webkit-border-bottom-right-radius: 10px;
• -webkit-border-bottom-left-radius: 5px;
• border-radius: 10px 5px;

Rag, Widows, and Orphans

Rag is the uneven edge of text that is aligned on only one side.
Widows are short lines of text that are left alone at the top of a column or page of text
Orphans are single words that are left alone at the end of a paragraph

CSS Sprites

A CSS sprite takes a large image and splits it into multiple smaller images for display. CSS sprites are useful because they allow you to store all your navigation and site maintenance buttons in one file. You simply reference that file with specific grid locations to display the image you want to display.

CSS Sprite Generator

CSS3 Transitions

Transitions are a way to affect how an element looks as it changes from one state to another.

Or you can use JavaScript or a library like jQuery to create them.

CSS3 Shadows: Box Shadows and Text Shadows

examples:

• box-shadow: inset horizontal vertical blur spread color; 
• text-shadow: horizontal vertical blur color;

HTML5 DATA Element

This element represents data with a machine-readable value attribute attached so that computers can understand that it is data as well.

<data class="dtstart" value="2011-12-02">December 2</data> –
<data class="dtend" value="2011-12-10">10</data>

The Difference Between the HTML5 DATA Element and the CODE Element

Mobile Site Design

• Put the primary content first (not the navigation)
• Put the article on the same page (scrolling is easier than clicking)
• Get rid of everything that isn't absolutely required for that page

Use CSS3 to identify the OS and the type of device of the user

Use WordPress Mobile Pack to convert the existing pages to a mobile-friendly design without removing the content

The ideal order for your HEAD element

1. Meta charset tag
2. Title tag
3. Style tags or links
4. Other meta tags and content
5. Scripts that must be in the HEAD (for optimal loading, scripts should be placed at the bottom of your web pages, just before the </body tag)

Putting the HEAD element in this order helps your web page load as quickly as possible.

What does !important mean in CSS?

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

example: p { color: #ff0000 !important; }