Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (61 sloc) 3.25 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS feature detection example</title>
<script src="html5shiv.min.js"></script>
<link href="basic-styling.css" rel="stylesheet">
<link class="conditional" href="" rel="stylesheet">
</head>
<body>
<header>
<h1>My funky website</h1>
</header>
<main>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare
erat diam, ut blandit enim tincidunt ut. Phasellus varius aliquam orci
at ultricies. Cras lobortis, risus nec finibus volutpat, nibh urna
feugiat eros, quis suscipit turpis mi facilisis nulla. Nunc lacinia
auctor magna, vel tempus tortor semper sit amet. Nunc ac varius risus.
In a purus ac tortor venenatis tincidunt commodo in est. Etiam est ante,
laoreet vel orci sed, finibus ornare turpis. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</main>
<footer>
<p>Copyright blah blah</p>
</footer>
<script>
var conditional = document.querySelector('.conditional');
var testElem = document.createElement('div');
if(testElem.style.flex !== undefined && testElem.style.flexFlow !== undefined) {
conditional.setAttribute('href', 'flex-layout.css');
} else {
conditional.setAttribute('href', 'float-layout.css');
}
</script>
</body>
</html>
You can’t perform that action at this time.