2009 2009年 07月 27日

用户代理样式表:在谷歌浏览器的神秘空间

昨天,像所有其他的“土拨鼠日”,我是工作在一些CSS /无表格布局。 所有在IE 7,FF 3和Chrome,直到突然,我看到一些联合国忽略利润率仅在谷歌Chrome。 虽然很奇怪,武侠,这是一些新的bug /问题我来到accross,终于有一些我的平凡工作中的香料。 悲伤(但很好)有固定探头几分钟内...

基本上,它看起来像谷歌Chrome忽略我的CSS复位(利用margin:0px)。 它实际上是由于用户代理样式表(-webkit的填充启动:40px)。 因此,解决办法是复位设置填充样式:0,行为不端的元素。
发生的任何元素,以防止这个问题的一个好方法是使用如下一个全球性的CSS休息

* {保证金:0;填充:0;}

什么是用户代理样式表(规格)?
以下摘录取自http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ,后续环节,读取用户代理样式表的更多信息

的CSS介绍说,每个用户代理(UA,往往是一个'网页浏览器“或”Web客户端“)将有一个默认的样式表,提出在一个合理的文件的想法 - 但可以说是平凡 - 方式。 CSS 2的表示,符合用户代理必须申请1默认样式表的行为好像他们做的和,1用户代理的默认样式表应该呈现方式,满足文档语言的一般介绍期望文档语言的元素;的CSS三是可能是相同的想法。

由于CSS规范离开它是否使用默认显示一个“真实”的样式表或不实现,它不令人吃惊的是,你不觉得在每一个浏览器的安装文件夹的默认样式表。 微软的Internet Explorer以及歌剧不同,例如(据我所知),Gecko的浏览器如Firefox和Netscape Navigator的(看“html.css”),但也Konqueror的,而简单地理解他们的默认样式。


2009 03月 24日 二零零九年

禁用=“true”和禁用=“假”一样吗?

这的老学校,但像往常一样,它是我的记忆中补充...
所以被禁用=“true”和禁用=“假”相同吗?
...不要相信! 多数民众赞成的方式是......这里是一些简单的解释...
“禁用”是任何形式的元素/字段的属性,因此可以接受任何价值,其性质。

只要这个属性是目前,该元素将被禁用,不管它的价值。 例如。
<input type="text" value="This是disabled" disabled>
<input type="text" value="This是disabled" disabled="disabled">
<input type="text" value="This是disabled" disabled="true">
<input type="text" value="This是disabled" disabled="false">

上述所有将本表格字段“已禁用”。

根本就没有提供属性“禁用”保持现场“禁止”......像下面

<input type="text" value="This是不disabled"的/>

记住“ 任何残疾人士的属性值(或没有价值),浏览器将使其禁用 ”。 为了让我们的头脑W3C的事情说清楚,建议我们使用禁用=“禁用”,在这些情况下。

这是区别虽然我们在JavaScript中使用这个属性时...

document.form.element.disabled = / /该元素将被禁用
document.form.element.disabled = FALSE; / /该元素将启用

上述论点也适用于这些属性和元素:

  • (单选按钮,并选中复选框)
  • 选择(选项)
  • nowrap(TD)

2009 2009年 03月 22日

SevenUp! 鼓励世界摆脱IE6的!

谷歌开始一个动作提示人们倾倒的IE6与弹出页面加载窃听IE6的用户... ...可能不是一个很好的主意......但UI开发人员,我要加入这个乐队马车......少了一个浏览器为我担心......对不起,这是自私的! 但我这个JavaScript ...(尝试在IE6此页)...
嘿! 亮......看到它是一个展示 JavaScript的力量 ...... 它甚至可以带来一个巨大的(或曾经是)

所以...帮助摆脱一行的JavaScript IE6的世界!

http://code.google.com/p/sevenup/


2009 2009年 03月 19日

打倒IE6的,其对时间!


与其他浏览器,从明天! (IE8的明天beta状态出来)...给予其非常高的时间IE6的龙由于观音死亡...美国站在我们IE6的秋天

“IE6的是新网景4。 需要支持IE6的黑客正越来越多地被视为多余的运费。 如Netscape 4在2000年,IE6是被认为是阻碍网上。“

杰夫Zeldman,大师的标准

同时,对于那些将被淹没呼吁打破在IE8的CSS布局像我一样,这里是老左右/修复工作,使用元标签(META HTTP-EQUIV =“X-UA-Compatible”的),你可以尝试...

不当行为:IE8的CSS布局破损(针对在IE8中使用Meta标签的浏览器版本)


2009 3月 7 二零零九年

在Javascript中调用多个Windows的onload函数

下面,我有挖,因为情况commaned它的另一个小的Javascript弄虚作假的peice。 在我的网站之一,我有这种情况,在那里我有两次实施“windows.onload”。 将来到像我这样的经验的心(我必须诚实地说,因为我一直在使用JavaScript框架和图书馆,我福尔戈我自己...伤心,但真正做简单的事情)的第一件事,就是下面的方法...

的window.onload = onloadfn1;
的window.onload = onloadfn2;
的window.onload = onloadfn3;
等等......

抱歉地说,但是,这不会工作,不想讨论太多的Javascript执行科学......但根据我最近的经验,只有最后一个函数(onloadfn3)会生病实际上得到执行。

在正常情况下,与矿(后来,我谈一点),你可以做下列之一执行复式的onload函数....

或类似这样的东西

函数doOnLoad(){
         onloadfn1();
         onloadfn2();
         onloadfn3();
 }
的window.onload = doOnLoad;

对于我目前的状况,我不能使用上述...
为什么我需要调用windows.onload两次,而不是在一个单一的onload函数调用两个函数? 这里是快看看我的问题陈述...

“我的网站页面结构像WordPress主题.... 即有一个共同的header.php文件,包括Footer.php获取到所有的网站页面。 那里是中Footer.php的onload的功能implementaion做一些常见的onload函数。 有几页,需要自己的OnLoad的东西,除了共同onload函数所做的。 如果我给回调函数直接在window.onload处理程序,它会随着骑在Footer.php以前分配的回调“

.... 是我的问题的理解 :)

