https://github.com/zswang/csst
CSS Text Transformation
https://github.com/zswang/csst
css
Last synced: 8 months ago
JSON representation
CSS Text Transformation
- Host: GitHub
- URL: https://github.com/zswang/csst
- Owner: zswang
- Created: 2016-05-06T07:58:29.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-11-05T11:42:45.000Z (over 9 years ago)
- Last Synced: 2025-09-18T14:14:41.301Z (9 months ago)
- Topics: css
- Language: JavaScript
- Size: 23.4 KB
- Stars: 199
- Watchers: 9
- Forks: 25
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CSST (CSS Text Transformation)
----------
# [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][coverage-image]][coverage-url]
## 背景
### 什么是 CSST？
一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全，不需要执行跨站脚本。
## 原理
通过读取 CSS3 content 属性获取传送内容。
### 调用流程
### 技术手段
* 怎么监听 `` 加载完毕?
> 收集线上的资料，发现常见的方案是计时器或者用 onpropertychange、DOMAttrModified。
> 考虑是 CSS3 场景，取巧用动画开始 (`animationstart`) 这个事件来捕获。
* 怎么传送特殊字符（"、'、\、\n、\r、\t）？
> Chrome、Safari 对 `content` 样式属性字符解析并不一致
> 为避免未知解析规则影响，统一使用 base64 编码
### 服务器应答的内容
```js
function csst(id, text) {
return `
@keyframes ${id} {
from {
}
to {
color: red;
}
}
@-webkit-keyframes ${id} {
from {}
to {
color: red;
}
}
#${id} {
content: ${new Buffer(text, 'utf-8').toString('base64')};
animation: ${id} 2s;
-webkit-animation: ${id} 2s;
}`;
}
```
## 与 JSONP 安全性比较
## 开发
### 本机调试
```bash
$ npm run debug
```
### 构建
```bash
$ npm run dist
```
## 问题
* 没有 JSONP 适配广，CSST 依赖支持 CSS3 的浏览器。
## 线上体验
## 参考资料
* [link element onload](http://stackoverflow.com/questions/2635814/javascript-capturing-load-event-on-link)
* [javascript: capturing load event on LINK](http://stackoverflow.com/questions/2635814/javascript-capturing-load-event-on-link)
## License
MIT © [zswang](http://weibo.com/zswang)
[npm-url]: https://npmjs.org/package/csst
[npm-image]: https://badge.fury.io/js/csst.svg
[travis-url]: https://travis-ci.org/zswang/csst
[travis-image]: https://travis-ci.org/zswang/csst.svg?branch=master
[coverage-url]: https://coveralls.io/github/zswang/csst?branch=master
[coverage-image]: https://coveralls.io/repos/zswang/csst/badge.svg?branch=master&service=github