[转]使用CSS3特性做跨域

通过 CSS3 的 content 获取内容,很有意思的一个思路,实际场景中有可能用的到:

CSST (CSS Text Transformation)

  1. 利用js动态创建一个link插入到文档中, 请求css文件.
  2. 利用 computedStyle = window.getComputedStyle 获取指定元素的 style 对象
  3. 利用 computedStyle .content 获取内容

Continue reading

使用 CSS3 Rem 单位布局

Rem(font size of the root element)是指相对于根元素的字体大小的单位,它与 em 类似,只不过 em 是相对与父层进行计算,而 rem 是相对与根元素的 font-size 进行计算。所以它即比 px 单位灵活,又比 em 稳定,是一个很有潜力、值得尝试的 CSS 单位。

Rem 布局

简而言之就是在 CSS 布局时使用 rem 单位,上面介绍了 rem 的特点就是基于根元素的 font-size 进行计算,所以可以通过动态的修改根元素的 font-size 值大小,来让页面的布局达到自适应的等比缩放效果,从而使布局在不同尺寸的屏幕上表现一致。
Continue reading

使用思源黑体

关于思源黑体

思源黑体是谷歌与 Adobe 联合开发,支持简体中文、繁体中文、日文、韩文以及英文;支持 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy 共7种字体粗细,可以满足不同场景下的文字显示需求。这个字体通过免费开源方式提供,支持多种语言,适合设计、开发人员甚至是普通用户下载和使用……

更具具体的介绍可以点击:《隆重介绍 思源黑体:一款Pan-CJK 开源字体》
Continue reading

响应式图片属性 srcset

srcset 属性是由 W3C 旗下的响应式图片社区提出的,目的是为不同分辨率的用户提供适合的图片大小的解决方案。之前只有 Safari 支持该属性,而现在刚刚发布的 Chrome 34 也开始支持。

srcset 设置起来很简单:

<h1><img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w">
</h1>

Continue reading

Squirrel 前端 Web 框架

很长时间没有写博客了,因为绝大部分业余时间都投入到 Squirrel 前端框架的开发中。Squirrel 是一个轻量级的移动 Web 前端框架,目的是打造一个简单易用、易扩展的基础框架,让前端脱离枯燥的重复开发,从而快速构建移动 Web 应用。之所以命名为 Squirrel 一方面是因为松鼠是公司的吉祥物,另一方面是寓意快速、灵活。
Continue reading