PostCSS深入学习: 跨浏览器兼容性
在前面一系列的PostCSS教程中我们学习了PostCSS一些基础知识。接下来准备继续使用PostCSS生成样式表,而且采用不同类型的插件用于不同的目的。在这篇教程中我们使用PostCSS创建一个跨浏览器兼容性的样式表。我们将要做的:需要前缀的自动添加前缀,添加一系列的IE版本,回退到IE8、IE9和IE10,为有动画属性添加will-change属性。那我们开始吧。
在前面一系列的PostCSS教程中我们学习了PostCSS一些基础知识。接下来准备继续使用PostCSS生成样式表,而且采用不同类型的插件用于不同的目的。在这篇教程中我们使用PostCSS创建一个跨浏览器兼容性的样式表。我们将要做的:需要前缀的自动添加前缀,添加一系列的IE版本,回退到IE8、IE9和IE10,为有动画属性添加will-change属性。那我们开始吧。
当你阅读完本系列教程前面的内容,你应该收集了一些PostCSS插件。如何选择PostCSS的插件,这一切取决于你的经验。鉴于前面的基础,我们来继续了解PostCSS插件的生态系统。通过这个可以了解PostCSS多么强大,以及他能提供哪些功能。我们将讨论PostCSS插件管理,你可以通过这些去关注最新的PostCSS插件,了解这些插件属于什么类别,考虑如何将这些插件运用到实际的项目中。
上一篇谈到了我对无线电商动态化的理解,并简单提到了我们自己提出的技术方案:Weex,今天就来详细介绍一下 Weex
和图案一样,渐变可以给作品增加深度和趣味。虽然当前的趋势是扁平化设计,渐变还是很经常使用的。上节我们大概讲了线性渐变的内容。今天就到径向渐变啦。径向渐变和线性渐变是很相似的,区别只是在于如何定义渐变。
给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容)。你可以使用纯色、图案或渐变。前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变。SVG提供了两种渐变——线性、径向。我今天先讲线性渐变,下篇我们再看看径向渐变。
我们在响应式网页设计的工作中经常用到SVG,这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式,在图形编辑器中创建SVG效果的每一步,都会直接影响生成的代码以及负责嵌入SVG代码、编写脚本或添加动画的开发者的工作。在我的日常工作中,我通常是既做设计师又做开发者,自己处理自己设计的内容,而SVG图像就是我的日常开发内容之一。
一个常见的使用SVG绘制的图形是箭头。一行代码就可以创建一个,但是这样代码重复度很大。你也可以在<defs>和<symbol>中定义好再去重用,但是你每次应用的时候都需要对其移动或旋转。直接用一个<marker>元素的话会方便很多。前面几周的时候我讲过如何组织SVG代码,以及如何定义一个可重用的图形对象。可以翻一下w3cplus上SVG系列文章进行学习~今天我想要讨论一个特殊的元素,可以在一个地方定义,然后在另一个地方引用的——marker,通常用来创建箭头和一些polymarker。
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配?那么趁此**Amfe阿里无线前端团队双11技术连载**之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松。
网页设计元素之一——图案,通常是使用图片创建的。虽然一些图案可以使用CSS创建,但大多数还是涉及某种形式的图片。幸运的是SVG可以很容易创建简单和更复杂的图案,还可以缩放,而且需要很少的http请求。上一篇文章中我们大概看了SVG<pattern>元素的基本内容和属性。通过一个示例展示了如何创建简单的图案。以及简单地介绍了几个<pattern>元素的属性。今天我们继续讨论几个pattern属性,其中一个可以通过引用另一个图案,xlink:href,帮我们创建更复杂的图案。首先快速回顾一下我上次讲过的内容。
图案是非常常用的设计元素。它可以提供对比,创建一个深度感,并给组合添加趣味。SVG可以很方便地创建和使用图案,随心所欲~我上次提到了这周要讨论一个可以定义并重用的元素,就是pattern啦。这篇文章我们要讨论<pattern>元素,以及如何在SVG中使用这个元素。大概会讲SVG图案的基础,然后下一篇讲解如何创建复杂一些的图案。