Google

Wednesday, October 31, 2007

CSS Selectors

CHILD SELECTOR

Despite Internet Explorer 6 not supporting the CSS child selector, it's actually been used a lot as a way of hiding CSS commands from Internet Explorer. This is no longer possible as IE7 now understands the child selector. To understand, what is the child selector? Imagine the following HTML structure:

<div><p><span>Text goes here</span></p></div>

In the above example, the <p> is a child of the <div> and the <span> is a grandchild of the <div>. We can make the text in the <span> red by using the following CSS rule:


div span {color: red;}


This basically means that the contents of the <span> will be red, provided that the <span> is nested within a <div>. That <span> could be a child, grandchild, great-grandchild etc. of the <div>.


If we were however to use the following CSS code:


div>span {color: red;}


...Then the text within our <span> wouldn't turn red. This is because we've inserted the child selector between the div and span (the greater than sign), which basically means that our span has to be a child of a div. In the above example, the <span> is a grandchild of the <div>.


So, by using the child selector, we can assign rules to any HTML element that's a child (and not a grandchild) of another element. Let's say for example we want a top margin to be assigned to the first <div> in our body, but not to any others. Without the child selector we would be forced to assign a class or id to this <div> and reference that class or id in our CSS command. Now though, we can reference this <div>, and only this <div>, without the need for a class or id through the CSS:
body>div {margin-top: 10px;}



ADJACENT SELECTOR

The adjacent selector is another extremely useful CSS selector that up until now Internet Explorer hasn't understood. Fortunately, IE7 does understand it. The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:


blockquote+p {margin-top: 0;}


The above CSS code basically says that any paragraph that's preceded by a quote shouldn't have a top margin. This is useful as you may always wish to cite the person making the quote in a paragraph after the quote and may want to get rid of the space between the paragraph and quote.


Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a left border to each navigation item except for the first, you could use this CSS code:


li+li {border-left: 1px solid black;}


This basically means that any <li> that follows another <li> (i.e. all of them except the first) should have a left hand border.

Monday, October 29, 2007

Why we need of CSS ?

Separate Presentation from Content
The first and foremost mission was to disconnect the tight stranglehold that HTML style tags brought to a Web page. By isolating the control of a page’s look-and-feel from the content, a clear pathway to building structured pages opens up where you can still get the design you want. Additionally, both content and design benefit in terms of accessibility. Search engines can get at the content easier for indexing, while designers have hands-on control of their presentation. The core concept of separating presentation from content leads to many other benefits of the CSS model.

Flexible Design Model
Even with the most basic implementation of text styling, CSS runs rings around HTML. Whereas font tags are limited to seven browser-dependent sizes, CSS offers both absolute, number-based systems in the measurement unit of your choice (points, pixels, ems, percentages, and many others) and relative keyword-based systems (that is, small, medium, large, smaller, larger, and so on). Design considerations common in print publishing (such as line spacing) are impossible in HTML but a snap in CSS. Aside from the specific properties available, the CSS methodology of assigning those properties is wonderfully robust. With CSS, you can re-style existing HTML tags or create custom styles in a variety of ways with classes, IDs, and through selectors. Selectors (whether as common as a descendent selector or as rare as adjacent-sibling selectors) encourage structural Web coding while delivering enhanced design control.

Faster Loading Times
To the casual Internet user, a Web page is completely virtual with no real substance or weight. Web designers, however, are very aware of the weight of their pages; the more code that’s in a page, the heavier it is and the longer it takes to load. For example, here’s the minimum code it takes to place a sentence on the page in the common HTML container, a font tag:

<table> <tr> <td> Welcome to my world. </td> </tr> </table>

Now, here’s the same content in the standard CSS container, a div tag:
<div> Welcome to my world. </div>

Multiply that doubled-difference many, many times for a single page—and then again for an entire Web site—and you have some idea of CSS’s edge in speed.

