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

New Properties of CSS3

 

Borders

1. border-color
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

2. border-image
border-top-image
border-right-image
border-bottom-image
border-left-image
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

3. border-radius
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

4. box-shadow
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

Backgrounds

1. background-origin and background-clip
-webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip

2. background-size
-o-background-size
-webkit-background-size
-khtml-background-size

3. layering multiple background images
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Color

1. HSL colors
<div style=”background-color: hsl(0,100%, 50%);”> </div>
<div style=”background-color: hsl(120,100%, 50%);”> </div>
<div style=”background-color: hsl(240,100%, 50%);”> </div>

2. HSLA colors
<div style=”background-color: hsla(0,100%,50%,0.2);”> </div>
<div style=”background-color: hsla(0,100%,50%,0.4);”> </div>
<div style=”background-color: hsla(0,100%,50%,0.6);”> </div>
<div style=”background-color: hsla(0,100%,50%,0.8);”> </div>
<div style=”background-color: hsla(0,100%,50%,1);”> </div>

3. RGBA colors
<div style=”background: rgba(255, 0, 0, 0.2);” > </div>
<div style=”background: rgba(255, 0, 0, 0.4);” > </div>
<div style=”background: rgba(255, 0, 0, 0.6);” > </div>
<div style=”background: rgba(255, 0, 0, 0.8);” > </div>
<div style=”background: rgba(255, 0, 0, 1) ;” > </div>

4. opacity
<div style=” background: rgb(255, 0, 0) ; opacity: 0.2;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.4;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.6;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 0.8;“ > </div>
<div style=” background: rgb(255, 0, 0) ; opacity: 1;“ > </div>

Text

1. text-shadow
text-shadow: 2px 2px 2px #000;

2. text-overflow
text-overflow: ellipsis-word;

3. word-wrap
word-wrap:break-word;

User-Interface

1. box-sizing
box-sizing:border-box;
-moz-box-sizing:border-box;

2. resize
resize: both;

3. outline
outline: 2px solid blue;

4. nav-top, nav-right, nav-left ,nav-bottom

Selectors

1. attribute selectors
p[title^=”ho”] {background: green;}

Basic box model

1. Overflow-x
2. Overflow-y

Generated Content

1. content

Format

1. media queries
@media all and (min-width: 640px) {
#media-queries-1 { background-color: #0f0; }
}

@media screen and (max-width: 2000px) {
#media-queries-2 { background-color: #0f0; }
}

2. multiple column layout
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

3. Web fonts
@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}

@font-face {
font-family: Delicious;
font-weight: bold;
src: url(‘Delicious-Bold.otf’);
}
h3 { font-family: Delicious, sans-serif; }

4. speech
#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url(ding.wav); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }

CSS3: Ready to hit

CSS3 offers a variety of new ways to create an impact with your designs, with quite a few important changes. The development of CSS3 is going to be split up into ‘modules’. The old requirement was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:

1. The Box Model
2. Lists Module
3. Hyperlink Presentation
4. Speech Module
5. Backgrounds and Borders
6. Text Effects
7. Multi-Column Layout

Several of the modules have now been finished, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon. It is very difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to. New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted. It will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2. The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and get present design features in a much easier way (e.g. using columns).

Cascading Style Sheets 2.0

CSS2 builds on CSS1, integrating several intermediate CSS syntax proposals (Aural CSS, printing and positioning extensions) aiming for full backward compatibility, which it comes close to achieving. CSS2 still somehow manages to introduce radical new rendering capabilities as well. As use of web documents becomes ubiquitous, alternate rendering paradigms have proliferated (and are expected to increase in usage.) CSS2 allows the author to tailor their pages to these different rendering modes (such as Braille, handheld devices, printers, and aural devices.)

Other changes from CSS1:

  1. Did we mention the new media capabilities? They are really cool.
  2. A complex visual rendering mechanism, including the concept of Absolute and Relative positioning of elements.
  3. Powerful mechanisms for specifying font characteristics for improved matching.
  4. A vastly improved Selector specification system now exists, allowing a finer granularity of document specificity while also generalizing the syntax for non-HTML languages.
  5. Properties and rules controlling International features.
  6. New properties allowing control over cursors, outlines, and table display.
  7. Automatically generated content capabilities.

Cascading Style Sheets (CSS) for Web pages

Our HTML documents can be displayed using different output styles using CSS. HTML tags were originally developed to define the content of a document but Styles sheets define HOW HTML elements are to be displayed. All major browsers support Cascading Style Sheets. As a Website designer we can define a style for each HTML element and apply it to as many Web pages as we want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

CSS allows developers to control the style and presentation of multiple Web pages all at once. Style sheets allow style details to be specified in many ways. Styles can be defined inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external stylesheets can be referenced inside a single HTML page. An inline style defined in an HTML element has the highest priority, which means that it will skip a style declared inside the tag, in an external style sheet.

Syntax
selector {property: value}

Example
body {color: blue}