Jump to content

Css Not Being Dynamic


Jack McKalling
 Share

Recommended Posts

Hmm, I just came accross the statement "There is no such thing as dynamic CSS." on the Dhtml tutorial. I think that this statement needs rethinking, as there is ONE thing that makes CSS dynamic in an incredibly beneficial way.May I remind you, there is the ":hover" pseudo-class for anchor elements. This is what makes CSS dynamic, because you can alter the way a hyperlink is rendered when it is hovered, and let it automatically change back when you move out :) There is a technique that I developed (credit also goes to www.runescape.com), that specifically uses the hover thing. Example:

...<style type="text/css">a {background: url(background.png) no-repeat; background-position: 0px 0px;width: 30px; height: 30px;text-decoration: none;display: block; cursor: pointer;}a:hover {background-position: 0px 30px;}</style>...<a href="#">Hover me</a>
(assume the image is 30x60 px)This trick will move the background of the hyperlink as soon as you point to it, reveiling the other part of the same image, and resets automatically if you move away. It can be used to highlight a button-like hyperlink for instance, but instead of replacing the image, you just move it.No more need for image preloaders or heavy load javascripts! This is much faster and more neat :) I basically learned about this technique at runescape (see the "Play RuneScape" button), though I improved it. I have no more need of adding embedded elements. Also, I use one image for the whole thing. Edited by Jack McKalling
Link to comment
Share on other sites

Hmm, I just came accross the statement "There is no such thing as dynamic CSS." on the Dhtml tutorial. I think that this statement needs rethinking, as there is ONE thing that makes CSS dynamic in an incredibly beneficial way.May I remind you, there is the ":hover" pseudo-class for anchor elements. This is what makes CSS dynamic, because you can alter the way a hyperlink is rendered when it is hovered, and let it automatically change back when you move out :) There is a technique that I developed (credit also goes to www.runescape.com), that specifically uses the hover thing. Example:(assume the image is 30x60 px)This trick will move the background of the hyperlink as soon as you point to it, reveiling the other part of the same image, and resets automatically if you move away. It can be used to highlight a button-like hyperlink for instance, but instead of replacing the image, you just move it.No more need for image preloaders or heavy load javascripts! This is much faster and more neat :) I basically learned about this technique at runescape (see the "Play RuneScape" button), though I improved it. I have no more need of adding embedded divs. Also, I use one image for the whole thing.
Yes, that's a commonly used technique. Some people take it further and have a single image for several buttons.The :hover pseudo-class can be applied to any element, not just the <a> element.
Link to comment
Share on other sites

Oh but I know it can be used for more elements, but I'm talking in cross-browser tongue; Internet Explorer only accepts for the <a> tag.I also never seen this anywhere before, but I may just haven't looked. At least I still see websites hanging around with dirty hover effects, that flicker because they still use javascript. How Awfull :)

Edited by Jack McKalling
Link to comment
Share on other sites

Oh but I know it can be used for more elements, but I'm talking in cross-browser tongue; Internet Explorer only accepts for the <a> tag.I also never seen this anywhere before, but I may just haven't looked. At least I still see websites hanging around with dirty hover effects, that flicker because they still use javascript. How Awfull :)
but people could just pre-load the images first if they knew better though.but yes, CSS is a much more pragmatic method for accomplishing :hover effect Edited by thescientist
Link to comment
Share on other sites

Oh but I know it can be used for more elements, but I'm talking in cross-browser tongue; Internet Explorer only accepts for the <a> tag.I also never seen this anywhere before, but I may just haven't looked. At least I still see websites hanging around with dirty hover effects, that flicker because they still use javascript. How Awfull :)
And I still see websites everywhere using tables for layout. A lot of people have trouble getting rid of old techniques.The :hover pseudo-class works on any element in Internet Explorer as long as your page is running in standards-compliant mode.
Link to comment
Share on other sites

Aha! That is very true. Though cross-browser programming means compatible for all used major browsers, and IE7 and IE6 are too one of those. As long as they don't support it, well :) I'm looking forward when only 8 is still used, but it may take a little while.This technique had existed before I figured it out, I could say that I reinvented it. But I won't take so much credit. Related to this technique, adding you say it is common and some take it even a little further Ingolme, I was thinking.How can I use one image that has several hyperlinks, to hover differently for each child? Like applying style to say a div, when one of its child hyperlinks receives hover?Something like "div > a:hover {}", and this meaning the selector targets specifically the div, not the a. Maybe this is already valid, but I cannot find it anywhere on w3schools. It relates to an imagemap, but cannot be one because the image would be its background.

Link to comment
Share on other sites

By the way, the technique is known as "CSS sprites". Search on Google.You can always just use the descendant syntax:

div a:hover { }

The child selector is not supported by IE 7 and lower.

Link to comment
Share on other sites

The "tutorials" in W3Schools are more like "usage guides". For specific technique implementations, you'll probably have to look elsewhere. ALA has a good article on CSS sprites. http://www.alistapart.com/articles/sprites

Link to comment
Share on other sites

Maybe, but I suppose they don't believe it relevant. Or else, why not put image preloading, CSS dropdowns, advanced form styling, etc. in as well?

Link to comment
Share on other sites

I am sorry, I mean the ">" thing in selectors really. Preloading or CSS sprites are wonderfull, but not meant for tutorials or references indeed. The syntax for targeting elements that have some specific childs, could be usable to further enhance the CSS sprite technique I think, which is what this topic was about, now that I know the technique's name :)

Edited by Jack McKalling
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...