Firefox 5 Released, is it better?

Mozilla has released Firefox 5, Sticking to its promise of a quick-release cycle, just three months after Firefox 4 made its debut in March.

According to Mozilla foundation, the Firefox 5 includes more than 1,000 improvements and performance enhancements that make it easier to discover and use all of the innovative features in Firefox. 



So here it is what it has in store:

Firefox 5 allows mobile users to tweak their privacy settings directly from their mobile devices. The settings page is laid out in a way that a user can exactly see which options are on and which are off.

One of the major changes is the ability to enable the Do Not Track feature. This is a feature being used by several new versions of browsers today. It lets you tell a site that you want to opt-out of third-party tracking for behavioral advertising. In Firefox 4 this feature was buried deep in the options -- Options >> Advanced >> General and under Browsing you'd check the option: Tell web sites I do not want to be tracked. Now you just need to go into Firefox Options >> Privacy and under Tracking, check Tell web sites I do not want to be tracked.

Most enhancements and improvements claimed by Mozilla seem to be minor bug fixes according to reviewers. Some significant changes include enhanced support for HTML5 and new support for CSS (cascading style sheet) animations. Firefox 5's user interface is quite similar to Firefox 4.

Some other changes in Firefox 5 are said to include better spell checking in some languages; improved JavaScript, memory and networking performance. 

Firefox 5 offers better Linux desktop integration and improved background tab performance.

Also on-board Firefox 5: The ability to play CSS animations, and the capability to instantly tinker with Firefox add-ons, without slowing down the show or shutting off the browser. 

Mozilla also insures that it can respond quickly to complaints from users, and more easily transform the browser experience to meet consumer need.

CSS tables - Do you know this?

HTML table is a very easy way to display tabbed panes . Using css div based layout to achieve tabbed layout is bit complicated using float selector in CSS. This can be easily achieved by using CSS tables.

CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers.

Applying display property values to web page elements that is table-related  causes the elements to mimic the characteristics of their HTML table equivalents. Here, I will demonstrate how this will have a huge impact on the way we use CSS for web page layouts.

Here is How we can achieve it:

Specifying the value table for the display property of an element allows you to display the element and its descendants as though they’re table elements. The benefit of using  CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it—without the semantic problems of marking up non-tabular content as a HTML table in the document.

Let’s understand this with simple example: the three-cell grid layout shown below. We’ll look at three different HTML markup samples that will result in the same visual layout. 

<div class="holder">
<div class="table_row">
<div class="table_cell">CELL 1</div>
<div class="table_cell">CELL 2</div>
<div class="table_cell">CELL 3</div>
</div>
</div>


A set of nested div elements may not seem so very exciting, but hang in there, we’re building to something. The CSS is also very simple:

.holder {
  display: table;
}

.table_row {
  display: table-row;
}

.table_cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}

How Does This Work?

The display property allows you to specify a range of table-related values in order to make elements display as though they were table elements. The available display values are:

• table makes the element behave like a table element
• table-row makes the element behave like a table row (tr) element
• table-cell makes the element behave like a table cell (td) element
• table-row-group makes the element behave like a table body row group (tbody) element
• table-header-group makes the element behave like a table header row group (thead) element
• table-footer-group makes the element behave like a table footer row group (tfoot) element
• table-caption makes the element behave like a table caption element
• table-column makes the element behave like a table column (col) element
• table-column-group makes the element behave like a table column group (colgroup) element

This article has presented a basic primer to the usage of the table-related values of the CSS display property—finally, a source of relief for all those struggling to construct reliable grid-based layouts using CSS!