Google Reader

Code Cola是一个可视化编辑CSS样式的chrome插件。

当前版本：3.2.0

下载：https://chrome.google.com/extensions/detail/lomkpheldlbkkfiifcbfifipaofnmnkn

源码：https://github.com/zhouqicf/code-cola

内容索引

1. 使用方法
   1. 开启插件
   2. 选择节点
   3. 编辑节点样式
   4. 添加修改注释
   5. 获取节点样式
   6. 保存整页的修改结果
2. 所有功能介绍
3. 现有控件
   1. 列表项符号（list-style）
   2. 字号（font-size）
   3. 行高（line-height）
   4. 字体（font-family）
   5. 字形，包括加粗、斜体、下划线（font-weight、font-style、text-decoration）
   6. 字色（color）
   7. 对齐方式（text-align）
   8. 文字阴影（text-shadow）
   9. 背景色（background-color）
   10. 盒阴影（box-shadow）
   11. 边框和圆角（border、border-radius）
   12. 布局（padding、margin）
   13. 宽高（width、height）
   14. 线性渐变（linear-gradient）
   15. 透明度（opacity）
   16. 遮罩（-webkit-mask-image）
   17. 反射（-webkit-box-reflect）
   18. 2D变换（transform）
   19. 文字描边（-webkit-text-stroke）
4. 更新记录
   1. 1.1
   2. 1.12
   3. 1.13
   4. 1.14
   5. 1.15
   6. 2.0.0
   7. 2.1.0
   8. 2.2.0
   9. 2.3.0
   10. 2.4.0
   11. 3.0.0
   12. 3.1.0
   13. 3.2.0

一、使用方法

1、开启插件

点击chrome工具条上的图标即可，待插件加载完毕后，会在当前Tab的页面内插入面板，并默认自动开启元素选择功能。

2、选择节点

方式一、鼠标左键单选

当鼠标移入某个节点时，该节点周围会出现蓝色边框，直接点击该点击，则选中该节点作为待编辑节点。

方式二、鼠标右键选择

在节点上右键鼠标则会唤出与该节点相关的其它节点列表，鼠标移出这些列表项后，页面上同样将以蓝色边框的方式显示该列表项所对应的节点，如果该节点没有相关的其他节点列表，则会显示”no-selector”，并且该提示会在2秒钟后消失。相关节点列表包括”Tag选择”及”Class选择”两种方式，”Tag选择”将选中与该节点类型相同的节点，即如果当前节点为一个表格单元格（td），则会选中该单元格所在表格内的所有单元格；而”Class选择”将选中整个页面中拥有该class的所有节点。

方式三、按住Ctrl（Windows）/Command（Mac）进行多选

按住ctrl键进行自由多选，选中某个元素后再次点击该元素将取消对此元素的选择，操作方式与window文件完全一致。

方式四、根据Css选择器进行选择

按下键盘上的F键，在弹出的文本框中输入任意css选择器（支持css3选择器）并按下回车Enter。

选择完节点后，在面板的左上方将出现当前待编辑节点的类型及数量。

3、编辑节点样式

通过面板上的控件编辑节点样式。

4、添加修改注释

点击面板右上角”添加注释”按钮，下方将展开一个文本域，用来向当前编辑节点添加注释，比如对该节点做了什么修改，该节点的样式与视觉稿不一致等等。该功能支持同时对多个节点添加注释，支持注释的修改、删除。

5、获取节点样式

点击面板右上角”查看样式”按钮，下方将展开一个文本域，显示当前编辑节点的样式，在修改样式的过程中，该区域的样式将实时更新，并且该区域中的样式都进行了缩写处理。

同时该区域支持手动编辑，为此您可以一次性修改多个样式规则，一次性删除所有样式；另外当插件没有提供某个css属性的控件时，可以在此手动编辑样式。

6、保存整页的修改结果

点击面板右上角”获取修改结果”按钮，页面的左上方将出现一个浮层，显示”loadding”，待加载完之后，该浮层将变大撑满整个屏幕，浮层内的内容正是修改后的html代码，复制代码到一个文本文件，并另存为”xxx.html”即可。视觉、交互等同学对某些网页进行微调时，不必再打开Photoshop、Axure等工具，直接打开本工具编辑即可，保存后即可丢给前端，前端看到效果后即可查看代码，在工具生成的代码的基础上code。

二、所有功能介绍

