Fl介绍
- 2. Fl
A Js/Html/Css Toolkit That Support Template
2012年9月21日 / welefen
- 8. 功能
• 词法分析
- 需要支持模版语法和各个浏览器的兼容情况
• 语法分析
• 所有的功能都是基于词法和语法分析结果进行
- 10. HTML词法分析需要注意的点
• IE的条件注释
- <!—[if
• 一些通用的status ok
- <!—status ok
• 文本中<>字符与tag中的<>识别
- <div>welefen<<<</div>
• Pre, textarea, script等特殊tag
- script的type=“text/html”
• Tag名可能是模版语法的识别
- <{%$tagName%} class=“cls” >
- <<&$tagName&> class=“cls” >
• XML的兼容
- 11. HTML标签属性切割
• 标签名
- <script/defer src=“xxx.js”>
• 属性列表
- 属性值2边的引号
- 2边没有引号,但有空格隔开
- 只有属性名,没有属性值
http://www.w3.org/TR/html5/syntax.html
- 12. HTML压缩
• 移除注释
• 简化doctype, charset
• 将多个空格替换为一个
• 移除相邻2个块级元素之间的空格
• 移除可选的闭合标签
• 移除可选的属性
• 移除可选的属性值
• 移除属性值2边的引号
• 移除http和https协议
• 压缩style值
• 压缩内联的JS和CSS
• 去除空的script和style
• 合并相邻内联的JS和CSS
- 13. HTML压缩
• 移除注释
• 简化doctype, charset
• 将多个空格替换为一个
• 移除相邻2个块级元素之间的空格
• 移除可选的闭合标签
• 移除可选的属性 所有的功能
• 移除可选的属性值 都可配置
• 移除属性值2边的引号
• 移除http和https协议
• 压缩style值
• 压缩内联的JS和CSS
• 去除空的script和style
• 合并相邻内联的JS和CSS
- 18. CSS词法分析
• @相关
- @import url
- @media
- @charset
- @namespace
- @font-face
- @-xxx-keyframes
- @-moz
• IE的* _ 9 等hack
• [;color:red;]
• Expression
- 需要调用JS的词法分析,通过匹配()个数
- 19. CSS Selector相关
• CSS3 Selector
Id, Type, Class, Attribute, PseudoElement, PseudoClass
• 计算Selector的优先级
http://www.w3.org/TR/selectors/#specificity
- 20. CSS 压缩
• 移除空格注释等
• 移除最后一个分号
• 移除空的Selector
• 覆盖相同的属性
- 需要识别hack
• 简化value
• 对属性和选择器重排
- 需要识别hack
• 合并选择器里相同的属性
- 需要识别hack