不一样CSS合理布局完成与文本电脑鼠标挑选的能

2020-10-24 23:06 jianzhan

1、文本挑选的能用性

大家平常由于A缘故或B缘故,必须拷贝web网页页面上的文本內容。普遍的实际操作便是按住电脑鼠标,选定要拷贝的文本地区,抬起电脑鼠标功能键,总体目标地区的文本就选定了。

不知道你知不知道道,一些看山去OK的CSS合理布局具体危害了网页页面上文本拷贝的能用性。

这么说吧,假定你在新浪微博上看见1个名为“屌丝逆袭”的题目,可是,因为少见多怪,不知道道这个题目啥意思,因而想百度搜索之,最快的方法便是挑选→拷贝→检索。結果,像中了邪,这几个文本TMD便是选禁止,老把周围的“萝莉御姐”1起选定了;随后,这个题目又是连接,不可以双击鼠标挑选!这么简易的1件事搞得这么折腾,想必哥你泡妹子的情绪都沒有了。

噢?你对这个假定表明怀疑。恩,来看我要拿点直接证据出来了。

恰好我新浪微博网页页面开着,几处点一下找1找,啊,很快就有了。您能够试试新浪微博右边“换1换”几个文本,你能轻轻松松选定吗?试试!

或是选定“设定排序”文本时,后边的些文本也无缘无故1并带到了,为什么呢?

2、幕后操手:CSS

大家都了解,同1种合理布局的实际效果完成能够很许多许多中不一样的完成方法。而这些不一样的CSS合理布局完成方法就会危害到文本电脑鼠标挑选的能用性难题。

举个针对网页页面重构人员很基础很简易的事例,大家要完成左题目,右叙述的合理布局。相近下截图:

大家有1双手都数但是来的完成,可是,不一样的完成,CSS耗费,拓展性,可维护保养性,和能用性也是不1样的。这里,大家只探讨文本挑选的能用性。

您能够狠狠地址击这里:CSS合理布局与文本的电脑鼠标挑选demo

进到demo,您会看到相近下图的实际效果:http://demo.jb51.net/js/2012/css-layout-text-mouse/

尽管好几个目录相貌1样,可是却全是应用不一样的方法完成的。您能够试着用电脑鼠标挑选各个目录左侧题目文本和右侧的叙述文本,就会看到,不一样的CSS完成文本挑选的范畴,方位和可挑选性全是有差别的。

比如(FireFox访问器下,文本一颗颗,能够无需看,立即绕过):
第1列:左侧的题目不管是向左方位选定文本還是右方位,都很非常容易连后边的叙述文本1起选定;然后面的叙述文本,状况繁杂,假如点一下部位有误差,没法完成左→右的选定。假如点一下地区再文本的area box中,则从左到右的选定很好选定;而从右到左的选定很非常容易选没中。

第2列:左侧的题目挑选折腾,繁杂,不细说,自身尝试即指;而右侧的叙述文本挑选无阻碍。
第3列:左侧的题目假如电脑鼠标按下部位误差,文本根本就选没中;而右边文本与第1列实际效果相近。
第4列:左侧实际效果与第3列相近;而右侧的叙述文本挑选无阻碍。
第5列:左边题目文本挑选无阻碍;右侧则是不便货。
第6列:左边题目文本挑选无阻碍;右边叙述文本挑选过程会把左边文本1起圈进去,不太好挑选;
第7列:左边题目文本挑选无阻碍;右边叙述文本挑选有轻度的方位阻碍;

总而言之,你记牢下面的结果便可以了。

    CSS合理布局与文本电脑鼠标挑选之间的关联非常繁杂,比如,1个简易的position:relative特性的加上,会有非常大的挑选差别。比如最终1个margin负值精准定位的事例,提升相对性精准定位特性后(尽管实际效果沒有1丁点差别),具体上左侧题目文本只能块选了!波动是魔鬼。不仅在合理布局上,并且是现阶段文本电脑鼠标挑选能用性的元凶!细心看上面文本挑选阻碍比较严重一部分的CSS编码,全是因为设定了左波动或是右波动。这也是为什么我1直倡导“无宽度、无照片、无波动”的“鑫3无规则”。肯定精准定位和相对性精准定位并不是好鸟,尽可能防止应用,由于直接证据说明,其也会危害文本的电脑鼠标挑选。文本挑选性最好是的全是以当然方法展现的文本。即以流体展现的文本,沒有危害其自身元素水平的CSS展现。上面demo中,margin负值的精准定位便是最好的完成方法,两边文本內容全是以当然展现方法展现的。

3、迅速结语

上面说了,文本的地区挑选与CSS之间的关联非常繁杂,CSS特性能够危害文本挑选范畴,方位,可挑选性这些。并且,能够危害的CSS特性之多,假如沒有花许多时间科学研究的话,是较难理透的。因而,本文所说的1些结果估算只是普遍的1小一部分。但是嘛,本文目地便是毛遂自荐。1是让大伙儿或多或少留意到这层面的能用性难题;2是让大伙儿知道,尽可能防止应用波动合理布局,防止应用肯定精准定位合理布局。有时间多科学研究科学研究流体合理布局(flow layout),这将会是将来的王道啊!

写作急匆匆,文中免不了有描述禁止确的地区欢迎纠正。也欢迎踊跃发言,內容填补,不甚谢谢!