IE上的轻量级调试工具-firebug Lite

4 feet


今天再调试一个css样式时间发现,ie跟firefox下不一致,代码改了半天,也没效果,实在高不定,最后我动用了··firebug-lite。才发现原来是缓存问题,代码压根就不一样····囧~~~~~~

顺便转个 Firebug Lite 使用简单使用方法,教育后人。
还是挺好用滴··,我用的是书签法
原先以为载入js会很慢,但发现第二次后就比较快了··· 又是缓存问题,估计我脑子被门挤了,囧rz 阅读全部>>

栅格系统引起的惨案

2 feet

发现最近淘宝UED开始火爆,各界小喽啰大喽啰都在关注,特别是 对与 他们刚发表的 网页的栅格系统设计
此文章非常之邪恶,以至于观看者七窍流血,毒发身亡,走火入魔,死伤无数,场面非常之惨烈。总归一句话,似乎很多人都开始混沌,包括我。 可见 栅格系统 这狗东西 够猛,跟 莲花宝典 有得一拼。
发现评论中还是有所谓的资深人士滴,其中有一评论留下了一个国外的 grid systems 网站(地址再此),研究了一晚上,恍然大悟。
以下分析以下我自己的一些理解:
1.首先我可以肯定的是 数学家尼古拉斯加宗(Nicolas Jaugeon)是个十足的懒人。就像 盖茨一样懒,要不然怎么出现windows这个东东。
2.(第一条是废话)
3.首先研究以下 淘宝UED 那篇文章里的那个公式: 如图
栅格系统 grid systems
然后是一张A=40 & i = 10的grid systems 表:

个人觉得看不看得懂这两张图不重要,我的结论是 栅格系统 的核心思想是:简单规整易算 (也就是懒人思想^_^)
该思想打破了常规的像素(px)思想,也就是说一个网站如果定下:A 和 I 后 建立 一个栅格系统表后,之后前端写css 计算 宽度时 就不必拿起计算器啦··,查一下表就ok·· 提高了效率,也更加规范,此方法也同样适用于设计师。
4.理解了第三点后,开始深入了解,就是建立自己的 grid systems 表。
我的自己理解的方法有点不同于 淘宝ued 里的说法,因为当A和I 确定后,grid systems 表也就确定。然后咱们会发现,好多尺寸都用不了,比如W=960,因为上表内没有。那么问题就来了,怎样建立一个有W=960 的表呢?
很简单 也很复杂(别抽我,我喜欢这样的表达方式··@_@) 逆推法
数学问题:解开 A×n -i = 960 就可以啦···
此问题就像 淘宝UED 那文章的一个评论一样:这么多变量 还让不让人活的啊···囧~~~
首先尝试“去掉一个错误答案”(开心辞典),i(栅格与栅格的间隙)是可以通过商量来确定的,相信所有前端就像数学家一样,像盖茨一样懒,喜欢简单,喜欢取整。(当然不排除邪恶之人,曾经我就比较喜欢用8做间隙,感觉8比10来的苗条,像东方女性+_+)

上面说的那个 国外的站就 是960 grid systems 貌似非常经典。
先跑开题分析以下 它的960 grid systems
该国外网站上有这么个介绍页面,个人感觉比较人性化地表现了 960 grid systems 链接在此
该介绍页面 介绍了 n =12 以及n =16 两种经典方案。
看完这两个方案发现两点:
第一点. A:i 分别等于3:1 和2:1。且都是十位取整,显然符合我的思想,计算简单。
第二点. 两边都有10px 的留白。这是淘宝ued那篇文章所没提及的,也就是说 A×n -i = W 中的W实际上是940。
通过以上两点 可以产生衍生思想,通过第一点的比例,可以推算,是否还可以使用其他比例,如4:1或者1:1。 通过第二点 可以推算,既然两边加入了留白,是否应该在 A×n -i = W 新增加一个参数,或者 产生一种更灵活的计算办法。

未完待续。。。

CSS解决IE6下PNG图片背景不透明的问题(补)

0 ~o~

周末调试的时候,发现之前的ie6下显示png代码不够完善,于是上网转了篇详细的,一起学习。

CSS解决IE6下PNG图片背景不透明的问题


半 透明效果有时候会给页面增加不少色彩,特别是Vista盛行之后,半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中,只有PNG格式和Gif格 式可以实现半透明效果,不过Gif格式的半透明效果很有限,而且会大范围失真,所以目前最流行的方式就是使用PNG格式图片。不过可惜的是,在 Internet Explorer 6及以下版本中都不支持PNG半透明效果(至少是不直接支持)。不过幸好Microsoft在这些浏览器中内置了其他的功能,可以帮助我们来实这种半透明 的效果。

