`

渐进增强式布局探讨(上)

 
阅读更多

来看一个经典的三栏布局:

从内容出发(渐进增强 的核心思想),一份合理的HTML结构如下:

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

main 是主要内容,sub 是辅助内容,比如导航、相关文章等,extra 是额外信息,比如广告等,具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是:重要的内容放前面 。这能让文档更富语义,能提高可访问性,对SEO也更友善。

写好上面的代码后,我们来看看如何实现三栏布局  。(书写HTML时,尽量以内容为向导,要避免一上来就考虑布局,这体现的是内容与表现的分离,同时也是渐进增强 思想在工作流程中的体现。)

Table布局

经典得一塌糊涂的表格布局,在渐进增强面前落花流水——表格布局要求书写HTML代码时,首先考虑布局,而不是内容。不啰嗦,直接枪毙。

Float布局

浮动布局满天飞:

优点是简单,缺点呢?在One True Layout 这篇文章中有详细的探讨。或者看我收集的一些Float引发的Bugs .

考虑到IE的庞大市场,目前只好将浮动布局关禁闭了。

绝对定位布局

绝对定位非常简单,非常精准。但面对不可预料的高度时,绝对定位就死翘翘了。可以看看这篇文章 ,还有一个不错的例子:Flanking Menus .

废话不多说,也关禁闭。

负边距布局

Ryan Brill在2004写了一篇文章:Creating Liquid Layouts with Negative Margins . 文中的“发现”立刻让布局世界迎来了“负来负去”的新时代。对于上面的三栏布局,需要先调整DOM结构:

<div id="hd"></div>
<div id="bd">
    <div class="content">
        <div class="sub"></div>
        <div class="main"></div>
    </div>
    <div class="extra"></div>
</div>
<div id="ft"></div>

最终的CSS实现请看这里 。请仔细阅读Ryan的原文,可以发现负边距能解决两栏布局中文档结构的问题(main 可以放在sub 前面)。但对于三栏布局,Ryan给出的解决方案需要添加额外的包裹层,对DOM结构也依旧存在依赖关系。

这个方法的最大价值是:开启了负边距的神奇大门,让布局的实现思路立刻活跃了起来。

圣杯布局

2006年,Matthew Levine开始寻找布局圣杯:In Search of the Holy Grail . 这是一篇让人赞叹振奋的文章。Matthew灵活运用容器的内边距、浮动元素的负边距和相对定位,接近完美的实现了三栏布局。DOM结构也很好,无需额外标签。但是,我们来看看多达27页的评论吧。圣杯布局最令人头疼的是:在IE6下,左栏经常会神奇消失!!! (比如将IE6的窗口高度拖小点)评论中还反馈在IE7下也存在不少问题(我测试后,发现在IE7正式版下没问题,评论中的IE7可能是beta版)。另外在Chrome下表现也有点诡异,需要小小hack. 还有那繁琐的padding, margin, left, right 计算,时刻需要一颗清晰的大脑,喝点小酒就彻底晕了……

这里还有篇文章专门分析了圣杯布局在IE6下的Bug: Jump on hover in Ala’s Holy Grail layout .(万恶的IE6啊,浪费了我们多少宝贵的时间)

2008年11月4日补充:这里有一个改进版的圣杯布局 ,解决了所有问题,缺点是包裹层太多,唉。

总之:这是一个很美妙的布局,但在IE6尚未退出历史舞台的当今,圣杯布局可能并不是我们真正要找的圣杯。

伪绝对定位布局

聪明的同行们对完美布局的追求孜孜不倦。2008年我们迎来了奥运。Eric Sol 给奥运的献礼是一个聪明的布局尝试:Faux Absolute Positioning .

这个布局思路很简单:先相对定位到最右边,再用margin-left 移过来。关于这个布局,曾经引发了淘宝UED内部的热烈讨论 。若干月后,我和明城 在不同的项目中采用了这一方法,结果发现在ie下,某些页面会闪屏(页面加载时能看见左移)。当时项目紧,没细究,上周想重现却怎么也重现不了(明城说页面非常复杂的时候会闪屏,但具体原因没找出来)。今天看原文的评论,有人指出在IE6下,设置背景图会导致这个布局彻底完蛋

仔细想来,这个布局最让人担心的是:为什么一开始要将所有itemleft: 100% ? 这个太邪恶了,让人不放心。

“借尸还魂”的Table布局

乍一看,这个布局很雷人:基于display:table的CSS布局 。作者作了解释:在css里使用table-cell 之类的声明,仅是声明渲染方式,并不影响HTML文档中的语义。从这个角度讲,这种布局方式的确不错,而且很容易就可以做到等高,也不用考虑清除浮动等扰人的问题。

但是,又是IE成了绊脚石。在IE中,这个布局需要IE8才支持。不过,即便所有浏览器都支持了,我为什么老觉得有点“借尸还魂”的感觉?

更多

布局世界精彩纷呈,下面这些文章也非常有影响力:

  • Eric的Any-Order Columns , 对于固定宽度的三栏布局,Eric的方案非常优秀。
  • 大名鼎鼎的One True Layout , 里面很多总结性质的研究,非常值得一读。

小结

可以看出,有不少布局(比如圣杯布局、伪绝对定位布局、One True Layout等)都符合渐进增强的工作流程。圣杯布局和One True Layout里,都把negative margin 发挥到了极致(让我对浮动元素的负边距有了彻底的了解)。伪绝对定位布局则让人很不放心left: 100% ,用来解决原文中的问题感觉不错,但如果用来作为整个页面的布局,则有点邪恶。

 

转自岁月如歌:http://lifesinger.org/blog/2008/11/pe-layout-1/

分享到:
评论

相关推荐

    基于项目实践的循序渐进式教学法在单片机课程的应用与实践.pdf

    在探讨基于项目实践的循序渐进式教学法在单片机课程中的应用与实践时,文档首先明确单片机原理及应用是电子信息科学与技术专业的核心课程,这门课程的特点是实践性和应用性强。由于课程涵盖了硬件和软件两方面的知识...

    css书籍,布局大全和商业网站布局之道

    7. 浏览器兼容性:由于不同浏览器对CSS的支持程度不同,书中也会讨论如何处理浏览器之间的兼容性问题,包括使用前缀(prefixes)、条件注释(conditionals)和优雅降级(graceful degradation)或渐进增强(progressive ...

    大气精美网站div+css布局

    渐进增强则是在基础功能上逐步添加增强效果,确保所有浏览器都能正常显示。 3. 使用CSS Reset:通过重置浏览器默认样式,避免因不同浏览器默认样式差异导致的布局问题。 4. 工具辅助:借助Autoprefixer工具自动...

    JAVA 练习题 30章 循序渐进的30章练习 适合初学者

    本资料提供了30章循序渐进的Java练习题,旨在帮助初学者系统地学习和巩固Java编程技术。 第1章:基础语法 这一章涵盖了Java的基础语法,包括变量声明、数据类型(如整型、浮点型、字符型和布尔型)、运算符(如算术...

    别具光芒——CSS属性、浏览器兼容与网页布局

    还有,可以借助条件注释或Modernizr这样的JavaScript库来检测浏览器特性,实现优雅降级或渐进增强。 再者,网页布局是网页设计的关键环节。传统的布局方式有流体布局、固定布局和响应式布局。随着移动设备的普及,...

    用DIV仿iframe框架布局效果

    可以使用服务器端渲染或渐进式增强策略,使主要内容在不执行JS的情况下也能被爬虫抓取。 5. **响应式设计**: - 确保仿iframe的布局在不同屏幕尺寸下也能正常工作。使用媒体查询(`@media`)调整布局,使其在移动...

    HTML 第八章 Table局部布局与浏览器兼容性

    解决这个问题通常需要使用条件注释、渐进增强或者回退策略。对于表格,可能需要确保在不支持CSS3的浏览器中也能正常显示基本的表格结构。 在“产品列表页图片素材”和“注册页面图片素材”这两个文件中,可能包含了...

    CSS常用布局

    可以使用前缀(如 `-webkit-`)、特性检测或渐进增强策略来确保广泛兼容。 以上只是40个布局方案中的一部分,每个方案都可能涉及特定的技巧和最佳实践。通过学习这些案例,开发者可以更好地掌握CSS布局,为网站提供...

    精通CSS+DIV网页样式与布局[书中实例]

    8. **浏览器兼容性**:由于不同浏览器对CSS的支持程度不一,开发者需要了解如何处理兼容性问题,可能使用前缀(如`-webkit-`)、特性检测库(如Modernizr)或者使用渐进增强或优雅降级策略。 9. **实战案例**:书中...

    精通DIV+CSS网页样式布局

    5. **浏览器兼容性**:由于不同浏览器对CSS的支持程度不一,学习如何处理浏览器兼容性问题,使用工具如Autoprefixer自动添加浏览器前缀,以及理解渐进增强和优雅降级策略。 6. **性能优化**:讨论如何减少CSS体积,...

    premier-league-pwa:编码-构建渐进式Web应用程序(提交3)

    PWA的核心特性包括:渐进增强、响应式设计、离线工作、服务工作流、安全(通过HTTPS)以及能够被添加到用户的主屏幕。它们通过Service Worker、Web App Manifest等技术实现这些功能。 1. **Service Worker**:...

    jQuery倾斜分割布局幻灯片切换特效.zip

    可以使用渐进增强或优雅降级策略,确保在不支持这些特性的浏览器中也能正常显示内容。 总结: "jQuery倾斜分割布局幻灯片切换特效"是一个创新且引人注目的设计手法,它将动态效果与独特布局结合,提高了网页的视觉...

    第28章 CSS3多列布局

    因此,使用时需结合渐进增强或优雅降级策略。多列布局在处理大量文本时可能会影响性能,因此需要权衡使用场景。 9. **实际应用场景** 多列布局常用于报纸风格的网页设计、目录页面、产品展示等。合理运用多列布局...

    pwa-course-2021:渐进式Web应用课程2021

    1. **渐进增强**:PWA的核心理念是渐进增强,这意味着无论用户所使用的设备或浏览器如何,都能提供一个基础的网页体验,并逐步改善功能和性能。对于那些支持更先进特性的设备,PWA可以提供离线访问、推送通知和桌面...

    The.Responsive.Web

    包括学习如何进行响应式工作、移动优先设计理念、使用样式贴片(style tiles)、响应式用户体验设计模式、响应式布局以及如何在浏览器中使用CSS添加图形、利用Modernizr进行渐进式增强和过时技术控制以及为响应式...

    DivCss网页布局和高性能Web站点

    3. **渐进增强和优雅降级**:基础功能对所有浏览器都可用,高级功能则优先针对最新浏览器。 三、高性能Web站点构建 `构建高性能Web站点.pdf`可能涵盖了一些提高网站性能的关键点,例如: 1. **减少HTTP请求**:...

    渐进预算

    通过采用渐进增强的策略,该应用能够逐步适应不同的网络条件和设备能力,提供流畅且可靠的用户体验。下面我们将深入探讨这款应用的核心技术和实现细节。 首先,基础构建是使用HTML和CSS。HTML(超文本标记语言)是...

    响应式Web设计实践(英文)

    使用渐进增强和优雅降级策略可以帮助确保广泛兼容性。 10. **测试与调试**:使用模拟器、设备实验室或真实设备进行测试,以确保在不同设备和浏览器上都能正常工作。开发者工具如Chrome DevTools提供了检查和调整...

    Progressive-Web-conf:聚集组织渐进式Web Conf的兴趣

    1. **渐进增强**:PWA能够逐步适应不同的浏览器和设备,无论用户使用的设备或网络条件如何,都能提供良好的体验。 2. **离线工作**:通过Service Worker技术,PWA可以缓存关键资源,即使在无网络连接的情况下也能...

Global site tag (gtag.js) - Google Analytics