Wednesday, 23 December 2009

CSS attribute matching and browsers

The goal is to have a blinking cursor. One approach I tried out, was through the use of attribute selectors, where making the cursor visible or not would be a matter of changing an attribute value.

Here's the HTML element:

<font id="cursor" class="cursor" shown="yes">
And the javascript to change the custom "shown" attribute:
if (cursorElement.getAttribute("shown") == "yes")
cursorElement.setAttribute("shown", "no")
cursorElement.setAttribute("shown", "yes")
With the following style sheet entries:
.cursor[shown="yes"] {
color: #7799CC;
background-color: rgb(241,128,22);

.cursor[shown="no"] {
color: white;
background-color: #7799CC;
This works perfectly in Firefox 3.5.6, but Internet Explorer 8.0 completely refuses to recognise the custom attribute. I'm not sure if there is a way in which this can be made to work in IE without defining custom DTD entries, but for now, I've gone back to an approach where I change the element class to make it blink.

No comments:

Post a Comment