Web技巧(17)

上周又断档一期了,这周不能再断了。这两天翻阅了@hj_chen在新家坡组织的Talk.css沙龙中的一些PPT,有些内容还是蛮有意思了。国外氛围真不错,其实国内也有不少同学在搞沙龙。前面社区活动也不少,这周参加了腾讯Live前端大会。下个月@裕波在成都举办第五届FEDay

CSS Houdini:深入理解CSS自定义属性

这几天一直在折腾CSS自定义属性,在《图解CSS:CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范,前者是CSS Custom Properties for Cascading Variables Module Level 1,后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容,但还是有较大差异的。而今天要和大家聊的是后者,即CSS Houdini中的CSS自定义属性。

图解CSS:CSS自定义属性

众所周之,CSS的维护一直是件不易的事情,特别是在构建大型Web站点或Web应用程序时,如果是多人协作的话难度更大。另外,由于CSS语言是一种声明式语言,而且不像其他语言有变量、条件和逻辑等特性,一直生存在程序语言鄙视链的最底层。也因为这个原因,社区中有了各种CSS处理器语言,比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性,比如变量、运算符和逻辑运算等。虽然CSS处理器给编写和维护CSS带来了一些便利,但还是需要额外的编译。不过处理器中的变量着实为我们带来很大的优势,也正因为如此,社区开始将CSS处理器中的变量引入到原生CSS中,经过多年的推进和演变才有了今天的CSS自定义属性。

CSS 自定义属性在Web组件中的应用

今天我们不聊什么是CSS自定义属性,而把重点放在CSS自定义属性在组件中怎么使用,她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中,我们主要会探讨CSS自定义属性为Web组件服务,以及怎么利用CSS自定义属性来维护组件。

Web技巧(16)

上个周末因为自己要写PPT而没来得急整理,所以又错过了一期。在这一期中,大部分内容将围绕着@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》文章中提到观点来展开。这里面的一些观点虽然不完全对,但还是有相应的参考价值,取舍由大家自己来决定。如果你在这方面也有相关的经验,也欢迎在下面的评论中分享。另外在后面会简单的整理几个最近觉得有意思的新东西。感兴趣的同学,请继续往下阅读。

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《React中CSS Modules的使用》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上,使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势,然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。

提示框组件的实现给我带来的思考和探索

Tooltips大家很多时候也将其称为提示框,另外还有一个视觉上长得和Tooltips的组件,常常称为Popovers(又名弹窗)。很多时候他们在视觉上长得非常类似,但是共交互上却有明显性的差异,特别是在PC端上:Tooltips一般是通过鼠标的悬浮来触发;Popovers一般是通过点击来触,但在移动端上两者都是通过点击来触发,因为移动端上悬浮的交互行为基本是不存在的。不过我们今天要聊的不是他们的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用各种不同的UI风格。

学一点Webpack配置:Webpack的优化

上一篇中花了14小节主要和大家一起探讨了Webpack 4.x的一些基本配置,比如初始化项目,添加各种Loader、React、Typescript、Sass、PostCSS、CSS Modules等配置、图片加载、字体加载以及各种代码检测的能力,比如ESLint的配置、Prettier的配置和StyleLint的配置。在接下来这个部分,主要和大家一起来探讨Webpack 4.x中的一些优化方面的配置。比如开发环境的优化、Webpack自身的优化、文件压缩和依赖监控以及应用分析相关的配置。如果感兴趣的话,欢迎继续往下阅读。

Web技巧(15)

上一期咱们围绕着Web动画展开,其中有的动画对部分用户群体会造成不良的反应,会引起癫痫。为此,为了避免这种现象出现,可以使用条件CSS@media中的prefers-reduced-motion条件来做处理。除此之外,prefers-reduced-motion<picture>元素中还有一些小技巧,可以帮我们做一些其他有意义的事情。这一期,就从这个特性开始讲起。

Web技巧(14)

前段时间在微信群聊了一个动效的话题: 鼠标悬浮的时候,三个区块依次显示;鼠标移开时,三个区块反向依次消失。如果使用CSS的triansition是否可以实现?借此话题,在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊,比如,动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

页面

返回顶部