好吧! 有几个解决方案,我没有找到。 他们都非常相似,主要由西蒙·威利森(给出一个解决方案implementions http://simonwillison.net/2004/May/26/addLoadEvent/ )...

解决方案:

只是这段JavaScript代码添加到网站...

 else { window.onload = function() { if (oldonload) { oldonload() } func() } } } :功能addLoadEvent(FUNC){VAR oldonload = window.onload的;(typeof运算的window.onload ='功能'){的window.onload =功能}否则{的window.onload =函数(){如果(oldonload的){oldonload的()函数()}}} 

并调用,而不是通常“windows.onload”

 addLoadEvent(FunctionToRunOnPageLoad);
 addLoadEvent(函数(){
 / *更多的代码运行在页面加载*
 }); 

这个代码片断的优势...
1。 首先,它可以让你有多个windows.onload事件,呼吁从你的代码的单独部分,不overridding以前的定义
2。 这实在是不显眼的。 它可以被放置在与其它脚本文件中或在一个单独的文件。
3。 它的工作原理window.onload的,即使已经设置。


2009 2月 18日 二零零九年

使用CSS的图像添加阴影效果

另一个快速啧啧。 下面是一些简单而漂亮的使用CSS的权力,但困难concieve(肯定不是我)开始。 添加阴影效果,对于我们许多人可能是一个大蛋糕peice,使用一些图像编辑工具,如Photoshop ANF烟花等
为什么,我选择了使用CSS的下拉阴影的原因是,通常在创建网页设计/ HTML应用程序,要求保持迭代。 我的意思是在现有的网站与许多图片,像显示freinds列表或图片库的,将很难重新处理整个负载已经卸载已添加或删除的阴影图像,该问题。
所以,如果你做了一些前瞻性思维,而创造的HTMLS添加这些额外的部门或通常的情况是,你有一个循环逻辑在XSL,PHP生成这些图标/缩略图。 JAVA或任何其他的编程/脚本语言,你可以随时添加,然后仅仅是为客户不断变化的需求,使用CSS的显示属性,这些阴影显示和隐藏的问题...我没有带这种前瞻性思维在此之前......但ahev现在开始!

在下面的例子中,原始图像是无阴影和应用需要的dropshadows! 仅此外,我已经走了一点点额外的,使用约我刚才图坦卡蒙过关(Well!这些可能是最短的各种教程,所以它是唯一的理由叫他们“啧啧”的), 使用CSS clip属性为炫耀

原始图像

original_image

CSS阴影效果结果
css_dropshadow_results
查看演示 | 下载源文件


2009 2月 17日 二零零九年

Understandng的CSS clip属性

我为什么要明白这一点吗?? ... Humm!!!

CSS的作家中的大多数人都同意,CSS Clip属性可能是最未使用CSS属性之一。 这是我的真实,是最幸福的忽视它,直到我开始修改的MooTools的两个旋钮(PIN)滑块组件(带范围指示器)

从一个组件用户有一个很好的建议,修改Slider组件使用裁剪图像(对可变宽度师)视野下,以表明滑块范围。 就这样来到我的时间来输入的乐趣,但联合国包机(我当然)的CSS Clip属性的水域。

好吧! 它可以是多么困难? 没有太多... YES和NO。 使用CSS Clip属性的语法是很正直的,但的含义/ usuage,是有点croocked。 一个像我的记忆中,每次我坐下来返工我滑块脚本...我有随时注意这个剪辑属性的用法,要提醒自己,我在我的脚本创建的逻辑.... 因此! 认为笔下来,希望记住它的未来(也似乎谁的利益猛然一惊CSS clip属性)

什么是CSS的剪辑呢?

剪辑的视觉效果模块的CSS 2.1的一部分。 简而言之,它的工作是正在修剪的对象上放置一个可见的窗口,因此裁剪图像,而不必创建额外的文件(我已经把滑块组件,以更好地利用此功能创建缩略图 :)

使用CSS Clip属性,你可以创建一个使用矩形形状的裁剪。 需要像其他许多CSS属性(如利润率,填充等),使用矩形,四个坐标上,右,底部,左(TRBL)。 这个属性croocked性质的反映,当你仔细一看,剪辑是如何计算的裁剪区域使用这四个坐标(大脑发送到折腾了一会儿)。 现在你混淆底部开始从顶部,并有权从左边开始。 :) 你明白我说的话吗? .... 因此,这个职位...

