It talks about this webtoolkit.info post.
I didn't know that article then only now I can tell You something about that:
- graphic effects are good "only" for high bandwidth web surfers
- dropshadow isn't important as page content
- id attribute should be absolutely unique
- markup language has a scope and should be used for this scope (sure, when it's possible)
- 5 nested divs just to show a simple shadow effect aren't a cool solution (imho)
Since You can do the same thing using a really basic JavaScript function without a repeated id, nested obsolete elements and in a cross browser way with about 1.8 Kb of uncompressed and goo JavaScript, I think You should think about my alternative proposal.
The only things You need is a better CSS, not based on id but based on class name and a simple callback.
This is revisited CSS
/* CSS container shadow */
.shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}
.shadow-container .shadow2,
.shadow-container .shadow3,
.shadow-container .container {
position: relative;
left: -1px;
top: -1px;
}
.shadow-container .shadow1 {
background: #F1F0F1;
}
.shadow-container .shadow2 {
background: #DBDADB;
}
.shadow-container .shadow3 {
background: #B8B6B8;
}
.shadow-container .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
}
/* CSS container shadow */
And this is simple callback example:
onload = function(){
createDropShadow(
getElementsByClassName(
document, "div", "dropshadow"
)
);
};
Now You can use a dedicated dropshadow div class name in every div that You want to modify.
<div class="container dropshadow">
Lorem Ipsum ...
</div>
That's all, just include ej basic file and my dedicated function and You'll have a cleaner page without nested divs overloads and ... bye bye nested divs :)
No comments:
Post a Comment