一、文字選擇的可用性
我們平時因為A原因或B原因,需要復制web頁面上的文字內容。常見的操作就是按住鼠標,選中要復制的文字區域,抬起鼠標按鍵,目標區域的文字就選中了。
不知你知不知道,有些看山去OK的CSS布局實際影響了頁面上文字復制的可用性。
這么說吧,假設你在微博上看見一個名為“屌絲逆襲”的標題,但是,由于孤陋寡聞,不知道這個標題啥意思,于是想百度之,最快的方式就是選擇→復制→搜索。結果,像中了邪,這幾個文字TMD就是選不準,老把旁邊的“蘿莉御姐”一起選中了;然后,這個標題又是鏈接,不能雙擊選擇!這么簡單的一件事搞得這么折騰,想必哥你泡妹子的心情都沒有了。
噢?你對這個假設表示懷疑。恩,看來我要拿點證據出來了。
正好我微博頁面開著,幾處點擊找一找,啊,很快就有了。您可以試試微博右側“換一換”幾個文字,你能輕松選中嗎?試試!
或是選中“設置分組”文字時,后面的些文字也莫名其妙一并帶上了,為何呢?
二、幕后操手:CSS
我們都知道,同一種布局的效果實現可以很很多很多中不同的實現方式。而這些不同的CSS布局實現方式就會影響到文字鼠標選擇的可用性問題。
舉個對于頁面重構人員很基本很簡單的例子,我們要實現左標題,右描述的布局。類似下截圖:
我們有一雙手都數不過來的實現,但是,不同的實現,CSS消耗,擴展性,可維護性,以及可用性也是不一樣的。這里,我們只討論文字選擇的可用性。
您可以狠狠地點擊這里:CSS布局與文字的鼠標選擇demo
進入demo,您會看到類似下圖的效果:http://demo.Vevb.com/js/2012/css-layout-text-mouse/
雖然多個列表長相一樣,但是卻都是使用不同的方式實現的。您可以試著用鼠標選擇各個列表左邊標題文字以及右邊的描述文字,就會看到,不同的CSS實現文字選擇的范圍,方向以及可選擇性都是有差異的。
新聞熱點
疑難解答