自动添加连字符 CSS4 hyphens 属性

在 css4 之前,断行我们有 word-wrap 和 word-break 属性,但是都很生硬,如果一个单词被分成两段也很难辨识。

hyphens 属性支持自动或手动添加连字符,看起来就舒服多了:

hyphens

 

使用也很简单:

具体兼容性可见 http://caniuse.com/#search=hyphens

更多参考:

http://css-tricks.com/almanac/properties/h/hyphenate/

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

webkit line clamp reflow bug

之所以称之为 “reflow” bug,是因为这个 bug 刷新页面就可能变好,或者动一动页面上的东西也能好,跟老版本 IE 下面万能的 “zoom:1” 和 “overflow:hidden” 能解决的那种 bug 有异曲同工之妙。

先看表现:

webkit-clamp-bug

注意箭头和红框指出的部分有一块空白,这里没有任何元素/伪元素之类的东西,动一动上面的滚动图片可能就恢复了。

经试验证明,这个 bug 是由 -webkit-line-clamp 属性导致的,之前我提过该属性的另外一个 bug,即 正好两行和超出两行渲染高度不同,现在又发现一个 bug,说明新属性的支持还不是很完美,大家使用时要多多小心了。

禁止 File Watchers 自动编译所有文件

IntelliJ IDEAFile Watchers 插件可以设置自动监控 SASS 文件并编译。但是当有 @import 文件存在时就蛋疼了,假设有 40 个文件引入了 _function.scss:

则每次修改 _function.scss 时,会自动编译 40 个文件。在多人协作时,很可能不小心编译了别人正在修改或者未修改完成的文件,或者导致别人的文件编译失败。而且也严重影响开发速度。

这里的解决办法就是,修改 File Watchers 插件的 Scope 选项,将其改为 “Changed Files”,这样就可以只编译修改的文件了:

file_watchers

当然,这样修改的缺点也非常明显,每次改动之后,如果想让包含它的文件也能用到新增内容,就必须手动再编译一次了,请大家斟酌权衡。

App Store 速度慢怎么办

修改 hosts 可解决 App Store 速度奇慢的问题。

可以手动修改 /etc/hosts 文件,也可以安装 Gas Mask 后修改,增加一条记录即可:

亲测有效,速度提升明显。

Android 圆角 Bug

Android 对 CSS 圆角的支持向来不是很好,如果要实现很小的圆点,就更明显,即使 Android 4 以上也不例外:

border-radius

如图所示,圆点会变成有四个角的奇怪形状。

要解决这个 bug ,在一定的情况下可以考虑使用 box-shadow 替代 border,即将:

替换为:

当然,实际的表现并不完全一样,多少可以看到边缘有一些模糊的效果,不过已经可以完美解决这个 bug 了。

Sass 循环 background position

在制作大量 icon 的样式时,如果 icon 的命名比较规律,且雪碧图也按照一定的偏移来制作,则可使用 SASS 的 for 循环一次生成:

需要注意的是,如果需要固定前面的 0,即横向偏移量,那么需要给后面的表达式加上括号,否则会被整体当作一个表达式计算出一个值。

微信 CSS3 动画失效 BUG

当前版本的微信内置浏览器中,有时CSS3动画会失效(非必现),若重启微信再打开页面即可恢复。

目前有三种方法可以解决这个问题:

1,每次遇到动画失效时,重启微信再打开页面;

2,待微信升级到 WeChat 5.3.1.6 时即可 fix 此 bug(内测版已fix);

3,使用 animation 替代 transition ,并设置 animation-fill-mode属性(不能为none。both、forwards、backwards 可按实际需要添加。from 神奇的 @jacobtan 大叔)。

position: sticky; 失效

position: sticky; 失效有几种原因:

1,浏览器死活不支持,可降级为fixed用脚本控制,见@神飞 的 文章

2,要写全前缀形式:

3,直接父级必须有足够的高度,且可滚动:

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

具体见 W3C 规范

Apache SSI shtml 中文乱码

Apache 正常使用时只要 html 文件中的 meta 指定正确,一般不会出现乱码。如果出现整页乱码,可以将 http.conf 文件中 #AddDefaultCharset UTF-8 前面的注释去掉,即可强制指定默认编码为 UTF-8。

不过,在使用 SSI 指定变量时使用中文,也可能出现乱码(Bug 25202),例如:

在这种情况下,则需要指定 encoding=”none” 才可以解决乱码问题:

这样就能正常显示变量中的中文了。

 

Note3中text-indent Bug

三星Note3中外层设置overflow:hidden;并不能挡住内层text-indent:-100%;或者 text-indent:-999em; 顶开的box,可以改用其他方式隐藏文本,如:color:rgba(0,0,0,0);

Android 2.3 max-height 失效

问题:Android 2.3 中 max-height 会失效,只有跟 overflow:hidden; 一起才会生效。

解决:如果想用 max-height 就要加上 overflow:hidden; 如果里面有元素需要飘出来,可以考虑用 padding 让它露出来。

呼出 iOS 数字键盘

移动 web 开发中使用 input:text 在 android 手机中可以呼出九宫格数字键盘,但是在 iOS 中却不行。

解决方案是设置 type=”tel”:

虽然在语义上说不通,但是确是目前最好的办法了。

Android 4.x placeholder line-height 对齐问题

input 中的 placeholder 在 iOS 等设置 line-height 等于 height 的值即可保证垂直居中。而在 android 4.x 中则会偏上。

使用 ::-webkit-input-placeholder 只能更改颜色,并不能修改 line-height, 解决办法是讲 input 的 line-height 设置成 normal 即可垂直居中:

关于 line-height: normal 的值,根据字体的不同会在 1.2 上下浮动,由浏览器自动计算。

参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

http://css-class.com/test/css/text/linebox-line-height-011.html

centos linux apache gbk 乱码

编辑 apache 配置:

把 

前面添加 # 注释掉,重启 apache 即可。