文章关键字 ‘focus’

实力科普:为什么浮层或弹框一定要有叉叉关闭按钮?

2018年07月14日,星期六

之前自己发了个安利LuLu UI组件的微博,其中有位同行对于弹框组件提了这么一个问题:大佬,这种info类型的,为什么还要带个x?明明有确定按钮,似乎这个叉叉按钮去掉也没什么事,是不是很多人有类似的疑问?我很早之前就有过这样的想法,而且还付诸实践,直接把几个提示框右上角关闭按钮去掉,好干净好清爽,而且功能也没什么问题,还洋洋得意。后来,不断学习和积累,才发现当初的我对交互设计和用户体验的认知还很浅薄。

阅读全文…

CSS :focus-within伪类选择器及纯CSS下拉等应用举例

2018年01月21日,星期日

:focus-within伪类原本设计的作用是原生表单元素focus时候,祖先<form>元素可以也有状态变化。

但是在我看来,:focus-within功能之强悍,远远不是仅仅和祖先<form>元素玩过家家这么简单。

理论上,只要页面上任意一个元素focus,通过:focus-within就能对页面上任意的元素进行样式控制…

阅读全文…

借助HTML5 details,summary无JS实现各种交互效果

2018年01月15日,星期一

HTML5 details, summary这两个标签元素内置交互行为,我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然,前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。

阅读全文…

HTML accesskey属性与web自定义键盘快捷访问

2017年05月15日,星期一

可能很多小伙伴都不知道,我们只要在HTML代码上设置几个属性,就可以让浏览器支持我们自定义的快捷访问方式,而这个神奇的属性就是本文要介绍的,accesskey属性。

阅读全文…

HTML tabindex属性与web网页键盘无障碍访问

2017年05月13日,星期六

HTML虽然入门简单,但是,要想日后深入,却要花费非常大量的时间,因为一些看似非常简单的属性,实际上牵扯到另外一个完整领域的知识。例如本文要介绍的这属性tabindex,与web网页无障碍访问息息相关,而且是键盘访问领域的。

这些属性不仅可以触发浏览器层面的行为,本身对HTML的元素的交互特性甚至UI表现都会有影响。

阅读全文…

CSS :focus伪类JS focus事件提高网站键盘可访问性

2017年04月23日,星期日

所谓“键盘可访问性”,指的是用户只使用键盘访问网站的能力。例如,我们的iMac鼠标没电了,或者鼠标坏了,或者在智能电视中访问我们的网站,此时就只能依赖于键盘访问了。

我们只要平时注意HTML语义化,例如按钮不要使用<span><div>等标签,不要重置outline,基本上键盘可访问性就已经及格了。

若想再进一步提供,就需要看看本文的内容了……

阅读全文…

简单了解HTML5中的Web Notification桌面通知

2016年07月6日,星期三

通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。

在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.title的值。

然而,这种提示有个致命的缺陷,就是用户的浏览器要一直是张开的。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息。

不过不要担心,Web Notification就可以很好地解决上面的痛点…

阅读全文…

小卖弄:纯CSS实现的outline切换transition动画效果

2013年11月13日,星期三

我记得有个版本的迅雷软件,会发现focus文本框时候,其外发光的外挂会跟着动画移动。据说这一系列N动画交互引擎的维护成本还是挺高的。
今天,偶然看到一个名叫Nikita Vasilyev的兄弟在web页面上折腾了个类似效果。其是JS实现的,我习惯性就想,可不可以CSS实现呢,一番折腾,发现,竟然……

阅读全文…

span与a元素的键盘聚焦性以及键盘点击性研究

2013年02月20日,星期三

我们平时涉及点击交互事件的时候,都是使用的a元素或者button元素,原因是可以相应键盘focus效果以及回车触发点击事件,这是众所周知的。
但是,可能存在一些特殊情况,我们需要使用默认没有键盘可访问性的元素,例如span元素,我们可以通过一定的设置支持键盘的可访问性,这是不为所知的,也是本文的重点所在。

阅读全文…

jQuery powerFloat万能浮动层下拉层插件

2010年12月16日,星期四

jQuery powerFloat万能浮动层下拉层插件

本文就是介绍自己最近一直在整的一款jQuery插件,名为powerFloat,中文名为万能浮动层插件。顾名思意就是可以实现基本上一切与某元素有位置关系的浮动效果。插件虽然强大,但是考虑到API的精炼,虽然制定了不少特殊的规则,所以此插件在学习成本上比一般的插件要高一点。这也是为何本文的内容会比较长的原因。其他就不多说了,虽然王有婆卖瓜的味道,但是我还是要说这个插件还是挺不错的。如果您对其中的规则都熟悉的话,会对您开发制作页面有很大的帮助的。主要是省掉了很多的功夫。

阅读全文…