会员专栏

深入了解JSX

最近开始学着使用React写东西。在写代码时会使用JSX,不了解JSX的相关知识写起代码的效率还是蛮低的。为了能更好的进入状态,打算先把JSX相关的知识和细节了解一下。在这篇文章中我们主要就是来学习一下JSX的相关知识。希望对于像我这样的初学React(或初次接触JSX)的同学有所帮助。

React中CSS Modules的使用

最近项目开始换React的工程,感觉好多东西都得重新开始,特别在撸CSS的时候。说实话和Vue的工程相比,体感差完了。在Vue的工程中除了Modules之外还可以使用CSS的作用域scoped的概念。用久了Vue的同学,在这方面的感觉爽死了,但是突然切到React的工程体系之下,这方面的感觉突然不要不要。拿个实例来说吧(可能我做得不到位),组件的CSS是全局的,有时覆盖起来,除了蛋疼之外,而费时,费成本。

从9102年的CSS状态报告中看CSS特性的使用

在9102年终于有了一份属于CSS状态的报告。对,这是CSS发展20多年以来第一份属于自己的状态报告。大家的印象中可能只有JavaScript相关的状态报告,对于CSS的状态报告并无了解(那是以前没有)。正如报告开篇所说,在Web开发家族中,JavaScript更似一位愤怒、叛逆的少年,每年都会经历一个新阶段。而CSS却一直以来更似一位勤奋好学,举止得体的少年,他总是保持礼貌,从不草率的做出任何决定。不过有迹象表明,CSS可能正经历着与JavaScript刚刚经历的同样动荡的青少年时期。Flexbox,Grid,CSS-in-JS在9102年都来了。可以说,CSS终于把头发染成粉红色,并像它一直想要的纹身了。在这份有史以来第一份关于CSS状态调查中,调查了一万多名开发人员。在这份详尽的报告中我们可以看到哪些CSS特性使用得最多,哪些工具正在被采用等等。

如何使用CSS实现黑暗模式和高亮模式的切换

Web技巧第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值darklight来进行切换,这是从最底层也是最原生的解决方案,除此之外还可以通过CSS的混合模式属性来模拟。当然,除了期刊中提到的技术方案之外,还有其他的一些解决方案。今天我们就来一起学习一下,如何实现黑暗模式和高亮模式之间的切换。

Web隐藏术

在Web页面或Web应用程序的开发中,有些元素是需要被隐藏起来。让一个元素隐藏起来的实现方案会有很多种,比如说在《图片替换文本CSS方法》一文中所聊的图片替代文本的方案都适合于元素的隐藏,只不过每种不同的技术方案实现的原理和最终呈现给用户的渲染方式会有所不同。如果你是一个有情怀的前端开发者的话,在开发应用的时候很多时候还会考虑无障碍(可访问性)设计相关的细节。那么隐藏元素的不同技术手段对读屏软件之类的也是有所不同的。在这篇文章中,我们就一起来聊聊Web中隐藏术。

如何通过JavaScript API处理CSS

很多场景我们是需要借助JavaScript相关的API来帮助我们处理Web页面中的CSS。CSSOM(CSS Object Model)中提供了一些JavaScript的API处理CSS。除此之外,还可以通过JavaScript来操作DOM元素中的attribute样式和类来操作CSS。由于JSX和无数JavaScript框架等概念的出现,使得JavaScript API与DOM交互变得越来越流行,但是对CSS使用类似的技术似乎变得没有那么多人关注。当然, CSS-in-JS解决方案是存在的,但是最流行的方案都是基于编译的,在生产中输出CSS时不需要任何额外的运行时。这当然对性能有好处,因为使用CSS API可能会导至额外的重游,这使得它和使用DOM API一样需要。但这并不是我们想要的。如果我告诉您,您不仅可以操作DOM元素的样式和CSS类,而且还可以创建完整的样式,就像使用HTML和JavaScript一样,那会怎么样呢?

你所不知道的CSS Overflow Module

最近在项目中使用overflow属性的时候踩到了几个以前从未踩过的坑。在填坑的过程中发现,原来使用overflow的时候还是有不少的坑,而且这些坑都是因为自己对该属性不甚了解所造成的,或者说是和其他CSS属性在一起使用所触发的。那么在使用overflow应该怎么使用才能避开这些不必要的烦恼呢?或者说在使用overflow不应该和哪些属性结合在一起使用呢?为了解开这个迷我重读了有关于overflow的规范。今天将相关的理解和新的认知小结一下与大家共享,希望对于大家在实际使用的时候能尽可能的避开这些坑。

Clipping和Masking 何时使用

前面花了很长的篇幅在《探索CSS Masking模块:Clipping》和《探索CSS Masking模块:Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的ClippingMasking的基础知识和相关特性,并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。

探索CSS Masking模块:Masking

探索CSS Masking模块主要分为ClippingMasking两个部分,在上一节中,花了很大的篇幅介绍了Clipping相关的特性,今天接着来学习或者聊聊Masking相关的知识点。从上一节中我们知道,在Masking中有一个遮罩层,这个遮罩层是一个图像,该层也被称为遮罩模式,主要有高亮Alpha两种模式。其中Alpha模式带有alpha通道的图像,alpha通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像,其中黑色部分将会显示,透明区域内容将会被隐藏。

探索CSS Masking模块:Clipping

最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的maskclip-path来实现,甚至还想结合SVG相关的特性。为了验证自己的一些想法,开始着手撸码,但问题来了,在撸码的过程中,我发现自己对于mask的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解,希望对大家学习和了解该功能模块有所帮助。

页面

返回顶部