FeHelperWeb开发者助手 FeHelper

本插件支持Chrome、Firefox、MS-Edge浏览器,内部工具集持续增加,目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具,甚至在目前新版本的FeHelper中,还集成了FH开发者工具, 如果你也想自己搞一个工具集成到FeHelper中,那这一定能满足到你。另外,本站也提供部分工具的在线版本,欢迎使用,欢迎反馈!
点击按钮快速安装 Chrome版 Firefox版 Microsoft Edge版
FeHelper-version FeHelper-rating FeHelper-users
FeHelper 已在Github开源,也欢迎大家提issue,或者直接提交PR加入进来! 现在就去Github看看>> star fork

IE中可以直接使用CSS Filter实现,但非IE浏览器,却没有直接的提供类似方法。

好在CSS3出现了,可以通过filter:graysacle实现,但是目前仅支持chrome(18 dev+),

其他浏览器好像暂时没有支持的打算!

不过没关系,在中国,目前IE(6/7/8/9)+ Chrome(18 dev+)基本能覆盖了绝大部分浏览器(包括360、Maxthon、Sougou等)。

其余浏览器就算可以不用考虑支持,代码:

html { 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    -webkit-filter:grayscale(1.0);
}

写到这里,再顺便延伸一下-webkit-filter,严格意义上将,这个都不是CSS3的一部分,充其量算得上chrome浏览器的私有css,

其语法为:

-webkit-filter:effect(value);

effect可取下列值:

   grayscale           灰度,值为数值,x∈[0,1]

   sepia                  褐色,值为数值,x∈[0,1]

   saturate             饱和度,值为数值,默认是1,可以是小于1的小数,也可以大于1,x∈[0,+∞)

   hue-rotate         色相旋转,值为角度,x∈[0,360],单位deg

   invert                  反色,值为数值,x∈[0,1]

   opacity               透明度,值为数值,x∈[0,1]

   brightness          亮度,值为数值,默认是1,可以小于1(变暗),可以大于1(变亮);

今天看到这么一则消息:jQuery 2.0将不再支持IE 6/7/8相关特性


这表示jQuery团队即将放弃不支持CSS3的IE 6/7/8,然而jQuery的用户那么多,届时定会掀起一阵“放弃IE低端版本浏览器”的热潮。对于前端开发人员来说,这必须是一件好事!


不过,也好理解,很早就看到新闻说,微软即将在2014年放弃对Windows XP的更新。而且现在IE6的占比逐步下滑,爽!


不过依值得担忧的是,由于现在各浏览器开发商在CSS3方面,都准备了各自独特的私有属性,比如chrome浏览器的-webkit-,firefox浏览器的-moz-,opera浏览器的-o-,IE浏览器中的-ms-等等。

随着各浏览器私有属性的增多,标准会偏离的更远,前端人员新的噩梦也许又来了!

#web前端 #技术随笔 #jQuery 浏览(765) 阅读全文 评论

在IE6下,对haslayout的处理,存在一个非常诡异的bug,直接导致浏览器崩溃!


代码片段1:

<a href="#">aaaa</a>

现象:鼠标滑过时不影响<a>标签的haslayout属性。正常


代码片段2:

<style type="text/css">
    a:hover{zoom:1;}
</style>
    
<a href="#">aaaa</a>

现象:鼠标滑过时触发<a>标签的haslayout属性。正常


代码片段3:

<a style="position:absolute;" href="#">aaaa</a>

现象:鼠标滑过时不影响<a>标签的haslayout属性。正常


代码片段4:

<style type="text/css">
    a:hover{zoom:1;}
</style>
    
<a style="position:absolute;" href="#">aaaa</a>

现象:鼠标滑过时触发<a>标签的haslayout属性。正常


代码片段5:

<a style="position:relative;" href="#">aaaa</a>

现象:鼠标滑过时不影响<a>标签的haslayout属性。正常


代码片段6:

<style type="text/css">
    a:hover{zoom:1;}
</style>
    
<a style="position:relative;" href="#">aaaa</a>

现象:鼠标滑过时触发<a>标签的haslayout属性。浏览器崩溃

这只是一个很小很小的知识点,在FeHelper中有使用到,在这边简单的mark一下。

$.ajax({
    type: 'HEAD', // 获取头信息,type=HEAD即可
    url : window.location.href,
    complete: function( xhr,data ){
        // 获取相关Http Response header
        var wpoInfo = {
            // 服务器端时间
            "date" : xhr.getResponseHeader('Date'),
            // 如果开启了gzip,会返回这个东西
            "contentEncoding" : xhr.getResponseHeader('Content-Encoding'),
            // keep-alive ? close?
            "connection" : xhr.getResponseHeader('Connection'),
            // 响应长度
            "contentLength" : xhr.getResponseHeader('Content-Length'),
            // 服务器类型,apache?lighttpd?
            "server" : xhr.getResponseHeader('Server'),
            "vary" : xhr.getResponseHeader('Vary'),
            "transferEncoding" : xhr.getResponseHeader('Transfer-Encoding'),
            // text/html ? text/xml?
            "contentType" : xhr.getResponseHeader('Content-Type'),
            "cacheControl" : xhr.getResponseHeader('Cache-Control'),
            // 生命周期?
            "exprires" : xhr.getResponseHeader('Exprires'),
            "lastModified" : xhr.getResponseHeader('Last-Modified')
        };
        // 在这里,做想做的事。。。
    }
});