一些关于Web前端的小tips

记录一些平时不怎么关注、但却能够造成不小影响的细节，
内容来源于互联网技术博客（大部分来自于 张鑫旭博客）或者个人平时的总结。
持续更新

---

font-family

1. 在中文页面中，如果在页面CSS中如果设置了中文字体，那么浏览器默认字体将不起作用
2. 使用 font-family罗列需要使用的字体，sans-serif 字体必须放在所有字体的最后面，如果存在其他字体被放在了sans-serif 字体后面，则其他字体将不起作用。
   例如html{font-family:Arial,Helvetica,sans-serif,"宋体";}中的“宋体”压根就是多余的，永远也不会起作用，因为“宋体”被放在了 sans-serif 字体的后面，被终结掉了，只会加大CSS文件尺寸的冗余代码。如果将“宋体”调至”sans-serif”的前面，那么情况就会大不一样

---

新版本Chrome无法显示border-image问题

div {
    border-image:url(border.png) 20;
}

如果发现类似于上面写法的样式不起作用，也就是 border-image 没有显示，那么可以尝试换成以下写法：

div {
    border:20px solid; // 加了这一句
    border-image:url(border.png) 20;
}

相比于第一种写法，第二种写法在 border-image 的上面加了一句 border的样式，需要注意的是，border 样式必须写在border-image的上面，并且必须写明边框宽度和边框样式，边框样式也可以是 double dashed 等，但总之必须写明。

---

width 与 padding或是border 分离，提高代码重用性

下面代码比较精简，但重用性与自适应性不太好：

HTML:
<div class="box">
    <strong>标题</strong><br />
    内容内容内容内容内容内容
</div>

