CSS的leading-trim给排版带来的变化

今天要和大家聊的leading-trim既是一个简单的属性,但又是一个复杂的体系。为什么这么说呢?如果我们从CSS属性的角度出发,那他是一个简单的属性,我们只需要知道他有哪几个值,每个值的作用是什么,这样就有实现需要的效果。如果我们从排版的角度出发,那他又是一个复杂的体系,因为要彻底的掌握他们,我们需要掌握的东西太多,有设计方面的,有文字排版方面的,也有CSS的其他属性等。但是,leading-trim的确能帮助我们Web开发者解决一些排版上的烦恼,特别是行与行间距方面的烦恼。如果你对这方面感兴趣的话,欢迎继续往下阅读。

A11Y 101: 构建可访问性React应用的技巧

众所周之,React目前是前端领域最为流行的JavaScript框架之一,很多Web开发都是基于React进行Web开发。但据 WebAIM Million统计分析可得知“使用React框架开发的Web应用或Web页面就可访问性方面而言,其错误要比一般的主页多出5.7%”。而且在社区中普遍认为,基于React开发的Web应用对于Web可访问性本来就差,而且开发者无法很好的基于React框架开发出具有可访问性的Web应用。事实上这是一种错误的认知,基于React能不能开发出具有可访问性的Web应用和React本身并没有太多的关系,因为开发一个具有可访问性的Web应用更多的是和HTML和WAI-ARIA有着紧密的关联。换句说,基于React开发具有可访问性的Web应用,应该注意些什么,以及如何更好的开发更具可访问性的Web应用。这是今天要和大家一起聊的话题。

聊聊aria-label、aria-labelledby和aria-describedby

近一年来一直以来都在致力让手淘互动项目更有温度,虽然借助自己所掌握的有关于A11Y(Web可访问性)相关的理论知识,让互动项目更具可访问性,但其中有很多细节还是有待于完善,特别是焦点冗余部分,更是令我感到头痛。为了优化这方面的细节,我尝试着通过 WAI-ARIAaria-labelaria-labelledbyaria-describedby 属性来进行优化,却事与愿违,而且这几个属性一直令我感到困惑。为了彻底的能搞清楚这几个属性,我打算花一些时间来和大家一起探讨它们。如果你对这几个属性感兴趣的话,请继续往下阅读。

如何构建有温度的互动项目

最近一直在思考一个问题:“在互动团队这么多年了,什么样的互动项目是有温度的呢?又应该如何构建有温度的互动项目呢”?想了很久,接下来以我自己角度的理解来尝试着回答,如果回答不对之处,还请路过的大婶拍砖指正。一直以来,自己都在探索Web可访问性相关的技术,不过大部分经验都是停留在PC端,而如今天是移动端的天下,所以想看看在移动端上如何来做Web可访问性。特别是在这样的互动项目(带有游戏化)又应该如何做Web可访问性?带着这样的问题,开始征程。但在2019年双11的时候,主互动多人PK项目上线了,公关部的同学看到支付宝的有无障碍方面的能力,希望我们的项目也能具备无障碍方面的能力。

图解CSS: CSS媒体查询

CSS媒体查询(CSS Media Queries)是CSS基本特性之一。它的作用就是让我们在相同的HTML基础上可以以不同的CSS实现适配各种终端的UI效果(比如,桌面端、iPad、双屏幕、折叠设备和移动手机等)。也就是说,我们可以为它们(不同的终端设备)使用相同的HTML,而不是为智能手机维护一个网站,为笔记本电脑、台式机维护另一个网站。但是它们是如何工作的,有哪些是你应该使用的呢?这就是我们接下来要和大家一起探讨的。

如何创建变形动效

变开动效他有一个专业名词,叫作 Morphing Animation,简单地说从一种图形平滑过渡到另一张图形,也就是把两个(或多个)图形在变化时间上作线性的内插。而这种动画效果在Web上的使用也越来越频繁,比如说,两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯,那么今天就来和大家聊聊如何创建变形动效的效果。

使用clip-path制作Web动效

clip-path是CSS属性之一,只不过很多同学都担心浏览器对他的兼容性,因此不怎么使用该属性。其实clip-path已经得到很好的支持,可以说现在主流浏览器对他的支持已经很好了。事实也是这样,就我自己而言,早在去年中开发的项目就已经有clip-path的身影了。在CSS的世界中,clip-path是一个很有意思的属性,他可以帮助我们绘制很多不同规则的图形(除了常见的圆形,椭圆形,矩形,三角形等),而且结合CSS的transitionanimation的话,clip-path能帮助我们实现一些很有意思的动画效果。接下来,就和大家聊聊使用clip-path制作Web动效的一些事情。

2020年CSS有哪些新特性

今天在Twitter上看到@argyleink伦敦(LondonCSS 2020)CSS四次活动中分享的一个话题《What's new with CSS?》。看了一下这个主题的PPT,里面有些新东西还是蛮有意思的,稍微整理一下和大家一起分享。如果你感兴趣的话,请继续往下阅读。

如何使用AVIF:新一代图像压缩格式

一直以来,我们熟悉的图片格式或者说到目前运用到Web页面或Web应用的图片格式主要是.jpg.png.gif.svg,以及.webp等,其实能运用到Web上的图片格式除了这些之外,还可以是JPEG 2000JPEG XR等。但最近社区有关于图片格式讨论最多的是AVIF图像,它将是新一代图像压缩格式,该格式(AVIF)图像质量与压缩文件大小的比率要优于我们熟悉的JPEG、PNG,甚至Webp图像格式。那么AVIF是什么样的图像呢?我们在Web开发中可以使用这种格式图像?如果可以,我们又将如何使用呢?今天这篇文章我们就来一起探讨这方面的知识,如果你感兴趣的话,请继续往下阅读。

可用于双屏幕和折叠屏的Web API

早在去年五月份就在《聊聊安卓折叠屏给交互设计和开发带来的变化》一文中和大家初次聊了安卓折叠屏给交互设计和开发将会带来的变化。随着一年多来的变化,在Web开发中也有相应的API专门服务于双屏幕和折叠屏幕,有关于这方面的介绍,前段时间在《可折叠Web可能会给我们带来的变化》一文中和大家有过初步的介绍。虽然这两篇文章从不同的时间段,不同的角度阐述了折叠屏中的开发模式,但我想很多同学还是会因此感到困惑,甚至不知道如何为多屏幕或折叠屏幕这样的设备做相应的Web开发。那么今天,在这篇文章中抛开概念,只聊一些Web API,即 可用于双屏幕和折叠屏的Web API。如果你感兴趣的话,请继续往下阅读。

页面

返回顶部