关于 URL 中协议的省略

前天看了 Google HTML/CSS 代码风格指南,里面有很多值得借鉴的地方,也学到了一些新东西,其中第一条说道,HTML 和 CSS 代码中引用的图片、媒体、CSS 和 JS 文件中的 URL 都可以去掉协议部分(http:https:),比如

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script src="https://www.google-analytics.com/ga.js" type="text/javascript"></script>
都可以换成:
<script src="//www.google-analytics.com/ga.js" type="text/javascript"></script>

只要是使用 httphttps 这两种协议都可以省略。原因是可以节省一点文件体积(当然只是那么一点点),另外一个原因 Google 说是可以解决混合内容的问题。起初我对这个第二点不是很了解,所以特意搜索了下。最后从 Paul Irish 的一篇文章找到答案,链接在文后。文章是两三年前写的,老外研究问题总是比我们要早啊。

以 // 开头的叫做相对URL(protocol-relative URL),相关的标准可以看 RFC 3986 Section 4.2,内容不是一般的长估计大家也没耐心去看吧。总之浏览器遇到相对 URL,则会根据当前的网页协议,自动在 // 前面加上相同的协议。如当前网页是 http 访问,那么所有的相对引用 // 都会变成http://https 同理。如果你在本地查看,协议就会变成 file://

所以,如果省略协议,就需要保证引用的外部资源也采用和网页相同的协议,或者保证资源可以同时通过 httphttps 访问。经过 StackOverflow 网友测试,这种用法几乎所有的浏览器都能支持,只有在 IE7/8 下会有一点小问题,就是通过相对 URL 引用的 CSS 文件(无论 <link>@import)会被下载两遍。所以对性能有一点影响。

至于 Google 提到的混合内容问题,其实是指IE有时会弹出的一个警告框:

安全警告

这个框想必大家也都见过。通常是在浏览 https 网页的时候出现,原因是网页里引用了 http 协议的外部资源,由于 http 被认为是不安全的,IE 才会给出提示。如果引用的时候写成相对 URL,浏览器就会自动采用 https 协议下载,这样就解决了问题。
阅读全文 »

Google HTML/CSS代码风格指南

本文翻译自Google HTML/CSS Style Guide

Google发布过各种编程语言的代码风格指南,今天看了一下关于HTML/CSS的,顺便整理翻译了下其中有用的东西,放在这里。Google的东西看一下还是会受益很多的,遵守这些规则,能够渐渐帮你形成良好的代码风格,同时在性能方面也很有益。留作参考吧。

通用风格守则

协议

把图片、媒体文件、样式表和脚本URL中的协议部分(http:,https:)省略掉,除非文件使用的不是这两种协议。这种方法使URL变成相对地址,可以避免混合内容的问题,同时略微地减少代码量。

【注:关于混合内容的问题(mixed content issues),可以看另一篇文章《关于URL中协议的省略》。】

<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
  background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
  background: url(//www.google.com/images/example);
}

通用格式化守则

缩进

使用两个空格来缩进。不要使用tab或者tab跟空格混合使用。

<ul>
  <li>Fantastic
  <li>Great
</ul>/
.example {
  color: blue;
}

大小写

所有代码都用小写字母,包括:元素名、属性名、属性值(除了text/CDATA)、选择器、CSS属性值,当然字符串中可以用大写。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">

末尾空格

去掉所有的末尾空格,它们是不必要的,有时候会带来麻烦。
阅读全文 »

征服 – 关喆

这首是关喆他导师的歌,呵呵,这首翻唱的风格我还是很喜欢的,推荐。

CSS 属性值中的百分比

CSS 中经常会出现百分比单位,搞清它们的基数是件很重要的事情。我查了查 CSS2.1 标准,在此整理一下:

百分比的基数

乘以包含块的宽度

margin, padding, left, right, text-indent, width, max-width, min-width

乘以包含块的高度

top, bottom, height, max-height, min-height

对于包含块(containing block)这个概念,不能简单理解成就是父元素。分情况而言:如果元素为静态定位或者相对定位,包含块一般就是其父元素;但如果元素是绝对定位,包含块应该是离它最近的 position 为 absoluterelative、或者 fixed 的祖先元素。对固定定位的元素,它的包含块是视口(viewport)。具体可以参考 这篇文章

乘以元素的字体大小

line-height

乘以元素的行高

vertical-align

background-position 里的百分比

background-position 分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么这个位移会同时应用于元素和图像。例如 background-position: 50% 50% 会把图片的(50%, 50%)这一点与元素区域的(50%, 50%)对齐,相当于设置了 background-position: center center。同理 background-position: 100% 100% 相当于 background-position: right bottom。如果只设置一个值,那另一个值自动设为 50%。

阅读全文 »

HTML5的语法变化

现在HTML5可以说是烫手山芋,一大片的人都在追随这项新技术,虽然正式的标准还没放出来,但浏览器们早已经开始对HTML5进行了实现,大批的前端人员也正在恶补新知识。上个月W3C刚刚宣布了HTML5规范正式定稿。据W3C说完整的HTML5技术标准将在今年正式出炉,预计将会在2014年完成HTML5网络环境的整体部署。可以说HTML5的时代真的近了,对IT人来说,Web App、LBS这些新机会就要来了。

HTML5有大量的新特性。重要的是它完全兼容HTML4和XHTML1,语法上很宽松,完全允许你按照以前的习惯来写,所以,把原先的doctype换成<!DOCTYPE html>,就马上变成了一个HTML5网页。语法上还有一些其他变化,先来看一下。

DOCTYPE

HTML5的doctype非常简洁:

<!DOCTYPE html>
<!-- 大小写不敏感 -->
<!doctype html>

指定字符编码

这个也同样简洁,原来你可能这样写:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5的是这样:

<meta charset="UTF-8">
<!-- 小写也没问题 -->
<meta charset="utf-8">

具有布尔值的属性

disabled和checked这类属性是具有布尔值的,当只写属性名而不指定属性值时,表示属性为true;如果想要设为false,可以不使用该属性,或者将属性名设定为属性值,或者设为空字符串。
阅读全文 »

她不爱我 – 关喆

之前《中国好声音》那会儿,我一直都没仔细听过关喆的歌。只是看大家对他评价都很高,实力很强。我也记得有个画面,不知道唱哪首歌,他唱得特别动情好像还流眼泪了。这首《她不爱我》是无意间听到别人在放的,我觉得很好,他的声音也很不错。这首歌是翻唱莫文蔚的。

flight