AtoZ CSS 快速提示：实现跨浏览器支持

huma13453

Play Next Unmute Current Time 0:06 / Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 本文是我们 AtoZ CSS 系列的一部分。您可以在此处找到该系列的其他条目。 您可以在@supports 此处查看完整的文字记录和截屏视频。 欢迎来到我们的 AtoZ CSS 系列！在本系列中，我将探索不同的 CSS 值（和属性），每个值都以不同的字母开头。我们知道有时截屏视频是不够的，因此在本文中，我们添加了有关多浏览器支持的考虑因素的快速提示。 S2-01 S表示支持多种浏览器 跟踪哪些浏览器支持哪些功能实际上是一项全职工作。有一些很棒的网站（例如）可以让我们随时了解最新情况，还有一些令人惊叹的自动化工具（例如Autoprefixer），这意味着您再也不必编写供应商前缀了。 Learn to Code with JavaScript 但是，作为勤奋的前端开发人员和设计师，我们需要确保尽可能多的用户可以访问我们的内容，即使他们没有获得超级精美的版本，他们仍然可以消费内容并获取信息他们需要。

这些快速提示将建议您（在大多数情况下）不需要担心的领域，同时仍然确保您的项目可以在各种浏览器和设备上运行。 不用担心动画和过渡 大多数情况下，动画和过渡应该是微妙的效果，以使内容更加突出，引导用户的注意力或为页面添加一些个性和特征。如果特定浏览器不支 求职人数数据 持动画或过渡，则元素将仅保持静态或在焦点悬停时在状态之间捕捉。 只要动画的初始状态没有将元素定位在屏幕之外或使其不可见（例如通过设置opacity: 0），那么该元素不会在旧浏览器中移动这一事实并不重要。 对于动画，您可以尝试使用 JavaScript 提供后备，但我真的必须认真考虑额外的工作、代码和维护是否值得这些麻烦。 不用担心微妙的转变 与有关动画和过渡的评论类似，我也不会过分强调在每个设备上制作旋转或倾斜等微妙效果。 如果设备支持transform并且您向图像添加小幅旋转以激发无忧无虑和轻松的风格，那就太好了。




如果使用旧浏览器的用户看到的是直接图像真的很重要吗？可能不会。我们应该花时间解决更相关的问题，而不是试图让每个页面在每个浏览器中看起来都相同。 Learn to Code with JavaScript 不用担心半透明颜色 根据前面的提示，您应该明白，不必担心让每一个视觉细节在每种类型的设备或浏览器上都能正常工作。毕竟，它更多的是关于整体体验，以及为那些具有更现代能力的人增强体验。 渐进增强意味着为每个人提供良好的基础体验，然后在适当和可能的情况下增强该体验。 对于动画或转换，实际上没有任何替代方案 - 尽管您可以根据情况使用 GIF 来制作动画。但是，在某些情况下，缺乏支持意味着页面上不会显示任何内容。如果你必须支持IE8，半透明颜色肯定是这样。 幸运的是，由于 CSS 处理它不理解的属性或值的方式，可以提供一个简单的后备解决方案。 如果要向元素添加半透明红色background，可以先声明一个实体color，然后用半透明覆盖它。