一、我们看一下普通情况下在现代浏览器中半透明效果的实现
首先要有一张半透明的PNG格式图片,这个制作很简单,在 Photoshop中新建一个文件,在该文件中新建一个图层填充白色,然后调节透明度,删除背景,保存为PNG格式即可。你也可以下载这个PNG文件使 用。我们要做的工作很简单:只要把这个PNG图片指定为某个<div>的背景即可。例如可以使用下面的CSS规则:

程序代码 程序代码
body {
background:black url(bg.jpg) no-repeat 0 0;
text-align:center;
}
div {
width:80%;
margin:0 auto;
text-align:left;
padding:7px;
background-image:url(tran.png);
border:3px solid #fff;
}

二、在Internet Explorer 6中的实现
Internet Explorer中提供了提供了独有的滤镜效果,他通过filter:progid:DXImageTransform.Microsoft.AlphaImageLoader实现,现在是关于这个属性的有关知识:

程序代码 程序代码
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true | false true : 默认值。滤镜激活。
false :  滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop :  剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale :  缩放图片以适应对象的尺寸边界。
src :  必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

特性:
Enabled :  可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src :  可读写。字符串(String)。参阅 src 属性。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

因此在Internet Explorer 6 中我们还要加上现在这段话:

程序代码 程序代码
* html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”tran.png”);
background:none;
}

注 意:这里我们使用了 “*”的CSS hack,这个CSS Hack是Internet Explorer 6独有的,在Ineternet Explorer 6的DOM结构中,默认HTML的父节点为*,而在标准的DOM结构中HTML就是根节点。所以上面的CSS 规则只有Internet Explorer 6 认识。

这样,我们在Internet Explorer 6、7、Firefox、Opera等最常用的浏览器的都实现了半透明效果了。

三、其它情况
但是上面都用PNG做背景的情况,有时候我们还会用PNG来做遮罩,比如下面这张Logo图片,

我们可以使用PNG遮罩来达到渐变效果:

那么我们可以使用下面的方法来实现
HTML代码段

程序代码 程序代码
<div>
<img src=”logo.jpg” alt=”图片说明” />
<span></span>
</div>

注意:这种写法完全是为了迎合Internet Explorer 6,<div>容器用来帮助内部元素定位,<span>用来覆盖在<img>标签的上面达到半透明效果。下面我们只需要设定一下它们的位置就好了:

程序代码 程序代码
div { position:relative;}
span {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’filter.png’);
float:left;
width:200px;
height:100px;
position:absolute;
top:0;
left:0;
}

不过,在Firefox中并没有filter这个属性,因此我们需要单独为Firefox中定制一个样式:

程序代码 程序代码
div > span {
background:url(filter.png);
}

这样我们就可以使用遮罩来实现半透明效果了

不过如果有太多的地方需要实现这样的遮罩效果的话,上面的处理方式还不是最好的,首先它有冗余的HTML标签,此外还使用了绝对定位和相对定位。如果我们把上面的代码进行封闭效果会更佳。这里我们可以使用下面这段JS代码进行封闭

