Chrome Workspace功能是将在Chrome开发者工具（F12）中对文档的修改直接应用于对应文件中。 由于Chrome并不知道当然文档对应用的文件为哪个，所以需要配置Workspace的映射关系来告诉Chrome对哪个文件做修改 使用Workspace条件： Chrome V31+(正式版) 本地服务器开发 1.点击F12工具的设置按钮 2.点击左侧的workspace 3.点击Add folder 4.选择服务器所在的根目录，之后确定会chrome会在上面做出一个提示，点击允许 5.双击下图所示的地方，配置映射关系 6.填写映射关系，视具体情况填写，注意右边的/一定要填写（关键性步骤） 然后点击空白处，完成填写 7.然后回到一个页面中去，试着去更改一个样式数值，验证是否生效 注意 Workspace只对外部引入的CSS样式有效！
文章归档
一种汉堡动画图标的实现
原因 Google Material Design的设计语言出现，使得越来越多的website使用更多的交互效果， 最近风行的汉堡风格网站里面，跟风出现了一些小的交互效果，例如这种汉堡按钮的交互变化。 这里提供一种可供选择的实现方式。 实例 先看看我们实现的效果如何。 http://demo2.mixmedia.com/html/3/ 鼠标点击汉堡按钮的时候，会触发一个交互的小动画，汉堡按钮会变成叉……其实就是这么简单的交互…… OK，效果看到，现在我们需要想想怎样去实现它，可选方案有 SVG / CSS3 Transform， 我们查一下caniuse 看看两种方案的适用平台情况。 这个是 CSS3 Transform ： http://caniuse.com/#feat=css-transitions 这个是 SVG http://caniuse.com/#feat=svg-smil 情况好明显……SVG方案之前已经介绍过了，虽然实现的效果及制作的工具都比 CSS3 Transform要好，不过兼容性没有办法保证。 或许等到IE都灭亡了，我们就可以放心的使用SVG方案了。 OK，现在我们使用 CSS3 Transform 去实现这个效果。 前提条件 查 caniuse 我们得知 CSS3 Transform 也不是全兼容的方案。 至少IE8/9 都是不鸟我们的……所以我们需要一个检测 HTML5 功能的工具，为我们区别对待支持 CSS3 Transform的现代浏览器 及不支持 CSS3 Transform的考古浏览器。 有人会问不支持CSS3 Transform的考古浏览器咋办啊？……还用说，用图啊……直接换背景图…… 这个检测HTML5支持情况的工具，应该部分前端的同事知道的了，就是 modernizr …
快速创建PS辅助线
PS辅助线不管是做图还是切图是都是必不可少的功能，最近Sam介绍的PS插件（GuideGuide）那功能真是强暴了。可惜我的PhotoShop CC 2014装不上。难道要我换成低版本的PS，我才不干呢。别问我为什么，因为我是版本控，有高版本绝不用低版本。 那怎么办呢，难道为了做“版本控”就要手工拉辅助线，今天切图时发现其实PS CC 2014里也有集成PS快速创建的功能。闲话少说，直接上图。 功能菜单 自动分列辅助线 分行+分列辅助线 这张图的辅助线三步完成
文章分类 前端技术
requirejs编译项目
挡箭牌 PS：首先我不认为编译打包能解决所有的问题，而且打包虽然在某程度上+快了页面的加载速度，但是同时也为打包部署及版本控制，带来的一定的问题，这个需要一整套打包发布框架去处理的，但是但是……引入一整套打包发布系统，是非常增加系统复杂度……甚至变成杀鸡用牛刀的……完全脱离了我们做事情的出发点了……所以我们需要从实际使用的出发去审视这套方案，有需要的时候就用，非迫切需要的时候慎用。 高手们请直接无视这篇文章直接到官网上看说明，猛戳这里。 前戏 我们有部分项目使用 RequireJS 作为js包管理框架，在实际使用中有些小瑕疵（加载速度/重复刷新访问拒绝）。就研究了一下RequireJS 项目的打包方式，分享一下一些打包的经验。 RequireJS 做包管理有什么好处我就不再详细描述了，主要都是一种开发规范而已，用来规范Javascript这种自由奔放的开发语言的，以免项目的Javascript的代码野蛮生长到无法收拾的地步。 正文 整套示例代码可以checkout SVN： http://192.168.33.2/svn/sam/rjs 项目里面已经内嵌了nodejs， 需要修改 build/app.build.js 配置文件，分别执行 build/trace.cmd & build/build.cmd ，就可以将整个项目的包，打包到一个js文件里面[ js/build/main.js ]。其中 build/r.js 是的RequireJS 官方的打包脚本。 页面嵌入js的对比： 打包前的js引入方式[ dev/index.html ]: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开发/测试环境页面</title> <script type="text/javascript" src="../js/lib/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../js/lib/require/require-2.1.6.js"></script> </head> <body> <script…
Mobile Web远程调试神器 — Weinre
前端调试的困境 公司做前端的同学，一提起需要调试Mobile页面就开始头痛。由于手机的沙箱机制，使得需要调试mobile端的页面困难重重，有时候只得不断地在alert数据用来验证，css调试更加是通过猜测来调试……如果有个在mobile上的浏览器提供一个firebug就好了。（其实firebug lite真的有个online的版本，可以直接嵌入到页面中，不过mobile的屏幕这么小，很难去操作啊……） 现有的方案 OK，其实现在也是有几套方案去调试Mobile的页面的。由于平台的限制，所以我们分开了2套。 Android平台： Android 4.0以上的机型，可以通过安装Chrome for Android 然后通过Chrome for Desktop的一个ADB plugin去实现在桌面上调试Mobile web。 IOS 平台： 不得不说Apple是挺人性化的，IOS默认的safari支持直接在desktop的safari上调试，不过前提是你需要有一整套Apple的设备（虽然我公司有……）。 神器出现 Weinre 在使用 Weinre 之前，我们先了解一下 Weinre 的基本概念。Weinre 的全称是 Web Inspector Remote（远程 Web 调试工具），功能和 Firebug、Webkit Inspector 类似，可以帮助我们在 PC 端远程调试运行在移动设备浏览器内的 Web 页面或应用，能够即时调试 DOM 元素、 CSS 样式…
实现Responsive邮件的不同策略
本文由大漠根据Tina Ye的《Responsive HTML Emails: a Different Strategy》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/，以及作者相关信息 ——作者：Tina Ye ——译者：大漠 电子邮件变得相当的重要，它在我们身边随时出现。所以我们重新在思考FogBugz邮件通知的制作，我们知道我们必须在随时随地都能阅读，这意味着移动端上要做很多的优化。 在这篇文章中有很丰富的资源。Campaign Monitor提供了一份响应式设计指南，文中一步一步教您如何设计与制作响应式邮件(“EDM模板”)。Ros Hodgekiss早在2011年8月份就在Smashing Magazine发表了一篇From Monitor To Mobile: Optimizing Email Newsletters With CSS。MailChimp 发表了移动电子邮件的最佳实践相关技巧。如果你不想阅读这么多文章，那你么可以花点时间阅读Litmus团队根据自己产品总结的一些响应式邮件制作的经验。 但是，有一个小问题，上面所有文章中，他们都提倡使用媒体查询功能。 媒体查询的难处 媒体查询在桌面浏览器上得到完美的支持，但至今仍然有很多电子邮件客户端无法识别媒体查询。其中最受欢迎的手机邮件客户端是Android和iPhone的Gmail，但仍然无法支持媒体查询。没有媒体查询检测设备和重新配置相应的布局，用户可能很难看清移动设备上的内容(因为文字太小了)，像这样： 一个移动端的设计策略，并不能解决一个最受欢迎的移动端电子邮件客户端，这不能称得上是一个很好的策略。所以我们在想…如果我们采用另一种不同的方法呢？ 一个布局来控制一切 大多数的移动端电子邮件设计文章还是让你认为“不同的屏幕采用不同的布局”。例如，为桌面端电子邮件客户端设计一个两列布局，然后到移动端电子邮件 客户端时调整为单列布局。这种策略在很大程度上是依赖于媒体查询检测设备宽度，然后由内容流，减少，或隐藏给i后个章节标题来采用适当的布局。当媒体查询 支持仍然是如此参差不齐的情u情况下，你可以看到什么，这将是一个问题。 因此，不能依靠媒体查询来修改布局，我们认为，“为什么不设计一个布局，在所有屏幕的尺寸下看起来很不错呢？” 不可能吗？不，这是有可能的。 移动端第一 我的灵感来源于Luke Wroblewski的移动端第一的方法。在这里，首先要考虑到是极限制(移动端的极限性)，然后才开始设计。毕竟，将一只小猫装入一个大罐子中要比一个大的猫装进一个小罐子中来得轻松。不管怎么说，这是一个伟大的设计哲学，他让我们的最终设计达如何达到我们所有的差异。 我们开始在质问，什么布局能在移动端上很好的工作？回答我们的是“单列布局”。 单列布局，我的意思是，主要的内容流都是向下的，而不是两个向下和并列的。并列的内容在小屏幕下要重新回流。相比之下，一个直线向下的文档流意味着内容可以自适应水平方向的空间。瞧，在任何尺寸下的一列布局。…
[转]CSS减肥工具 — CSS Usage
前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况，造成网站的CSS慢慢变得臃肿从而影响了网站的用 户体验，这种情况下，给网站CSS文件减肥类似于海底捞针的大工程，因为稍不留神，一个不经意的删除，就会造成线上的产品的事故。下面我们就给大家推荐一 款CSS减肥的工具–Firefox插件 CSS Usage. 首先，我们需要安装Firefox（猛击此处下载）,或者确定你已经安装的版本已经高于3.1; 第二步，安装前端开发人员最普及的开发工具 Firebug； 第三步，安装CSS Usage 0.2.2(写此文时的版本)； 第四步，在浏览器中打开我们要优化的页面（本地的页面也可以），点击右下角的firebug小图标，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况. Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描. AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率. 当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11 点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图 下面我们展开一个内联样式 我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态: 绿色–表示当前扫描看到的, 深绿色–的以前的扫描中看到的,…