CSS自定义属性的使用实例

过去一年来花了不少时间来研究CSS自定义属性相关的特性,而且在站上也发了多篇有关于CSS自定义属性相关的教程,其中有关于CSS自定义属性,也有涉猎CSS Houdini自定义属性相关的。但我想很多同学除了希望了解CSS自定义属性理论相关的知识之外还更想了解CSS自定义属性能做什么吧。在这篇文章中,我将整理一些有关于CSS自定义属性在实际开发中能做什么,并会在文章中提供相应的一些使用实际。希望能通过具体的实例帮助大家更好的理解和使用CSS自定义属性。

CSS现状和如何学习

在20年岁末有幸和一群优秀大学生在一起聊CSS相关的话题,感到非常的荣幸!在此非常感谢平台(阿里巴巴集团.前端练习生计划)给我这样的机会,同时也要非常感谢好友 裕波,墨苒对我的鼓励和支持。在结束直播的时候,说过后面要整理一篇文字版本,由于个人新转团队(互动团队转到 F(x) Team团队),加上自己太懒,所以今天才开始整理文字版本。所幸能在岁末完成,还算是一种补救。希望接下来的内容,对于新接触CSS或对CSS感兴趣的同学有所帮助,更希望有更多的同学能参与阿里巴巴集团练习生计划的学习,并有所获。

CSS自定义属性你知多少

很多Web开发者更喜欢将 *CSS自定义属性 称之为 CSS变量。在2020年中社区中有关于CSS自定义属性的讨论到处可见,小站也有很多关于CSS自定义属性的相关教程,而且在很多Web应用中也可以看到CSS自定义属性的身影。虽然如此,但有很多开发者对CSS自定义属性了解的不多,甚至说不怎么理解,也用不好CSS自定义属性。这篇文章和以往介绍CSS自定义属性的文章有所不同,我从不同的角度来阐述CSS自定义属性,主要是希望这篇文章能让Web开发者更好地理解CSS自定义属性,以及如何更好的使用该属性。如果你对该话题感兴趣的话,请继续往下阅读。

折叠屏相关的Web API

告诉大家一个好消息,The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验,即 为折叠屏设备在不同的折叠状态(“姿势”)提供相应的布局。这个规范主要由 三星(Samsung)@Diego González英特尔(Intel Corporation)@Kenneth Rohde Christiansen 一起起草的,虽然目前只是处于规范的 ED 阶段,但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来,这里面的一些属性或API还会有所变动,但这并不影响我们去探究或参与讨论。或许说不定明年,或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。

使用CSS的aspect-ratio实现宽高比缩放

在《图解CSS: 元素尺寸的设置》一文中主要介绍了W3C的 CSS Box Sizing Module Level 3的属性,即 用来设置元素大小的CSS的属性,比如我们熟悉的widthheightmin-content等。在今年上半年(大约是2020年5月份)该规范新出了一个Level 4版本,该规范中新增了stretchfit-contentcontain三个属性值,可以用于widthheight等属性;新增了aspect-ratio属性用来指定容器宽高比;还有就是指定容器内部尺寸contain-intrinsic-size,有点像min-contentmax-content能根据元素内容来决定元素大小。不过我们今天主要来和大家一起探讨其中的aspect-ratio属性,如果你感兴趣的话,请继续往下阅读。

技术有温,代码有爱: 如何让互动能说话?

在互动团队的同学都知道,我们团队有一个明确的愿景: 人人可开发,处处有互动  。其实我想说,除了 人人可开发,处处有互动 还应该让 互动有温度,让互动能说话 。去年双11的 PK盖楼 上过头条,火爆全网,我想今年双11主互动项目: 超级星秀猫 也将会再次燃爆全网。记得去年我和大家一起聊了聊如何构建 有温度的互动 ,让30万视障人士可以很好的在天猫双11“剁手”“盖楼”分红包。说实话,看到这样的消息,作为主导互动无障碍优化的我来说, 无比的自豪,无比的幸福 !今年我将和我们团队的 @光驰 同学和大家一起聊聊:“ 如何通过技术,让互动能说话 ”。

CSS Houdini: @property注册自定义属性

@property是CSS中新增的一个@规则的属性,是CSS HoudiniCSS属性和值 API Level 1 (CSS Properties and Values API Level 1)一个属性,可以用来自定义CSS属性,也被称为CSS的变量。为了能很好的区分CSS自定义属性,我更喜欢将其称为CSS Houdini的自定义属性(或变量)。你可能会好奇,它和原生的CSS自定义属性有何不同,又有何独特的特性,可以用来做什么?如果你感兴趣的话,请继续往下阅读。

图解CSS: CSS渐变

CSS的渐变主要分布在 CSS Images Module Level 3CSS Image Values and Replaced Content Module Level 4 两个规范模块中,其中Level 4 和 Level 3相比,新增了conic-gradient()repeating-conic-gradient()两个属性。在CSS中,CSS的渐变相当于图像,我们可以使用线性渐变(linear-gradient()repeating-linear-gradient())、径向渐变(radial-gradient()repeating-radial-gradient())和锥形渐变(conic-gradient()repeat-conic-gradient())。事实上这三种渐变就相当于背景图像,而且渐变通常是一种颜色渐变到另一种颜色,但是CSS允许你控制渐变发生的每一个方面,从方向、形状到颜色,以及它们如何从一个渐变到另一个渐变。在这篇文章中,主要和大家一起探讨有关于CSS渐变相关的话题。

使用CSS Grid实现瀑布流布局

自从多列布局,Flexbox布局和Grid布局得到浏览器支持之后,就可以使用这些特性来实现瀑布流的布局,但这些布局或多或少都存有一定的缺陷。前两天看到CSS 布局模块Level 3已经进入到 ED(Editor’s Draft)阶段,该规范就是为瀑布流布局而生的,这个模块中介绍了瀑布流布局,并且作为CSS网格容器的附加布局模式。接下来和大家一起来一探其究竟,另外在文章末尾顺便介绍了如何给不支持瀑布流布局的降级以及如何使用CSS Houdini来实现瀑布流布局。感兴趣的同学,请继续往下阅读。

写给Web开发者使用的无障碍设计指南

这一年多来一直在探讨Web可访问性相关的知识,在小站上也陆续输出了一些有关于Web可访问性相关的技术文章。构建Web可访问性应用或页面涉及到的知识领域绝不仅是某个方面,从设计开始,到Web开发中的HTMLCSS、JavaScript各方面都有,甚至领域还可以更小,比如颜色工具ARIA以及一些属性的使用。但是对于很多从未接触过Web可访问性开发的同学来说,他还是会感到困惑。那么今天这篇访问就是来帮助开发者解惑的。因为文章主要就是和大家一起探讨,Web开发者可以根据下面提到的内容或者说手段来对Web可访问性进行优化。如果你对这方面感兴趣的话,请继续往下阅读。

页面

返回顶部