The Stokely hack is a method of customising your CSS to the browser viewing your page at the time. You set the default attribute required and then, using the Stokelty hack, change the attribute for each browser in turn. The hack works by utilising syntactical quirks of each browser to enable only certain browsers to view certain attribute definitions. This is the most comprehensive version I have seen:
#hacked {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:black;
}
/*end*/
/*\*/
html*#hacked {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}
/*\*/
* html #hacked {
color:green;
}
/*end*/
[sourced via stormdetector.com]
What’s happening here?
#hacked{
font-weight:bold;
font-size:14px;
color:orange;/*IE 5 for PC only*/
voice-family:"\"}\"";
voice-family:inherit;
color:black;/*all non-IE 5 browsers*/
}
/*end*/
/*\*/
html*#hacked{
[color:red;/*Affects older Firefox and Netscape browsers only. Seen also by IE5-6 and Safari for Macintosh, which is
addressed below.*/
color:blue;/*Affects Safari for Macintosh only (v1-3). See also by IE5-6, but thats addressed below. Also
hidden from older Firefox and Netscape browsers.*/
]color:green;/*Affects IE 7 only. Seen by IE5-6 but thats addressed below. Hidden from Safari and all
Firefox and Netscape browsers.*/
}/**/
.dummyend[id]{clear:both/*end hack using dummy attribute selector for IE5 mac, else error in CSS occurs!*/}
/*The above rule is hidden from IE for MAC, and read only by older Firefox and Netscape 6-7 and IE5-7 for PC,
and Safari on MAC, in general.*/
/*Newer Firefox and Netscape agents reads rule, but does not read any properties set within [], so is
unaffected by it, probably because it sees these as part of an attribute selector. Those will be hidden.*/
/*IE 7 on PC will correctly read all rules as it will ignore many characters before a property*/
/*Safari for MAC sees each [] as a character and not part of a selector, if one falls before a property.
These cause the property name following the character to not be read, but next line without "[]" property
is parsed.*/
/*use of [] will break all css selectors following the rule, if all are not closed, as Mozilla-Netscape
read the [] as part of a selector rule, so make sure they are all closed, using dummy selector.*/
/*\*/
* html #hacked{
color:green;/*Finally, be sure to reapply a fix that affects IE 5-6 only here. IE for Mac and IE 7 for PC
are not affected here, which means purple above should work only in IE 7 above!*/
}
/**/
With this, if you really needed to, you could have a different CSS for every browser, but my suggestion if you wanted to do that would be to not put every attribute through a Stokely hack, but instead use something like this browser ID script in PHP and then define your CSS based on that. That will dramatically reduce the bandwidth load of your CSS on pages as they will only be being passed the applicable CSS page.
For example, instead of <link rel="stylesheet" href="css/style.css" type="text/css" /> to call the CSS, instead put <?php include("css.php"); ?>. Then create a file called css.php. In this put something like:
<?php
require_once('browser.php');
$br = new Browser;
if(stripos($br->Name, 'ie')) {
echo '<link rel="stylesheet" href="css/style_IE.css" type="text/css" />';
}
else if(stripos($br->Name, 'XYZ')) {
echo '<link rel="stylesheet" href="css/style_XYZ.css" type="text/css" />';
}
.
.
.
.
else {
echo '<link rel="stylesheet" href="css/style.css" type="text/css" />';
}
?>
This will only place the appropriate CSS style-sheet into your page.
