现代化的网页设计布局是前端网页技术中的重要发展趋势。在过去，网页设计者必须用各种麻烦的 Hack 来实现现代化的设计，例如 CSS3 和 HTML5 功能。然而，现在有一个强大的工具，可以帮助我们实现这些现代化的布局-Modernizr。

Modernizr 是一个 JavaScript 库，能够检测浏览器是否支持特定的 HTML 和 CSS 特性。如果一个浏览器不支持某个特性，Modernizr 添加一个相应的 css 类名，以便网页设计者可以根据特定的浏览器支持状况进行相应的样式指定和适配。本文将介绍如何使用 Modernizr 并实现一个现代化的布局。

首先，需要在 HTML 中引入 Modernizr 库：

```

```

引入完 Modernizr 后，我们可以开始检测 CSS 和 HTML 特性的支持情况。例如，我们要检测浏览器是否支持 Flexbox 布局，只需在 CSS 中添加以下代码：

```

.flexbox {

display: flex;

}

.no-flexbox {

display: block; /* 回退样式 */

}

```

这里我们定义了一组样式：使用display:flex实现弹性盒子布局，而使用display:block则是回退样式。如果浏览器不支持 Flexbox，Modernizr 会为 body 添加 “no-flexbox” 类名，我们就可以通过以下方法回退到普通布局：

```

body.no-flexbox .container {

float: left;

}

```

这里我们针对“no-flexbox”类名实现一个回退方案，即用float:left实现左浮动布局。

接下来，我们要检测 SVG 和 Canvas 特性是否支持。如果 SVG 不受支持，我们将用 Canvas 代替。

```

if (Modernizr.svg) {

// 支持 SVG

} else {

// 不支持 SVG

}

```

这里我们使用 JavaScript 来检测 SVG 支持情况，然后进行相应的运行处理。

除此之外，Modernizr 还可以检测其他的特性，如 WebP 图片格式、CSS 动画和 Transition、触屏技术等等。在网页设计中，我们将它们应用于响应式设计、跨浏览器兼容性和代码优化等方面。

最后，我们来实现一个现代的布局，用到前面讨论的一些技术。比如，我们某个网页项目要弹性盒子布局，Backface Visibility 特性和 CSS Gradient 渐变等。代码如下：

```

.flex {

display: flex;

flex-wrap: wrap;

}

.flex .item {

flex-basis: 50%;

backface-visibility: hidden;

background: linear-gradient(to left, #333, #999);

}

.no-flex .item {

float: left;

width: 50%;

backface-visibility: hidden;

background: linear-gradient(to left, #333, #999);

}

```

在 CSS 中定义了三组样式，分别是弹性盒子布局的样式（"flex"）、回退布局的样式（"no-flex"）和共同使用的样式（".item"）。这里还定义了一个背面可见性的样式（"backface-visibility"）和一个渐变背景的样式（"background"）。

最后，我们运用 Modernizr 的优势来适配不同浏览器，实现现代化布局：

```