YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Archive by category "CSS"

CSS Expression

CSS Expression

网友 Huugle 在《CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中》评论说 IE6 中可以使用 CSS Expression 来处理固定定位问题。所以这里我在整理一些关于 CSS Expression 的资料。 CSS Expression 简介 CSS Expression,动态 CSS 属性。IE 私有,自 IE 5.0 开始引入(IE8 将不再支持),详细参考MSDN。 CSS Expression 用来把 CSS 属性和 Javascript 表达式关联起来,这里的 CSS 属性可以是 CSS 元素固有的属性,也可以是自定义属性。就是说 CSS 属性后面可以是一段 Javascrip… [阅读全文]

CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

我们经常可以看到类似的 JavaScript 弹出层效果,JavaScript 模拟的弹出窗口可以正好做到在浏览器窗口的中心显示。那么这种效果是如何使用 CSS 来实现的呢? 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>CSS Position 定位实现 DIV 在窗口居中</title> <meta name=”keywords” content=”CSS Position 定… [阅读全文]

-webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

-webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

不知道说是 Chrome 智能呢?还是说它多此一举?Chrome 浏览器中存在默认会自动将小于 11px 大小的字体调整为 12px。我在写 BlueNight 主题的最新评论时候就设置了评论发布时间为 11px ,无意中有再次发现 Chrome 的这个字体显示问题(最早还是在阿里国际站的时候第一次遇到这个问题)。看看这样的代码: .date-small { font-size: 11px; } .date-normal { font-size: 12px; } 用 Chrome 浏览器打开,你会发现两个 CSS 产生的显示结果是一样的,11px 自动变为了 12px。一般情况下,字体大 1px 没有多大影响,但是像 BlueNig… [阅读全文]

CSS学习经验总结 – CSS 性能优化

CSS学习经验总结 – CSS 性能优化

关于CSS性能这个问题,接触前端开发时间长一些的朋友我想大家或多或少会有所了解。我记得我第一次看到关于CSS性能方面的问题,是看YUI Theater 中 Steve Souders 的演讲 《High Performance Web Sites 14 Rules for Faster Page》 (视频下载地址:souders-performance.m4v)才知道 CSS 书写也要注意性能问题。 CSS 的解析顺序 根据 Steve Souders 的研究,浏览器解析 CSS 的顺序是从右向左的。举个例子: #navigation .menu li.current a:link { background-color: #fff;… [阅读全文]

CSS学习经验总结 – float 浮动元素

CSS学习经验总结 – float 浮动元素

CSS 中的 float 要做到前面 HACK 篇提到的优化前端性能,我们就必须要有扎实的 CSS 的技术基础。需要对各个 CSS 属性和选择器等基础知识有着深刻了解才能做到优化代码性能。由于篇幅有限,我不能一一介绍各个 CSS 属性,具体内容还需要大家自己产看《CSS 权威指南》、阅读 W3C 的 CSS 标准文档。我这里想介绍是 CSS 里一个十分重要的属性 float。 为了讲解 float,我想还是从最常见的一个 IE 显示 bug —— float 元素的双倍边距问题讲起。在前面 haslayout.net 的《Double Margin Bug》中介绍了这个 bug 的解决办法:添加 display:inline;。 不… [阅读全文]

CSS学习经验总结 – CSS Hack

CSS学习经验总结 – CSS Hack

关于浏览器兼容问题 在上一章节里最后面提过 hack 的一些写法,其实 CSS Hack 的主要目的就是为了解决浏览器兼容问题。而浏览器兼容问题也是初学者必须掌握的一个重要知识点。而作为一名合格的前端工程师,确保页面在主流浏览器中的显示一致,处理兼容浏览器问题是一门必修的基础课程。 而关于浏览器兼容问题首先需要强调的一点就是,浏览器的兼容问题不仅仅是一个单纯的技术问题,也是一个历史遗留问题。由于早期的浏览器大战,各个浏览器厂家各自为政,各自有各自的一套技术规范,各个技术团队的水平不同,还有各自对 Web 标准的理解问题,最终造成了浏览器各种兼容问题的存在。 其次,浏览器兼容问题,不仅现在有,将来很长一段时间也会一直(甚至可以肯定永远… [阅读全文]

CSS学习经验总结 – CSS 基础知识

CSS学习经验总结 – CSS 基础知识

学习 CSS 的参考资料和站点 CSS 入门并不难,我这里给初学的朋友推荐3本书:《CSS 权威指南》(第3版)、《精通CSS:高级Web标准解决方案》(第2版)和《CSS网站布局实录:基于Web标准的网站设计指南》(第2版)。这3本书你只要认真的看完,CSS 是做什么,可以做什么?CSS 的强项是什么?什么时候应该让 CSS 来处理来提高 Web 程序的性能?浏览器的兼容问题要怎么处理?你应该都明白了。 而学习 CSS 知识的 Web 站点:W3.ORG、MDN、W3Schools、W3SCHOOL.COM.CN、MaxDesign、CSS Play、CSS ZenGarden、52CSS、A List Apart 这几个站点都是… [阅读全文]