分类 » CSS

从 Sass Breaking Change: Slash as Division 说起

分类： , 标签：‚ 

在修改项目时，发现了 Sass 的告警——由除号引起的告警。告警的内容很简单，用 / 作为除法已经在 Dart Sass 2.0.0 中被弃用了，作为一个 Sass 的基础语法，这次弃用属于 breaking change 了，因此目前编译时只是会抛出 warning 而不是 error，否则大量项目都无法正常运行。研究了一下可以看到，Sass 官方特定用了一整个篇幅的文章，来阐述为何要作出这个修改...

Read More –>

SassDoc 详细介绍与最佳实践

分类： , 标签：‚ ‚ ‚ 

SassDoc 是一款专门为 Sass 代码生成注释的工具，通过 SassDoc，开发者可以通过类似 JSDoc 的方式在 Sass 代码上添加注释，然后直接用命令生成文档。最近在处理团队框架 QMUI Web 时，遇到了需要为大量 Sass 方法写文档的问题，因此研究了这个工具，本文将会详细说明 SassDoc 的使用方法以及其中的最佳实践。 基本使用 在 Sass 中，可以使用多行注释 /* xxx...

Read More –>

为 IE 单独写 CSS 的几种方法

分类： 标签：‚  评论：33 33 评论

因为万恶的 IE 存在各种的不标准，因此，在进行页面开发时不免要为 IE 单独写一些 CSS 。熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。 IE hacks 举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写： .demo {margin-left: 30px; ...

Read More –>

:hover 在 IE6 下的一个 Bug

分类： 标签：‚ ‚  评论：19 19 评论

看到标题，相信会很容易联想到 IE6 不支持除 a 外的 :hover 伪类，不过这只能说是万恶的 IE6 对于 CSS 选择器的支持太差了，还不能说是 Bug 。而接下来 Kayo 要说明的，是个实实在在、不折不扣的 Bug 。 这个 Bug 是关于一个比较常用的效果 —— hover 后改变子元素效果。 例如，有如下的一个导航， hover 后的链接中的文字会改变颜色 <div id="nav...

Read More –>

一些惊艳的 CSS3 之二

分类： 标签：‚ ‚  评论：13 13 评论

接上一篇文章《一些惊艳的 CSS3 之一》 三. 多重背景 多重背景并没有使用新增的 CSS3 属性，而是在我们都很熟悉的 background-image 作出调整，支持同时使用多个图片，例如：传统来说，为元素设置背景图会像如下设置： #demo {background: url(bg1.png) no-repeat; } 但是在 CSS3 中，设计师可以同时为一个元素指定多个背景，例如： #demo...

Read More –>

一些惊艳的 CSS3 之一

分类： 标签：‚ ‚ ‚  评论：9 9 评论

最近对一些 CSS3 的新特性作出了不少的介绍说明，这些内容大多都是 CSS3 中相对比较普及的内容，其实 CSS3 还有很多很酷的特性，只是这些特性在浏览器支持和网站的具体使用上比较逊色，但是仍具有不少的魅力，今天这篇文章要介绍的就是几个比较酷而相对介绍较少的 CSS3 特性。 一. 边框新特性 在 CSS3 中，border 增加了两个新的特性，一是边框图片，而是在边框颜色中使用渐变色。 边框图片利用 borde...

Read More –>

CSS3 自定义动画（animation）

分类： 标签：‚ ‚  评论：11 11 评论

除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外，CSS3 还有一种自由度更大的自定义动画，开发者甚至可以使用变形（transformation）和转换（transition）制作自定义动画，利用纯 CSS 制作出像 Flash 一样的效果。在实际使用中不难发现，变形和转换更适合做元素的交互，而自定义动画除了做交互外还能使到网页具有活力，有了自定义动...

Read More –>

更多的 CSS3 变形 (transformation)

分类： 标签：‚ ‚  评论：9 9 评论

在 Kayo 之前所写的一篇文章《CSS3的变形与过渡样式》中，曾经对 CSS3 的变形 (transformation) 和转换 (transition) 作出详细介绍，但关于变形的部分内容仍可以扩展说明一下，因此写了本文补充一下变形的相关内容。 在前文中，已经说明了 transform 属性的两个用法 rotate 和 scale ，分别用于对象的旋转和缩放，具体的内容可以阅读前文。而现在要补充说明的，是 tra...

Read More –>

IE6 下 img 底部多出空白

分类： 标签：‚  评论：25 25 评论

是芥末日木有出现，Kayo 又可以继续写博客了。昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ，用块级容器包裹 img 标签时，在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白，例如网页中有如下的结构： <ul> <li><img src="img-bug.png" alt="img bug" /&...

Read More –>

CSS3 之阴影效果

分类： 标签：‚ ‚ ‚  评论：9 9 评论

对于设计师来说，阴影可以说是一个很常用的效果，它可以直观地突显一个元素，用在网页设计上也非常适合。在 CSS3 阴影效果出现之前，开发者只能通过图片在网页表现阴影，尤其对于阴影文字，使用图片表示是很常见的方式，而在 CSS3 阴影出现后，设置元素的阴影将会变得轻松，下面详细介绍 CSS3 阴影。 一. CSS3 阴影基础 在 CSS3 中，阴影相关的具体属性有 text-shadow 和 box-shadow ，分别...

Read More –>

CSS3 之 RGBa 可透明颜色

分类： 标签：‚ ‚  评论：20 20 评论

在 CSS3 中，增加了一个 opacity 属性，允许开发者设置元素的透明度，现在 opacity 已被主流的现代浏览器支持，但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度，这样的透明规则相当不灵活，在实际开发中往往也是会遇到很多麻烦。其实，在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa 。相对于 opacity ，RGBa 可以在单个元素上设置透明度，而不影响其子元素，只是 R...

Read More –>

详说 IE hasLayout

分类： 标签：‚ ‚  评论：15 15 评论

在两篇文章中，Kayo 对 hasLayout 的概念作了简略的介绍，并把它与 BFC 相提而论。虽然 hasLayout 有很多缺陷，但作为 IE 渲染引擎的重要组成部分，它在网页重构中依然具有很重要的位置，所以 Kayo 会在本文中对它作详细的介绍。 一.hasLayout 是什么？ hasLayout 与 BFC 有很多相似之处，但 hasLayout 的概念会更容易理解。在 Internet Explorer...

Read More –>