pzling » HTML & CSS

不常见的前端BUG收集

pzling — Tue, 29 Nov 2011 14:41:06 +0000

无聊~别人都发常见的，我就在这记录些平时比较少遇到的BUG吧(不定时更新)，以下提到的方法不是唯一解决办法或者一定有效。

IE6绝对定位层消失

当相邻标签有浮动可能出现该问题，对绝对定位的层加清除浮动
IE6下DD_belatedPNG背景位置偏移

有时会发现背景图偏移了1px，你+/-1px它还是老样子，+/-2px它就老实的动了2px，解决办法是修改一下背景图(sprite)的位置1px，好像纵横度坐标都是一样是双数或者单数的原因。
IE7下正负内外边距实现等高的方法，高度没有以最高列为准

可能是没有浮动导致。我遇到的就是一边左浮动，右边不浮动，结果高度总以右边的高度为准，加上浮动后问题解决。

HTML5入门-离线存储初探

pzling — Sun, 26 Jun 2011 11:29:18 +0000

这已不是什么新东西了，也没什么技术含量，只适合新手当作入门，如果您已了解过就没必要往下看了，哈哈！！

两周多前了解了一下并试作了一个DEMO，一直人懒没有把文章整理出来。昨天给自己的要求是今天一定要整理出来，接下来的两周好好看下书，为之后的路作准备。虽然还没确定下来，但还是得先作下准备，多积累点东西。

“离线存储”顾名思义，使得你的web应用可以在用户离线的状况下进行访问。这个技术至少有3个好处：

最重要的一个好处当然是用户可以离线访问你的web应用；
文件已被缓存在本地，使得web页面加载速度有显著提升；
离线应用只加载被修改过的已缓存资源与不缓存的文件，因此也降低了服务器的负载压力

如何实现文件离线存储？

首先，我们需要给页面的标签添加manifest属性，作用是设置缓存配置文件的路径(绝对、相对路径都可以)。

 
<html manifest="setting.manifest">
...

接下来我们看一下manifest文件的大概格式，具体什么意思已在注释中注明:

CACHE MANIFEST
#app v20110616
 
# 指明要被缓存的文件，可省略"CACHE:"，文件路径直接跟在"CACHE MANIFEST"后面
CACHE:
index.html
images/logo.png
css/main.css
js/offline-app.js
 
# 可选节点，以下资源必须在线访问
NETWORK:
show.php
 
# 可选节点，如果index.php无法访问则用404.html代替
FALLBACK:
/index.php /404.html