Easy, Instant Maintenance
As noted earlier, it’s a nightmare to change an HTML style across a site because styles are all applied at the lowest level, the tag. Not only must all pages with all the styles be altered one at a time, each page must be re-saved and then re-put to the server.With well-structured CSS, on the other hand, your styles are kept in a separate file where they can be modified in any text editor. Once published, a style change is immediately seen by anyone who views an affected page within the site.

Portability
Although the Internet may at times seem pervasive, it’s just one of many media. For example, many sites strive to have their Web pages available for print as well.With HTML-styled pages, the only viable route is to redesign the page with print in mind—a terrible chore to do it once and a never-ending time-suck if the site is updated frequently. CSS turns the HTML model on its head and allows you to simply specify a different style sheet for print—and, if desired, one for speech synthesizers, rojectors, and hand-held devices, among others—and you’re done.

Advanced Design Possibilities
As defined, CSS is highly interactive and throws open the door to a multitude of design options. Just a few of the advanced text options were mentioned earlier; in addition to advanced sizing and line spacing, CSS also provides more robust alignment and far more specific margin and padding options. Text is not the only element to gain a power surge under CSS. The capability to control the position and tiling of background images (see the below Figure) is reason enough to use CSS in and of itself.


FIGURE -1: With CSS image control, you can place a single, non-tiling image like thiscontrol panel in the background, precisely positioned.

Another key element in the CSS toolchest is the div tag, commonly referred to in Web authoring programs like Macromedia Dreamweaver as layers. Content within a div tag can be placed anywhere on a page or made to flow in the context of a document. A div tag, like span, is a non-semantic tag that is used as a generic container; div tags are nothing more than block elements that enable you to mark up broad sections of a document. From a dynamic point of view, div tags can be programmatically hidden, revealed, change style, and even move across (or off ) the page.

Enhanced User Control
While CSS provides a great deal of design-time flexibility, it also opens up the run-time options for Web page visitors. The entire notion of the cascade in Cascading style Sheets stems from the originators’ desire to blend the designer’s style sheet with the user’s. The end result is a cascade of several style sheets all coming together to render the page optimally. Some CSS-savvy designers have taken this a step further and designed their sites with multiple CSS styles attached to each page. Modern browsers include a style switching command that lists available style sheets.

One of the most commonly adjusted user settings is font size. The smallish text that looks good on the design spec may be too tiny to be read by a particular visitor—and that’s okay, if the page is styled properly with CSS and the text can expand to a readable size, as shown in Figure 1-2.When designed correctly, the text grows and the layout flows: site designer, site visitor, and site owner are all happy.

Accessibility
Adjustable text size is just one aspect of a vital trend in Web design: accessibility. Fueled by the Federal Rehabilitation Act, a U.S. law mandating that all government-run Web sites follow the guidelines established in Section 508 of that act, accessibility is on every designer’s watch list. The very core of Cascading Style Sheets—separating presentation from content—makes the content within the pages more available. This openess, or accessibility, is immediately noticeable when you listen to software screen readers. Screen readers are a crucial assistive technology. If you ever want to demonstrate the benefit of CSS, just point a screen reader–enabled browser to a page in a CSS-based layout—and then visit the same page in a table-based layout, especially those with deeply nested tables. You won’t believe your ears when you hear what a difference CSS makes.

FIGURE-2: Define your font sizes correctly with CSS, and text is easily rescaled with no sacrifice of design integrity.

One CSS 2.1 specification goes to the next level in aiding the visually impaired to browse the Web by carving out a new media type: speech. Speech is a separate media type (just like print or hand-held devices) that allows designers to control how CSS classes and other selectors sound, just like the screen media type controls how CSS selectors look. Support for the speech media type is pretty much nonexistent at this time, but a much fuller implementation already on the table for CSS 3 bodes well for this much-needed functionality.

Thursday, October 25, 2007

List of CSS Property and Browser Support

