Tips

浅谈伪元素的常见问题

在之前一篇一个IE8的新起点中,我简单列举了一些当前放开枷锁的CSS,其中之一就是伪元素。当然,在使用伪元素的时候依旧会遇到一些问题,我总结了一些,简单陈述,留个印象,那么当再次遇到的时候能够有所回想。 使用伪元素主要遇到的问题集中在IE8,因为IE8只是部分支持伪元素。首先,IE8中设置伪元素的z-index可能无效。这点广为人知,在使用伪元素制作冒泡箭头的时候会遇到,无法通过调节z-index使before置于after之上。 另一个较为常见的问题是,无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成,比如在一个当前激活的导航里项上添加.active时,看到图标依旧保持着原来的颜色。其实这个不只是IE8会遇到,移动版Safari同样存在这个问题(偶发),明明更新了类名,外观却不发生重绘。 另外,使用:…

固定站点为Windows磁贴

对于一些常用的功能性网站,将他们固定为windows开始菜单里的磁贴多多少少可以带来一些访问上的便利。尽管每个人都使用习惯迥异,不过总还是有些人热衷去体验系统更新带来的变化。win10公测开始我就毫不犹豫放弃了win7,不过个人并没有使用win8的经验,因为从windows95一路而来的开始菜单的缺失令我无法忍受。win10的开始菜单很好用,win7确实可以安息了...所以就从win10开始吧。 固定磁贴的代码很简单,在meta标签里指定对应的磁贴图片即可,例如: <meta name="msapplication-square150x150logo" content="image-url.png"/> 如同字面上一样容易理解,指定的是150x150的图片位置。当然看完微软的参考资料:Pinned site…

CSS伪类与CSS伪元素的典型与非典型应用

在上一篇《CSS伪类与CSS伪元素的区别及由来》里,已经详细区分了伪类和伪元素。但在这篇讲应用的文章里,其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别,本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法,讲述伪类和伪元素的一些使用上的小技巧。在这个过程中,始终忽略浏览器的支持情况,任何一个例子无法正确运行的话,请先检查一下你当前的浏览器,是否赶上了这个时代的浪潮~ 当然,一开始都是一些比较常规的内容,如果你对这些内容已经了然,可以直接跳到后面“非典”的部分:) 列表处理 伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。 页脚链接 页脚链接可能是一个最为合适的例子,因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列&…

为WordPress主题添加Featured Image

WordPress在进步,当然也日渐肥胖,很多新功能对于像我这样单纯的博主而言没什么实际用途,反倒是一种负担。我从WordPress2.5开始使用至今,虽然也一直有自动更新版本,但说实话,当真没在意过新版本多了哪些新功能。所以直到同事问我一个关于Featured Image的问题的时候,我的第一反应就是,这货是个啥呀? 原来WP在2.9时添加了一个文章略缩图(Post Thumbnails),3.0时更名为精选图片(Featured Image)——我没用过中文版,不知道是不是这么翻译的。这个功能允许文章关联一张图片作为缩略图,显示在list页里。好吧,我深深地OUT了。作为一个2.5版本的WPer制作的主题自然也就只有2.5级别,…

移除Textarea周围额外的空白

以前,textarea 100%宽度撑满父容器一直都是一个常常被提及的问题。作为 inline-block 显示的 textarea 无法像 block 那样在宽度上自动的充满容器,于是为了让 textarea 能够撑满容器并且回避因 padding 和 border 而产生的额外计算,各种手法也就层出不穷。 比如,设置宽度为98%,比如,嵌套一个div然后设置它的 padding-right 等于内含的 textarea 的边框和 padding 之和,再让…

兼容性良好的HTML邮件(EDM)

EDM(E-mail marketing 即邮件营销)在几乎所有的商业公司都免不了成为一种重要的推广手段,所以作为一个前端难免还是要与邮件打交道——只是邮件模板的编写和传统页面有很大的不同。很早以前,我写过一篇 line-height导致的邮件图像间隙,那是我第一次遇到诸如此类的问题。文中的两个参考链接是当时最值得一读的两篇专稿,到了今天,它们仍然可以当仁不让地作为最佳实践的准则。只是其中一篇链接因为口碑UED网站的消失而一并失效,不过仍然可以根据标题在网络上找到数以万计的拷贝。 而在这里,我单纯列出我自己总结的一些个人经验,它们虽然或多或少地在我的邮件工作里扮演重要角色,但可能并不是在任何情况下都保持准确。 众所周知 OutLook2007 为了它操蛋的安全性从而使得整个邮件倒退回了2000年前,为了邮件的兼容性你不得不使用很多废弃的标签、属性,但它们很有效,被任何时候都有效和安全——突然发觉DW此刻灵魂附体,满眼的 table…

function与感叹号

最近有空可以让我静下心来看看各种代码,function与感叹号的频繁出现,让我回想起2个月前我回杭州最后参加团队会议的时候,@西子剑影抛出的一样的问题:如果在function之前加上感叹号 (!) 会怎么样?比如下面的代码: !function(){alert('iifksp')}() // true 在控制台运行后得到的值时true,为什么是true这很容易理解,因为这个匿名函数没有返回值,默认返回的就是undefined,求反的结果很自然的就是true。所以问题并不在于结果值,而是在于,为什么求反操作能够让一个匿名函数的自调变的合法? 平时我们可能对添加括号来调用匿名函数的方式更为习惯: (function(){alert('iifksp')})() // true 或者: (function(){alert('iifksp')}()) // true 虽然上述两者括号的位置不同,…

页面Coding自动刷新利器——Live.js

前段时间在论坛看到有人写了一个检测文件变化并自动刷新页面的程序,如是,就可以不用一边编写页面代码一边还要alt-tab切换浏览器来查看页面效果。功能很简单,但是效果不俗,因为高速的页面编写不再因为切换和刷新而降低编写效率,如果拥有双屏显示,一边放编辑器,一边放浏览器,效率提升还是相当可观。 然而前端也早有类似的解决方案,不用写本地程序来监控文件的改动,也不用控制浏览器的刷新,仅仅只需要一个JS就能做到这一切了,只是很多人并不知道其存在而已,它就是——Live.js。 livejs是一个不依赖任何库的脚本,在编写的页面里将其引入,就会监控文件的变化然后自动刷新页面。想象一下在编辑器里ctrl+s后副屏里直接出现页面更改后的效果,对于熟练的页面coder而言,编写页面将会是一个更加行云流水的过程。 当前其版本是version 4,已经相当稳定,可以 直接下载或查看源代码…