设计观点View
12

那些年我们一起清除过的浮动

浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。

作者头像

[置顶]inline-block 前世今生

【一丝冰凉】/2012-08-10/层叠之美

inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,我们随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码是为了兼容 IE6、7而已。那么你真的了解 inline-block 了吗?
我们来看几个问题:
IE6、7 真的不支持 display:inline-block 吗?
display:inline-block 后的元素为什么会产生水平空隙,这真的是 bug 吗?
如何更好的解决 display:inline-block 元素间产生的水平空隙?

作者头像

inline-block 未来

【一丝冰凉】/2013-06-17/层叠之美

inline-block 未来

当《inline-block 前世今生》写完之后,很多朋友戏说为啥没有未来呢?现在,未来真的来了。且听我娓娓道来。虽然前文中连 inline-block 他爸都写出来了,但无论是 YUI 的解决方案,还是我给出的解决方案都是一坨一坨的,如何做到更好呢?

作者头像

前端组件化的未来

【一丝冰凉】/2013-05-24/前端技术

前端组件化的未来

随着 2013 Google I/O 大会的召开,前端开发者迎来了又一大波技术革新。WebApp 风生水起,在W3C 最新的规范《Introduction to Web Components》中,带来了一些新的特

未知高度多行文本垂直居中

近日,微博上有朋友比较纠结未知高度的文本垂直居中问题。这个和「未知高度图片垂直居中」有些类似,但是有一些细节需要注意。

这里有之前写的一个未知宽高对话框的垂直居中(拖动改变大小看是不是依然居中?),只不过对话框是相对于 viewport(视口)居中的,这里的文字需要的是相对于容器垂直居中。

响应式十日谈第一日:使用 rem 设置文字大小

上集回顾:在序言中我们已经提到了响应式的一些基本理念,比如:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。序言中同样提到,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢?当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺术的直觉。网页中常用的文字大小单位是 px(Pixels),em,现在《CSS Values and Units Module Level 3》中新增了 rem 这个

作者头像

响应式十日谈:楔子

【一丝冰凉】/2013-04-25/前端技术

响应式十日谈:楔子

重磅出击,国内非著名前端开发攻城师「一丝」将为大家带来《响应式十日谈》系列文章。那先讲个故事吧:
从前有个土鳖爬呀爬,终于爬到到了海边,然后懒懒的晒着太阳说道:看,我是海龟了。这个故事和响应式有什么关系呢?那到底什么是响应式设计呢?

作者头像

新窗口打开链接的博弈

【一丝冰凉】/2013-04-24/用户体验

新窗口打开链接的博弈

新窗口还是当前窗口打开,一直以来颇具争议。诚然,任何不分场景的强制使用某一种方式都是耍流氓。这里我就不一一分析场景了,这也需要用户研究同学提供的数据作为参考。在对用户使用场景做出了合理分析之后,我觉得还可以把细节做的更好。举个栗子:比如论坛这样的大面积列表页面,曾经 Discuz! 产品部门就为了是当前页面打开还是新窗口打开进行了激烈的讨论。然后某人灵机一动,何不在一个醒目的位置做出是否新窗口打开的选项呢?把选择权交给用户。Like this:勾选「新窗」后,所有的链接都会新窗口打开了。那么除了给 a 标签增加 「target=”_blank”」的强制方式让链接在新窗口打开,我们还有哪些方法呢? 单击鼠标中键可以新窗

雅安地震,前端开发者可以做什么?

写这些文字的时候,我的心情是凝重而复杂的。在自然灾害面前,人们是那么的脆弱。 在面对各种质疑的时候,你是否足够强大,也决定着你能走多远……那么在开发这种特殊类型的网页的时候,我们前端可以做什么?

作者头像

翻译:WebKit for Developers

【一丝冰凉】/2013-03-04/前端技术

翻译:WebKit for Developers

Paul Irish 大湿为我们带来了这篇开年大作,文章深入浅出的阐述了各 Webkit port 的迥异,文笔细腻,是一篇不可多得的 Webkit 入门开胃菜。为了让大家第一时间更好的品尝这道大菜,一丝特别邀请了几位 Webkit 专业开发人士作为本文的翻译顾问,在此表示由衷的感谢!

作者头像

CSS3 Windows 8 Loading 动画

【一丝冰凉】/2013-01-16/层叠之美

CSS3 Windows 8 Loading 动画

看到 Windows 8 的 Loading 动画效果挺好的,用 CSS3 试了以下,交互细节可能还需要调整一下。Chrome 由于 transform: rotate() 开启了硬件加速,效果最流畅,FPS基本维持在 58-60之间。查看 DEMO这里有一 在线生成 Windows 8 loading 图片的网站

作者头像

