Tech Talk - CSS custom Attributes
By quixjote on Feb 3, 2011 | In Uncategorized | 1 feedback »
Being a nerd, I will occasionally post some tech jargon here. Today, I will cover some basics on CSS custom attributes. Specifically:
[attr~="value"]{background-color: red;}
<div attr="value">SOME TEXT</div>
will produce
I was chatting with another programming buddy of mine just a little bit ago and he was working on some rounded corners for his page. I noticed how he was making them change colors and such by changing the whole class using Javascript, so I asked him why he was not just using custom css tag attributes.
Personally, I love using custom attributes with the method above because I can create a string of attributes and make use of my own shorthand for CSS.
One thing that I have found using this method though is that if you have two conflicting attributes, the first one takes priority.
A small example of how I might make use of something like this:
Code:
<style> | |
[css~="font1"]{font: 12pt arial;} | |
[css~="bkc000"]{background-color: #000;} | |
[css~="textceee"]{color: #eee;} | |
[css~="w200"]{width: 200px;} | |
[css~="smShadow"]{-moz-box-shadow: 2px 2px 2px #ccc; | |
-webkit-box-shadow: 2px 2px 2px #ccc; | |
box-shadow: 2px 2px 2px #ccc;} | |
</style> | |
<div css="font1 bkc000 textcee w200 smShadow">Shadowed Box 200 Pixles Wide with Black background and almost white 12pt Arial Text</div> |
Would Produce:
Keeping in mind that things like shadows and rounded corners may not work correctly in IE right now.
Please note that this method is not idea for most common day applications. Especially if you have a lot of static content or things that do not change on the page with Javascript or Ajax, then you are probably going to do just fine with using CSS classes.
1 comment
Easy browser-safe solution.
« Lady GaGa | A fridge that cooks too! » |