Month: April 2015

【必备】史上最全的浏览器 CSS & JS Hack 手册

浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异。因此,浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册,那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack /* IE 6 and below */ * html .selector {} .suckyie6.selector {} /* .suckyie6 can be any unused class */ /* IE 7 and below */ .selector, {} /* IE 7 */ *:first-ch… Read More

深入理解JavaScript系列:《你真懂JavaScript吗?》答案详解

介绍 昨天发的《大叔手记(19):你真懂JavaScript吗?》里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了。 今天我们来对这5个题目详细分析一下,希望对大家有所帮助。 注: 问题来自大名鼎鼎的前端架构师Baranovskiy的帖子《So, you think you know JavaScript?》。 答案也是来自大名鼎鼎的JS牛人Nicholas C. Zakas的帖子《Answering Baranovskiy’s JavaScript quiz》——《JavaScript高级程序设计》一书的原作者 (但题目2的解释貌似有点问题) OK,我们先看第一题 题目1 if (!("a" in window)) {… Read More

初步认识 LESS

LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观。LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化,及其典型的应用场景,并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS,灵活运用 LESS 以提高开发效率。   LESS 背景介绍 LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码,在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了(例如 Twitter 提供的 bootstrap 库就使用了 LESS)。那么,LESS 是从何而来呢?它和 SASS… Read More

php程序员应具有的7种能力

php程序员应具有什么样的能力,才能更好的完成工作,才会有更好的发展方向呢?在中国我想您不会写一辈子代码的,那样不可能,过了黄金期,您又怎么办呢?看了本文后,希望对您有所帮助。   一,php能力   1,了解阶段,您能写一些代码,因为那是在手册和google的帮助下,您才完成的。变量乱定义,N多函数不知道,做起事来很慢,想到什么写什么,代码写的比较乱,后期维护很麻烦。   2,熟悉阶段,经常查函数,手册估计也看过一,二遍了,常用的函数基本上您都了解了。后 期维护给您带来了不少痛苦,您开始发现自己的代码有很多不足,开始思考如果改进自己的代码,如何站在项目的角度来规划自己的代码,… Read More

[JavaScript] 判断网页能不能被IFrame 嵌入

IFrame是一个分享资讯非常方便的的方式 只要输入 <iframe src="http://example.com/"></iframe> 就可以嵌入一个网页了! 然而,事实上并不是这么的完美,并不是所有的网页都允许嵌入… 譬如说Google,如果妳直接就输入Google 的网址,如下面 <iframe src="http://google.com"></iframe> 那么将只会得到一个空白的IFrame而已… 如果有打开Console 的话,就会看到一些安全性上的错误,不过很可惜的JavaScript 很难去handle 这个错误… 针对IFrame监听onerror是… Read More

解决URL出现%E2%80%8E(Zero-Width Space)

当URL出现%E2%80%8E就代表你的URL里面有包含一个ZERO-WIDTH SPACE (ZWSP) 这个是肉眼无法发现的空白,有时候你会觉得明明已经按下→了,却怎么游标还在原地,没有移动到下一个字元去   这种时候就代表这两个字元中间有一个ZWSP的存在 ZWSP一般情况是打不出来的,但是如果你是透过WORD等等的文件编辑器复制贴上的 就很有可能含有ZWSP,一般情况下ZWSP并不影响阅读 但是当它变成URL的一部分,就会变成%E2%80%8E ,使你的URL错误 这都还算是好发现且好解决的 要是当他要拿来当hash的值做验证,如同下面这样 if(sha1($password)!== sha1($_P… Read More

真正的响应式图片

不知不觉,现在国外网页已经到了“优先为移动平台创建”的时候了,优点是可以优化CSS结构与代码量,还可以使得移动端用户体验更优质的性能。我目前使用的这个Medium写作平台就是基于“移动先行”策略而开发的,使用起来不论什么方式,它的体验都很棒。   为 小屏幕的移动设备减少数据传输量可以大幅提高移动设备对web的加载性能,而性能对你的用户满意都有着重要的影响。Guy Podjarny做过调查,86%的响应式网站在最小的手机屏幕上浏览时的页面大小与大屏幕是相同的。也就是说虽然采用响应式设计的网站看起来像个移动站 点,实际上它们大多数加载了大屏幕端所有内容,造成的原因无外乎这三种: 1.下载并隐藏 2.… Read More

Adaptive Images : 为不同的屏幕尺寸提供不同的图片

为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。 设置自适应图片 实现 Adaptive Images 解决方案需要 Apache 2、PHP 5.x 和 GD 库,也就是说需要 Web 服务器端编程。首先,在其网站上下载.zip 文件开始配置:   解 压文件,然后将其中的adaptive-images.php和.htaccess文件拷贝到网站的根目录。如果你网站的根目录下已经有一 个.htaccess文件了,不要覆盖它。参考下载包中的instructions.htm文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache 的文件夹。   用你最喜欢的 FTP 客户端软件设置该文件夹的权… Read More

Picturefill.WP – 根据屏幕尺寸加载合适的图片

Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度。例如用户用手机访问站点,该插件会选择适合手机尺寸的图片(如缩略图)加载,不会加载完整尺寸图片。 使用方法 没有选项,无需任何设置,下载插件激活,网站文章中的所有图片就会变成Responsive图片,若是retina显示屏,则加载retina图片。 工作原理 该插件工作原理简单的说,就是充分利用WordPress为每张图片创建的副本图片:大尺寸、中等尺寸和缩略图,根据用户设备屏幕宽度,载入尺寸最接近的图片。 具体来说,插件首先在文章内容中查找图… Read More

Ubuntu中升级Firefox

我的Ubuntu系统自带的Firefox浏览器版本是17.0.1,今天看到官网上最新版本已经到23了,因此想将其升级一下。   对Linux不是很熟悉,得益于搜索引擎,最终将其成功升级,这里记录一下操作过程。 升级Firefox 首先是下载Firefox,我是从这里下载的:http://firefox.com.cn/download/   火狐在linux下不提供安装包(如rpm或者deb包)下载,只提供二进制可执行文件打包。下载可执行文件包,解压后是可以直接用的,但我们一般会进行一些配置。   我下载的是中文版的Firefox,地址:http://download.firefo… Read More

PHP利用FPDI 制作PDF 档案 (php合并pdf, php签名pdf)

昨天研究如何在既有的PDF 档案上放入中文字,虽然找到支援中文的FPDF ,但是有些Unicode 字集我实在试不出如何显示(如:堃) 。   我的同事建议我用图形来解决看看,以下就是我的实验过程(我用的是Windows 平台) 。   我用的相关技术如下: 名称说明下载网址 FPDF PHP 上用来产生PDF 的第三方套件 [http://www.fpdf.org/](http://www.fpdf.org/) FPDI 用来载入一个已存在的PDF 档案,以供FPDF 使用 [http://fpdi.setasign.de/](http://fpdi.setasign.de/) 香港参考宋体(DFSongSd.tt… Read More