堂主 - WEB前端开发

专注于互联网 | WEB前端开发 | 以用户为中心的体验 | 家是圆心 | Code is art !

博文列表

如何使用CSS3 Media Queries技术创建wap网站

0 comments

原文地址:http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

堂主译文地址:http://www.osmn00.com/translation/224.html

转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~

印象里此文之前有人翻译过,但堂主也是在翻译完之后才得知的,所以此文之后在我的电脑里“躺”了5个月之久。直到今天翻移动硬盘寻找资料才发现还有这么个文章,想想毕竟是自己的劳动,同时也算是一个学习的笔记,于是发了出来。

----------------------------------- 分割线,以下是正文 ---------------------------------

CSS3给网页设计和开发人员带来的感受一直是痛并快乐着。一方面我们为CSS3所能解决的问题和展示的远景感到欣喜,另一方面却又为IE8对其支持的匮乏而惆怅。我们这篇文章里要谈论的就是IE8尚未支持的一部分CSS3技术。但是这并没什么太大关系,因为这个组件最有价值的应用环境——小型的如iPhone和Android设备等——已经可以很好的支持它了。

在这篇文章里我将说明如何使用一点点CSS3代码就能为你创建一个适应于iPhone浏览的网站版本。我们将看一个非常简单的例子,同时我也会讲述向我们自己的网站中添加一个适合移动小型设备浏览的样式表的过程来展示创造一个适合手机浏览的网站是多么的简单。

Media Queries

如果你曾经为一个网站创建过应用于打印设备的样式表,那么你不会对为特殊情况创建样式表的思路感到陌生。在CSS2中通过media types来应用这个功能。Media Types使你能够根据媒体的种类来应用样式,比如打印机和手持设备等。不幸的是,设备们从来都没对media types提供过什么好的支持,我们基本上看不到它有过什么应用。

CSS3继承并发扬了 Media Queries。不同于以往对设备型号的判断,这回它们将着眼点放在了设备自身的能力上,你可以使用它们来检查所有的事情,例如:

  • 浏览器的宽和高
  • 设备的宽和高
  • 屏幕是横款还是竖款的
  • 分辨率

如果用户拥有一款支持media queries的浏览器,那么我们就可以为某些特定的条件书写特别的CSS。比如,我们可以靠某些特征描述检测到用户使用的是智能手机,这样我们就可以为这种情况下的浏览提供一个特别的样式布局。来看一个例子,英国WEB开发者会议(UK web conference)dConstruct 刚刚推出了2010年集会的专题网站,其中便使用了media queries技术。

HTML5 大纲算法(HTML5 Outliner)

1 comments

堂主原创博文,转载请加本页链接,谢谢合作:

http://www.osmn00.com/rebuild/223.html

-------------------------------- 分割线 ----------------------------------

HTML大纲算法

HTML中存在着一个大纲算法,大纲可以为用户提供同一份页面的信息结构目录,就像之前我们在word和pdf文档中体验过的那样。

PDF文档中的目录结构:

pdf.gif

没有HTML5之前

HTML5之前的HTML4,唯一的方式是采用<h1> ~ <h6>元素来创建大纲。因为正常习惯下,<h1> ~ <h6>表示了从第一级到第六级的层级递减标题,而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲,不单单对于搜索引擎的优化,更是为借助于屏幕阅读器浏览器网页的盲人(或弱视力)用户提供了巨大的帮助。

在非采用HTML5对网页进行重构的情况下,合理正确的使用标题元素依然可以为文档赋予一个良好结构的大纲,比如目前堂主博客的首页模板:

gg-测试插件.png

这个首页采用了如下的结构:

新博客制作中!

0 comments

新年新气象,年前对博客的一些想法现在真的在付诸实施了。这回系统的梳理了俺对俺博客的需求,从功能性到界面展示。新的博客变化会很大,增加了一些功能,栏目划分有了很大变化,同时博客界面也应该会是我5年多博客生涯中自己最满意的一个。

目前新界面正在PSD设计阶段,新的博客前台将应用一些之前接触过但没系统结合过的手法:黄金分割、精确校准、同色系、HTML5、CSS3、无侵入脚本编程、优雅降级、侧重渲染效率、无障碍、支持移动设备等等。

同时这回也坚定了一下决心,不再温馨对待IE6用户。届时可能会对IE6用户展示一个无样式的结构文档或其他方式,来在保证基本内容可阅读的同时提示用户更换更现代的浏览器。

放出一些局部来显显: