《CSS蝉意花园读书精记》(基础篇---------上.资料篇2)
有一周没有发贴拉,这一次资料篇一共有两个部分字符转码和Accesskeys,字符转码在这里提供一个表，表上面是常用的字符的转码,而Accesskeys上就是引领大家做一个使用Accesskeys的menu,还谈论表现Accesskeys怎样让用户感觉体验更好.其实都这些内容都比较简单,但要很多事情都需要去关注细节,深入一点这样才能很好的领悟其中的真谛.
《CSS蝉意花园读书精记》基础篇---------上的资料篇还一篇"3",之后是基础篇下,讨论CSS蝉意花园的页面设计.
谢谢关注....有做得不好之处.请指正..谢谢
一：转意字符
下面的内容你可以访问 The Ontario ，在这里你可以得到使用Accesskeys的事例，我想你就明白它的用途拉，之后你就将最后的那代码复制到你的页面上，运行一下，并认真阅读一下CSS，我想就会很好的使用啦！
二 Accesskeys: Unlocking Hidden Navigation
(Link:链接)
原文
谁在使用你的页面?人们使用鼠标点击链接时匮乏灵活性,还有使用tab导行菜单缓慢的使用用(tabbing).W3C引入accesskey属性允许用户选择适当的键盘上的关键字来导行详细链接.
Accesskeys 还能在人们不方便使用鼠标控制和点击链接时候不被使用,有经验用户从桌面应用程序中学习到使用键盘上的"short-cuts "来保存文件,打开新窗口,或拷贝,粘贴等,而现在我们要分配置accesskeys到菜单选项,给页面添加热键(Hot-key),让我们更少的使用鼠标移动和点击.可是这样的解决方案很大程度上没被充分利用,因为它有两个主要的缺点.
第一个问题是浏览者浏览您的页面时并不知道你已经在你页面连结(link)上的分配accesskey属性.即使他们有所察觉有accesskey,或让他们去猜测你是否已经为页面创建accesskey.在文章中我们将看到怎样解决这个问题,使你能很清楚的让你的页面浏览者知道页面上accesskeys与你的连结相一致.
另一个更深入的问题是已经使用accesskeys,但遇到个别的浏览器不支持accesskeys怎么办?.(See “Accesskey Denied” for a list of non-accesskey browsers.) 我们在这里不能解决这个问题,但还是要指出,希望鼓励浏览器制造商能改进他们来支持这个Web标准.
Command and Control
Windows用户能导航accesskey的特性是用ALT+Accesskey.在Mac上使用CTRL+Accesskey(非命令+Accesskey,是不受欢迎的).在Internet Explorer用户还需要点击"Enter"来激活连结.
Windows用户将发现到accessskeys是优先的应用程序命令,它能被键盘上键入的菜单快捷键所访问(the menu shortcut key )(就是使用ALT)和你想找到的菜单选项中相应字母相对应.
Public Access
accesskey是一个很有用的特性,但大部分浏览器匮乏一个的字母分配标准(指定accesskey没有统一的标准).用户将要查看页面源代码来看字母分配.但制作一个页面要达到和用户的友好的意图是失败的.如果人们不知道accesskeys不使用在链接上.他们的价值也不大哦.
最直接方式是让用户知道acccesskeys是有用的并且和链接相一致就是创建一个帮助或引导页面.这样的方法需要用户浏览这个页面并学习怎样使用accesskeys 在你的页面上工作.任何一个不喜欢读指南人可能就会不理睬你的页面哦.除非他们是有规律的浏览你的页面,还有就是很多用户在浏览你的页面后几忘记你accesskeys的分配了.
accesskey能明确的显示并公布在你的每一个页面链接上.这是非常好的实现,不需要用户去查看参考目录就能使用.可是,它促使你改变你的页面上内容和重新设计你的页面的提供信息.显示accesskeys分配并不会对每个人相符合和有用.并且一些人并不喜欢将它发布在页面上.
Link ’Em Up
带给我们考虑并不令人厌恶但的怎样暗示提供accesskey信息的方法拉.之前accesskey的特性与桌面应用程序的键盘命令相类似,我们注意到我们需要其他的更好的想法来在页面上显示信息给用户.
菜单在应用程序中的每一个项(Item)常常是以单字母下划线来与键盘快捷键相符合的,之前很多用户熟悉这样的转换,我们使用它来套用accesskey为每一个连结的分配.先下划线接着一个单字母,我们按这样的方式设置我们的链接的accesskey属性,用户就知道每个链接相对应的accesskeys了.
但有一个下划线标记,它不符合HTML4.0标准,所以应该不再使用,取而代之的是使用链接的第一个字母做为标记:
<a href="http://www.designmeme.com/"accesskey="h"><em>H</em>ome</a>我们使用CSS contextual选择器(contextual selector就是在一个tag中再定义一个tag;就是嵌套的标记;)定义链接文本上一个带下划线的强调文字,其他文字上就没有下划线,我们还能设置强调文本的样式和宽度,除加下划线以外,其余的链接也也同样处理.一个rollover(这就是鼠标经过时)效果来给整个链接增加下划线(这时候整个就有下划线).如下:
a {
}
text-decoration: none;
}a em {font-style: normal;font-weight: normal;text-decoration: underline; }a:hover {text-decoration: underline; }这个技术是很容易实现的.可以工作于现在的流行的浏览器上并且允许你使用下划线在任何链接内的字母上指出accesskey属性,可是它需要添加<em>标记在所有需要使用accesskey的链接中.(有一点不足,接着像下看)
(Jeff McCartney suggested that I consider underlined characters to indicate accesskeys, and has since implemented this technique for The Ontario Ministry of Energy.())
First Impressions
下一个方法我们将使用CSS2 pseudo-element去指定我们的链接的第一个字母上添加下划线,剩余的文字就不需要哦,这个方法不需要改变文档的实际内容允许你保持样式和内容的分割.
a { text-decoration: none;}a:hover { text-decoration: underline;}a:first-letter { text-decoration: underline;}:first-letter pseudo-element 控制首字母的样式block元素,之前链接正常状态inline元素,不能适用于首页面上任意有规律的链接的字母,只是将链接的首字母加上下划并将display设置为block;
当在页面上其余的内容并不要求动人的效果我们可以自己定义class给菜单选项的首字母添加下划线.我们将使用这个代码在本文章中构建一个menu的css.
.menu a {display: block;width: 150px; }Web Browser Blues
Netscape 7支持:first-;letter pseudo-element应用于链接非常好,但InternetExplorer的支持是有一点bugs(IE 7是支持的),工作时候,它会立即应用于链接元素,没有自定义classes或IDs的被使用.此外,如应用于链接元素,使用后感觉Internet Explorer的界面是使用:hover pseudo-class去创建rollover效果的.
困惑,说也奇怪,确定有一个链接的样式里面自定义class,class某处包含一个你自己定义的样式表,如下面:
.content a {color: #f30;background-color: transparent; }
实际属性你设置似乎没有什么问题,完全按照规定为链接内部设置自定义class似乎足够修复这个bug,如果你的样式表没有通常包含遵循这个规则,那你只需要添加额外的代码修复这个bug,
ie_fix a { text-decoration: none; } 使用first-letter pseudo-element在一个链接元素没有工作在Oprea和Gecko-based浏览器上过.在这些浏览器中你的链接的first-letter不能添加下划线,但我们能使用其他的技术来显示accesskey的信息给用户.
Pseudo Generation
在CSS2中的:before和:after pseudo-element能创建内容并插入如文档中.这个被创建的内容中包含counters,embeddable objects,images和strings of text.而这里的文本能被一个内容或更多的父类元素的属性动态产生.当应用于一个链接属性将包含URL,title,语言,link-type和我们所谈论到的accesskey.
这个代码中圆扩号里面立即将插入accesskey分配,之后在页面上每一个链接没有改变文档内容:
a:after {content: " [" attr(accesskey) "] "; }下面的事例是本文上面所谈到内容详细实践（要在Mozilla中访问！）：
显示这个信息比产生accesskey更有用,但我们之前提到,很多人并不愿意一直在屏幕上显示这个信息,幸运的是显示这些信息时我给用户控制这一切.
Selective Display
我们能通过使用样式表选择器去改变页面上CSS文件来实现有选择性的显示内容.人们将有可选择决定样式,来达到添加选择权,包括accesskey属性的显示在每一个链接后面.如果他们不要在屏幕上显示这些信息,他们有选择另一个不显示用CSS产生内容的样式表.这样的功能为使用accesskey特性将对用户使用很有利.样式表就不管他们怎样使用
也面查看.
第二方法是为有选择的宣誓accesskey信息,去是一个contextual selector,用这个contextual selector来只产生用户rollsover这个链接的内容.如:after pseudo-element是添加:hover pseudo-class 中的选择器中再应用于链接元素.
我们考虑用怎样的方法去改进对键盘导航的支持,所以我们还将使用:focus pseudo-class,,当用户使用制表符(tabs)进入时要改变链接的外观,要胜于他们的鼠标移动进入它.我们能设置CSS属性:hover和:focus同时按照使用逗号组和他们两个contextual selectors :
a:hover:after, a:focus:after {content: " [" attr(accesskey) "] "; }
当产生accesskey的文本显示时链接上文本和周围元素会因使用tab或 rolledover引起的长度改变,这个是一个不令人喜欢的视觉效果,改变页面上文本的排成一行一行的形式.显示accesskey信息期间当链接元素已经固定宽度时使用一个rollover工作最好,就如菜单选项案例样.
CSS Menu with Accesskey Info
我们将两个CSS 技术我么已经转换成一个有accesskey信息显示的菜单,你能查阅 CSS Design:Taming Lists为有更多样式表创建Bulleted lists的详细用法.一些浏览器如internet Explorer将显示这些菜单项的首字母下划线.其他的浏览器如 Mozilla当菜单项是rolledover或focused时候显示的是accesskey信息.一些浏览妻如Safari将已两种方式显示方式.所有的浏览器都支持这个特性,使用accesskeys时就能不管以什么方式将它显示出来.
下面是标记:
<div id="menu"><ul><li><a href="/" accesskey="h">Home</a></li><li><a href="/articles/" accesskey="p">Previous</a></li><li><a href="/live/" accesskey="n">News</a></li><li><a href="/discuss/accesskeys/" accesskey="f">Forum</a></li></ul></div>
我们将我们的list用一个ID为"menu"的DIV来显示,我们的样式规则来使用ID来应用于list中,在也面上的其他list将不受影响.
a { text-decoration: none;}a:hover { text-decoration: underline;}a:first-letter { text-decoration: underline;} .ie_fix a { text-decoration: none; } #menu {width: 8em;border: 1px solid #000;border-top: none;padding: 0;color: #333; }#menu ul {list-style: none;margin: 0;padding: 0;border: none; } #menu li {border-top: 1px solid #333;margin: 0; }#menu li a {color: #003366;background-color: #fff;display: block;padding: 5px 5px 5px 0.5em;text-decoration: none;width: 100%; }html>body #menu li a {width: auto; } #menu li a:hover {background-color: #003366;color: #fff; } #menu li a:hover:after, #menu li a:focus:after {content: " [" attr(accesskey) "] "; }将上面的代码复制到你的HTML页面上就可以得到效果。
{Ed. Note: Since this article was first published, a few color and size values have been changed to better match the ALA 3.0 template.}
Accesskey Denied
accesskey 属性现在支持的浏览器有:
Internet Explorer 4+ (Windows) 5+ (Mac)
Mozilla (Windows + Linux)
Netscape 6+ (Windows)
Opera 7 (Windows + Linux)
其他的浏览器包括 Camino, Galeon, Konqueror, Omniweb, and Safari 及其它的支持这个web标准,但这个标准已经包含在W3C被推存的特性.
Moving Forward
提供支持键盘导航使也面更容易被每一个人使用.浏览器厂商能帮助确保产品能最好的支持accesskey属性.我希望这些建议将鼓励你开始体验accesskeys.
补充
自己站上的东西千万不要和IE等的工具的快捷键发生冲突。这里列举一下默认的组合：IE: A(favorites) D(address) E(edit) F(file) H(help) T(tools) V(view) FireFox：B(bookmark) D(address) E(edit) F(file) G(goto) H(help) T(tools) V(view) 希望有在网页使用accesskey 的朋友不要选择与浏览器的有冲突的键。
还有就是在Windows 上请以 Alt+Shift+Key 来使用，Unix 则是 Ctrl+Shift+key，在Opera的是按下Shift+Esc 激活accesskey面板。
-----------------works guo感谢关注，记得每天看“day by day Microsoft News vs Google News”
浙公网安备 33010602011771号