不同CSS布局实现与文字鼠标选择的可用性

一、文字选择的可用性

我们平时因为A原因或B原因,需要复制web页面上的文字内容。常见的操作就是按住鼠标,选中要复制的文字区域,抬起鼠标按键,目标区域的文字就选中了。

不知你知不知道,有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。

这么说吧,假设你在微博上看见一个名为“屌丝逆袭”的标题,但是,由于孤陋寡闻,不知道这个标题啥意思,于是想百度之,最快的方式就是选择→复制→搜索。结果,像中了邪,这几个文字TMD就是选不准,老把旁边的“萝莉御姐”一起选中了;然后,这个标题又是链接,不能双击选择!这么简单的一件事搞得这么折腾,想必哥你泡妹子的心情都没有了。

噢?你对这个假设表示怀疑。恩,看来我要拿点证据出来了。

正好我微博页面开着,几处点击找一找,啊,很快就有了。您可以试试微博右侧“换一换”几个文字,你能轻松选中吗?试试!
文字选中尴尬 张鑫旭-鑫空间-鑫生活

或是选中“设置分组”文字时,后面的些文字也莫名其妙一并带上了,为何呢?
文字选中区域不准确 张鑫旭-鑫空间-鑫生活

二、幕后操手:CSS

我们都知道,同一种布局的效果实现可以很很多很多中不同的实现方式。而这些不同的CSS布局实现方式就会影响到文字鼠标选择的可用性问题。

举个对于页面重构人员很基本很简单的例子,我们要实现左标题,右描述的布局。类似下截图:
布局示意截图

我们有一双手都数不过来的实现,但是,不同的实现,CSS消耗,扩展性,可维护性,以及可用性也是不一样的。这里,我们只讨论文字选择的可用性。

您可以狠狠地点击这里:CSS布局与文字的鼠标选择demo

进入demo,您会看到类似下图的效果:
demo页面效果截图 张鑫旭-鑫空间-鑫生活

虽然多个列表长相一样,但是却都是使用不同的方式实现的。您可以试着用鼠标选择各个列表左边标题文字以及右边的描述文字,就会看到,不同的CSS实现文字选择的范围,方向以及可选择性都是有差异的。

例如(FireFox浏览器下,文字密密麻麻,可以不用看,直接跳过):
第一列:左边的标题无论是向左方向选中文字还是右方向,都很容易连后面的描述文字一起选中;而后面的描述文字,情况复杂,如果点击位置有偏差,无法实现左→右的选中。如果点击区域再文字的area box中,则从左到右的选中很好选中;而从右到左的选中很容易选不中。
列表一左侧标题文字选中障碍 张鑫旭-鑫空间-鑫生活
第二列:左边的标题选择折腾,复杂,不细说,自己尝试即指;而右边的描述文字选择无障碍。
第三列:左边的标题如果鼠标按下位置偏差,文字压根就选不中;而右侧文字与第一列效果类似。
第四列:左边效果与第三列类似;而右边的描述文字选择无障碍。
第五列:左侧标题文字选择无障碍;右边则是麻烦货。
第六列:左侧标题文字选择无障碍;右侧描述文字选择进程会把左侧文字一起圈进去,不好选择;
第七列:左侧标题文字选择无障碍;右侧描述文字选择有轻微的方向障碍;

总之,你记住下面的结论就可以了。

  1. CSS布局与文字鼠标选择之间的关系相当复杂,例如,一个简单的position:relative属性的添加,会有相当大的选择差异。例如最后一个margin负值定位的例子,增加相对定位属性后(虽然效果没有一丁点差异),实际上左边标题文字只能块选了!
  2. 浮动是魔鬼。不仅仅在布局上,而且是目前文字鼠标选择可用性的罪魁祸首!仔细看上面文字选择障碍严重部分的CSS代码,都是由于设置了左浮动或是右浮动。这也是为何我一直提倡“无宽度、无图片、无浮动”的“鑫三无准则”。
  3. 绝对定位以及相对定位不是好鸟,尽量避免使用,因为证据表明,其也会影响文字的鼠标选择。
  4. 文字选择性最好的都是以自然方式呈现的文字。即以流体呈现的文字,没有影响其本身元素水平的CSS呈现。上面demo中,margin负值的定位就是最佳的实现方式,两端文字内容都是以自然呈现方式展示的。

三、快速结语

上面说了,文字的区域选择与CSS之间的关系相当复杂,CSS属性可以影响文字选择范围,方向,可选择性等等。而且,可以影响的CSS属性之多,如果没有花很多功夫研究的话,是较难理透的。因此,本文所说的一些结论估计只是常见的一小部分。不过嘛,本文目的就是抛砖引玉。一是让大家或多或少注意到这方面的可用性问题;二是让大家晓得,尽量避免使用浮动布局,避免使用绝对定位布局。有空多研究研究流体布局(flow layout),这可能是未来的王道啊!

行文匆忙,文中难免有表述不准确的地方欢迎指正。也欢迎各抒己见,内容补充,不甚感谢!

(本篇完)

分享到:

标签: , , , , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想高薪入职阿里? ×


发表评论(目前15 条评论)

  1. 杭州-小白说道:

    嗯.确实张大大厉害,不过在各个浏览器的差异甚大,木有完美的东东,要权衡利弊. – -!

  2. shane说道:

    在各个浏览器(包括版本)下试了下。。发现。这个实在差异甚大

  3. mihuhaidao说道:

    确实发现在采用margin负值的方法在IE6和IE7下选中不了。。

  4. bblue说道:

    不对啊,我在chrome下和lz说得情况很多不同啊,除了3,4,7列,其他木有问题啊

  5. Mr.liu说道:

    楼主有木有考虑过改善下博客评论区的选中背景~~

  6. yooly说道:

    有共鸣,很多时候会遇到这个问题,但没去理会为什么会这样!说得很好。

  7. 丿随风说道:

    文字选择确实很闹心。
    margin负值,在ie6、7中,左右文字只能选中一个吧

  8. 如家快捷说道:

    强 居然没换行。

  9. zbinlin说道:

    這個主要是選擇鏈接文字的問題。
    在 Opera 下可以很方便地選擇,而在 Firefox 下也可以通過腳本解決。

  10. ......说道:

    好像chrome下demo里七列的选中效果和LZ描述有偏差

  11. 小正说道:

    最近看了css3的 flexBox 弹性盒子模式布局,类似于流式布局。比较符合你说的“三无”原则。呵呵,也是我比较倾向的布局。只是不被ie6-ie9支持。这点很郁闷..

  12. 哀音说道:

    对于选中麻烦的直接
    -webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;

  13. 美国厨师说道:

    楼主,你的支付宝捐赠共勉,有人捐钱给你么?

  14. alex说道:

    lz 很厉害啊,文字选不中的效果确实经常碰到,没有了解过为什么。之前实现这样的效果也是float或者绝对定位,不过子元素都是span,看来浮动与定位确实有体验上的不好之处。 要了解流体布局咯。。