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/

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.

Camino
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.

Maxthon
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
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
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.

Shiira
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!

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 {}

Safari

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 */