存档
RT http://www.cnblogs.com/jkisjk/archive/2011/09/30/JS_YUICompressor_menutools.html YUI Compressor是前端开发中经常用到的软件，如果每次都去命令行下操作未免有些繁琐，转了一篇如何将YUI Compressor加到右键菜单的文章 先下载必备软件 YUI Compressor : http://developer.yahoo.com/yui/compressor/ filemenutools : http://www.onlinedown.net/softdown/55029_2.htm Step1 : 将http://yuilibrary.com/downloads/#yuicompressor 中的yuicompressor-2.4.6.zip 解压缩到d盘某处，如D:\JKTools Step2: 在D:\JKTools 新建一个yuicom.bat 文件。内容如下： java -jar D:\JKTools\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar %1 -v -o %1_com.%2 pause Step 3: 安装 filemenutools 在filemenu tools 命令中添加一个 YUIcompressor 命令，属性如下 设置完成。 Step4: 右键点击要压缩的css 或js 文件，选择YUIcompressor，将在目录下生成*_com.*.*文件，如果文件有语法错误会提示。 —— 另，命cmd窗口里的压缩报告很值得细读。。。
Author: Glen Stansberry Glen Stansberry is a web developer and blogger. You can read more tips on web development at his blog Web Jackalope or follow him on Twitter. 1. <cite> 我想大家对于<blockquote>这个标签是非常熟悉的，比如上面的原作者信息这个内容就是一个<blockquote>。但是对于它的小兄弟<cite>标签可能大家就不是很熟悉了，<cite>标签用在对于书籍，文章的引用，默认显示为斜体，当然你可以通过css来控制实际的样式。 例：“若尘你也是堂堂七尺男儿，该有那十荡十诀之勇” 引用自 《尘缘》 2. <optGroup> 这个其实挺有用处的，对select下拉框里的选项分组。不过现在很多时候select这个元素通常被用其他元素wrap来展现，毕竟原生的这个效果不够华丽。 例： 紫微真人 紫阳真人 无尽海主人 洪荒卫 3. <acronym> 这个标签使用在缩写或短语需要进一步解释的情况下。 1 我的小游戏网站 <acronym title="游戏247 欢乐不停歇"> 247</acronym> 欢迎你的来访。 例：我的小游戏网站 247 [...]
IE6的十个bug的Fix方案，看到一篇文章整理了一下，顺便转过来备忘一下。 原文链接 http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/ 1. 强制浏览器是用Web标准解析 HTML的写法 1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 或者XHTML的写法 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. Set Position: relative 给元素指定Position: relative能够解决很多奇怪的问题，比如对齐和显示不正确等。对于Position的属性要小心设置，特别是设为absolute。 3. 给Float的元素加上inline属性避免双倍margin 这大概是最著名的一个bug了，IE6下对于浮动元素，会莫名其妙的双倍空白边，解决的方法也很莫名，设上display:inline属性就好了，对于float元素这个属性本身没有任何意义。 4. 给特定元素加上hasLayout属性 很多IE6（甚至是IE7）的问题可以通过设置hasLayout这个ie only的内部属性来解决，比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候，你不能显示的为其设定高度，可以使用设置高度为1%，而其父元素如果没有确定的高度时，该设置不会被应用到实际的高度上，但是hasLayout会被激活。 5. Fix字符重复bug 这是IE6上面一个非常奇怪的BUG，他的触发条件也是相当诡异，在浮动元素间如果有 <!– comment –> <!– comment –> <!– comment –> 这样的普通的HTML注释的话，会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中，具体的介绍大家可以看这里 positioniseverything 。 解决的方法也很奇怪 [...]
从最初的Netscape，到IE的崛起，独霸江湖，再到火狐出世，群雄并起，逐鹿中原，这些让人或激动，或失望的浏览器就像是网页设计领域的一朵朵乌云。最近做了一个网页，在兼容性上就遇到了新问题，不同平台下的字体兼容问题，特别是一些比较特殊的设计，比如使用了较为狭长的字体，可能会带来不少麻烦啊。 最完美的做法当然是能够在不同的环境下都测试一下，除了无敌的Vmware大法之外，今天再介绍一些很不错的工具给大家： 1 Xenocode Browser Sandbox 其实差不多就是提供了许多stand-alone的浏览器程序，提供几乎完全真实的测试环境，而且是相互独立的程序，不过下载的那个执行程序大了一点，还不如我一溜自己全装全了，有时候看看自己机器上那一堆浏览器也挺头大的。 2 CrossBrowserTesting.com 这个类似Citrix，免费的帐号有5分钟的体验时间，通过JavaApplet登陆到远程环境中去，有不同的平台供你选择，不过要讲究的是眼明手快，要不你就得不停开马甲了，感觉5分钟有点苛刻了，提供个30分钟的话比较慈善一点，不过既然大家都是出来混的，为了盈利无可厚非。 3 IETester 这个应该是很多朋友机器上的老朋友了，非常好用的IE测试器，能够提供非常完整的测试环境，效果也相当好，而且也没什么功能限制，免费的。真是砍妖杀怪的必备良器。 4 BrowsrCamp 在国内Mac的保有量可能还不足以引起客户的重视，但是对于国外的客户来说，Mac平台是相当重要的一块受众。这个网站的截图生成的相当快速，几乎就是新立得的效果，不过免费用户只能享用一点点功能，不过感觉还是挺有用的。 5 Litmus 应该说是相当好用也相当强大的在线工具，可惜收费用户和免费用户差别太大 了，有兴趣的同学去看看吧。
做设计的时候，选择合适的字体是非常重要的一个环节，当然有很多字体查看软件，但是说实话用了那么多，都大同小异，没有什么特别好的。也许是个人习惯的原因吧。偶然看到一篇文章，倒是个不错的办法。自己人肉动手做一些速查的字体cheatsheet，的确是比较直观，比单纯用软件去找来的好。有点按图索骥的味道。看来自己还是太懒，哈哈。 点击查看大图 原文：http://www.dogorgod.com/blog/font-in-design-of-the-skills-seek.html 还提供了字体打包下载
最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect，也算是为了对岸几百万移动用户的福祉做出应有的贡献了。 非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。 简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些： 源文件: blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。 blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。 blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。 blueprint/src/forms.css: 包含了一些表单样式。 blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。 blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。 再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子： <div class=”container showgrid”> <div class=”span-24″> 头部页眉 </div> <div class=”span-4″> 左边侧栏 </div> <div class=”span-16″> <div class=”span-8″> 居中行1-1 </div> <div class=”span-4″> 居中行1-2 </div> <div class=”span-4 last”> 居中行1-3 </div> [...]