CSS:
.box{width:430px; padding:20px; border:1px solid #ddd;}

下面这种形式，实现的效果与上述相同，但HTML的元素不如上面的一段精简，不过将width 与padding和 border 分离，父元素控制宽度，子元素控制padding 与 border，父元素宽度不受padding与 border 的影响，提高子元素重用性。避免不必要的bug

HTML:
<div class="box">
   <div class="box_in">
        <strong>标题</strong><br />
        内容内容内容内容内容内容
    </div>
</div>

CSS:
.box{width:430px;}
.box_in{padding:20px; border:1px solid #ddd;}

---

CSS 渲染方向

CSS 与 JavaScript 选择器元素的方式不同，后者是从左往右，但 CSS选择器则相反，例如以下 CSS 选择器：

#test div{...}

CSS 对于这种的处理方法为，先选取页面上所有的 div，然后再找id 为test 的元素。
可以预见，这种选择的速度是很慢的，所以最好避免。

• CSS选择器中，通配选择符* 和多 class 选择器(例如 .foo.bar.baz)性能消耗较大

---

CSS的分离与合并

• 分离的 CSS命名原则，最好是 面向属性的命名，命名中不含对元素位置、内容的描述，只关乎属性，可以参考BootStrap

例如

.side-item-header{padding:0 0 8px; text-align:right;}

就是面对位置的描述，束缚了CSS的重用性，最好像是这样 :

.tr{text-align:right;}
.pb8{padding-bottom:8px;}

其中，tr 和 pb8 的命名都是面向属性的，提高了代码的重用性。

• 模块化元素不分离

千万不要对网站通用的元素进行分离，例如网站通用按钮，通用选项卡，通用小图标，或是页面的一些固定框架结构等，都不适合进行 样式分离

• 对于网站非通用元素，如果样式简单(1~2个属性)，对其分离并使用面向属性的命名方法。

• 精简高效CSS命名之“三无原则

  1. 无ID : #test{border:1px solid;}
  2. 无层级 : .test span{border:1px solid;}
  3. 无标签 : li.test{border:1px solid;}

• background 默认值

background属性允许我们使用一条规则设置所有单独的背景属性，而其余的我们没有设置的属性，浏览器都会根据属性的默认值来解析

p{
    background:
        [background-color]
        [background-image]
        [background-repeat]
        [background-attachment]
        [background-position]
        // 以下三条是CSS 3中的新属性
        [background-origin]
        [background-clip]
        [background-size]       
}

例如，当我们写下如下的CSS时：

p{
    background:yellow;
}

浏览器实际上会默认解析成：

p{
// 大括号[]中的就是浏览器默认添加的属性，虽然我们在控制台看不到
    background:[none] [0% 0%]/[auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;
}

所以有时候当我们对同一个元素应用两个background规则的时候会发现有一个是不起作用的。

例如我们设置以下 CSS 规则：

p{background:url(/img.png)}
p{background:yellow;}

实际上，浏览器会按照以下进行解析：

p{
    background:url(/img.png) [0% 0%]/[auto auto] [repeat repeat] [scroll] [padding-box] [border-box] [transparent];
}
p{
    background:[none] [0% 0%]/[auto auto] [repeat repeat] [scroll] [padding-box] [border-box] yellow;
}

可见，后面的默认设置 [none] 覆盖了前面的 url(/img.png)

---

空格

类型	描述
&nbsp	为按下space键产生的空格，此空格占据的宽度不定，与字体有关
&ensp	占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响
&emsp	占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

可以使用这些空格来实现一些文字对齐，例如让注册表单输入框之前的“姓名”、“手机号”等字数不同的文字轻松实现两端对齐。

需要注意的是，要想用空格实现完全相等的宽度，必须使用偶数像素的字体大小，例如12px, 14px, 16px。否则由于像素没有半像素这个概念，“手机号”文字与上下文字的宽度会有1像素的偏差

---

CSS3 scale 实现镜像翻转

CSS3 的 transform 属性中，scale() 属性一般用来定义缩放大小，而除此之外，如果设置的值是负数，那么可以实现元素的翻转。

// 水平和垂直方向上皆翻转，缩放倍数为1
tranform: scale(-1);
// 只在水平方向上翻转，缩放倍数为1
tranform: scaleX(-1);
// 只在垂直方向上翻转，缩放倍数为2
tranform: scaleY(-2);

避免 ajax 同步请求

同步的 ajax 请求在技术上是可能的，但是最好避免这么做，因为它将锁定浏览器的UI（按钮，菜单，滚动条，等等）而且阻止用户与任何东西互动。

Media Queries 中的 only 关键字

摘自 葵中剑

Media Queries是CSS对于Media Type的一个扩展，所以不支持Media Queries的浏览器，应该仍然要识别Media Type，但是IE只是简单的忽略了样式。only关键字可能显得有些多余，对支持Media Queries的浏览器来说确实是这样，因为加不加 only 没有影响。only的作用，很多时候是用来对那些不支持Media Queries但是却读取Media Type的设备隐藏样式表的。比如：

<link rel="stylesheet" type="text/css" href="example.css"  media="only screen and (color)">

• 支持Media Queries的设备，正确应用样式，就仿佛only不存在
• 不支持Media Queries但正确读取Media Type的设备，由于先读取到only而不是screen，将忽略这个样式
• 不支持Media Queries的IE不论是否有only，都忽略样式

visibility:hidden; 与 display:none; 的不同之处

1. 空间占据
   visibility:hidden;元素隐藏不可见，但仍旧占据控件，display:none; 元素隐藏不可见，并且不占据空间。
2. 回流(reflow)与重绘(repaint)
   前者不会引起页面的回流与重绘，不影响性能，后者则会。
3. 株连性
   一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事(全部隐藏无法显示)；
   但是如果父元素隐藏应用的是 visibility:hidden;，子元素在不做其他设置的情况下同样隐藏不可见，但是如果子元素设置了 visibility:visible;，则子元素可以照样显示可见。

background-position 的定位

@keyframes move {
  from {background-position: 0 0}
  to {background-position: 100% 0}
}

对应上面动画的效果：

可见，background-position的定位于 left的定位是有差异的，background-position的坐标可用下式计算：

positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;

根据上式，如果容器的宽(高)度小于图片的宽(高)度，同时background-position 又设置了负值(例如 background-position: -50% -50;)，则负负得正，最终的坐标就变成正的了。

CSS3 transform对普通元素的渲染影响

• transform限制position:fixed的跟随效果

position:fixed可以让元素不跟随浏览器的滚动条滚动，然而如果设置了position:fixed属性的元素的父元素设置了 transform属性，例如transform:scale(1)，那么此元素将会表现出和设置了position:absolute;一般的表现，而非始终定位。

// 虽然 img元素设置了 position:fixed 属性，但是因为其父元素 p 设置了
// transform 属性，所以导致 img 跟随浏览器滚动
<body style='height:1000px;'>
<strong>有transform限制的</strong>
<p style='transform: scale(1);'>
    <img style='position: fixed;' src="http://dummyimage.com/100x100/ff3ff3)">
</p>
</body>

• 设置了 position:absolute;属性的元素的宽度为100%, 则都会参照第一个非static值的position祖先元素计算其真正宽度，实际上，如果这个元素如果存在设置了 transform 属性的父元素，则同样也要算进去。