YAOHAIXIAO.COM

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

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

Rss

Home » Posts tagged "CSS"

Brackets 专注 HTML、CSS、JavaScript 开发的编辑器

Brackets 专注 HTML、CSS、JavaScript 开发的编辑器

Brackets 专注 HTML、CSS、JavaScript 开发的编辑器。这个是我一直寻求的编辑器,没有其他复杂的功能,专注前端开发、专注HTML、CSS、JavaScript、开源免费、支持中文、多平台支持。还有什么要求,真的很完美了。强烈推荐打击试一试。 Code the Web. Brackets is an open source code editor for the web. It’s built with JavaScript, HTML and CSS by web developers like you. Download: http://download.brackets.io/ Brackets… [阅读全文]

JavaScript 如何判断 CSS 文件加载完毕

JavaScript 如何判断 CSS 文件加载完毕

之前我写过《如何用JavaScript动态创建link标签到head里》,今天接着这个话题说下去,说说 JavaScript 如何判断 CSS 文件记载完毕。呵呵,今天的话题应该算是上个话题的姊妹篇。我们动态创建的CSS文件,如何知道添加的CSS文件加载完毕了呢? 要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.at… [阅读全文]

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 定… [阅读全文]

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 这几个站点都是… [阅读全文]