/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* 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 */
CSS Hack for transparent images in IE6
/*///Start code for PNG Image////*/
* html img,
* html .png {
azimuth: expression(
this.pngSet?
this.pngSet=true :
(this.nodeName == "IMG" ?
(this.src.toLowerCase().indexOf('.png')>-1 ?
(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/blank.gif") :
'') :
(this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
(this.origBg = (this.origBg) ?
this.origBg :
this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none") :
''
), this.pngSet=true
);
}
/*///end code for PNG Image////*/
* html img,
* html .png {
azimuth: expression(
this.pngSet?
this.pngSet=true :
(this.nodeName == "IMG" ?
(this.src.toLowerCase().indexOf('.png')>-1 ?
(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/blank.gif") :
'') :
(this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
(this.origBg = (this.origBg) ?
this.origBg :
this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none") :
''
), this.pngSet=true
);
}
/*///end code for PNG Image////*/
Html5 ready reset
Plenty of you will have used Eric Meyer’s css reset before now. It is included in many frameworks and so on, like 960.gs. This is a revamped version of that reset, that brings it into the present with full support for html5. It sets all the new structural tags as block level, and resets all their default styling as expected.
/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } /* tables still need cellspacing="0" in the markup */ table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /* END RESET CSS */
png behavior
PNG Behavior
Below is the complete source for the behavior. Notice that the behavior will only do anything if the user is using IE55+ on a Win32 platform.
CODE:
<public:component>
<public:attach event="oncontentready" onevent="filterImage()" />
<script language="jscript">
var original = element.src;
var spacer = "images/blank.gif";
var htc = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";
function filterImage() {
if(/\.png$/.test(original) && htc) {
element.style.visibility = 'hidden';
var preload = new Image();
preload.onload = function() {
element.style.height = element.style.height ? element.style.height : this.height;
element.style.width = element.style.width ? element.style.width : this.width;
element.src = spacer;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + original + ", sizingMethod='scale', enabled='true')";
element.style.visibility = 'visible';
}
preload.src = element.src;
}
}
</script>
</public:component>
<public:attach event="oncontentready" onevent="filterImage()" />
<script language="jscript">
var original = element.src;
var spacer = "images/blank.gif";
var htc = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) && navigator.platform == "Win32";
function filterImage() {
if(/\.png$/.test(original) && htc) {
element.style.visibility = 'hidden';
var preload = new Image();
preload.onload = function() {
element.style.height = element.style.height ? element.style.height : this.height;
element.style.width = element.style.width ? element.style.width : this.width;
element.src = spacer;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + original + ", sizingMethod='scale', enabled='true')";
element.style.visibility = 'visible';
}
preload.src = element.src;
}
}
</script>
</public:component>
Usage
The usage is really simple. All you need to do is to add the png behavior to the image element.
<style type="text/css"> img { behavior: url("pngbehavior.htc"); } </style>
CSS hacks
Most in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.
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
*:first-child+html {}
============================
sup,sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
sup.reg {
height: 0;
line-height: 1;
bottom: 1.2ex;
vertical-align: baseline;
position: relative;
text-decoration:none;
font-size:110%;
}
============================
@media print{}
============================
html>/**/body #divid{
margin:280px auto 0px 50px;
}
============================
Reset:
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
============================
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 {}
Recent Opera versions 9 and below
html:first-child {}
============================
"" ------ “”
>> ------ »
- ------- —
' ------- ’
& ------- &
============================
img { -ms-interpolation-mode: bicubic; } //scaling of the images
============================
============================
http://www.csszengarden.com/
http://www.meyerweb.com/
http://www.alistapart.com/
http://www.css3.info/
http://positioniseverything.net/
http://css-tricks.com/
http://cssmania.com/
http://cssremix.com/
http://www.css-website.com/
http://cssvault.com/
http://dezwozhere.com/links.html
http://www.w3schools.com/
============================
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
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
*:first-child+html {}
============================
sup,sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
sup.reg {
height: 0;
line-height: 1;
bottom: 1.2ex;
vertical-align: baseline;
position: relative;
text-decoration:none;
font-size:110%;
}
============================
@media print{}
============================
html>/**/body #divid{
margin:280px auto 0px 50px;
}
============================
Reset:
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
============================
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 {}
Recent Opera versions 9 and below
html:first-child {}
============================
"" ------ “”
>> ------ »
- ------- —
' ------- ’
& ------- &
============================
img { -ms-interpolation-mode: bicubic; } //scaling of the images
============================
============================
http://www.csszengarden.com/
http://www.meyerweb.com/
http://www.alistapart.com/
http://www.css3.info/
http://positioniseverything.net/
http://css-tricks.com/
http://cssmania.com/
http://cssremix.com/
http://www.css-website.com/
http://cssvault.com/
http://dezwozhere.com/links.html
http://www.w3schools.com/
============================
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
css rounded buttons
css
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
a.ovalbutton{
background: transparent url('media/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}
a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}
a.ovalbutton span{
background: transparent url('media/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}
a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
</style>
Note: The image paths referenced in the CSS above assumes you're using the gray ovals. If you're using another, be sure to update the image paths accordingly.
HTML
<h4>Single button:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>
<h4>Side by Side:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>
IMAGES
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
a.ovalbutton{
background: transparent url('media/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}
a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}
a.ovalbutton span{
background: transparent url('media/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}
a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
</style>
Note: The image paths referenced in the CSS above assumes you're using the gray ovals. If you're using another, be sure to update the image paths accordingly.
HTML
<h4>Single button:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>
<h4>Side by Side:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>
IMAGES
Subscribe to:
Posts (Atom)