Modernizr示例
时间: 2023-10-30 15:06:17 浏览: 132
Modernizr 是一个 JavaScript 库,用于检测浏览器是否支持 HTML5 和 CSS3 功能。以下是一个使用 Modernizr 的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Modernizr Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<style>
.box {
background-color: #f2f2f2;
padding: 20px;
margin-bottom: 20px;
}
.border-radius {
border-radius: 10px;
}
.box-shadow {
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="box">This box has no border-radius or box-shadow.</div>
<script>
if (Modernizr.borderradius && Modernizr.boxshadow) {
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
boxes[i].classList.add('border-radius', 'box-shadow');
}
}
</script>
</body>
</html>
```
在上面的示例中,我们首先在 head 标签中引入了 Modernizr 库。然后,我们定义了一个样式类 `.box`,它表示一个简单的带有背景颜色和内边距的元素。接下来,我们定义了两个样式类 `.border-radius` 和 `.box-shadow`,它们分别添加了圆角边框和阴影效果。
在 body 标签中,我们创建了一个带有 `.box` 类的 div 元素。接下来,我们使用 JavaScript 检查浏览器是否支持圆角边框和阴影效果。如果支持,我们将所有带有 `.box` 类的元素添加 `.border-radius` 和 `.box-shadow` 类,从而实现圆角边框和阴影效果。
注意,我们在 Modernizr 对象上使用了两个属性 `borderradius` 和 `boxshadow`,它们分别对应于检测浏览器是否支持圆角边框和阴影效果。Modernizr 支持检测许多其他功能,如 CSS 动画、WebP 图像、SVG 等等。
阅读全文