程序代码 程序代码
<!–[if lt IE 7]>
<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(”MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(”onload”, correctPNG);
</script>
<![endif]–>

这段代码只在Internet Explorer 6中才会被运行。
下面我们可以像在Internet Explorer 7 和Firefox中一样写代码:

程序代码 程序代码
<div><img src=”filter.png” alt=”图片说明” /></div>
程序代码 程序代码
div {
background:url(logo.jpg) no-repeat;
}

解决了PNG跨浏览器的问题之后,我们可以利用它来实现更加复杂和更加绚丽的页面效果。

区别不同浏览器,CSS hack写法

0 ~o~

再转一篇:区别不同浏览器,CSS hack写法

区别IE6FF

background:orange;*background:blue;
区别IE6IE7
background:green !important;background:blue;
区别IE7FF
background:orange; *background:green;
区别FFIE7IE6
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6 IE7 FF
* ×
!important ×

另外再补充一个,下划线”_“,
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6IE7firefox
: background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。


相关:

探索 firefox 的放大原理 (二)

0 ~o~

firefox上周发的firefox 放大原理(一)吊足了胃口,今天我再放出第二弹,^_^ 听我慢慢讲来。
firefox 的放大原理 跟 ie的放大原理不尽相同,同样是放大功能,他们参照的放大基准不同。你可以尝试着对一些网站进行放大ctrl + 滚轮 或者Ctrl 和+ - 来放大缩小。
我也是通过实践得出的一些小结论,但不一定确切,就是 ie是基于像素px放大,而firefox 是基于行距em来放大。简单地说是,如果放大120%的话,阅览器会给css里所有的关于长宽相关的样式都乘以这个倍数,然后再显示出来。
如果你有ie 和firefox 两种阅览器的可以尝试对比一下。下面放大或者缩小的时候两个框就会体现出其兼容性。其中第一个例子是不兼容firfox放大功能的,而第二个是兼容放大。
如果你没有这两种阅览器,说明你可能不是web designer ,辛苦你了,愿意的话 去下一个玩玩,这感觉就像是发现新大陆。^_^

我是第一个例子,firefox不能对背景框放大和缩小
我是第二个例子,firefox可以对背景框放大和缩小,兼容性好

试过了请举手… 哦不 举脚…  噢  这里举不了,那回个贴 =.= (扯蛋@@)

相信查看过源代码的就会发现 要点。只要将宽度以及高度 定位em单位就实现了 em和px 的换算是这样的:当前div 的font-size 如果是12px 的话, 1em = 12px (ps:吐血,刚才用拼音打那公式 得出 1恶魔 = 10螃蟹,晕倒…) 。然后就发现问题,这样要300px换算成em 岂不是要除以12 ,那等于@!%¥¥#@…… 妈呀小数点,还不能整除。然后就使劲想办法,其实也挺简单,只要将当前font-size写成10px 就能整除了,当然你可以更爽快点,干脆改成1px,直接批改px成em就ok啦(妈呀,那字那么小还让不让人活啦)。所以呢,这个就要考虑到分层的合理性,要点就是:该写字的div上不要定 高宽, 这样就可以将font-size定为12px。
当然这样做会带来一系列的问题,要一一解决,并想出有效的方法。

又半夜了,下回再分析剩下出现的情况。

PS:研究CSS还是挺好玩的,虽然我挺讨厌这东西的,好多效果都要兼容ie 和firefox,整得头都大了

得,会见….

探索 firefox 的放大原理 (一)

0 ~o~

IE6 本身是没有放大功能的,IE7之后就有放大功能了, 不过基于IE核心的浏览器都有放大功能,如 傲游,世界之窗,腾讯TT. 这些浏览器的放大功能大同小异.
(等等… 你不知道怎么放大 推到… 放大功能是 用在以上浏览器的时候  按住ctrl + 鼠标滚轮,没有尝试过的小朋友现在可以试试看,还是挺有趣,可以马上发现 国内的网站有多么的牛×,一滚就烂, 国外的网站也牛×,只有小部分 比较专业的网站考虑到了该放大兼容性 )

放大功能在大多数情况下 用户派不上用场, 所以 被很多designer 忽略不计了

基于IE 的放大功能 与 firefox 的放大功能 解析是不同的(这个很久前就证实过)
最近一个不小心 发现  其实 该放大功能的 解析 语法 是基于 html 的表现形式的, 并且 我也初步了解了一些放大猫腻,

好了不牛掰了, 说正事

其实当前的blog 就是 个很好的例子. 您可以放心的滚滚看.

掌握几个要点, 就ok 了

先把我大方向,就是 css 样式 是影响放大原理的主要因素,

我再缩小范围

就拿 淘宝首页来说吧, 最近老上淘宝买东西,就拿它开刀了.
首先要说的是,淘宝网的css designer 应该是国内css 界的领航级任务, 我很多css 的技巧都来自于此,所以这么认为哈,不要笑话,有错误我就改,

不过淘宝网最近老出问题,打开的页面要卡好半天,页面里的JS太多, 一般机子我想吃不消

我们先用 基于IE 的世界之窗(我是世界之窗的fan)放大(ctrl+滚轮向上滚) 放大到105%, 页面就已经惨不忍睹了,

我在新版的腾讯首页上也试过, 同样也很惨,不过腾讯相对好点, 小部分区块变形

然后再用firefox 在试验
注意:firefox 的 放大 方式 刚好相反, 滚轮放大方向相反,向上是缩小

同样试过上面两个网站之后你会马上发现FF 同IE 放大功能的不同之处,虽然 不知道为什么,但 firefox 只是把字放大了

为什么只放大了字而没有放大图片背景呢`?

下回再说,