标签归档:CSS

使用 Media Query 检测设备 Reduced Motion 设置

最近在看《Smooth Scrolling and Accessibility1 》这篇文章时,发现在 Safari 10.1 中增加了一个好玩的访问性检测——Reduced Motion2,因此可以通过特性检测区分并对一些配置较差或主动开启「减弱动态效果」的用户进 … 继续阅读

发表在 前端开发 | 标签为 , , , | 2 条评论

使用 BEM 的几个注意事项

最近在做新的博客主题,又恰巧在整理 HTML 中为元素命名方面的心得,就借机重温了一下 BEM 文档。或许是太久没看官方文档,我发现 BEM 如今已经延伸到了 Web 开发实践的范畴,而不再是一个单纯的命名规范。好坏不谈 … 继续阅读

发表在 前端开发 | 标签为 , , | 留下评论

在 WebStorm/PhpStorm 中开启对 Compass 的支持

在最新的 WebStorm/PhpStorm 6 更新中,加入了一系列优秀的前端开发工具。其中的 File Watchers 功能可以自动编译诸如 Sass、SCSS、LESS、CoffeeScript 和 TypeScript 等预处理器语言。对我来说这是一个非常实用的扩 … 继续阅读

发表在 软件技巧 | 标签为 , , , , , | 12 条评论

一种通过伪元素实现的更好的图片替换技术

昨天收到一条垃圾评论,内容是「多更新,要不然还以为您老人家去保卫钓鱼岛了呢」。所以今天说什么也得写一篇证明我还没那么热血。 在过去很长一段时间里,我们都习惯用负值 text-indent 的方法来进行图片替换。在最 … 继续阅读

发表在 前端开发 | 标签为 | 6 条评论

通过 CSS3 根据子元素数量为其定义不同样式

在 LEA VEROU 的博客翻到这么一篇文章——《Styling children based on their number, with CSS3》。原文谈到使用“:nth-child 伪类元素选择器”的方法在 2009 年被提出,LEA VEROU 又通过普通相邻选择器(General sibli … 继续阅读

发表在 前端开发 | 标签为 , | 10 条评论

CSS3版变形金刚

以前做过一个CSS3版忍者神龟,刚才无聊又做了一个变形金刚。 Safari 4+、Chrome、Firefox 5+、Opera 11+以及iOS 4+、Blackberry OS6+、Android都可以看到效果。 演示页面: … 继续阅读

发表在 前端开发 | 标签为 , | 17 条评论

CSS3 Transform实践:在手机浏览器中缩放iframe

在App每日推送的网站中,我们使用了百度广告管家来控制网站广告的投放。其提供的代码通过js写了一段<iframe>来显示广告,这在电脑以及iPad上是没有问题的,但在手机上的显示却产生了一些问题。 <iframe> … 继续阅读

发表在 前端开发 | 标签为 , , | 3 条评论

纯CSS打造的3D效果

http://css-3d.org/space-cube-1.htm CSS 3D网站提供了几个令人振奋的纯CSS实现的3D效果。需使用Safari、iPad或iPhone查看效果,Chrome和Android目前还不行。经测试,Chrome金丝雀版也支持,12.X稳定版还不行。 … 继续阅读

发表在 前端开发 | 标签为 , | 16 条评论

CSS3版忍者神龟

前几天闲来无事,用CSS3做了一个忍者神龟。搞完无聊,又弄了简单的动画效果。各位看着玩吧,Chrome和Safari下是完整效果 http://lightcss.com/tutorials/turtles/。 就是这个样子了,用圆角和渐变等属性做出静态效果 … 继续阅读

发表在 前端开发 | 标签为 , , | 16 条评论

网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

写在前面 由于万恶的IE(尤其指IE6和IE7),我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix问 … 继续阅读

发表在 前端开发 | 标签为 , , | 9 条评论