网页设计师要避免的CSS陷阱_极简慕枫

CSS的风格语言已经在我们中间存在多年，但它拥有能够通过越来越复杂的布局和设计工程来吸引和吸引访问者的能力，但糟糕的决策可能会影响最终结果。虽然通常由于缺乏对影响或个人选择的认识，但存在一些可能由无辜决策引起的潜在问题。本文旨在纠正这些常见做法。长沙网页定制

专有代码不是恶魔

需要解决的第一个陷阱是关于专有代码的常见误解，例如webkit转换和动画。供应商前缀代码被业内许多人不赞成的一个主要原因仅仅是因为它没有验证。由于W3C没有设置或批准代码，那些依赖验证器的人认为这是一个错误，而不是一个有用的功能，它可以提升网站的美感，当你想到它时，这是一种耻辱。

图1：即使使用专有标签，Webkit的动画过渡仍然非常棒！

图2：在CSS3被广泛采用之前，供应商前缀仍然是获得不透明度的可靠途径。

作为设计师，我们经常发现自己被困在代码中。由于CSS对哪些属性有效具有指定限制，因此自定义属性有机会突破边界，在CSS3进入最终版之前测试CSS3之类的新功能，而不是介入总体布局。是的，当然，如果你让你的代码依赖它们，它可能会破坏，但你肯定会让你的CSS逐步增强这些代码并更新你的网站，所以没有什么可担心的！使用专有的CSS并不是一件坏事 - 它只需要额外的注意力和维护。

忽略浏览器或移动设备

我们可以解决的下一个陷阱似乎是涓涓细流进入主流，但与其可见增长相比并不成比例。无论喜欢与否，许多手机和手持设备现在都可以上网，而不仅仅是90年代存在的那种笨重的WAP系统。许多智能手机和功能手机实际上都有一个完全成熟的浏览器。考虑到这一点，为什么这么多人仍然忠于测试桌面渲染引擎？

图3： iPhone确实改变了在适当的浏览器中使用互联网的方式。

图4：在旧的时代，WML网站是获取Web内容的唯一方法。

人们以过去没有的各种方式使用网络。电视正在启用，手机已启用，过去甚至有冰箱可以上网，但可以说它没有起飞。有些人不会因为感知成本而在桌面之外进行测试，这对于一系列优秀模拟器来说不是一个问题。说使用数字毕竟不能证明测试的合理性也是不公平的，可用性应该是最重要的。如果您的网站尚未在手持设备上运行，那么现在应该考虑改善体验。

外部意愿时的内联样式

许多标准倡导者一直在提倡分离结构，行为和风格的重要性，其原因是易于维护和缓存的优点，但直到今天仍有许多人使用样式属性，样式标签内的标题甚至在其代码中使用已弃用的样式元素。虽然你们中间更有洞察力和最新能力已经不惜一切代价避免这种情况，但这种不好的趋势似乎还在继续！

图5：内联代码仍然非常持久，即使在应该知道更好的网站上也是如此。

图6：大量风格HTML元素已被弃用，仍可在Web上找到。

在这种情况下，这种有问题的编码的解决方案是教育，虽然我们都知道，将CSS从页面中剥离并将其分解为单独的文件将为您提供令人惊讶和酷的带宽节省，如果您提供浏览器缓存可能提供的更多在服务器上启用GZIP，许多CMS产品，预建应用程序和WYSIWYG编辑器必须继续以这种方式应用样式需要立即关注。很少有内部样式比外部样式更有用的情况，因此，学习避免重复编码是值得的。

把它放在一起（少文件好）

继上一次陷阱之后，大量新手级别以外编码的活跃设计师会遇到将样式表分离成较小的文件。如果定期更新CSS文件并希望最大化缓存，将样式分解为单独的文件可能会有用，而单独文件更易于导航的论据似乎表明IDE或编辑器缺少代码跟踪方法而不是真实需要调用添加的HTTP请求。

图7：每个请求的资源在等待响应时都会增加总加载时间。

图8：完全可以将屏幕，打印和移动样式表放在一个文件中。

简而言之，像Notepad ++这样的编辑器能够巧妙地折叠代码，从而消除了冗长的CSS文件可能导致的任何潜在问题。如果您当前的编辑器没有这样的功能，可能值得更改为一个工具，除非您定期更新CSS，否则对服务器的额外HTTP请求是浪费。虽然这看起来相当挑剔，但是浏览器在单个文件中导航“查看源”更容易，并且由于媒体选择器可以针对特定条件（如打印样式或特定宽度），您仍然可以在单个文件中进行分离。

字体依赖性和单位值

最后值得一提的是字体和单位价值依赖的缺陷。当网络年轻时，选择相对Websafe字体的需求是至关重要的，虽然@ font-face的诱惑可能会给人留下另一个印象，但这仍然没有改变。许多网站都假设已经安装了字体或者font-face可用，许多人只是忽略了可用回退机制的痕迹。此外，吨数的网站仍在文本上使用PX单元，这对IE用户来说是疯狂的。

图9：每个人都习惯了自定义字体，请注意不要依赖它们！

图10：如果不使用缩放，则无法在IE中使用PX测量单位调整文本大小。

使用Websafe字体，很容易说没有大多数字体可以卸载以及禁用字体 - 面部下载，并且CSS3无处可用，我们承认这些设备仍然非常重要。当你在CSS中使用font-family属性时，总是要确保你有一个由回退选项组成的正确堆栈，就这么简单。至于在PX中测量文本单元，而每个浏览器中的缩放功能都会轻松处理调整大小的任务，IE的文本大小可访问性选项（即使在IE9中）也无法调整PX测量文本的大小！

在你风格之前思考

编码时可能会遇到很多错误，从忘记颜色十六进制值中的哈希字符到错误地拼写属性，甚至忘记CSS选择器名称中的区分大小写。虽然对于经验较少的编码人员来说，掌握CSS的过程可能很长而且有点令人生畏，但需要考虑你正在做的事情，探索在浏览器中使用标准化和专有代码以及控制你的风险的风险网站至关重要。

对于那些更高级的CSS开发人员来说，hasLayout的恐怖和移动设计的新领域仍将是我们关注的焦点和浏览器兼容性。对于初学者来说，构建，构建，组织和维护代码的方式（以及过去那些简单而有些烦人的验证问题）将是至关重要的。在任何一种情况下，我们都将在未来遭遇我们自己的错误（或浏览器错误），这是可以接受的，所以我们任何人都能做的最好的事情就是保持警惕，阅读规范，继续学习并坚持下去什么是新的！

长沙网页定制