三、现有控件

1. 列表项符号

   

2. 字号

   

3. 行高

   

4. 字体

   

5. 字形，包括加粗、斜体、下划线

   

6. 字色

   

7. 对齐方式

   

8. 文字阴影

   

9. 背景色

   

10. 盒阴影

    

11. 边框，包括边框及圆角

    

12. 布局，包括内边距及外边距

    

13. 宽高，包括宽度及高度

    

14. 线性渐变

    

15. 透明度

    

16. 遮罩

    

17. 反射

    

18. 2D变换

    

19. 文字描边

    

四、更新记录

1.1 更新内容 （2010-12-17）

• 按住ctrl进行元素的自由多选
• 增加了一个显示当前节点的功能，mouseover的时候显示当前节点
• 增加了about
• 修复了拖拽面板时仍在计算当前样式的bug
• 测试了多个网站，修正了样式影响

1.12 更新内容 （2010-12-27）

• 增加点击工具条按钮，关闭插件的功能
• 增加对于因chrome安全权限设置而导致不能使用插件的情况的提示，如：
  1. file:\\\协议的本地页面，请上传至服务器，或存放在本地的服务器目录下
  2. chrome.google.com域下页面
  3. chrome://下页面

1.13 更新内容 （2010-12-30）

• 更换了图标，感谢阵风同学的设计，非常给力。

1.14 更新内容 （2010-12-31）

• 增加了对i18n的支持，目前语言包括”en”、”zh_CN”，chrome将根据你的设置选择对应的语言。

1.15 更新内容 （2011-01-09）

• 修正了文字阴影、盒阴影下角度控件与Photoshop相反的问题
• 修正了文字阴影、盒阴影的表单控件在选择元素后不能初始化的bug
• 增加了针对盒阴影spread参数
• 调整了部分range控件的最大值

2.0.0 更新内容 （2011-01-15）

• Visual Firebug 更名为 Code Cola
• 增加注释功能（2.0.1 修复了换行符替换的bug）
• 增加了一次性增加、修改、删除多个css属性的功能
• 增加了对-moz等私有属性的支持
• 对编辑过程中离开页面的用户进行保存提示
• 更改版本表示方法

2.1.0 更新内容 （2011-02-05）

• 增加CSS3线性渐变
• 增加将修改结果发送至服务器进行保存，并返回链接的功能
• 重构了大量代码

2.2.0 更新内容 （2011-04-04）

• 增加对-moz-linear-gradient和-o-linear-gradient的支持
• 修复在mac无法使用command键进行多选的bug
• 修复可以将面板拖出浏览器窗口的bug
• 修复在选择元素时无法阻止页面上已绑定事件的bug，实现类似firebug查看元素的功能

2.3.0 更新内容 （2011-04-21）

• 在将编辑结果发送至服务器的功能中，将页面上的相对路径资源转换成绝对路径
• 在所有涉及到颜色的控件中支持RGBA色值
• 线性渐变增加对IE10的支持-ms-linear-gradient
• 增加透明控件opacity
• 修复了一个linear-gradient的bug

2.4.0 更新内容 （2011-06-04）

• 增加了-webkit-mask-image控件
• 增加了-webkit-box-reflect控件
• 对所有颜色控件增加了表示透明的背景
• 优化了代码

3.0.0 更新内容 （2011-07-24）

• codecola换上了YUI3的引擎，变得更加稳定、强大。
• 所有的控件中纯数字的表单控件转换成了html5的number控件，支持键盘上下键
• codecola现在可以完美地跑在非chrome插件环境下，前提是浏览器支持html5的新增表单，特别是range控件
• code-cola-widget从codecola中分离了出来，它是一个可视化的控件库，现在有颜色、角度、渐变3种控件，这里是github地址：https://github.com/zhouqicf/code-cola-widget

3.1.0 更新内容 （2011-08-0?）

• 增加对transform2d属性的支持。
• 对font-family属性增加了大量字体族

3.2.0 更新内容 （2011-08-30）

• 增加了对-webkit-text-stroke属性的支持
• 增加一种选择元素的功能，按下键盘上的“f”键，在出现的文本框中输入任意css选择器，并按下回车
• 显示当前元素时（鼠标移入面板上的“？”），将面板半透明，方便看到面板下的选中元素
• 优化了popup弹出的动画效果
• 修复了一个渐变控件的bug