禁用Firefox自带的元素查看工具

对于web前端工程师来说,用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今,新版本的Firefox中又内嵌了一个元素查看工具(图1),类似Firebug,但是初步体验下来,功能远不如Firebug(图2),使用起来也远不如Firebug方便。但是右键菜单中的两个“查看元素”选项(图3),常常一不小心就按错了。这个新增的内置元素查看工具,不但没有给我带来便利,反而造成了许多不便。幸好,我们可以轻松地禁用它。

继续阅读 →

本条目由小李刀刀发布于 2012-03-30。属于 乱七八糟,被贴了 浏览器、技巧 标签。乱七八糟2012-03-30 · 小李刀刀

CssGaga 快速上手指南

CssGaga是ytzong(涛哥)基于我们在朋友网日常的重构工作流程,为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows + .NET的环境,提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨询到有关CssGaga的问题,由于CssGaga本身也是在不断升级,以前的教程有些已经陈旧,为了帮助新接触到这个工具的同学,我这里再写一篇日志介绍一下CssGaga的基本使用。

继续阅读 →

本条目由小李刀刀发布于 2012-03-22。属于 乱七八糟、CSS,被贴了 CSS、重构、工具 标签。乱七八糟、CSS2012-03-22 · 小李刀刀

dateDiff在Objective-C中的实现

在学习iOS App开发中遇到需要计算时间差并格式化输出的需求,没有现成的方法,需要结合NSCalendar和NSDateComponents来实现。所以干脆把代码封装成一个熟悉的dateDiff方法。不过这个方法跟VB和sql里的dateDiff还是有点不一样,虽然可以封装成完全一样,不过我觉得直接返回NSDateComponents会更方便,因为所需要的各种单位上的值都包含在其中了。 我是把代码封装到自己的一个工具类KRUtils里作为类方法,使用起来也很方便。代码如下:

继续阅读 →

本条目由小李刀刀发布于 2012-03-13。属于 所谓技术。所谓技术2012-03-13 · 小李刀刀

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很多中文版本的 CSS 图书中采用了 10 进制的简单相加计算方式(包括第一版《CSS 权威指南》,第二版中已经纠正)。因此把规范中对CSS层叠优先级的相关定义意译一下,希望给初入门或对权重计算尚有疑惑的朋友提供一些参考。

继续阅读 →

本条目由小李刀刀发布于 2011-05-26。属于 CSS,被贴了 CSS、重构 标签。CSS2011-05-26 · 小李刀刀

容易被误解的overflow:hidden

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文。但是,很多人对这个属性是存在着一定的误解的,网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度(或高度)可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时,都认为overflow:hidden造成了特殊情况下的麻烦(详见自适应的CSS多列图文混排改进方案)。但如果认真阅读一下css规范,会发现overflow:hidden其实并不一定隐藏溢出内容。我之前翻译的clearfix改良及overflow:hidden详解一文中第二部分有讲解,不过可那篇文章的重点是谈清除浮动的问题,所以有关overflow的问题反而没引起注意。

继续阅读 →

本条目由小李刀刀发布于 2011-03-20。属于 CSS,被贴了 CSS、技巧 标签。CSS2011-03-20 · 小李刀刀

[译]对《优化浏览器渲染》的补充

ISD Webteam的大布同学(twitter:@tc_bryanzhang)在2010年1月翻译了google Page Speed系列中的Optimize browser rendering,很是方便了大家。在此基础上,google又有了更新,我且在此把google新增的部分翻译一下,作为对大布同学译稿的补充。 google这篇文章关注的是资源被下载到客户端以后,在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化,提出了5个要点: 1. 使用高效率的CSS选择器 2. 避免CSS expressions 3. 将样式表放在页面顶部 4. 指定图像尺寸 5. 尽早指定文档的字符编码

继续阅读 →

本条目由小李刀刀发布于 2011-03-14。属于 所谓技术,被贴了 javascript、翻译、CSS、HTML、性能优化 标签。所谓技术2011-03-14 · 小李刀刀

自适应的多列图文混排改进

关于网页两栏、三栏的布局讨论由来已久,有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案,而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多,那是你举一反三,不是本文讨论的重点。你也可以先看一下最终的示例页面。 demo

继续阅读 →

本条目由小李刀刀发布于 2011-03-12。属于 CSS,被贴了 网页、CSS、技巧 标签。CSS2011-03-12 · 小李刀刀

[译]CSS边框实现“无图化”设计

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes/ 译文:https://www.ofcss.com/2011/03/10/css-border-tricks-with-collapsed-boxes-translation.html 作者:*Thierry Koblentz (雅虎前端工程师)* 用css边框实现小三角的技巧现在已经被越来越多的网站所采用,减少图片、减少HTTP请求的低碳设计越来越受欢迎。这次,来自雅虎的前端工程师又给我们带来了一组新的CSS边框设计技巧,原文列出了三种(双色背景导航条、水平排列元素间的点线分隔符、带左右箭头的垂直导航条),实际上除了这三种外,其范例页中还给出了额外的两种(水平分页导航条、垂直分组导航条)。以下是译文:

继续阅读 →

本条目由小李刀刀发布于 2011-03-10。属于 CSS,被贴了 翻译、CSS、技巧 标签。CSS2011-03-10 · 小李刀刀

IE8/9兼容性设置

ie9-logo从使用Win7测试版开始,经历了IE新版本使用中的不少兼容性问题,早期遇到的如看不了视频、论坛不能上传附件、不能使用网银、不能使用支付宝财付通等问题。经过一两年的使用下来,IE8已经成了我主要使用的浏览器之一(Chrome是我的默认浏览器、网银、支付宝、财付通及部分兼容性不好的网站用IE8),使用一直很顺畅。现在很多人开始升级IE9,希望会有更多的非前端开发人员的普通用户开始尝试IE8吧。这里把我安装完IE8(以及升级完IE9)之后必做的设置分享一下,希望能帮助一些刚开始使用IE8/9的朋友。

继续阅读 →

本条目由小李刀刀发布于 2011-03-07。属于 乱七八糟,被贴了 软件、浏览器、技巧 标签。乱七八糟2011-03-07 · 小李刀刀