前端开发者学堂 - fedev.cn

    WAI-ARIA 无障碍Web规范

    无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和"间接访问"。无障碍设计可以理解为 "能够访问", 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web。然后, 研究和开发无障碍设计对每个人都带来了好处。无障碍设计不应该和可用性混淆。 大多数情况下, 可用性是指产品(如: 设备, 服务, 或者环境)能在特定的环境下被特定的用户使用, 来高效地实现制定目标。无障碍设计和通用性设计是息息相关的。通用型设计是指产品的创造过程中, 产品对人们是可用的, 并尽可能最大范围覆盖各能力范围内的人群和各种情形下的操作, 即对所有人是可访问的(无论他们访问 Web 是否有障碍)。

    媒体查询--PX,EM or REM?

    你是否思考过对于媒体查询你应该使用px, em还是rem?我也产生过同样的问题,并且目前为止,我还是没有明确的答案。一年之前,我第一次创建 mappy-breakpoint 仓库时,我一直使用rem单位。之后一次和Sam Richard谈话之后,我开始转向使用em,因为我并没有发现两者之间的区别。关于媒体查询,除了emrem,常用单位还有像素。自从现在所有浏览器存在像素缩放问题,我想知道像素是否还可以用于媒体查询。这周,我打算弄明白两者之间的区别。

    发布于

    【转载】Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

    发布于

    CSS秘密花园: 环形文本

    尽管这不是一个常见的文本效果,有时候有一些比较短的文本需要遵循环形路径显示。这种时候,CSS就弃我们而去了。没有任何CSS属性或功能可以完成这个效果,我们唯一想到的CSS解决方案都非常麻烦,所以我们也就只是想想而已。真的没有什么办法可以实现这样的样式吗?除了使用图像,除了不影响我们文本的整体美观?

    发布于

    CSS秘密花园: 逼真的文本效果

    有时候,某些文本处理在Web上变得非常普遍。例如,活版文本、悬停模糊文本、凸出的(伪3D)文本等等。这些效果通常是由精心打造的文本阴影的效果、还有我们眼睛的工作原理来组合而成的,很多在一定程度上都是基于视觉错位的。一旦你知道这些效果涉及到的技巧,你就会发现这其实是很容易完成的,但是通过开发工具来逆向工程却总是不那么容易的。本节就是要创建这样的效果,这样你就不会再疑惑说,“这样的效果到底是怎么完成的?”

    发布于

    CSS秘密花园: 自定义下划线

    设计师是很挑剔的一群人。我们总是很喜欢自定义一些东西,然后精心设计一番,使得它们和我们想要的视觉效果非常相近,让我们的设计更直观也更易于使用。毕竟,默认的东西很少有我们觉得不错的。文本下划线就是我们非常喜欢去自定义的东西之一。尽管默认的用起来不错,可是给人一种干扰的感觉,况且它在每一个浏览器中渲染的结果都不一样。尽管文本下划线从web开始普及以来,一直伴随着我们,我们从来没有真正找到更多自定义它们的方式。

    发布于

    CSS秘密花园: 花式的&符号

    几个漂亮的&符号,在大多数电脑上都有;从左到右分别是:Baskerville, Goudy Old Style, Garamond, Palatino(全部都是斜体)。你会在印刷文献中发现很多有不显眼的&符号。设计良好的&符号是非常优雅的,其它的符号都很少能像它这样。整个网站都在致力于寻找有最好看&符号的字体。但是,拥有最好看&符号的字体,却往往不是那个你希望应用于其它文本的字体。毕竟,真正漂亮和优雅的标题效果,总是一个好的无衬线字体和一个漂亮而且复杂的衬线符号的结合。