`
leyoo
  • 浏览: 44463 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

书写跨浏览器的CSS代码

阅读更多

书写跨浏览器的CSS代码
非原创,在Smashing上看到一篇“The Principles Of Cross-Browser CSS Coding”,顿时觉得“哎哟,不错哦~”,呵呵,挑选一些东西翻译一下。

不管是写JavaScript还是写CSS,对于网页开发者来说,最头疼的事情就是要支持多浏览器,而不管是JS还是CSS,虽然都有国际标准站在那里指点江山,可惜各个浏览器厂商还是自说自话,对于JS和CSS的实现方式和支持程度都各不相同。对于网页开发人员来说,一直希望找到最轻便的方式来得到跨浏览器的支持,这也是为啥有那么多JavaScript和CSS的库和Framework可用的原因。

上面提到的这篇文章的作者就是这样一个意思。所有的开发人员都希望能够在每个浏览器中得到完全一致的网站渲染结果,得到完全相同一致的设计实现,不过很难!所以,作者希望给出几条最基本的CSS编码指导思想,最后能够达到的目标就是在所有浏览器里面看着基本差不多,然后尽量少写多余的CSS代码~哎哟,听上去不错哦~呵呵
理解CSS盒子模型
对于任何希望写出跨浏览器CSS代码的同学来说,最需要深刻理解的第一件事情就是CSS盒子模型(Box Model)。CSS的盒子模型理解起来不难,而且大部分的浏览器实现方法基本上也相同,出了一些特定版本的IE。
( 这里可以插一句就是浏览器是如何渲染网页布局的,比如div如何渲染,p如何渲染。对于浏览器来说最基本的工作之一是把网页内容从服务器上下载下来,然后把这些网页内容画到屏幕上,真的是“画”哦,所以,浏览器中非常相当重要的一个核心组件叫做布局渲染引擎——Layout Engine,各大浏览器使用的布局渲染引擎都不一样——所以才有上述跨浏览器问题的存在,比如Firefox或者说Mozilla家族的布局引擎叫做Gecko,Safari、Chrome等都是属于Webkit家族的,而IE使用的Trident的。布局引擎如何把网页内容画到屏幕上呢?在对网页内容进行解析之后,布局引擎会把这些div阿p阿h1阿影射成一个一个的长方形,计算好每个元素所占长方形的大小/偏移/位置关系等等,然后把这些长方形对应到屏幕的实际坐标上,再把具体的内容绘画在这些长方形中。简单说吧,就是这样的,呵呵。在这个过程中有很多步骤,同时也有很多对关键步骤描述的术语,比如Frame Construction、Reflow等等。CSS的盒子模型是计算这些长方形和进行Reflow等操作的核心模型。)
CSS盒子模型主要用来计算:
• Block型元素占据多大地方
• 盒子的边界/边距等会不会彼此重叠,比如上下两个盒子都有边距,那可能这个边距会重叠在一起(可能具体浏览器实现也不太相同)
• 盒子的大小
• 盒子同网页中其他元素的关系
CSS盒子有如下基本规则:
• Block型元素本质上都是长方形(其实所有元素都是,像前面说的那样)
• Block元素大小的计算参数包括长、宽、内边距padding、边界border和外边距margin
• 如果没有指定元素高度的话,元素的高度取决于内部元素的高度+内边距padding
• 如果没有指定元素宽度的话,非浮动元素会自动撑开去适合父元素的宽度-父元素的内边距padding
( 个人认为在写CSS的关于布局部分的代码时,脑袋中可能时刻都要想象一下这个盒子模型,会大大帮助你对布局进行控制,而事先的计算以及一些简单的方式也会方便今后的维护,反正这里的计算大不了就是多几个变量,但是基本都是一次方程。而借助于类似于Firebug这样的调试工具更是能够清楚的了解元素的实际大小和布局信息。)

这里有几条比较重要的事情要记住:
• 如果您设定了一个盒子的宽度为100%的话,那么这个盒子不能有任何内外边距或者边界,要不然肯定会撑破父元素
• 竖直方向上彼此相邻的元素的外边距可能会重叠在一起,不同的浏览器实现不一样,(比如上方元素外边距为5px,下方元素外边距为5px,这两元素在竖直方向上这个5px的边距可能就被重合在一起,他俩之间的距离只有5px,而不是10px;)由于这点实现的不同,可能会造成一些布局混乱的情况发生。
• 对于指定position的元素,不管是relative还是absolute也是跨浏览器支持比较头疼的事情,原文作者说不讨论了,那我也不讨论了,呵呵
( 其实,这里有两个大小:一个大小是元素的可视大小,比如一个div他实际包含内容占据的大小,我们通常在CSS中制定的是这个大小,比如上面图中的400×400;另一个大小是浏览器布局引擎计算出来的该元素的实际占地大小,这个大小包括了元素的可视大小,还包括了你指定的padding阿、border阿、margin阿,加起来才是你的实际占地大小,浏览器按照这个大小来给你划出属于这个元素的区域。举个例子就是,我要盖房子,需要使用面积为120平米的,但是开放商就需要给你添加围墙多厚、公摊面积、跟其他人家之间的间距阿什么的,所以最后你实际购买的面积肯定不止120平米,道理是一样的,呵呵。)
Block和Inline型元素
( 我也不知道block level和inline level是不是应该把level翻译成“型”阿,呵呵 )
HTML的元素生下来不是平等的,他们被分为两类,block型和inline型。block型的元素生下来就优越,人家生下来就能占据属于自己的一块地皮,他的父亲占的地方有多大,除去围墙内边距啥的,他就能占多大地方,这类元素包括div阿p阿等等;还有一类元素是inline型的,他们生下来没有属于自己的地方,他自己多大,他就占多大地方,然后跟着所有的文字阿或者其他inline元素挤在一起,这类元素包括span阿a阿啥的。
下面几条描述了基本的不平等地方:
• Block元素如果没有指定任何长宽规则的话,缺省的是在水平方向上填充满父级容器水平方向的空间,所以不需要制定说width为100%;
• 如果没有指定浮动或者position的话,Block元素默认起始于父级容器的最左边界,然后安排在前面还有的block元素下面
• inline元素会自动忽略width和height,写了也没用
• inline元素同文字一起被布局和渲染,他的大小会随着一些字体方面的属性而发生变化,例如white-space、font-size、lettering-spacing等
• inline元素可以使用vertical-align来进行竖直方向的对齐,但是block元素不行
• 如果指定inline元素为浮动的话,他就变成block型的了
补充一点就是,这些特性是针对html元素的天生而言的,但是不妨碍后天给他指定,可以通过display: block;来指定a或者span成为block型元素,同时还有好多效果可以利用display: inline-block;这样的方式做到,等等。
理解浮动和Clear
现在多栏的布局越来越常见,实现多栏布局中比较简单并且容易维护的方式就是通过浮动。浮动元素可以指定浮动的方向,是向左还是向右,这些元素会自动按照这个方向顺序摆放,直到“碰到”容器元素的边界或者其他的浮动元素,这时可能就会折行重新开始浮动等。所有非浮动的、inline的内容会围绕着这个浮动元素来进行布局。
• 浮动的元素不会参与到其他非浮动的block元素的布局计算中,也就是说,如果你把一个盒子浮动在左边,跟着他有一个非浮动的block段落,这个block会装作好像没有前面那个浮动元素一样计算布局,该多大还多大,上下左右坐标该怎么计算还怎么计算,但是这个block里面的文字——inline内容会围绕着这个浮动盒子来进行布局;(可能说起来比较拗口,有兴趣的可以自己写段HTML代码就明白了。)
• 要让内容能够围绕一个浮动元素布局的话,那这段内容要么是inline型的,要么就得跟这个浮动元素在同一个方向上浮动,比如都是向左或者都是向右
• 浮动元素如果没有指定宽度的话,他的宽度会默认的缩小到内部内容的大小,所以最好为你的浮动元素指定一个宽度
• 当block元素包含float元素的时候,一定小心布局的变化,外层元素会collapse
• 具有“clear”属性的元素可以不在围绕前面的浮动元素——视为取消浮动的原则
理解IE的常见问题
IE6目前还在网络中占有很大一部分市场,虽然开始有大的网站开始不支持IE6的行动,但是有时候还是需要花费很大精力来照顾一下IE一族的感受。这里有一些需要处理的最为常见的问题:
• 如果过渡使用浮动的话,IE6会是一个很大的问题,会造成内容消失、重复文字等等
• IE6会把浮动元素浮动方向那边的外边距乘以2,把浮动设定为display: inline通常会解决这个问题
• IE6不支持max-和min-系列的CSS规则,例如max-height等
• IE6不支持指定位置的背景图片
• IE6和IE7不支持display很多属性值,例如inline-table等
• IE6中,出了对于使用:hover以外,其他元素都不能用
• 不同版本的IE对于CSS Selector的支持是不同的
• IE6-8对于CSS3的特性支持不多
有些问题怎么调也不可能一样
有些事情开发人员怎么调整可能都是不行的,这时候也别太较真了,比如:
• Forms表单可能怎么都会看着不一样的
• 字体
使用CSS Reset
原文作者说自从他开始使用CSS Reset之后,就爱上了CSS Reset。通过CSS Reset,书写跨浏览器CSS代码的能力大大加强。CSS Reset看上去可能是一堆很没用的代码,不过真的很有用,原文作者推荐Eric Meyer的CSS Reset代码。
( 啥是CSS Reset?我们知道对于HTML元素进行CSS的限定规则有很多很多,开发人员不可能对于一个div写特别长的CSS 规则代码,把所有的规则全部配置一遍,那要累死了,所以对于没有设定的属性,所有的浏览器都有默认的样式属性。比如你的页面中没有指定font,那浏览器怎么办,会用他默认的样式中的字体来对网页进行渲染,在比如,我们上来就可以写
这样的元素,之后可以看到
直接就有了一些关于内外边距的一些样式,这些样式都是浏览器添加的默认样式。这当然非常非常的方便,但是同样会带来一个问题就是每个浏览器内置的默认样式都不一样阿,尤其是涉及到内外边距这些实际影响布局的属性,所以,在这样的背景下,CSS Reset就出现了。下面这个图就是一个典型的Reset代码段。)

( CSS Reset不是什么特别的概念,核心思想就是为了消除不同浏览器缺省样式属性带来的不兼容性。可以看到的是貌似Reset就是把内外边距什么的重新清零一遍,这是因为这些默认内外边距的不同是带来布局不同最大的问题之一。)
基本就翻译到这里吧,通过翻译自己也学习到了很多,整理出来希望能够帮助更多的朋友理解这些。我的实战经验不多,不过上述的问题基本也都遇到过,可能也能说明这些问题比较具有代表性。如果有任何错误和意见,欢迎批评指正。

分享到:
评论

相关推荐

    书写高效的CSS

    Firefox的样式系统在解析CSS代码时,会对一个选择器组合从右至左进行匹配操作。选择器组合中的选择器数量越多,浏览器的样式系统需要匹配的时间就越长,从而影响页面加载速度。因此,减少选择器的数量成为提高CSS...

    web浏览器的源代码程序

    源代码是程序员创建软件时书写的文本,包含了所有指令和逻辑。对于Web浏览器而言,源代码是理解其工作原理的关键。通过阅读和分析源代码,开发者可以学习到如何处理HTTP请求,如何渲染网页,以及如何执行JavaScript...

    书写干净轻巧易于维护管理的CSS代码

    ### 书写干净轻巧易于维护管理的CSS代码:专业指南 在现代网页设计与开发领域,CSS(层叠样式表)扮演着至关重要的角色,它不仅负责网站的外观设计,还直接影响到页面的加载速度、可维护性以及用户体验。一份整洁、...

    c# 简单浏览器源代码(无自定义控件)

    3. **源代码**:源代码是程序员用编程语言书写的原始程序,可以被编译器或解释器转换成可执行程序。学习源代码有助于理解程序的工作原理。 【文件名称分析】 "**MyIE**"可能是指作者创建的简单浏览器项目的名称,...

    高效、可维护、组件化的CSS

    本文将围绕以下几个关键点展开讲解,帮助您掌握如何写出高效的CSS代码,以及如何优化和维护您的样式表。 首先,我们需要了解CSS书写规范,这是因为一个统一的书写规范有助于团队协作和代码的维护。通常,CSS书写...

    css hacks 利用浏览器的漏洞来隐藏特定浏览器的CSS规则

    虽然它可以帮助开发者解决不少问题,但也存在一些缺点,比如可能会使CSS代码变得难以维护。因此,在使用CSS Hacks时,应该尽可能遵循CSS的最佳实践,并尽量减少对它的依赖。随着现代浏览器的发展,许多老版本浏览器...

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    由于不同的浏览器对 CSS 的支持及解析结果不一样,所以我们需要针对不同的浏览器写不同的 CSS 代码,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 CSS Hack 的原理是什么? ----...

    CSS Hack 浏览器兼容文档

    CSS Hack是一种针对不同浏览器之间解析CSS规则差异的技术,目的是确保CSS样式在各个...更好的解决方案是采用渐进增强或优雅降级策略,以及利用条件注释、CSS前缀和现代CSS特性,以确保代码的可维护性和跨浏览器兼容性。

    css书写高效的CSS-CSS的渲染效率

    ### CSS书写高效的CSS-CSS的渲染效率 在前端开发领域,CSS(层叠样式表)是构建网页布局、样式和视觉效果的关键技术之一。优化CSS不仅能够提升网站性能,还能改善用户体验。本文将从几个方面探讨如何通过改进CSS...

    分享20条编写 CSS 代码的建议

    在编写CSS代码时,有一些约定和最佳实践可以帮助我们更高效地进行样式编写,提升代码的可维护性和性能。以下是20条CSS编写建议,涵盖了从简单的属性使用到布局优化的各个方面。 1. 谨慎使用外边距属性 在CSS中,...

    CSS参考手册(Web标准布局的本质,XHTML书写规范,CSS基础与书写规范,网页头部元素的详细定义,CSS基本布局的属性,CSS容器属性)

    这种分离使得代码更易于维护,网页加载速度更快,并提高了跨浏览器兼容性。 在**XHTML书写规范**中,XHTML是一种严格的HTML版本,它结合了XML的语法规则。遵循正确的命名规则、闭合标签和使用引号等规范,可以确保...

    HTML+CSS布局、规范、兼容

    常用CSS属性方面,按照显示属性、盒模型属性、背景、行高、文本属性和其他属性来组织代码,可提高代码的可读性和易维护性。例如,在显示属性中包括display、list-style、position、float、clear等,盒模型属性中包括...

    CSS代码规范.docx

    **CSS代码规范** 在编写CSS代码时,遵循一定的规范至关重要,这不仅有助于代码的可读性和维护性,还可以提高团队协作效率。以下是一些关键的CSS编码规则和建议: 1. **开启Edge模式**: 在HTML文档头部添加`,chrome...

    CSS代码规范.pdf

    【CSS代码规范】 在编写CSS代码时,遵循一定的规范至关重要,这可以提高代码的可读性、可维护性和团队协作效率。以下是一些常见的CSS代码规范: 1. **HTML基本格式**:HTML文档应遵循标准格式,包括DOCTYPE声明、...

    CSS种针对浏览器兼容问题的解决方法

    ### CSS针对浏览器兼容问题的解决方法 在网页开发过程中,不同浏览器对于CSS的支持程度各不相同,这导致了页面在...通过合理利用条件注释、特定浏览器的选择器以及调整CSS的书写方式等策略,可以有效地解决这些问题。

    css书写规范 web设计css

    良好的CSS书写规范不仅可以提高代码的可读性和可维护性,还能有效提升网页加载速度和搜索引擎优化(SEO)的效果。以下是对CSS书写规范的一些基本要点和建议。 #### 1. 结构化命名 在CSS中合理地命名选择器是非常...

    Div+Css实现信纸书写页面

    在压缩包中的“信纸界面”文件中,可能包含了实现这一功能的HTML和CSS代码,可能还包含了JavaScript来增强交互性,如保存信件内容、格式化文本等。在实际开发中,可能还需要考虑浏览器兼容性、响应式设计以及优化...

    浏览器中css line.docx

    在浏览器中,CSS(层叠样式表)是用于控制网页元素呈现的重要工具,其中包括对文本行高的设置。本文主要探讨了在处理...在实际开发中,应养成良好的CSS书写习惯,以避免此类问题的发生,提高代码的兼容性和可维护性。

    网页前端css书写规范

    网页前端CSS书写规范是前端开发中非常重要的一个环节,它直接关系到代码的可维护性、可读性和项目的整体风格统一性。一个良好的CSS书写规范不仅能够提升开发效率,还能优化网页加载速度,提高网站的用户体验。 首先...

Global site tag (gtag.js) - Google Analytics