manifest文件主要包括CACHE、NETWORK与FALLBACK三个节点(无先后顺序)。以井号(#)开头作为代码注释，注释还有另一个作用，web离线应用只有当manifest文件被修改才会更新被缓存的文件，单独修改要缓存的文件是起不到作用的，所以我们利用注释功能给manifest文件加个版本号之类的标记。

#app v20110616

我们也可以通过javascript的api去实现更新，具体请到这里查看

最后，你还需要设置一下服务器manifest文件的mime-type为text/cache-manifest（具体如何设置，请自行网上搜索对应的设置方法），这步没设置好是实现不了离线功能的。

到这里离线存储需要设置的都已完成，你可以把你做的DEMO放到服务器上，打开DEMO后断开网络，再刷新看看是否可以正常浏览。

下面是我做的一个简单的小DEMO，最好是用android或IOS手机打开后断网试试看。有些朋友用chrome执行删除操作未能看到列表马上刷新，我也不知道为什么，我自己电脑上还有手机上测试都是正常的。DEMO里还涉及到WebSQL，这两天我再抽时间写个简单的入门吧。

View Demo

CSS的解析规则

pzling — Fri, 27 May 2011 15:54:20 +0000

对CSS有一定了解的人，应该都知道CSS是从右往左解析的。最近在网上看到一张关于CSS解析规则的图片，挺有趣的，也挺直观的，废话不多说，直接上图。

用css3实现高光渐变边线

pzling — Mon, 11 Apr 2011 15:21:10 +0000

皮肤终于搞定，每年春节左右都会换新皮肤，因为这博客也是在09年春节前不久开通的。去年换了两次皮肤，所以今年拖到这段时间才在再制作。这次与之前的皮肤差不多，算是前两个皮肤的合体吧。本来打算用亮点的颜色，但颜色配得不好，也不喜欢，最后还是用回了这种暗暗的色调。依然屏蔽所有IE（IE9还是有点小杯具，所以一样屏蔽）与FF2，测试浏览器chromium12、Firefox 4、Safari 5、Opera 11。

好了，下面进入正题，实现方法与box-shadow原理一样，所以没看过的请先看一下。

我们就直接拿头部的导航来举例说明。因为只有FF才支持border的渐变而且只能是自内向外或者内外向内，所以用border去处理是不靠谱的。背景就可以渐变，所以我们利用背景来作边框的渐变。首先看下面这段样式：

#header .page_item:before{ position:absolute; left:-1px; top:0; width:87px; height:55px; background:-webkit-gradient(linear,0 0,0 100%,from(#1f1f1f),to(#333));background:-moz-linear-gradient(top,#1f1f1f,#333);background:-o-linear-gradient(top,#1f1f1f,#333); content:''; z-index:-1;}

同样是用绝对定位加z-index:-1，记住content属性很重要。但在实际应用中，可能会发现看不到效果，那是因为被有设置背景的父级元素给遮挡了，所以只能视情况把某个父级元素也设置为绝对定位，例如这皮肤，我是对下面这个设置的：

#header nav{ position:absolute; top:0; left:200px; width:510px; text-align:right; z-index:999}

其实用这方法也挺无奈的，而且不是什么布局都能这样弄。不过要提醒的是，上面是针对双边线高光渐变，如果你是单边线，直接用1px宽或高分别放到需要的位置既可

iphone、ipad Web开发小技巧(知识)

pzling — Thu, 17 Feb 2011 16:34:41 +0000

iphone、ipad都水果家的，区别也不是很大(别和我提屏幕!!!)，所以放一起不作过多区分，基本都通用。资料都网上收集来的，很多我也还没条件测试，可能有些知识点已经更新了。

如何隐藏iPhone Safari的地址栏

使用meta标签，看一些资料说的，不过我在iphone4下测试没反应，不清楚iphone3是否有效或者是有什么限制。

<meta name="apple-mobile-web-app-capable" content="yes" />

第二个方法就是通过JS处理。原理就是当我们往下滚动时，地址栏会往上收起，所以我们重围一下默认位置就可以了。也因为是使用系统自身的特性，当内容小于可视区域时(没有滚动条)，地址栏是不能隐藏的。

window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}

不同的方向对应不同的样式表

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

设置可视窗的大小

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
/*width - viewport的宽度 height - viewport的高度*/
/*initial-scale - 初始的缩放比例*/
/*minimum-scale - 允许用户缩放到的最小比例*/
/*maximum-scale - 允许用户缩放到的最大比例*/
/*user-scalable - 用户是否可以手动缩放*/

这里提一下机械人(android)家的关于user-scalable的问题，2.1有效，但2.2是无效的

设置网页的桌面快捷方式图标

<link rel="apple-touch-icon"  sizes="72x72" href="apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png"/>

第一行是设置桌面快捷方式图标的，没有sizes属性默认57*57像素的图片，圆角和高亮效果系统会自动帮你搞定，放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标。

第二行是设置启动画面。

单独给iphone设置样式

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type= "text/css" rel="stylesheet">

特殊链接

当你浏览一个有电话号码的页面时，可以直接按号码就可以打出电话，这时电话号码自动变成链接，当然它们遵循电话号码的格式，但有时你可能要手工创建一个电话号码链接，这时你可以使用tel:前缀(URI模式)，如：

<a href="tel:03545770051">海健</a>
<a href="sms:03545770051">短信</a>

在网页中检测屏幕的方向

switch(window.orientation){
  case 0:
    break;
  case 90:
    break;
  case -90:
    break;
  case 180:
    break;
}

手势事件(guesture)

在iPhone上，手势是两个手指的行为：缩放(放大和缩小)和旋转。iPhone支持如下几种手势事件：

gesturestart
gestureend
gesturechange

下面的例子中我们将监听gesturechange事件，然后使用webkitTransform样式属性缩放和旋转一个div，像往常一样，事件监听器接收event对象参数，event对象包含以下属性：

event.scale ：不缩放时值为1，缩小时值小于1，放大时值大于1
event.rotate ：旋转的角度

window.addEventListener('load', function() {
    var b = document.getElementById('box'),
    bstyle = b.style;
    b.addEventListener('gesturechange', function(event) {
        event.preventDefault();
        bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
        'rotate('+ event.rotation + 'deg)';
    }, false);
}, false);