CSS 与 HTML5 响应式图片

【一丝冰凉】/2013-01-15/前端技术

CSS 与 HTML5 响应式图片

随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢? 什么是响应式图片?

作者头像

贡献标准——第一季

【一丝冰凉】/2012-11-20/层叠之美

贡献标准——第一季

什么是 WEB 标准?为何要贡献标准?如何贡献标准?全篇将围绕着三个问题深入浅出的分析标准,结合实际的案例,你会有意想不到的收获。更多精彩内容在「下面」……

作者头像

Test the Web Forward 论剑归来

【一丝冰凉】/2012-11-09/层叠之美

Test the Web Forward 论剑归来

静静地,悄悄地,时光就这么在指尖流淌着。转眼从 TTWF 大会归来已半个月有余了,非常感谢 Opera 公司 kenny 的盛情邀请和全程帮助。从小生长在南方,帝都总予我以「遥」之感觉,短暂的三日让我对重新认识了北京。对于上海总有一种道不清的情愫,北京至于上海,一个古朴浓郁,一个时尚小资。北京的地铁显得有些「古老」,透出这座文化古城独有的忧郁气息。上海的地铁显得非常现代,人民广场站仿若偌大的地下宫殿;北京的马路方正拥挤,上海的马路整洁宽敞;北京的人热心好客,上海的人独立冷傲;北京的水容易有水垢,上海的水总带有一丝腥味;北京的姑娘之于上海的姑娘……

作者头像

Mac 网页字体优化小议

【一丝冰凉】/2012-11-02/层叠之美

Mac 网页字体优化小议

字体问题一直是前端和视觉设计师都会头疼的问题,加之各个平台(Windows,Mac,IOS等)或者用户代理(各种浏览器,Photoshop 等)使用字体渲染的技术皆有不同,在不用图片的前提下,想要达到同视觉设计产出的PSD效果一样的字体效果肯定是不可能的了。今天只说说 Mac OS X 下字体渲染的问题。Mac OS X 默认字体1.默认简体中文Mac OS X 10.6 之前:系统默认的简体中文为「华文黑体」,由「华文细黑(STXihei)」和「华文黑体(STHeiti)」这两个字重组成。前者是细体,后者是中黑。他们的 font family 都是「STHeiti」。Mac OS X 10.6 之后:系统默认的简体中文为「黑体-简(Heiti SC)」它是在华文黑体基础上经过重新开发出来的新字体。华文黑体(

Windows7 下 Safari 字体模糊 bug

最近在改版一淘专享的过程中再次发现 Windows 7 下的 Safari 5.1.7(以下简称 Safari)出现字体渲染模糊的问题,如下图:案情剖析上图中「他们抢到了红包」后面的文字是绝对定位+JS滚动效果的,开始以为是这两个因素导致的,于是去掉JS,字体依然变形,去掉「 position: absolute」后发现文字恢复正常。此问题只在 Windows 7 下的 safari 出现,XP 中测试没有这个问题。最后通过排除法删除页面上不相干的 html,找到了真凶:禁用该属性后一切和谐了。案情再现为了重现此 bug,写一个单例来测试:查看 Demo通过此例我们发现 「-webkit-transform: translate3d(0,0,0)」是一切祸害的根源,这段代码本来是为了解决 Chrome 某些低版本旋转动画造成页面闪动

用 CSS3 画蒲公英

感谢桑尼真(龙)给我们带来如此美妙的视觉享受,再次感受一下 CSS3 的魅力吧,引用一下原文:前几天同事买了只新手机,在电梯里,说到微信的摇一摇,又说道TX微博也有个类似的功能,叫吹一吹,然后就演示了下,效果很漂亮,也触动我心底那根弦...蒲公英...

网页高对比度模式下的可用性

2008 年,致力于开发 Web 标准的国际组织万维网联盟(World Wide Web Consortium,W3C)发布了 Web Content Accessibility Guideline (WCAG) 2.0。WCAG 2.0 文档定义了一系列指导方针,以提高 Web 内容对于残疾人的可访问性。

可用性更好的CSS隐藏文字技术(CSS图片替换文字)

对于CSS隐藏文字也许大家并不陌生,第一想到的或许就是 text-indent:-999em。但是作为一个重构人员,精益求精一直是我们追求的目标,抛开text-indent的适用场景和bug不谈,大家有没有想过这种方法的弊端呢?显而易见,如果图片由于某些原因未加载的时候,设置了 text-indent:-999em导致文字移出了浏览器视口(可视区域),我们看到的会是一片空白。网页中最重要的是内容,显然此时的可用性大打折扣了。

一淘新首页项目总结—— 一淘前端分享会

重构,无障碍,可访问,响应式布局,性能优化

12