CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
CSS3 transitions are effects that let an element gradually change from one style to another.

transition: property_name duration timing_function delay;

To do this, you must specify two things:

  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect

Transition effect on the width property, duration: 2 seconds:

.moduleDefault {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 and above */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */

Note: If the duration is not specified, the transition will have no effect, because default value is 0.

The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

.moduleDefault:hover {
width: 300px;

Multiple changes:
You can also add a transitional effect for more than one style, add more properties, separated by commas.

Add effects on the width, height, and the transformation:

transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;

Note: These properties are not supported in IE

CSS3 – Substring matching attribute selectors

[att^=val] : Represents an element with the att attribute whose value begins with the prefix “val”.

[att$=val] : Represents an element with the att attribute whose value ends with the suffix “val”.

[att*=val] : Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that we have an HTML document that contains the following markup structure:
<div id=”nav-primary”></div>
<div id=”content-primary”></div>
<div id=”content-secondary”></div>
<div id=”tertiary-content”></div>
<div id=”nav-secondary”></div>

By using the substring matching attribute selectors we can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^=”nav”] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, we could use the following rule:
div[id$=”primary”] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:
div[id*=”content”] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Chrome, Firefox, Safari and Opera.

Reference: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Essential Firefox Add-ons for Web Developers

Firefox has some cool add-ons which make the job of website designers much easier. These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Web Developer
The Web Developer extension adds a menu and a toolbar with various web developer tools.

Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.

Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

CSS Validator
Validates a page using the W3C CSS Validator.

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

W3C Offline Page validator
Validates the source of a HTML/XHTML page via the W3C Markup Validation Service using the direct-input form.

Allows you to customize the way a webpage displays using small bits of JavaScript.

Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.

HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.

A simple CSS property viewer.

IE NetRenderer

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and 8 so you can get an idea of whether or not it looks right in IE.

Foxy SEO Tool
Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.

Alternative Browsers

Internet Explorer, Firefox and Safari lead the market, but there are other browsers out there for PC and Mac users which can be better then the one you’re using now.

When Microsoft, Mozilla or Apple comes out with a new version of Internet Explorer, Firefox or Safari, it makes news, mainly because most of us use one or more of these three Web browsers. In fact, with the exception of Google’s Chrome (which made a big splash, mostly because it came from Google), most of the alternative browsers out there tend to get lost in the shuffle and it’s too bad, since some of these relatively unknown browsers are good, and could be better for some users than the ones they’re already using.

Check these browsers out; one of them may work for you.

It is an open-source browser based on Mozilla’s Gecko rendering engine, is clearly designed to be a simple, user-friendly, yet fully functional browser. With a look and feel very similar to Safari and Firefox, almost anyone will find it easy to work with in seconds.

It’s got just about every feature built into competing browsers, and many that you won’t find anywhere else, such as a “file sniffer” that makes it easy to download YouTube videos and a popup notepad for pasting or dragging text you want to save. Power users will love it. Those who like sleek design will turn away.

OmniWeb’s best features include extensive ad-blocking, auto-saved Web browsing sessions and site specific preferences. From the unique tab drawer to support for browsing Web pages using OS X’s built-in Speech Recognition, OmniWeb’s hold of Mac specific technologies wrapped in a clean and uncluttered interface makes the product a delightful browser alternative.

Opera 9.6 for Macintosh is a fast, option-laden browser that represents a formidable entry in an extremely competitive product category. Its standout features are Speed Dial startup page, extensive search engine support built into the browser and it also offers support for widgets.

Like Apple’s Safari and Google’s Chrome, Shiira is based on WebKit. One of the first unique interface elements was Shiira’s PageDock which provides the same functionality as tabbed browsing, but with complete thumbnails of every page that is opened. Other features includes the menu items for automatically e-mailing the URL or entire contents of a page with a single click, and a very effective full-screen-mode option that would be perfect for presentations or watching video.

Which is the finest?
It all depends on what you require from a browser!

Mozilla Firfox Keyboard Shortcuts

Here are some of the Shortcuts for Mozilla Firefox I know and I will update regularly this page if I know new shortcuts.

Surfing with in websites
Alt + Home : Go to homepage (typically people’s favorite search engine)
Alt + Arrow left or back : One page backwards
Alt + Arrow right : One page forward
Alt + D or Ctrl + L : Jump to address bar and selects all text in it.
Ctrl + Enter : Complete .com address in the address bar.
Shift + Enter : Complete .net address in the address bar.
Ctrl + Shift + Enter : Complete .org address. Type in for example “firefox” and press Ctrl + Shift + Enter
Ctrl + B or Ctrl + I : Show bookmarks.
Ctrl + D : Add bookmark
Ctrl + Shift + D : Bookmark all tabs
Alt + B + A – Z : Jumps to any bookmarked website in your main bookmark folder which begins with the letter you specify.
Ctrl + H : Show history.

Using with the Firefox Browser Tabs
Ctrl + T : Open new tab in the same Window
Ctrl + Tab or Ctrl + Page down : Jump to next tab
Ctrl + Shift + tab or Ctrl + Page down : Jump to previous tab
Ctrl + 1 – Ctrl + 9 : Jump to tab 1 – 9
Ctrl + w or Ctrl + Q : Close Browser Tab

Surfing within websites with Mozilla Firefox
Arrow Down : Down one line. The ideal way to scroll through websites.
Arrow Up : Up one line. The ideal way to scroll through websites.
Tab : Jump to next link when cursor is positioned in browser window. Other than that, jumps between address bar and browser tabs.
Shift + Tab : Jump to previous link when cursor is positioned in browser window. Other than that, jumps between address-bar and browser-tabs.
Enter : Open selected link.
Shift + Enter : Open a selected link in new window.
Enter : Open selected link.
Shift + Enter : Open a selected link in new window.
Alt + Enter : Download a selected link.
Ctrl + Enter : Open a selected link in a (new background) tab.
Ctrl + – : Decrease text size.
Ctrl + + : Increase text size.
Ctrl + 0 : Default text size.
F5 or Ctrl + R : Reload Page.
Ctrl + F5 : Reload Page with Cache override.
Escape : Stop loading page. Can also be sued to close search window if it is open.
F6 : Go to next frame (or switches between address bar and browser window if page has no frames).
Shift + F6 : Go to previous frame.
F7 : Turn caret mode on/off (navigation with keyboard).
Shift + F10 : Open Context Menu. If you are for example on a link within a website, you could press Shift + F10 to copy link location.

Using with Forms in Mozilla Firefox
Tab : Jumps to next Form Element.
Shift + Tab : Jumps to previous Form Element.
Space : Activates and/or deactivates Radio Buttons and Check boxes.
Alt + Arrow down : Select Select from a drop down menu. Then use arrow up and arrow down plus return to make your choice.
Ctrl + X : Cut (when working in forms).
Ctrl + V : Paste selected text when working with forms.

Find text and links in websites
Ctrl + F or ‘ : Open search window and find key phrase in page (as you type).
/ : Open search window and find link in page (as you type).
F3 or Ctrl + G : Find next.
Escape : Close search window.
Shift + F3 : Find previous.

Using with the Firefox Browser Window
Ctrl + N or Alt + F + N : Opens new Browser Window.
Ctrl + Shift + W or Alt + F4 : Close browser window.
Alt + Space : Opens the Title Bar Menu.
Alt + Space + Enter : Restores Firefox Window to smaller size if window is spreading on full screen.
Alt + Space + X : Restores Firefox Window to maximum.
Alt + Space + N : Minimizes Firefox Window.

Using with the Firefox Menu Bar
Alt or F10 : Jumps to the menu bar. From here you can navigate and activate between the menu items on top of the browser window.
Alt + F : Opens File Menu.
Alt + E : Opens Edit Menu.
Alt + V : Opens View Menu.
Alt + G : Opens Go Menu.

Other Firefox Keyboard Shortcuts
Ctrl + A : Select all on the page.
Ctrl + C : Copy selected text.
Ctrl + P : Print.
Alt + F + V : Print Preview – File – Print Preview.
Ctrl + O : Open file.
Ctrl + U : Show page source.
Ctrl + S : Save page as.
F1 : Firefox Help.
F11 : Full page view.
Ctrl + J : Show Download Window. Pressing Ctrl + J again (or Alt + F4 closes the window again.
Ctrl + E : Jump to search bar (usually located in top right corner).
Ctrl + K : Jump to search bar (usually located in top right corner).
Ctrl + Arrow up : Toggle Search Engines when in search field (after Ctrl + E got you there)

HTML 5: the next version of the HTML

World Wide Web Consortium released the first working draft for HTML 5 this year in January. It is a fifth major revision of the HTML we all use every day. When HTML 5 is expressed in XML, it is called XHTML 5. The current version of HTML is 4 which developed in 1999.

Apple, Opera, and the Mozilla Foundation – major browser vendors – came together as a group called Web Hypertext Application Technology Working Group (WhatWG) to build up an updated and upgraded version of HTML. W3C took note of these developments and started its own next-generation HTML effort with many of the same members.

This new version HTML 5 also goes under the name Web Applications 1.0 and it would be immediately familiar to existing HTML programmers. There are no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table. At the same time, we would come across some new and confusing elements. Our div remain, but now HTML includes section, header, footer, and nav as well. em, code, and strong are still present, but so are meter, time, and m. img and embed continue to be used, but now there are video and audio too. However, closer inspection by the html programmer would reveal that these elements aren’t that different. This can also be an effort to make HTML more developer friendly; the datagrid controls seem similar to those of ASP.NET in name and possibly functionality too.

It was explicitly designed to degrade gracefully in browsers that don’t support it. It provides real benefits to programmers today while promising even more for future page visitors.

But remember that HTML 5 is still a draft and this draft may not be finalized for years, work on HTML 5 continues. Perhaps it will be in our browsers in December 2010.

» View draft recommendation

CSS Hacks – Browser Specific Selectors

CSS Browser Selector gives us the ability to write specific CSS code for each operating system and each browser. To send different CSS rules to IE, we can use the child selector command, which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Here is the list of some useful browser specific selectors when we need to change a style in one browser but not the others.

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

Opera versions 9 and below

html:first-child {}


html[xmlns*=””] body:last-child {}

Place the code in front of the style to use these selectors.
For example:

#content-box {
width: 300px;
height: 150px;

* html #content-box {
width: 350px;
} /* overrides the above style and changes the width to 350px in IE 6 and below */