CSS3

聊聊CSS的::marker

CSS的::marker是一个伪元素,最早接触时间应该是在四年前。四年前在《试探列表中的::marker》一文中就提到过CSS的::marker伪元素,只不过在当时,该伪元素只是大家探索性的在聊该属性,而时至今日却不同,Firefox 68已经追随Safari11.1对该伪元素支持了。也就是说,该伪元素离我们越来越近了,以后我们可以使用::marker帮我们做更多的处理。简而言之,使用::marker伪元素,可以对列表做一些有趣的事情,在本文中,我们将深入的聊聊该伪元素。

Web技巧(10)

自从响应式设计的概念的提出至今也有近10年的时间了,虽然不乏看到响应式设计的身影,但还是有很多同学不太了解什么是响应式设计或响应式设计中常会碰到的问题以及如何解决。特别是流式(自适应)排版和响应式设计难以分清楚,但这两种排版都为我们提供了很多机会来更好的设计Web页面,而且更能完善阅读体验,但与此同时,也带来一些潜在的问题,比如字体大小无法控制,图片等比缩放难处理,甚至还有一些潜在的问题,比如可访问性问题。在这一期中,我们就来聊聊排版中的一些技巧,希望大家能喜欢。

从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中隐藏术。

你所不知道的CSS Overflow Module

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

Web技巧(07)

在这一期中咱们一起来聊聊HTML5中的表单。说到HTML,可能很多同学会说,HTML5有什么好聊的,不就是一些HTML的标签吗?事实上并非如此,就拿HTML中的表单中的input元素为例吧,input元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支持特定功能的各个浏览器之间,它们的行为也会有所不同。那这一期中,就来围绕着input说点事。

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模块的一些理解,希望对大家学习和了解该功能模块有所帮助。

页面

返回顶部