Basic concepts browser support
BrowserInternet ExplorerNetscapeGeckoSafariOpera
PlatformWindowsMacAllAllAllAll
Version4.05.05.56.07.05.04.x1.0+1.2+7.0 +
Linking to a style sheetYYYYYYYYYY
@importYYYYYYNYYY
@mediaNNYYYYNYYY
@font-faceNNNNNNNNNN
CommentsYYYYYYYYYY
HTML comment tagsYYYYYYYYYY
SpecificityYYYYYYBYYY
InheritanceYYYYYYBYYY
<
Selectors browser support
BrowserInternet ExplorerNetscapeGeckoSafariOpera
PlatformWindowsMacAllAllAllAll
Version4.05.05.56.07.05.04.x1.0+1.2+7.0 +
Type selectorsYYYYYYYYYY
Class selectorsYYYYYYYYYY
ID selectorsYYYYYYBYYY
Descendent selectorsYYYYYYBYYY
Link pseudo class selectorsYYYYYYBYYY
Dynamic pseudo class selectorsNNNNPPNYYY
Pseudo element selectors
:first-lineNNYYYYNYYY
:first-letterNNYYYYNYYY
:beforeNNNNNNNYYY
:afterNNNNNNNYYY
Selector groupsYYYYYYYYYY
Language pseudo class selectorsNNNNNYNNNN
Child selectorsNNNNYYNYYY
First child selectorsNNNNYYNYYY
Adjacent selectorsNNNNYYNYYY
Attribute selectorsNNNNYNNYYY
Background properties browser support
BrowserInternet ExplorerNetscape NavigatorOpera
PlatformWindowsMacintosh(All Platforms)(All Platforms)
Version4.05.05.56.04.05.04.x6.07.03.55.07.0
background-colorYYYYYYBYYYYY
background-imageYYYYYYBYYYYY
background-attachmentYYYYYYNYYYYY
background-repeatBYYYBYNYYYYY
background-positionYYYYYYNYYYYY
backgroundYYYYYYYYYYYY
Border properties browser support
BrowserInternet ExplorerNetscapeGeckoSafariOpera
PlatformWindowsMacAllAllAllAll
Version4.05.05.56.07.05.04.x1.0+1.2+7.0 +
border-widthYYYYYYBYYY
border-top-widthYYYYYYBYYY
border-left-widthYYYYYYBYYY
border-bottom-widthYYYYYYBYYY
border-right-widthYYYYYYBYYY
border-colorYYYYYYPYYY
border-stylePPYYYYPYYY
borderPPYYYYNYYY
border-topPPYYYYNYYY
border-leftPPYYYYNYYY
border-bottomPPYYYYNYYY
border-rightPPYYYYNYYY
Margin & padding properties browser support
BrowserInternet ExplorerNetscapeGeckoSafariOpera
PlatformWindowsMacAllAllAllAll
Version4.05.05.56.07.05.04.x1.0+1.2+7.0 +
marginBBYYYYYYYY
margin-topBBYYYYBYYY
margin-leftBBYYYYBYYY
margin-bottomBBYYYYBYYY
margin-rightBBYYYYBYYY
paddingBBYYYYBYYY
padding-topBBYYYYBYYY
padding-leftBBYYYYBYYY
padding-bottomBBYYYYBYYY
padding-rightBBYYYYBYYY
Page layout properties browser support
BrowserInternet ExplorerNetscapeGeckoSafariOpera
PlatformWindowsMacAllAllAllAll
Version4.05.05.56.07.05.04.x1.0+1.2+7.0 +
positionPPPPYBPYYY
topPPYYYYBYYY
leftPPYYYYBYYY
bottomNNYYYYNYYY
rightNNYYYYNYYY
widthPYYYYYBYYY
min-widthNNNNYNNYYY
max-widthNNNNYNNYYY
heightYYYYYYPYYY
min-heightNNNNYNNYYY
max-heightNNNNYNNYYY
z-indexYYYYYYYYYY
visibilityYYYYYYYYYY
overflowNYYYYBNYYP
floatBBYYYYBYYY
clearBYYYYYBYYY
clipNNYYNPNYYY