其它小知识点

iphone内置了一个调试控制台；

每个静态资源(*.html,*.css,*.js etc) < 10M ；

超过25K的资源不会被缓存(gzip前)；

5秒钟的javascript执行时间 [更多资料]

-webkit-text-size-adjust设置页面文字尺寸，默认为auto，建议直接设置为none；

-webkit-tap-highlight-color 设置手指触发链接是的颜色

更多开发资料，请查看Apple Developer

CSS系列之”box-shadow “(阴影)

pzling — Fri, 11 Feb 2011 14:28:13 +0000

使用CSS3里的box-shadow属性，我们就可以不使用图片(或额外的标签)来制作阴影效果了(费话，地球人都知道)！！不过单纯给标签定义box-shadow，可能不能完全符合我们的需要，这时伪类就派上用场了(原来这东西还可以这样用)，我们可以使用:befor、:after伪类来处理一些特殊的阴影效果。

.drop-shadow {
   position:relative;  /* 给伪类定位作准备*/
   width:90%;
   height:80px;
   line-height:80px;
   background:#fff;
   border:2px solid #ddd;
   text-align:center;
}
 
.type-1:before,
.type-1:after {
   content:"";  /* 这个是必须的 */
   position:absolute;  /* 绝对定位，调整阴影位置 */
   z-index:-1;  /* 使阴影置于最低层 */
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;  /* 这个看情况设置 */
   /* 加阴影，没什么特别 */
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   /* 旋转阴影，同样没什么特别*/
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
/* 实现右边的阴影效果，其实还是旋转加定位-_- */
.type-1:after{
   right:10px;
   left:auto; 
   -webkit-transform:rotate(3deg); 
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}

不费话，直接看代码(这是我的习惯→_→)。上面是DEMO里第一个例子的样式，只是起一个抛砖引玉的作用，更多效果就自己发挥了！！

View Demo

(PS:这文章不是讲box-shadow如何使用，主要介绍一个小技巧，对该属性完全不懂的朋友可以查阅以下地址的介绍)

参考资料：W3C_box-shadow属性介绍

IE9对CSS3的支持情况

pzling — Fri, 12 Nov 2010 16:06:51 +0000

IE9到目前为止已经发布到beta版本，下面简单概述一下IE9对CSS3的支持情况。

下文所有数据仅供参考，数据仅到IE9 Preview版本，等正式版出来再作更新，如果您需要比较实时权威点的数据，请点击这里查看。

IE9对CSS3的支持情况

CSS3属性	IE9支持情况	之前版本IE支持情况
opacity		None
multiple backgrounds		None
background-clip		None
background-size		None
background-origin		None
text-shadow		—
word-wrap		5-8
writing-mode		5-8
border-image		—
border-radius		None
box-shadow		None
overflow-x		7-8
overflow-y		7-8
multiple columns		—
box-sizing		8
RGBA colors		None
HSL colors		None
HSLA colors		None
text-stroke		—
gradients		—
transforms		—
transitions		—
outline-offset		—
resize		—
@font-face		5.5-8
@media		None
CSS3属性	IE9支持情况	之前版本IE支持情况

IE9对CSS3选择器支持情况

CSS3选择器	IE9支持情况	之前版本IE支持情况
[attribute^=value]		7-8
[attribute*=value]		7-8
[attribute$=value]		7-8
E ~ F (sibling)		7-8

(注意：由于有几个符号会被转成表情，下面有四个伪类冒号后加了空格！)

IE9支持的伪类 & 伪元素

:root
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:first-of-type
:last-of-type
: only-child
: only-of-type
:empty
:target
:not(s)
:enabled
:disabled
:checked
:indeterminate
::selection

IE9不支持的伪类 & 伪元素

:default
:valid
:invalid
:in-range
: out-of-range
:required
: optional
:read-only
:read-write
::before
::after
::first-letter
::first-line
::value
::choices
::repeat-item
::repeat-index

参考文章：CSS3 Support in Internet Explorer 9

HTML5-Web Workers

pzling — Mon, 27 Sep 2010 12:08:09 +0000

HTML5除了标记语意的增强之外，最令人震撼的莫过于它所附属的Javascript APIs。Web Workers 是 HTML5 提供的一个多线程(Multi-Thread)的解决方案，让我们可以把需要大量运算的程序交由Web Workers去做背景执行，如此的好处就是其他的工作仍可以顺利进行。

Web Workes 目前支持的浏览器有：Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+ (IE都不支持，包括目前的IE9测试版)

使用Web Worders时，首先我们需要建立一个Worker实体，并传入用于处理数据的JS路径

var worker = new Worker("worker.js");

在worker.js里定义onmessage事件(前面不要加var)用于处理数据，在这里面我们可以通过postMessage()触发worker.onmessage。需要注意的是worker.js里面无法获取dom对象。

onmessage = function (evt) {
  //evt.data可以获取worker.postMessage(100)传进来的数据
  for (var i=0; i<100000; i++) {
    //执行大量循环
    postMessage(i); // 触发Worker.onmessage() 并传入 i
  };
};

在work.js里调用了postMessage()后，将触发worker.onmessage这个事件，并可通过event.data获取传入的参数

worker.onmessage = function (e){  
    // 在worker.js 中使用了 postMessage() 并传入了 i 值  
    // 因此我们可以通过e.data获取 i 值
    // 例如：  
    console.log(e.data);  
}

最后我们调用下面这个方法，就开始执行了

worker.postMessage(); 
/*
worker.terminate()  //停止worker的执行
worker.onerror = function(e){  
  alert("于["+ e.lineno +"]行发生错误: " + e.message);  
} 
*/

上面就是Web Workers最基本的使用方法，我自己做了个Demo做测试，发现输出结果还是按顺序的，并没有交差输出(也就是还是单线程)，是我理解错了还是？？望高人指教！！

View Demo

参考资料：Mozilla – Web Workers

CSS屏蔽Webkit浏览器input高亮和textarea缩放

pzling — Fri, 24 Sep 2010 13:44:37 +0000

在Webkit浏览器(例如safari,chrom)下，默认input、textarea取得焦点时，边框会自动高亮；textarea会有个大小的控制柄，通过以下两个CSS属性可以屏蔽这两个问题

input {
    /* 屏蔽文本框高亮 */
    outline: none;
}
 
textarea {
    outline: none;
    /* CSS3屏蔽文本框缩放*/
    resize: none;
}

空字符串URL引起的多余请求

pzling — Sun, 08 Aug 2010 09:06:27 +0000

之前在群里某群友提到过空的src属性(例如img标签)，会增加请求。当时以为是.net的机制问题，不过看了这篇文章后Empty-string URLs in HTML，才知道这是浏览器问题。例如下面几种情况，在不同的浏览器，会增加不同的请求数。（PS:如果你不提供src、href这些属性，就不会有这情况，只是W3C验证不通过而已）

1
2
3

<img src="">
<script src="">
<link rel="stylesheet" href="">

测试页面

img-0 img-1 img-2 img-3 script标签 link标签

下面是通过几个测试页面做的几组测试数据：

chrome 6.0

img 1-2个增加1个当前页面请求（不包含空的link标签情况下）

3个以上（含）增加2个当前页面请求（不包含空的link标签情况下）
link 1个以上（含）增加1个当前页面请求（无视多少空的img，页面只多增加1个请求）
script 有几个就增加几个当前页面请求

firefox 3.6

img 不增加请求
link 1个以上（含）增加一个当前页面请求
script 有几个就增加几个当前页面请求

IE7

img 1个以上（含）增加一个当前目录根目录请求（也就是不包含页面名称）
link 不增加请求
script 不增加请求

pzling » HTML & CSS

不常见的前端BUG收集

IE6绝对定位层消失

IE6下DD_belatedPNG背景位置偏移

IE7下正负内外边距实现等高的方法，高度没有以最高列为准

HTML5入门-离线存储初探

如何实现文件离线存储？

CSS的解析规则

用css3实现高光渐变边线

iphone、ipad Web开发小技巧(知识)

如何隐藏iPhone Safari的地址栏

不同的方向对应不同的样式表

设置可视窗的大小

设置网页的桌面快捷方式图标

单独给iphone设置样式

特殊链接

在网页中检测屏幕的方向

手势事件(guesture)

其它小知识点

CSS系列之”box-shadow “(阴影)

IE9对CSS3的支持情况

IE9对CSS3的支持情况

IE9对CSS3选择器支持情况

IE9支持的伪类 & 伪元素

IE9不支持的伪类 & 伪元素

HTML5-Web Workers

CSS屏蔽Webkit浏览器input高亮和textarea缩放

空字符串URL引起的多余请求