What's the best way to create multiple backgrounds using HTML5 and CSS and keep markup semantic?
What's the best way to create multiple backgrounds with HTML5 and CSS and keep your markup semantic? I realise CSS3 supports multiple backgrounds but I want to use gradients also and am interested in how this is being completed practically - not just the theory of it.
The traditional approach might be to do something like:
<div class="background-outer">
<div class="background-inner">
<article class="exiting-news">开发者_如何学运维
<p>We'll talk about something exciting here</p>
</article>
<div>
</div>
I'd like a way to do this in a way that is cross browser friendly and that doesn't involve any programmatic work in Javascript or ASP.net/PHP etc
It may be a case of just using more semantic class names, but I'm stumped!
Note: Someone may have answered this already but it's a difficult thing to search on, apologies if this is a repeat!
It depends on whether it's a personal project or for a client. Nested divs never hurt anyone, they're quick, and reliable in all browsers. Use with no shame if it's for someone else.
Otherwise, you're going to have to drop support for some browsers. Using multiple backgrounds in CSS is one way of doing that. The second I use sometimes is, depending on how many backgrounds you have, to position:relative the main block, and position:absolute the :before and :after elements to fill it and set backgrounds on them too. Works on basically all browsers very nicely.
Edit:
A validating code sample for the pseudo-element trick I use:
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
div:before {
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
}
div:after {
background: -moz-linear-gradient(left, rgba(239,47,47,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(left, rgba(239,47,47,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
}
div {background: url(http://www.google.co.uk/images/srpr/logo3w.png); position: relative; margin: 1em; min-height: 10em;}
div:after, div:before {content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
div > * {position: relative; z-index:1}
</style>
<div>
<h1>This div has three backgrounds</h1>
<p>Its content has to be wrapped, but that's not normally a 'semantic' problem.
</div>
加载中,请稍侯......
精彩评论