CSSASS - Part 2

D2之行照片

作者：ONEBOYS 发表时间： 2009年12月23号，星期三阅读：297 次

为了不妨碍会场，没有开闪光灯。同时没有好的摄影技术及机器，拍的很烂，也不敢多拍。大家能看一眼真是赏光了。

D2会议在人间网的即时讨论帖：D2人间现场直播记录
如果你还没有人间账户，可以接受我的邀请：http://renjian.com/dd/reg?verify_code=VnyqWVP8HuvchiIi3J0l

D2的PPT下载及更多现场照片：http://www.d2forum.org/2009/12/23/look-back-upon-the-fourth-d2-forum/

标签： D2, web前端
发布在未分类 | 一条评论 »

关注标准CSS之外的世界

作者：ONEBOYS 发表时间： 2009年10月23号，星期五阅读：376 次

如果你打开w3.org，你一定会发觉这个W3C网站已经经过了改版，一改往日古董级的UI。
各个标准也一样，如果不是什么大的变化，我们往往忽视他们的不断扩展。

CSS标准，从1.0到2.0到2.1，特别到现在火热的CSS3(尽管没有普遍实现)，已经增加了很多的东西。
而很多扩展的内容，他们从哪来的？还不是各个浏览器厂商制定和实施的各种非标准的私有属性——所以说有时候浏览器大战还是有积极的一面的，如果光靠W3C，或单独一个组织闭着关想，指不定想出啥中看不中用的东西来呢。

所以，我提供几个路口，希望大家一起看看标准css之外的世界。

————–
微软ie支持的CSS属性（包括标准和非标准）
对比下这个（css2中文手册），
有很多当年MS的推荐属性，已经成为W3C的CSS3属性了。

微软的扩展属性（非标准，不过一些已在W3C审议中）

ie8要成为一个标准浏览器，也将自己的扩展属性带上了前缀-ms-。不过，不带前缀在ie8下解释也是可以的，向后兼容(backward)么。
如：
zoom:10;可以写成-ms-zoom:10;
(这个属性可不是光用来触发haslayout的。所以对抛弃了haslayout的ie8来说，也是有用的。)
filter: alpha(opacity=20); 可以写成 -ms-filter: “alpha(opacity=20)”;
(对于滤镜属性比较特殊，注意后面的引号。)

————–

Mozilla/FireFox支持的css属性（包括标准和非标准）

Mozilla/FireFox的扩展属性

Mozilla的扩展属性成为css3属性最有名的就是-moz-opacity
现在可以直接写成：opacity了。在safari,opera,chrome等浏览器上均支持。
不过在ie上还是不支持，而使用自己的滤镜filter: alpha(opacity=20);。

————–
webkit/Safari支持的css属性（包括标准和非标准）

webkit/Safari的扩展属性
 webkit/Safari的扩展属性中文资料（很详细）
————–

Opera9.5的css支持表

