记得去年整理一篇也是关于 CSS 新特性方面的内容,即《2020年CSS有哪些新特性》。这回在 T(X) Team.午夜识堂 也和大家一起聊了一些 CSS 新特性方面的话题,主要是帮助团队同学能拓展一下 CSS 方面的新知识。虽然聊的是“新特性”,但其中有些特性并不怎么“新”,或许已在你的项目中,或许已接触过,只是不太了解而以。接下来,就和大家一起来简单地回顾一下这些特性,希望大家能喜欢,也希望对大家平时工作有所帮助。

https//cloud.video.taobao.com/play/u/34229/p/1/d/hd/e/6/t/1/310058939217.mp4

简介

如果您有关注过这两年的 CSS 发展状态报告2019年2020年)的话,不难发现,在报告中有专门关于 CSS 新特性一项的介绍:​


Flexbox布局 已是目前最为流行的Web布局方式之一,它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性,里面隐藏了一些不为人知的细节,如果不是对Flexbox极为熟悉或者对其规范极为了解的话,其中有很多细节将会被遗漏,而这些细节又会让你在使用的感到困惑,甚至是带来一定的麻烦。

这次在优化imgcook的Flexbox布局时,重新阅读了一次Flexbox的规范,发现自己曾忽略了部分重要信息。为此在这篇文章中,将Flexbox布局,CSS的书写模式,逻辑属性,对齐方式结合在一起整理了一篇笔记,希望对于想了解或使用Flexbox碰到痛楚的同学有所帮助。

一些术语和概念

Flexbox术语

术语的统一有助于我们后面更好的讨论和解决问题。用下图来描述Flexbox中的术语:


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

直播的感觉还是有所不一样

虽然以前也参加过一些前端行业的会议分享,但在线直播还是平生第一次,感觉还是很不同。其一没有这方面的经验,其二我还是更喜欢线下会议的感觉,因为这样能和大家在一起,有目光的交流。这是一种支持,一种鼓励,一种 …


可折叠Web的说法是可折叠设备带来的。可折叠设备形式多样,从笔记本电脑到手机,再到新奇的双屏幕混合设备。对于这类新发明并没有一个全面的定义,但大多数都可以归为两类。“可折叠”是指屏幕可以折叠的设备(比如华为Mate X,三星Galaxy Z Flip);而“双屏”设备的屏幕是分开的,但也可以以独特的方式一起工作,以灵活的形式提供生产力(比如,微软的Surface Neo和Surface Duo)。当涉及到Web设计时,这两种类型可能会遵循类似的规则。如果这项技术能大获成功,那么Web设计将面临十年来最大的变革。这对于我们Web开发者而言,也将会开启新的旅程。

听起来就很令人兴奋,但这到底意味着什么呢?可折叠Web将带来新的挑战新的机遇,而且很可能还会带来新的概念。互联网可能也会经历自智能 …


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

广告插入完了,我们接着今天的内容。

CSS绘制图形

CSS绘制图形在社区中已经不是什么新东西了,上次团队周会也有同学问起我,怎么用CSS来绘制图形呢,有没有什么工具?有没有什么技巧。其实使用CSS来绘制图形并没有什么捷径,只是一些内功。内功练习好了,绘制图形还是很简单的。比如@wentin就曾用纯CSS绘制了512个图标


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

10个最致命的CSS错误

多年来,很多工程师在使用CSS时容易犯一些常见的错误,不管是老司机还是新手。而CSS一直又是简单但不容易的语言(不直观和难以使用),真正探究的并不多,而很多常见的错误又往往会阻碍项目的开发进程。如果我们在编写 …


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

prefers-reduced-motion<picture>的结合

<picture>是HTML5的一个元素,可以使用该元素来较好的实现响应式图片。另外,HTML的<img>元素的srcsetsizes属性也能实现类似的效果。

如果你对Web中图像相关的知识感兴趣的话,可以花点时间阅读下面相关的文章:


前段时间在微信群聊了一个动效的话题:

借此话题,在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊,比如,动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

Web动效实现手段

说到动效,可能大家都会觉得Web动效是现代Web才具有的特性,事实上并非如此,Web出现不久,甚至CSS还未来的时候,在Web上有动效的身影。


任何一门语言都有自己的小技巧和新特性,比如Web的三大基石HTML、CSS和JavaScript,在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区,尽量的让大家更好的理解和掌握。另外一个目的是,让更多的同学能把这些新特性运用于自己的项目中。在这一期中,将围绕着JavaScript的一些新特性来展开。希望对大家有所帮助。

ES2019中的新特性

在即将发布的ES2019中,会发布一些新特性,比如Object.fromEntries()trimStart()trimEnd()flat()flatMap()symbol等。在这一节中,使用一些小示例来向大家展示一下这些小特性的使用。


这一期中我们将围绕着Web中的font来展开。在现代Web中除了能使用font-family属性给Web应用指定字体之外,还有其他一些用于字体的特性,比如@font-face可以加载非系统的字体,字体变体属性font-variation-*让Web上排版和印刷上排版之间的差距在逐渐拉小,font-display属性来决定非系统方面字体的加载策略,提高性性能,font-palette用来选择字体配色,@font-palette-values自定义字体配色等。如果你感兴趣的话,请继续往下阅读。

@font-face的使用

现代Web的开发,除了追求技术上的完善之外,有些开发者是设计出身,很多时候也追求艺术上的更好展现。特别是对于Web字体来说,受限于系统可用的字体非常的有限。但随着@font-face的出现,Web开发者 …

w3cplus

“大漠”,w3cplus.com 创始人。前端码畜,专业搬运工

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store