Comprehensive List of Browser-Specific CSS Hacks
Comprehensive List of Browser-Specific CSS Hacks
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
IE7 only
* + html .element { margin-bottom: 10px; }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
IE7 only
* + html .element { margin-bottom: 10px; }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Border-radius Shorthand Syntax
border-radius Shorthand Syntax :
Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.
Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.
Resolved: The border-radius shorthand shall take 1–4 values that set each of the four corners to circular radii, as in the -moz-border-radius shorthand. That is,
border-radius: TL TR BR BL;
border-radius: TL BL+TR BR;
border-radius: TL+BR TR+BL;
border-radius: ALL;
Bascially the syntax is TL TR BR BL (clockwise from top-left) and missing values are filled in by repeating the pattern, just as with border-style et al.
Rationale: The WG concludes from comments such as those on css3.info and from evaluating commonly-used effects such as tabs that designers are more likely to set different circular rounding effects on each corner than they are to set a common elliptical effect on all four corners. Therefore the border-radius shorthand should cater foremost to this usage.
IE browser Hacks
IE 6 and below
* html {}
IE7 only
* + html .element { margin-bottom: 10px; }
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 {}
IE 7
html > body #ie7 { *display: block; }
IE 6
body #ie6 { _display: block; }
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
For Example code using hacks:
margin-top:10\9; for IE8
* margin for IE7 , IE6
* html margin and _margin for IE6
* html {}
IE7 only
* + html .element { margin-bottom: 10px; }
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 {}
IE 7
html > body #ie7 { *display: block; }
IE 6
body #ie6 { _display: block; }
IE8 Standards-Mode Only:
.test { color /*\**/: blue\9 }
All IE versions, including IE8 Standards Mode:
.test { color: blue\9 }
For Example code using hacks:
margin-top:10\9; for IE8
* margin for IE7 , IE6
* html margin and _margin for IE6
5 Tips of Defining Vertical Centering With CSS Tags:
5 Tips of Defining Vertical Centering With CSS Tags:
There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.
Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:
Method 1
This method sets some
There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.
Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:
Method 1
This method sets some
s to display like a table, so we can use the table’s vertical-align property (which works very differently for other elements).
Content goes here
Method 2
This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.
Because it has a fixed height, you may want to set
Content Here
Method 3
In this method, we will insert a div above the content element. This will be set to
Content here
Method 4
This method uses a
Content here
Method 5
This method will only centre a single line of text. Simply set the
Content here
Content goes here
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}Method 2
This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.
Because it has a fixed height, you may want to set
overflow:auto; to the content div, so if there is too much content to fit in, a scrollbar will appear, instead of the content continuing on outside the div!Content Here
#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}Method 3
In this method, we will insert a div above the content element. This will be set to
height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.Content here
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}Method 4
This method uses a
position:absolute; div with a fixed width and height. The div is then told to stretch to top:0; bottom:0;. It can’t because of the fixed height, so margin:auto; will make it sit in the middle. This is similar to using the very common margin:0 auto; to horizontally centre block elements.Content here
#content {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}Method 5
This method will only centre a single line of text. Simply set the
line-height to the height of the object, and the text sits in the middleContent here
#content {height:100px; line-height:100px;}Mozilla implements @font-face
Mozilla employee John Daggett has provided some try‐out builds of Firefox with support for the
@font-face from CSS3’s web-fonts module. Currently available for Windows and Mac only—no Linux build yet—there remain several caveats as described in his comment on bug 70132, the most important of which being that the same‐site origin restriction is turned on by default, which means that most examples on the web will not work until you turn it off.
CSS3 Pseudo-Class Selectors Emulation in Internet Explorer
Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.
His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.
Supported Pseudo-Classes
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-child
- :last-child
- :only-child
- :first-of-type
- :only-of-type
- :empty
Limitations of the project
- Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
- Style sheets MUST be hosted on the domain as the page.
- Style sheets using file:// protocol will not work due to browser security restrictions.
- The :not() pseudo-class is not supported.
- The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.
How does it work?
ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.
Bypassing IE’s CSS parser
In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.
Find out more and Download
ie-css3.js is released under the MIT License and can be downloaded from the project page on Keith Clark’s website.You’ll also need to download Robert Nyman’s DOMAssistant.
Transcending CSS
For web designers who know some code there is plenty of forward thinking material about the importance of semantic HTML; for coders with an eye for design there is lots of food for thought about colour, style and inspiration; for everyone, there are some genuinely innovative tips on using CSS to tie it all together.
The mark of a good book is that you learn something when you read it (Jeffrey Zeldman’s Designing With Web Standards is a good example); I’ve been coding HTML and CSS for eight years and there were still tutorials in here that made me think afresh about the subject, and some tips that I’ve assumed into my arsenal.
Of most interest to readers of this site will be the section on CSS3. Included are a look at some of the new selectors, the background and border modules, multi-column layouts and, most excitingly, a way to see the advanced layout module in action.
There are plenty of examples and exercises, and the book is lavishly laid out and illustrated. That alone would make it a good buy, but the look at CSS3 is what really made it for me.
I’m presuming by the fact that you’re reading this site that you’re interested in the evolution of standards and how web development is moving forward; that being the case, I can wholeheartedly recommend this book to you.
The mark of a good book is that you learn something when you read it (Jeffrey Zeldman’s Designing With Web Standards is a good example); I’ve been coding HTML and CSS for eight years and there were still tutorials in here that made me think afresh about the subject, and some tips that I’ve assumed into my arsenal.Of most interest to readers of this site will be the section on CSS3. Included are a look at some of the new selectors, the background and border modules, multi-column layouts and, most excitingly, a way to see the advanced layout module in action.
There are plenty of examples and exercises, and the book is lavishly laid out and illustrated. That alone would make it a good buy, but the look at CSS3 is what really made it for me.
I’m presuming by the fact that you’re reading this site that you’re interested in the evolution of standards and how web development is moving forward; that being the case, I can wholeheartedly recommend this book to you.
Subscribe to:
Posts
(
Atom
)