这有点混乱,可以很容易地消失了,用这CSS剪辑/ Rect属性的视觉解释如下!!!

CSS剪辑需求

我们已经开始的任务是剪辑成方正寻找图像下面的缩略图(还广角图像)

original_image clip_demo
原Thumbnal /图像 Sqaure Thumbmail剪辑要求

CSS剪辑结果

clip_results

查看演示 | 下载源文件


2008 2008年 12月 25日

载入JavaScript的动态

有时保持pageweight下来......我们我们的脚本分割成片段......这些JavaScript片段,可以装载在有需要时(事件或点击一个链接或按钮等)。

载入JavaScript的动态很简单,相当平直向前如下...

= “text/javascript” > < 脚本 类型 =“文本/ javascript”>
功能loadNewScript(源){
VAR = document.createElement方法(“脚本”)
s.setAttribute('型','文本/ javascript“);
s.setAttribute('src'中,源);
瑭插綋銉(S);
}
</ SCRIPT>

你可以有以下调用链接在身体的任何地方,或者你可以有这个脚本文件本身“的onLoad”...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a ><a href =“JAVASCRIPT:loadNewScript(”myDynamicScript.js);“>负载动态脚本</ A>

<body onload="loadNewScript('myDynamicScript.js');">


2008 2008年 12月 17日

不当行为:IE8的CSS布局破损(针对在IE8中使用Meta标签的浏览器版本)

如果你是CSS的人,你想知道的痛苦,在获得工作的跨浏览器的布局。 IE8是我们开发的工程中的又一扳手。 anywaz! 如果你打这个问题时,像我一样昨天,你完全工作在IE7的CSS(或更早)和Firefox突然开始扔在IE8发脾气,试试这个...很好,这似乎是解决问题的那一刻我....

使用meta声明,我们可以指定我们想IE8的使用的渲染引擎。 因此,强制IE8的渲染IE7 ...插入文档的头部以下Meta标签: -

<meta http-equiv="X-UA-Compatible" content="IE=7"

IE浏览器默认情况下,元将是: -

<meta http-equiv="X-UA-Compatible" content="IE=8"
这将使IE8的渲染页面,使用新的标准模式。

如果需要,此语法可以用来容纳其他浏览器如下:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"


更多关于文档类型:

如果你不熟悉的动物,被称为“DOCTYPE”排序...这里是一些快速阅读
什么是文档类型? 什么是浏览器怪癖严格模式?
设置在XSL中的DOCTYPE

为深入了解更多有关文档类型,尝试访问这些链接...
除了 ​​一个列表:有了正确的DOCTYPE,修复您的网站!
除了 ​​一个名单:超越的DOCTYPE:Web标准,向前兼容和IE8

注:虽然我们很多的HTML / CSS的人都被忽略在我们的文件重要性的DOCTYPE decleration的,设置正确的DOCTYPE,通常是跨浏览器的问题的答案。


2008 2008年 12月 9日

简单的传送带分页使用的是MooTools

随着各种有旋转木马,以及MooTools的很多,我还是决定写我自己的传送带类,一些很好的理由
1。 想要一个寻呼功能(能够跳到一个特定的幻灯片/传送带一步)。
2。 要安置的左,右按钮/链接的自由,我曾经请。
3。 在幻灯片的步骤更多的控制权。

我设法创建一个新的传送带,具有上述特点如下...随意提出的任何修改,你会需要!!!

我的例子看起来像... [ 查看演示 ]
随着寻呼Mootools的传送带

观看演示 | 下载MooTools的传送带寻呼版本1.0 (下载1998年)


1。 传送带寻呼

你可以很容易地添加分页到您的转盘,只需通过设置分页标志,这是最后parater通过创建的真实MooCarousel的实例(要分页)或false(donot想分页)。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss, 真正 ); / / NS =幻灯片,SSS =滑动步长

