太阳城在最新版本的 Firefox

图标设计 急速飞驰 浏览

小编:字体是矢量,所以你无须担心分辨率的问题。他们和文本一样因为拥有 CSS 属性,那就意味着,你完全可以应用 size 、 color 和 style 。你可以添加转换、特效和装饰,比如旋转、下划线或

  字体是矢量,所以你无须担心分辨率的问题。他们和文本一样因为拥有 CSS 属性,那就意味着,你完全可以应用 size 、 color 和 style 。你可以添加转换、特效和装饰,比如旋转、下划线或者阴影。

  可是图标字体并不完美, 这就是为什么越来越多的人使用行内 SVG 。CSS Tricks 写了图标字体劣于原生 SVG 元素的地方:锐利度、定位或者是因为跨域加载、特定浏览器错误和广告屏蔽器等原因导致的失败。现在你可以规避绝大多数这些问题了,总体上使用图标字体是一个安全的选择。

  需要提到的是 xlink:href 是一个弃用的 SVG 属性。尽管大多数浏览器仍然支持,你应该用 **href** 替代。现在的问题是,一些浏览器比如 Safari 不支持使用 href 进行 SVG 资源引用,因此你仍然需要提供 xlink:href 选项。

  不像是字体,太阳城娱乐城 color 对于 SVG 图标没有任何作用:你必须使用 fill 属性来定义一个颜色。这意味着他们将不会像图标字体一样继承父文本颜色,但是你仍然可以在 CSS 中定义它们的样式。

  这样就可以生效了,但是不完全符合我们的预期。目前为止,我们所有做的事情可以使用一个普通的图标字体来实现。我们想要的是在图标的位置可以有不同的颜色。我们想要向每个路径上填充不同颜色,而不需要改变其他实例,我们想要能够在必要的时候重写它。

  当提到在 CSS 中命名,通常有两条途径:描述的或者语义的。描述的意思是告诉一个颜色是什么:如果你存储了 #ff0000 你可以叫它 --red 。语义的意思是告诉颜色它将会被如何应用:如果你使用 #ff0000 来给一个咖啡杯把手赋予颜色,你可以叫它 --cup-handle-color 。

  描述的命名也许是你的本能。看起来更干脆,因为#ff0000 除了咖啡杯把手还有更多地方可以被使用。一个 --red CSS 变量可被复用于其他需要变成红色的图标路径。太阳城毕竟,这是实用主义在 CSS 中的工作方式。并且是一个良好的系统。

  使用语义类命名,例如 --cup-handle-color ,对于这个情况更有用。当你想改变图标一部分的颜色时,你立即知道这是什么以及需要重写什么。无论你分配什么颜色,类命名将会一直关联。

  然而,这个方法有一个主要缺点。首先,将颜色定义与各自的图标分离可能会有些让人疑惑。当你决定重写他们,你必须在类与 :root 选择器之间来回操作。但是更重要的是,它不允许你去关联你的 CSS 变量,因此让你不能复用同一个名字。

  在你定义完成 --color-1 , --color-2 和 --color-3 之前,图标将会使用你为每个 path 设置的默认值。这解决了当我们使用 :root 时的全局关联问题,但是请小心:你现在有一个默认值,并且它将会生效。结果是,你再也不能使用单一的 fill 声明来定义单色图标了。你将不得不一个接一个地给每个使用于这个图标的 CSS 变量分配颜色。

  CSS 变量与大多数现代浏览器兼容,但是就像你想的那样, Internet Explorer 完全不兼容。因为微软要支持 Edge 终止了 IE11 开发, IE 以后也没有机会赶上时代了。

  你想要做的是设置一个仅在 CSS 变量不被支持时触发的声明。这可以通过设置备份颜色的 fill 属性实现:如果 CSS 变量不被支持,它甚至不会被纳入考虑。如果它们不能被支持,你的 fill 声明将会生效。

  在 mixin 中通过 @content 传递 CSS 变量也是一个可选项。如果你在外面做这件事,被编译的 CSS 将会变得一样。但是它有助于被打包在一起:你可以在你编辑器中折叠片段然后用眼睛分辨在一起的声明。

  在不同的浏览器中查看这个 pen 。在最新版本的 Firefox , Chrome 和 Safari 中,最后两只杯子各自拥有红色杯身灰色烟气和蓝色杯身灰色烟气。在 IE 和 版本号小于 15 的 Edge 中,第三个杯子的杯身与烟气全部都是红色,第四个则全部是蓝色! ✨

当前网址:http://www.builder.org.cn/linggan/icon/1021.html

 
你可能喜欢的: