Finally updating here again...
Jan. 27th, 2007 03:58 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
wolfwings...because I found an incredibly nifty feature of CSS that all this time I hadn't known about, that I'm working to integrate into that web-comic-interface program I was building before: Selectors. It's useful enough I'll deal with posting it here just so everyone on my friends list sees it.
Most folks know about the a:hover CSS-tag that lets you set the 'hover' style for a link, or the div.warning to let you style <div class="warning"> (which is actually a shorthand for something I'm about to show here) but I bet you didn't know about td[direction~="up"] did you? That lets you define new attributes for your elements, for example in this case making this valid: <td direction="up left"> and applying the "up" and "left" styles if you have both defined.
The fairly well-known td.card form (using the class="blah" attribute) is actually nothing more than a shorthand for td[class~="card"] actually. The ~= means that the attribute is treated as a series of space-seperated values, and matches against each one individually. If you replace it with =, as in td[direction="apples and oranges"] then the CSS-style will only apply to that explicit attribute tag, for example if you need to perform some special trickery on some combinations of your custom attributes.
A minimal example of the effect.
Most folks know about the a:hover CSS-tag that lets you set the 'hover' style for a link, or the div.warning to let you style <div class="warning"> (which is actually a shorthand for something I'm about to show here) but I bet you didn't know about td[direction~="up"] did you? That lets you define new attributes for your elements, for example in this case making this valid: <td direction="up left"> and applying the "up" and "left" styles if you have both defined.
The fairly well-known td.card form (using the class="blah" attribute) is actually nothing more than a shorthand for td[class~="card"] actually. The ~= means that the attribute is treated as a series of space-seperated values, and matches against each one individually. If you replace it with =, as in td[direction="apples and oranges"] then the CSS-style will only apply to that explicit attribute tag, for example if you need to perform some special trickery on some combinations of your custom attributes.
A minimal example of the effect.
(no subject)
Date: 2007-01-27 12:16 pm (UTC)XML Path Language (http://www.w3.org/TR/xpath)
(no subject)
Date: 2007-01-27 05:11 pm (UTC)(no subject)
Date: 2007-01-27 11:12 pm (UTC)Appears to work fine in Opera and FireFox 1.5, any chance you know if it works in IE7? Or is that another of the core and highly useful CSS bits they totally screwed up again?
(no subject)
Date: 2007-01-31 09:06 pm (UTC)Oh cripes!
Date: 2007-01-31 09:57 pm (UTC)And the next con I'm guaranteed to be at is FC next year, the next con I plan to attend actually is RCFM. I'm so sorry about totally botching getting you my full contact info before the last RCFM was over though. =-.-=
Re: Oh cripes!
Date: 2007-02-01 03:13 am (UTC)Re: Oh cripes!
Date: 2007-02-01 07:43 am (UTC)Any chance of seeing a scan or webcam shot of it or something before then? I'm nosy/curious. =^.^=