列一个opera扩展属性的例子:文字超出显示省略号

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>text-overflow</title> </head> <body> <style type="text/css"> .ellipsis{ text-overflow:ellipsis; /* supported in IE,Chrome,Safari */ -o-text-overflow:ellipsis; /* for opera */ overflow:hidden; white-space:nowrap; width:200px; background:#ccc;} </style> <div class="ellipsis"> 当对象内文本溢出时显示省略标记 </div> </body> </html>

标签： -moz-, -ms-, -o-, FireFox, IE, Mozila, opera, safari, webkit
发布在 CSS | 一条评论 »

说说HTML5

作者：ONEBOYS 发表时间： 2009年09月4号，星期五阅读：508 次

html5如何而来？
HTML isn’t a very good language！它亟待改进。
因此，1999年W3C停止了HTML的工作，2000年发布xhtml的第一个推荐版本。
2002年W3C发布XHTML 2.0第一个草案，令人吃惊的是：XHTML2.0不是向后兼容的（Web 的未来：XHTML 2.0(2003.1.1)）。
随着XHTML的越来越火，绝大多数人都认为它将是web的未来。然而终于有些人坐不住了，面对W3C对HTML的持续冷淡，2004年，由Apple, Mozilla Foundation 和Opera Software组成了The Web Hypertext Application Technology Working Group (WHATWG)，致力于发展HTML和创建Web applications所需的APIs。他们开始制定Web Applications 1.0 规范，这也就是后来HTML5。
WHATWG的努力没有白费，这份规范的草案在2007年通过了W3C的审核。
W3C组织了HTML工作组，并在2008年1月22日公开了第一份草案。
2009年7月2日，W3C宣布在年内停止XHTML 2的工作，而将资源投入转向HTML5工作组。（XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5）
在标准化的春风吹满神州之际，xhtml2却溘然而止,HTML5取代上位，我们广大的web工作者是不是需要做什么呢？

我们不需要做什么！
HTML5 的目标是保持HTML当前标准HTML4.01和HTML的XML版本XHTML1.0 向后兼容。
同以前的HTML4一样：它没有名称空间或模式、元素不必结束、浏览器会宽容地对待错误。
对于XHTML1，它也没有什么排斥。
相反的，XHTML2才是不向后兼容的。
所以，我们并不需要非得做什么改变，才能适应在HTML5下面的页面工作。
当然HTML5不会仅仅如此而已，只是HTML5是想让不支持它的浏览器中能够平稳地退化。
随着浏览器的缓慢升级，HTML5的真正好处才会开始慢慢体现，当别人的网页通过html5实现了越来越多的功能之后。到时，你再虑是不是需要做什么——理论上讲，也是不晚的。
我们不需要做什么，但我们可以做的更多

HTML5能做什么？
一句话：很多！HTML5还在草案阶段，他的功能仍将扩展。
首先，我们应该知道，html5已经不只是Hypertext Markup Language，它更是一种Web Hypertext Application Technology。

1. html5增加了一些结构性（Sections）元素：header,footer,nav,section,article,aside，用来替代千篇一律的div布局，非常语义化。

2. 还有meter（数值尺），progress(进度表)，mark（标记）这些语义内联元素。通过自带的属性，可以进行很直接地描述。

3.一些交互元素。details（脚注），datagrid（网格控件——可动态显示树、列表和表格），menu和command（可以做交互菜单）

4. 媒体元素video,audio,source。不需要借助第三方插件，页面就能播放多媒体。

5. canvas元素。脚本绘图，它的最终目标是flash般的动画展示和交互体验。不要以为很遥远，canvas在FireFox1.5就有了，opera,safari也是一样支持甚早（这个标签是就是苹果的发明）。

6. 表单处理功能。HTML5吸收了WHATWG之前的Web Forms 2.0。验证数据是如此简单。

7. 页面元素的拖曳和编辑。

8. HTML5的离线存储技术 http://dev.w3.org/html5/webstorage/

好了， HTML5能做的够多了，但他还处在草案阶段，那关键是现在我们能做什么呢？

我们能做什么？
HTML5估计能在2012年之前成为W3C的候选推荐标准，不过在这之前，只要浏览器支持，我们都可以使用html5的功能。

1. HTML5新元素布局。
除了ie系列浏览器外，其它大多数浏览器都能识别HTML5的那些新元素标签，可以对其进行style，这就意味着它们可以使用HTML5的新元素标签进行页面布局。
但问题是ie系列浏览器是无法对其不承认的元素添加样式的，而缺少了IE的支持，大多数人都会束手束脚。解决这个问题的方法早已经了:HTML5 Shiv
很简单:

<script>
document.createElement("元素名称")
</script>

创建文档元素。
批量创建的方法:

(function(){
if(!/*@cc_on!@*/0) return;
var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,event,source,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');
for(var i = 0, len = html5.length; i < len; i++ ) {
document.createElement(html5[i]);
}
})
();

现在在IE里也可以对HTML5元素进行布局了。
不过，在此之前，我们还需要对这些新元素定义基本的Display style,
这个工作本来一般是由浏览器完成的，比如FireFox的html.css。
现在只能自己对引进的HTML5元素进行定义了。
那么哪些需要定义成display:block;哪些又是不需要呢？这个我们可以看下W3C是怎么定义的：display-types

address, article, aside, blockquote, body, center, dd, dialog, dir,
div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
section, ul, xmp { display: block; }

刨除HTML老元素，以下这些元素:
article,aside,dialog,figure,footer,header,hgroup,nav,section可以定义为{display:block;}
这篇针对HTML 5 Reset Stylesheet的文章也可以参考下：http://html5doctor.com/html-5-reset-stylesheet/。文章在Eric的CSS Reset的基础上考虑HTML5新元素及W3C规范推荐下对元素进行了style reset。当然reset CSS本身就存在争议的，一般来说，reset CSS是你自己的style，很多东西都可以按你的意愿来定，当然不要太偏离W3C的元素设计本意。
接下来，使用HTML5新元素进行布局就可以随心所欲了（还是悠着点好）。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5新标签试用</title> <style type="text/css"> html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} body {font:normal 12px/140% Georgia,Tahoma,Verdana,Arial,sans-serif;} article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;} ul,ol{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;} a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;} ins{background-color:#ff9;color:#000;text-decoration:none;} mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;} del{text-decoration: line-through;} abbr[title], dfn[title]{border-bottom:1px dotted #000;cursor:help;} table {border-collapse:collapse;border-spacing:0;} hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;} input,select{vertical-align:middle;} /* reset over */ body{overflow-x:hidden;} header{height:60px;background:#669bb7;position:fixed;_position:absolute;left:0;width:100%;} h1{font:bold 40px/110% Georgia;text-align:center;border-bottom:10px dashed #fff;} h1 a{text-decoration:none;position:relative;} h1 span{color:#000;zoom:1;opacity:0.5;filter:alpha(opacity=50);} h1 b{position:absolute;left:0;margin-left:-2px;margin-top:-1px;color:#fff;cursor:pointer;} .main{min-width:400px;max-width:970px;overflow:hidden;margin:0 auto;padding-top:70px;_margin:0 20px;} aside{background:#e2ebf0;float:left;width:160px;padding:5px;margin-right:10px;display:inline;} .portrait{width:132px;margin:0 auto;padding:5px;text-align:center;border-bottom:1px solid #c0d6df;} .portrait img{display:block;width:120px;height:180px;padding:3px;background:#fff;border:4px solid #e3e3e3;border-left:2px solid #e0e0e0;border-top:1px solid #e3e3e3;margin-left:1px} .portrait span{line-height:150%;cursor:help;} aside nav{padding:5px 10px;} aside nav li{font-size:14px;line-height:150%;} aside nav li a{text-decoration:none;color:#005eac;} section{border-top:20px solid #fff;margin-left:20px;background:#f6f6f6;padding:10px;padding-left:20px;} article h2{font-size:18px;text-align:center;} article h2 a{color:#73a6bc} article h3,article p{margin:8px 0;} dialog time{padding-left:10px;font-style:italic;} footer{clear:both;text-align:center;sss} </style> <script type="text/javascript"> (function(){ if(!/*@cc_on!@*/0) return; var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','); for(var i = 0, len = html5.length; i < len; i++ ) {document.createElement(html5[i]); }})(); </script> </head> <body> <header> <h1><a href="http://www.cssass.com" target="_blank"><span>CSSASS</span><b>CSSASS</b></a></h1> </header> <div class="main"> <aside> <figure class="portrait"> <img alt="A boy named oneboys said he is The One." src="http://center.blueidea.com/data/avatar/000/36/17/22_avatar_middle.jpg" />  <span>ONEBOYS</span> </figure> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">我的主页</a></li> <li><a href="#">个人资料</a></li> <li><a href="#">心情日志</a></li> </ul> </nav> </aside> <section> <article class="article1"> <h2><a href="http://html5doctor.com/html-5-reset-stylesheet/" target="_blank">HTML 5 Reset Stylesheet</a></h2> <p>We’ve had a number of people asking about templates, boilerplates and styling for HTML 5 so to give you all a helping hand and continue on from those basic building blocks that Remy talked about last week I’ve created a HTML 5 reset stylesheet for you to take away and use, edit, amend and update in your projects.</p> <p>Based on Eric Meyers CSS reset, I’ve made a few adjustments from Erics work that we’ll get to later but first here’s the file in full and we’ll then break it down step by step.</p> <h3>So what’s new then?</h3> <p>Well firstly, I’ve removed those elements that have been deprecated from the HTML 5 specification such as <acronym>, <font> and <big> (We’ll cover deprecated elements in more detail in another post). I’ve added in the the new HTML 5 elements to the reset, to remove any default padding, margin and borders. I’ve then added the explicit display:block declaration for those elements that are required to render as blocks.</p> <p>I’ve also removed the :focus part from Eric’s stylesheet. There are two reasons for this; the first is that by declaring outline:0 you remove the focus identifier for keyboard users. The second is that although Eric released his stylesheet in good faith that people would edit it and style :focus, they don’t. You will also notice that I’ve set defaults for <ins><ins&gt</ins>; as I don’t think they got updated very often in Eric’s styles either.</p> <p>Another change from Eric’s stylsheet is that I decided to remove the lines that remove bullets from lists, the reason for this is purely personal. I tend to only add the list style back in when using Erics reset anyway. I have however included nav ul {list-style:none;} to at least remove those pesky bullets from your navigation. </p> <h3>Using attribute selectors</h3> <p>You’ll notice that I’ve included attribute selctors for <abbr title="缩写：abbreviation"><abbr></abbr> and <dfn><dfn></dfn>, the reason for this is I only want the style to appear if there is a title attribute to be displayed. The reason for this is primarly for accessibility. For example we use &ltabbr&gt regularly on this site but don’t always include a title attribute, that’s because it’s safe to assume all (no matter what device they are using) our readers know what HTML is, however we need to still include &ltabbr&gt to make sure screenreaders read the text as H-T-M-L rather than “HTML” which they struggle to pronounce.</p> <h3>What’s that bit about mark?</h3> <p><mark><mark&gt</mark>; is a new element introduced in HTML 5 used to (you guessed it) mark text in a document. The spec describes <mark><mark&gt</mark>; as “The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.”. I anticipate this it will be used for highlighting phrases in search results and similar. We’ll have more on this in a post soon.</p> <h3>Where are all those application elements?</h3> <p>“Application elements” is the term I’ve used to loosely describe those elements such as <datagrid>, <datalist> etc. Basically those that you are likely to find in web apps rather than websites. These have been left out because at the current time hardly any of what was ‘Web Applications 1.0′ has been implemented by browsers. Also this reset is primarily aimed at those serving their pages as text/html not xml.</p> <h3>Go grab it</h3> <p>So that basically wraps it up, it’s released under a creative commons license and you can use it for both personal and commercial work. I thought I’d let Google take care of the hosting so go grab it from Google Code and let me know of any thoughts, queries or improvements you can offer.</p> </article> </section> </div> <footer>Copyright © 2009 Cssass.com </footer> </body> </html>

2. Drag & drop
Drag & drop是浏览器支持度比较高的HTML5内容：

<!DOCTYPE HTML> <html> <head> <title>Drag and Drop</title> <style> div {margin: 1em 2em; border: black solid;text-align: center;float:left;height: 9em; width: 12em; } img {width:4em;float:left; } p{clear:left;} </style> </head><body> <h1>Drag and Drop</h1> <div ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"> <p>Good</p> </div> <div ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"> <p>Bad</p> </div> <p> <img src="http://www.baidu.com/img/baidu_logo.gif" id="baidu" alt="baidu" ondragstart="drag(this, event)"> <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" id="google" alt="google" ondragstart="drag(this, event)"> <img src="http://www.blueidea.com/img/common/logo.gif" id="blueidea" alt="blueidea" ondragstart="drag(this, event)"> <img src="http://www.w3.org/Icons/w3c_main" id="W3C" alt="W3C" ondragstart="drag(this, event)"> </p> <script> function drag(target, e) { e.dataTransfer.setData('Text', target.id); } function drop(target, e) { var id = e.dataTransfer.getData('Text'); target.appendChild(document.getElementById(id)); e.preventDefault(); } </script> </body> </html>

3. canvas
我们先看一些canvas的示例：
http://www.agustinfernandez.com.ar/proyectos/canvas/
http://www.whatwg.org/demos/2008-sept/color/color.html
网上还有一些互动性蛮强的Demo.
canvas应用的发展无疑将威胁到也行进在富Web之路上的Flash和Silverligth这些Web插件。

canvas在safari,firefox,opera很早就有了支持，但IE缺迟迟不予支持，尽管他在ie8中已经开始支持多个HTML5功能。MS的同志很有理由这么做:“HTML 5标准制定之前,某些功能确实已经得以实现,例如Google Gears实现了离线应用程序功能,Flash和silverlight实现了类似Canvas API的功能.在下一代HTML规范中设置这些内容未必非常必要”。要知道MS在silverlight是花了很大力气。事实上，MS在参与HTML5之事上一直非常谨慎，并且希望精简HTML5。
Flash的所有者，HTML5参与者之一Adobe则表现的很轻松：“canvas还很弱，HTML 5 + CSS 3 可能要 10年的时间才能定稿，在这期间，Flash 会持续发展，并提供更好的用户体验”。

尽管IE没有支持canvas功能，但我们可以使用JS模拟达到：
http://excanvas.sourceforge.net/
这是其中的一个Demo,试试你的IE:
3Dcanvas_For_IE.html

4. audio and video
使用FireFox3.5看看下面这个Video Demo。

<!DOCTYPE HTML> <html> <head> <title>Video</title> </head> <body> <h1>Video</h1> <video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls autoplay > 你的浏览器不支持 </video> <script> var video = document.getElementsByTagName('video')[0]; </script> <p><input type="button" value="█ █" onclick="if (video.paused) video.play(); else video.pause()"></p> </body> </html>

我们没有引入flash播放器就能播放swf。

在下面这个页面里罗列了各浏览器所支持的HTML5功能：
Implementations in Web browsers
随着浏览器的升级，翻新，他们支持的东西会越来越多，提供给我们前端工作者发挥的空间也越来越大。

标签： audio, canvas, drag and drop, FireFox, html stylesheet, html5, IE, video
发布在 (x)Html, CSS, javascript | 2 条评论 »

关于ie8和它的ie developer tools

作者：ONEBOYS 发表时间： 2009年08月23号，星期天阅读：753 次

ie developers tools对于页面工作者来说，是个不错的调试html，css，js的有利工具，特别是ie8下的ie developers tools，已有媲美Firefox下的Firebug之势。
许多开发者担心升级ie8后，将无法使用ie7预览页面，其实根本不用担心这点，ie8下的ie developers tools可以选择浏览器模式来切换预览ie7的页面效果。

装上ie8后，按F12可以打开i developer tools(这个工具在ie8正式版下是附带的)。它的菜单栏的最后两项便是：浏览器模式和文本模式。
我们可以试一段代码：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试ie8的浏览器模式和文本模式</title> <style> .wrap{color:red;+color:green;_color:blue;} </style> </head> <body> <div class="wrap">Give you some color to see see.</div> </body> </html>

你可以试着切换各种模式查看页面效果。

IE developer tools可以说已经是今非昔比了。Firebug的很多好东西他学会了，而且还具备了很多firebug所没有的一些实用工具。下面我一一道来：

1. CSS的选择性修改和预览。以前的ie developer tools可以增加样式，但要修改原有样式，需要写新样式来覆盖。而且，样式不能选择性屏蔽。现在的这项功能虽然界面上很绌，但同firebug一样方便有效。

2 DOM结构修改。这个也是ie8下developer tools新招，尽管firebug早就有了。
除了HTML元素标签，都可以直接修改（相比firebug，ie8还可以直接修改class,id及其它html属性项），使用alt+E则可以进去修改全部（包括HTML元素标签——同Firebug）。

3 DOM结构的查找。不过没有高级搜索，搜索范围是所有html标签，id、class名，textNode，即整个源文件。查找的的会高亮显示。

firebug上有个扩展插件叫Firefinder，查找起来应该更有针对性。

4.ie developer tools上还有三个额外的工具：一个是浏览器屏幕尺寸调整工具，一个是取色器，还一个是标尺工具。

5.还有，ie developer tools的js调试功能也已经可以媲美firebug了。

关于ie8的一些事：
1. 装了ie8后,你原来的傲游，世界之窗等浏览器会使用什么内核？
我相信是ie8内核，但他们对于html+css的解释，应该是按ie7浏览器模式(或则更有可能是ie8兼容模式)来解释的。
傲游浏览器可以在max:config的高级选项中进行设置更改是否采用ie8标准渲染模式。

2. 关于针对ie8的hack
对区别ie6,ie7,ie8来说，前面的测试代码里已经可以看出，”_”和”*”在ie8下都不能识别，那剩下就是怎么区别ie8和FF了。其实，对于html+css的解释，ie和ff很少会出现差异。当然，留这么一手，还是有必要的。
“_”hack针对于ie6;”*”或”+”hack针对于ie6,ie7;”\9″hack则针对于ie6,ie7,ie8有效，剩下的没加hack的就是给FF的了。
测试如下：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie8的hack</title> <style> .wrap{color:black;color:red\9;*color:green;_color:blue;} </style> </head> <body> <div class="wrap">Give you some color to see see.</div> </body> </html>

3.用ie8浏览网页，在地址栏后头还可能跟着一个按钮——兼容性视图按钮（浏览本地页面文件似乎不会出现这个按钮）。点击这个按钮，网页就进入ie8浏览器兼容模式下的ie7文本模式。

如果网页中被加入了<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />这句，说明网页已经采用ie8浏览器兼容模式下的ie7文本模式进行渲染了，就不会出现这个按钮。

4.ie8抛弃了haslayout私有属性？
前面说ie和ff很少会出现差异，我觉得很大原因因为是ie8抛弃了haslayout。
我们看一个由于haslayout引起的各浏览器的差异显示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie8抛弃了haslayout</title> <style> .left{float:left;color:#f00;} .content{zoom:1;background:#ccc;} </style> </head> <body> <div class="left">Left</div> <div class="content">Content</div> </body> </html>

大家都知道，浮动元素应该是脱离文档流的，但是zoom:1会触发haslayout。所以在ie下，原本是应该脱离文档流的浮动元素仍然占据着文档空间，除非去除zoom:1;（注意对比FF和IE看看背景色的位置）。
然而我们会发现，ie8的效果一直同FF保持一致，并没有受haslayout影响。
可以再参考下这里ie私有属性haslayout的困扰。

5.还发现ie8的一个小功能，是Firefox3.5所没有的。ie8可以忽视当前页签下的alert弹出框，在不关闭此弹出框的情况下就可以切换页签。
这个功能在遨游2.5和sougou浏览器也拥有。

标签： EmulateIE7, haslayout, ie developer tools, ie8
发布在 (x)Html, CSS | 2 条评论 »

斯芬克斯之谜续——IE下失效的margin-left/right

作者：ONEBOYS 发表时间： 2009年05月26号，星期二阅读：1,071 次

margin-left/right也会失效？
一般很多人遇到的margin失效都是纵向上面的:
一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释);
另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing)）。