当然你可以通过修改它们的CSS改变外观这些寻呼achors的N-觉得你请。

carousel_paging {文本对齐:权利;保证金:5PX 10px 0 0;}
。carousel_paging电流,carousel_paging页{概要:无;宽度:。均为15px;高度:均为15px;线高度:均为15px;文本对齐:中心;显示:块;浮动:左;背景:#D8D8EB;保证金:0 1px的0;文字装饰:无;}

。carousel_paging:悬停,carousel_paging当前{背景:#4D4D9B;颜色:#FFFFFF;}。

好吧! 虽然是一个小问题,如果设置分页锚,然后将得到产生总是在旋转木马组件。 我想动态,以及,但只是为了让吹出来的比例脚本,我决定跳过它。
但你知道一点点的JavaScript,你可以很容易地修改在MooCarousel类传呼代码,请您的需求。

2。 订制左,右的图标

只需打的CSS,你可以改变位置,图像或任何displat财产的左,右按钮。 是能够改变的“左”和右的buttoms存款是我的权利我传送带类的真正原因。
以来这个MooCarousel类,接受这些按钮的ID,你可以把这些按钮在页面上的任何地方,如果你愿意,它并不一定要在元素层次,因为在我的例子。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);

的CSS
carousel_container_l,carousel_container_r {保证金:50像素0 0 0;位置:亲属;宽度:23px;高度:20像素;浮动:左;光标:指针;}

carousel_container_r {背景位置:0-38px;}

carousel_container_l {背景位置:0-58px;}

3。 自定义幻灯片步骤

这是什么意思我自定义幻灯片的步骤?
大多数传送带滑动完整的可视窗口。 所以说,你有四个项目(如我上面的样品),它会滑动的所有四个项目。 有了这个转盘组件,通过幻灯片的数量和您选择的步长。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);
c_ns =数量的幻灯片,c_sss =滑动步长

此外,在我的例1,我calcuted滑动步长,基于逻辑的地方,我知道数量的项目,每个项目的宽度和已后,我的CSS在每个项目的利润率。

狂欢/ * 1 * /

c1_w = 92; / /狂欢项目宽度

VAR c1_n = 10;的比较狂欢项数/ /合计

VAR c1_pp = 4 / /比较狂欢项目每页数

c1_marginFactor = 51;

c1_sss VAR = c1_w * c1_pp; / / SSS =滑动步长

VAR c1_ns = parseInt(((c1_w * c1_n)/ c1_sss)+0.5)/ / NS =幻灯片

c1_sss + = c1_marginFactor的; / / SSS =滑动步长,51利润


要求:MooTools 1.2的

观看演示 | 下载MooTools的传送带寻呼版本1.0 (下载1998年)


NDK的家 | 表达它 表示唇腭裂 表示Penmenship 表示敬畏 表达自己