内容
这篇文章首次出现在.net杂志的234期中，这是面向网络设计师和开发人员的全球最畅销杂志。
技术本质上是一种执行任务的方法，作为前端开发人员和设计人员，我们有很多任务。就是说，我们经常忘记这种情况已发生了多大变化。从2002年到2010年，我们的社区因代码和资源膨胀而腐烂，从而妨碍了性能和可维护性。为了克服这个问题，我们创建了许多技巧，窍门和骇客，我们称之为“技术”。我们仍在完成任务，只是没有以最有效的方式完成任务。
在过去的几年里，进行360度测试时，看到了更好的标准，并且标准的实施不断生机，使我们这个社区能够开发出更新，更先进的“技术”。这种新格局被称为“现代网络”。
随着“ Web 2.0”停滞不前和混乱，“现代Web”也将停滞不前。给它时间。就是说，目前，只要对该术语的含义有共同的理解，我们就可以使用和滥用该术语。
HTML5规范于2010年着陆，提供了一个全新的半标准化Web环境。 Opera，Firefox，Chrome和Safari等浏览器迎来了这一新潮流，并将其开发团队推向了标准实施和API探索的新局限。为了让您了解这些浏览器的“内置”状态，请查看www.html5readiness.com关于更改HTML5支持的可视化效果。
不要担心Internet Explorer中缺少支持。借助Google Chrome浏览器内嵌框架，我们可以解决这一问题。自Google在2010年推出以来，它已成为Internet Explorer的首选支持机制。所有版本的IE都可以通过Chrome浏览器内嵌框架定位，Chrome框架会提示新用户下载一个插件，该插件可以在IE中使用轻量级的Chrome浏览器呈现选择的网站。要实现Chrome浏览器内嵌框架，我们在网站的head>标签内添加以下meta>标签。
meta http-equiv =“ X-UA-Compatible” content =“ chrome = 1” />
从这里，我们可以提示IE用户使用JavaScript下载该插件（如果尚未安装）：
脚本类型=“ text / javascript” src =“ http：// ajax。
googleapis.com/ajax/libs/chrome-frame/1/CFInstall。
min.js“> / script>
脚本>
window.onload = function（）{
CFInstall.check（{
模式：“重叠式”，
目的地：“ http://www.yourdomain.com”
});
};
/脚本>
可以设置目标，以在安装插件后将用户发送到特定链接。请注意：尽管Chrome Frame为我们提供了一种严格为真正的现代浏览器开发的方法，但我们一定不能忘记，用户可以选择不下载插件，而无需下载。如果它们不支持，并且您需要为一个或其他不同版本的IE提供支持，则您将不得不花费更多的时间来找出可以提供和不能提供的内容，以及跨浏览器的经验。.
通过此代码，可以为在现代Web堆栈上进行开发的更高层次的竞争环境提供帮助，我们可以轻松地前进。您可能还记得必须创建许多浏览器特定的技巧来使网站的浏览器结构正确，创建无数个空元素以供切片图像使用，或者甚至编写过于冗长或多余的JavaScript代码来获取最简单的功能。从某种意义上说，所有这些痛苦都是我们今天担心的同样问题。我们仍在争取更多的控制权和更好的工具来对抗布局，样式和功能，但仍处于成熟水平。
布局
透明补丁
浮动元素是CSS 2.1中引入的，但从来没有完全成为我们希望的完整解决方案。最大的问题之一是在浮动子元素时保持父元素的尺寸。为了解决这个问题，创建了clearfix技术。
使用以下HTML：
div>
div> ... / div>
div> ... / div>
/ div>
这项技术是由尼古拉斯·加拉格尔（Nicolas Gallagher）撰写的：
.clearfix：之前，
.clearfix：{
内容： ” ”;
显示：表；
}
.clearfix：之后{
清楚：两者；
}
.clearfix {
*缩放：1；
}
如果您使用HTML5Boilerplate开始您的项目，那么您将已经拥有此版本的clearfix技术。
装箱尺寸
多年来，开发人员一直在争论哪种盒子模型实现更有意义。 “ Quirks vs Standards”模式的真正含义是：“元素的尺寸在设置后，是否应用边框和填充时是否应该更改”。
现在，人们普遍认为，边框和填充物从元素内的可用空间中移走而不增加元素的宽度或高度会更有意义。讨论与盒装尺寸的广泛实施无关。浏览器将从您那里获取提示，反之亦然。
在Chris Coyier和Paul Irish的推动下，可以通过以下方法实现无所不包的技术：
* {
-webkit-box-sizing：边框框;
-moz-box-sizing：边框框；
框大小：border-box；
}
由于可能会影响性能，因此在CSS中使用 *选择器已引起争议。如果您没有对网站/应用程序的所有其他方面进行超优化，那么这些声明就显得无足轻重了。使用border-box将使浏览器在可用空间集内添加填充和边框。通过将框大小设置为内容框，可以使用“标准模式”。
多列
网络受到书面形式和类型的极大启发。不幸的是，我们陷入了羊皮纸阶段。在期待已久的分页媒体和CSS区域规范中，其中一些问题即将浮出水面。也就是说，当浏览器开始实现CSS多列时，就朝着类似杂志的布局迈出了第一步。产生这种效果的代码非常简单：
p {
-webkit-column-count：2;
-moz-column-count：2；
列数：2；
}
您可以从A List Apart的博客中了解有关CSS3多列规范的更多信息，以及可以在不支持任何浏览器的情况下使用的JavaScript回退。
计算方式
计算尺寸可能很困难。过去，我们无法进行任何类型的单位计算，更不用说混合单位计算了。有了calc，一切都变了。创建一个不会影响初始元素宽度的填充效果，也不会使用box-sizing：border-box;之类的东西。直到最近，才有可能通过添加额外的包含元素来实现。
.padded {
保证金：0自动;
职位：相对
宽度：-webkit-calc（100％-（20px * 2））;
宽度：-moz-calc（100％-（20px * 2））;
宽度：calc（100％-（20px * 2））;
}
calc（）会根据.padded的父宽度并减去定义的20px填充来进行适当的宽度计算。我在元素的任一侧将其乘以2，利用相对定位和左右边距自动将元素居中。
风格
透明度
正确选择元素的样式始终取决于我们在CSS中可以使用的工具类型。透明度是您在2000年代初至中期遇到的首批支持版本之一。
随着HTML5的出现和更加集中的标准工作，浏览器已经实现了opacity属性的标准实现，并且根据新的颜色模块规范公开了alpha通道支持。这包括RGBA和HSLA准则。
一种 {
颜色：rgba（0,255,0,0.5）;
背景：rgba（0,0,255,0.05）;
边框：rgba（255,0,0,0.5）;
}
您可以在任何找到十六进制值的地方使用RGBA或HSLA颜色。此外，还有有趣的颜色扩展列表，其中包含定义好的名称，您可以在规范中直接查看。当您要在元素之间创建动态混合时，这些功能会派上用场。
筛选器
CSS过滤器非常令人兴奋。无需第三方插件就能动态更改页面上元素的外观的感觉真是太了不起了，这将大大减少您在Photoshop中花费的时间。
img src =“ market.webp”>
img {
-webkit-filter：灰度（100％）;
}
当前仅WebKit浏览器中支持CSS过滤器，因此它们的使用应具有加性，而不是依赖的。在这里阅读更多。
图像替换
用图像替换文本已经存在很长时间了。不幸的是，最新和最先进的图像替换技术在可访问性方面仍然存在缺陷。但是最近发现有两个非常聪明，并且在自身权利方面是独一无二的。第一篇由斯科特·凯尔曼（Scott Kellman）撰写：
h1 class =“隐藏文本”>“我的网站”徽标/ h1>
.hide-text {
文字缩进：100％；
空白：nowrap;
溢出：隐藏；
}
第二篇由尼古拉斯·加拉格尔（Nicolas Gallagher）撰写：
.hide-text {
字体：0 / 0a；
文本阴影：无；
颜色：透明；
}
自适应视频
在响应性环境中使媒体正确缩放可能是一个挑战。随着越来越多的网站尊重自适应设计，正确处理元素的尺寸和长宽比至关重要。
由于第三方服务提供内容的方式，嵌入式视频一直是最具挑战性的媒体类型之一。典型的YouTube嵌入看起来像这样：
iframe width =“ 640” height =“ 390” src =“ http：// www.youtube.com/embed/oHg5SJYRHA0” frameborder =“ 0” allowfullscreen =“”> / iframe>
然后，iframe元素包含Flash对象或embed元素。使用类似iframe的方法{maxwidth：100％; }无效，因为当宽度更改时，嵌套元素的大小无法正确调整。因此，我们必须做一些技巧。
div>
iframe width =“ 640” height =“ 390” src =“ http://www.youtube.com/embed/oHg5SJYRHA0” frameborder =“ 0” allowfullscreen =“”> / iframe>
/ div>
将iframe包裹在另一个元素中将为我们提供所需的控件，以便为视频添加适当的响应功能。
。视频 {
职位：相对
底部填充：56.25％;
高度：0；
溢出：隐藏；
}
.video iframe，
.video对象，
.video嵌入{
位置：绝对；
最高：0;
左：0；
宽度：100％;
高度：100％;
}
设置.video包装器的填充底部：56.25％；是这种方法的魔力。使用填充意味着使用的百分比将基于父母的宽度； “ 56.25％”将创建16：9的宽高比。如果需要，自己动手做数学。 9/16 = 0.5625。 0.5625 * 100 = 56.25（这是我们的百分比）。
功能性
轻松选择元素
随着许多JavaScript库（例如jQuery）的流行，ECMAScript委员会和W3C标准注意到了开发人员原生缺乏的核心功能之一-良好的元素选择。诸如getElementByID（）和getElementByClassName（）之类的方法速度很快，但不如来自开发者社区的选择器引擎灵活而强大。 querySelectorAll（）是标准机构在本机选择器方法中模仿某些灵活性的方法。
var items = document.querySelectorAll（’＃header .item’）;
querySelectorAll（）可以传递多个选择器和混合选择器。阅读更多关于此。
创建新数组
遍历数组是一件令人厌烦的事情。编写和重写for（）循环很不好玩。在JS 1.6版中，map（）方法提供了对迭代的简便方法的支持，并从另一个方法创建了一个新数组。
var people = ['Heather'，'James'，'Kari'，'Kevin']；
var welcomes = people.map（function（name）{
返回“嗨” +姓名+“！”；
});
运行此代码，如果我们要console.log（welcomes），您会看到欢迎是一个新数组['Hi Heather！'，'Hi James！'，'Hi Kari！'，'Hi Kevin！' ]。
清理文档和窗口对象
第三方JavaScript库易于与本机文档和窗口对象混淆。对于其他第三方库以及包括它们的开发人员来说，这可能是个问题。作为任何一方，请通过创建它们的新实例来确保使用两个对象的纯净版本。最好的方法是创建一个iframe元素，将其插入DOM并存储这些对象的新实例。
var iframe = document.createElement（‘iframe’）;
iframe.style.display =“ none”;
iframe = document.body.appendChild（iframe）;
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild（iframe）;
尽管Web堆栈有了很大的改进，但继续完善和完善我们的技术套件，以解决我们在项目的布局，样式和功能方面面临的挑战仍然非常重要。为了维持良好的增长生态系统，我们必须鼓励标准组织和浏览器供应商在开发新规范和创新功能实现方面继续取得进展，同时与其他开发人员和设计人员共享我们的知识。更多的见解，更少的黑客攻击。
达西·克拉克（Darcy Clarke）是屡获殊荣的开发人员，WordPress主题公司Themify和每日交易汇总商DealPage的联合创始人，并且是jQuery团队的成员。他在Polar Mobile担任高级UX开发人员。
喜欢这个吗？阅读这些！
- 如何建立应用程式
- 下载最好的免费字体
- 每个创意必须拥有的免费Photoshop笔刷
- Illustrator教程：今天尝试的奇妙创意！
- 涂鸦艺术的好例子
- 出色的Wordpress教程选择
- 设计师最好的免费网络字体
- 下载免费纹理：高分辨率，可以立即使用