那么margin-left/right怎么又会失效的呢？假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋，就会了解了：哦，又是haslayout啊。

我们来看看具体的失效代码：

<!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <title>斯芬克斯之谜续——无效的margin-left/right(ie)</title> <style> .wrap{background:#eee;border:1px solid #ccc;} .cont{border-bottom:2px solid #aaa;margin:0 30px;height:30px;} </style> </head> <body> <div class="wrap"> <div class="cont">热门圈子</div> </div> </body> </html>

我们会发现：.cont的margin:0 30px再IE下失效了。。。
好，既然说haslayout的问题，那么，我们知道,height属性会触发haslayout。去除.cont的height试试，果然margin-left/right起效了。
不过，不要急，我们可以消除触发子级元素的haslayout来解决失效，也可以给父级元素触发haslyout来解决这个问题：在.wrap上增加属性:zoom:1;
那么，所有谜团都在这里了吗？
我们试试，不改动其他属性，去除父级.wrap上的border。我们发现，margin-left/right也不会失效了…
(看来，border这个属性，还得多加研究啊。之前也遇到过类似border引起的问题的。。。)
haslayout的一点资料可以看这里：On having layout抄录

标签： border, haslayout, margin
发布在 CSS | 6 条评论 »

JS实现字符unicode编码信息查询

作者：ONEBOYS 发表时间： 2009年05月2号，星期六阅读：1,341 次

这两天在xiaonei的个人状态里看见很多人添加有一些特殊字符，如҉ (据说叫菊花，囧nz)。当然这种字符也还没什么稀奇，这个符号是cyrillic里百万的标识。另外有见到一个能将文字反排显示的不可见字符,比较有趣。如下：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>RLO(right-to-left override)字符的演示</title> </head> <body> <input type="text" value="‮我从右往左？"/> </body> </html>

此RLO字符的效果就是将文字反排（效果有点类似<bdo dir=rtl>啊。参见：HTML的dir属性和<bdo>标签及其他一些CSS文字排版属性、滤镜不过bdo这个是需要浏览器解释后才能看见效果的，而此RLO不需要浏览器解释，当然上面代码里使用的是html字符实体编号,这个是需要浏览器解释的。）

   在UCS（Unicode Character Set）当中，每个字符都有一个unicode编码——不过，拥有unicode码的不一定是字符，也可以是设备控制符。
   应该说，很多形式的字符编码都是基于unicode编码的，如URL-encode,ASCll码,HTML Character Entities编号。特别是HTML Character Entities编号，与unicode可以说是一一对应的，只要浏览器支持，charset包含，“&#”+十进制标号+“；”的编码就能在html中使用所有unicode中定义字符。
   以上面的RLO字符分析，虽然RLO符看不见，但也是可以被copy的，而且，必然的有一个对应的unicode码。RLO的unicode对应的16进制编号是：202e。转成10进制就是：8238。所以如果要在html中使用这个字符，除了copy这个字符过来外，我们可以使用字符实体编号：&#+8238+;(不包括+号)。
关于如何查到某个字符的unicode编码，每种程序语言应该都有函数可以用来解码为unicode，这里有一个php的解码应用：convert-to-html。这是直接解成html实体编码的。它同unicode的关系只是十进制与十六进制的关系（实质是一样的）。要看16进制unicode只需做下进制转码就行了。知道了16进制编码，我们就可以在这里查询字符的信息：unicode.org

下面是自己用js写的转码工具：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>字符的unicode码信息查询</title> <style type="text/css"> html,body{padding:0;margin:0;} body{padding:10px;font-size:13px;background:#ccc;} #wrap{width:900px;} #wrap h2{font-size:18px;} #wrap textarea{width:220px;height:80px;} ul,li{padding:0;margin:0;list-style:none;} ul{min-width:900px;width:100%;overflow:hidden;} li{float:left;width:220px;text-align:center;} </style> <script type="text/javascript"> function getId(idName) { return document.getElementById(idName); } function escapeCode(){ var hexArray=new Array(); var decArray=new Array(); var entiArray=new Array(); var decCode; var inTXT=getId('inputValue').value; var outTXT=''; var entityCode=''; var outList="<ul><li>Unicode Character Code编码</li><li>HTML Character Entities编号</li><li>字符显示</li><li>unicode信息查询</li></ul>"; if(getId('convAll').checked){ //true,转换a-z,A-Z等字符的unicode编码 var character; for(i=0;i<inTXT.length;i++){ character=inTXT.charCodeAt(i).toString(16).toUpperCase(); //法1：使用charCodeAt逐字转码 outTXT+='u'+character+' '; hexArray.push(character); } } else{ outTXT=escape(inTXT); //法2：使用escape直接转码（不转a-z,A-Z等字符） hexArray=outTXT.split(/%u|%/); //以%u和%做分割插入数组 } for(i in hexArray){ if(hexArray[i]=='') hexArray.splice(i,1); //清除空的数组项（FF） hexArray[i]=hexArray[i].slice(0,4); //截取数组项中前四个字符。（消除a-z,A-Z等不解码产生的影响） decCode=parseInt(hexArray[i],16).toString(10); decArray.push(decCode); entityCode+='&#'+decCode+'; '; outList+="<ul><li>"+hexArray[i]+"</li><li>"+decArray[i]+"</li><li>\"&#"+decCode+";\"</li>"; outList+="<li><form enctype='application/x-www-form-urlencoded' action='http://www.unicode.org/cgi-bin/Code2Chart.pl' method='post' target='_blank'>"; outList+="<input type='hidden' maxlength='8' size='8' name='HexCode' value="+hexArray[i]+" />"; outList+="<input type='submit' value='Go' name='submit'/></form></li></ul>"; } getId('outUnicode').value=outTXT; //输出unicode码，以%u或%开头。 getId('outEnticode').value=entityCode; //输出字符实体编码 getId('outView').innerHTML=outList; //输出编码值，并有unicode信息查询链接。 } </script> </head> <body> <div id="wrap"> <h2>字符转unicode码</h2> （<a href="http://www.cssass.com/blog/index.php/convert_characters_to_unicode" target="_blank">Read in my Blog</a>） <br /> <input type="text" id="inputValue" value="输入字符:如҉" style="width:180px;height:25px;padding:2px;"/><label><input id="convAll" type="checkbox" />a-z,A-Z,0-9,@,/,.,+,-,_等字符也加入转码.</label><br /><br /><input type="button" value="转为unicode码" onclick="escapeCode();"/> <br /> <br /> <textarea id="outUnicode"></textarea> <textarea id="outEnticode"></textarea> <div id="outView"></div> </div> </body> </html>

可以解开任意字符的unicode码，并生成字符实体码，而且可以链接到unicode官网查询该字符的信息。
js中escape这个函数能直接将字符串转成unicode码，不过有部分属于ASCll编码的字符不会解开。
而charCodeAt函数则能解开任何字符的unicode码。
我在js中两种方法都用了。
JS中解码的函数还有encodeURI——这个解开的unicode码我们会经常看见，地址栏里的字符串即出自于此。

转码函数的主要内容。——写的有点乱，不合理处肯定很多。

function escapeCode(){
var hexArray=new Array();
var decArray=new Array();
var entiArray=new Array();
var decCode;
var inTXT=getId('inputValue').value;
var outTXT='';
var entityCode='';
var outList="<ul><li>Unicode Character Code编码</li><li>HTML Character Entities编号</li><li>字符显示</li><li>unicode信息查询</li></ul>";
if(getId('convAll').checked){ //true,转换a-z,A-Z等字符的unicode编码
var character;
for(i=0;i<inTXT.length;i++){
character=inTXT.charCodeAt(i).toString(16).toUpperCase(); //法1：使用charCodeAt逐字转码
outTXT+='u'+character+' ';
hexArray.push(character);
}
}
else{
outTXT=escape(inTXT); //法2：使用escape直接转码（不转a-z,A-Z等字符）
hexArray=outTXT.split(/%u|%/); //以%u和%做分割插入数组
}
for(i in hexArray){
if(hexArray[i]=='') hexArray.splice(i,1); //清除空的数组项（FF）
hexArray[i]=hexArray[i].slice(0,4); //截取数组项中前四个字符。（消除a-z,A-Z等不解码产生的影响）
decCode=parseInt(hexArray[i],16).toString(10);
decArray.push(decCode);
entityCode+='&#'+decCode+'; ';
outList+="<ul><li>"+hexArray[i]+"</li><li>"+decArray[i]+"</li><li>\"&#"+decCode+";\"</li>";
outList+="<li><form enctype='application/x-www-form-urlencoded' action='http://www.unicode.org/cgi-bin/Code2Chart.pl' method='post' target='_blank'>";
outList+="<input type='hidden' maxlength='8' size='8' name='HexCode' value="+hexArray[i]+" />";
outList+="<input type='submit' value='Go' name='submit'/></form></li></ul>";
}
getId('outUnicode').value=outTXT; //输出unicode码，以%u或%开头。
getId('outEnticode').value=entityCode; //输出字符实体编码
getId('outView').innerHTML=outList; //输出编码值，并有unicode信息查询链接。
}

标签： html character entities, html code, unicode, url_encode, 奇怪字符, 字符实体, 特殊字符
发布在 javascript | 没有评论 »

2 / 16«123 4 5 »...尾页 »