Archive for the 'CSS' category.
Jul 3 | Posted by Jeffrey Barke | 1 Comment
via Webmonkey:
Variables in cascading stylesheets are now available in the nightly WebKit build.
CSS without variables:
//Sets the background of the page and tables to the hex code for the color grey
body {
background-color: #eceae1;
}
table {
background-color: #eceae1;
}
With CSS variables:
//Defines "DefaultBGColor" to light gray
@variables {
DefaultBGColor: #eceae1;
}
//Sets the background and any table on the page to the default background color
body {
background-color: var(DefaultBGColor);
}
table {
background-color: var(DefaultBGColor);
}
Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.
Jun 11 | Posted by Jeffrey Barke | Add a Comment
Cursors
It's been awhile since I had to implement a custom cursor, but I figured it wouldn't be a problem—just set the cursor property to url(path/to/cursor.cur), right? Of course it's never that simple…
The full scoop can be found here, but in summary we need three rules:
cursor: url(cursor.cur), url(cursor/cursor.cur), default;
cursor: url(cursor.cur); works in Safari, but we need to add default to make it work in Firefox. url(cursor/cursor.cur) is for IE, since the base URI is the source element, not the style sheet.
A nice table/demo of CSS2 and CSS3 cursors can be found at http://www.worldtimzone.com/mozilla/testcase/css3cursors.html
Pseudo-class descendant selectors in IE 6
I just discovered that it is possible to use pseudo-class descendant selectors in IE 6 and put together a demo/tutorial.
Jeffrey Barke is senior developer and information architect at theMechanism, a multimedia firm with offices in New York, London and Durban, South Africa.
Mar 7 | Posted by Jeffrey Barke | Add a Comment
From Surfin' Safari:
For those of you using the star seven CSS hack to target current or older versions of WebKit, this parsing bug has been closed in the latest WebKit nightlies. Acid3 specifically tests for this, so any browser that wants to be compliant with Acid3 will have to fix this CSS parsing bug.
For more information about this hack, see:
http://diveintomark.org/projects/csshacks/star7.html
Jan 8 | Posted by Jeffrey Barke | 27 comments
In March 2007, I wrote about a Safari CSS hack called the "Pound Safari Post Semicolon" hack (coined by Tony at Simian Design). As of Safari 3.0, this hack no longer works. However, there is a way to target Safari 3.0 (and Opera as well):
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
As always, the disclaimer: nobody condones the use of hacks, but we all (well, most of us) have to make use of them at least once in a while. The above code targets both Safari 3.0 and Opera 9. Hopefully, it will be a future-proof hack, since the -webkit part of the selector will probably not be adopted by other browsers.
Example: The following code set the background color of the <body> element red in all browsers and then resets it to blue in Safari 3.0 and Opera 9.
body { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}
[demo]
Tested on Mac OS X version 10.5.1 with Safari version 3.0.4 (5523.10.6) and Mozilla Firefox version 2.0.0.11. Tested on Windows XP Professional Version 2002 SP 2 with Mozilla Firefox version 2.0.0.11, Opera 9.10, and Microsoft Internet Explorer 6. Hack from CSS, JavaScript and XHTML Explained.
Mar 28 | Posted by Jeffrey Barke | 11 comments
Please note that this hack does not work in Safari 3. The updated hack is here.
While I’m not a fan of CSS hacks in general, there comes a time when nothing else will solve the problem. This was the situation this morning—the site looked perfect in every browser except Safari (due to a background repeat bug), and I needed a quick way to apply CSS rules to Safari alone. Here’s the hack:
Place the pound sign ( # ) after a semi-colon ( ; ), all styles within those brackets and the remainder of the stylesheet will be ignored in Safari.
Example: The following code will make any <p> assigned the callout class red with normal font-weight in Safari, but black and bold in the rest of the browsers.
p.callout { color:#FF0000; font-weight:normal; }
p.callout { color:#000000; font-weight:bold;# }
[demo]
Tested on Mac OS X version 10.4.9 with Safari version 2.0.4 (419.3) and Mozilla Firefox version 2.0.0.3. Tested on Windows XP SP 2 with Mozilla Firefox version 2.0.0.3, Opera 9.10, and Microsoft Internet Explorer 6 and 7. Hack from bballcity
