CSS3

应用于下一代Web的样式

2019年对于CSSer来说是幸运的一年。年中的时候业界出了一份CSS状态报告,而且在年末的时候Web图鉴也对CSS做出相应的分析。这些数据对于一位Web的从业者来说是非常有利的,这些重要的数据告诉CSSer们CSS目前的一种状态,以及应该去掌握哪些CSS特性等。今天要和大家聊的既可以说是新特性(因为很多同学觉得这些东西离实际使用还很远),但也是旧的东西(因为对于时刻关注CSS发展的同学来说是旧的)。前段时间刚结束的2019年Chrome Dev Summit(CDS)大会上,@Adam Argyle@Una Kravets一起分享了一个非常有趣的话题,这个话题就是有关于CSS特性的东东。也被称为是应用于下一代Web的样式

Web中向左向右

几米的绘本《向左走,向右走》自1999年出版,就一直是爱情的代名词。在Web的世界中有着同样的故事,即Web的向左向右,指的就是Web的排版方式(比如,左浮动、右浮动,Box Alignment中对齐方式等)、对齐方式(比如左对齐、右对齐)、书写方式(比如从左向右、从右向左)等。而Web中的向左向右和书写习惯(比如Writing Mode)有着紧密的关系,社区中很多开发者可能只习惯于自己的书写方式(比如从左向右),但事实上世界中还有很多其他语言,不同的语言其书写方式是不同,比如阿拉伯语,它就是从右向左。如果希望给用户提供一个更具体验的Web网站或应用,作为开发者就有必要掌握如何针对不同语言提供不同的呈现方式。这就是我和大家将要一起聊的Web中向左向右

CSS自定义属性你知道多少

时至今日,CSS自定义属性对于CSS而言不是什么新特性了,它也被纳入到W3C的规范中,即CSS Custom Properties for Cascading Variables Module Level 1。在《CSS自定义属性》一文中我们对CSS自定义属性(变量)做过全面的介绍,如果你阅读过该文,你应该对CSS自定义属性会有一个基本性的了解以及如何在实际项目中使用该特性。那么再试问一下,你对CSS自定义属性知道多少呢?如果你无法清楚的回答清楚,请继续往下阅读。

A11Y 101:编写CSS时要考虑可访问性

构建可访问性Web应用时,很多人都可能会认为这应该是HTML的事情,或者说是WAI-ARIA的事情。或许也会问,可访问性和CSS又有啥关系呢?虽然CSS有很多特性(特别是发展到今天)可以让我们美化Web页面或应用程序变得更简单和更灵活,但这些强大的特性也可能让我们的用户体验变得特别的糟糕。实际上,仅用一行代码*{outline:none 0}就可以使一个网站或Web应用的可访问性变得非常的糟糕。也就是说,编写CSS可以直接影响Web的可访问性。在这篇文章中,我收集了一些技术、注意事项和方法来帮助你在编写CSS时不会影响Web可访问性,反而提高Web的可访问性。

伪元素能帮助我们做些什么

伪元素已经不是什么新东东了,平时大家在实际生产中肯定有使用过伪元素。但伪元素能帮助我们做些什么呢?针对该问题,有很多同学能很好的回答,但也有很多场景并不是所有开发人员都完全了解的。今天再次花时间来整理一下伪元素能帮助我们做些什么?我想接下来的内容和实例肯定会有不少同学感兴趣的。如果你是其中的一位,那么请继续往下阅读。

给网站添加暗黑模式指南

给网站添加暗黑模式是随着macOS中的暗黑模式(Dark Mode)出现之后的一个热门话题,今年上半年在《如何使用CSS实现暗黑模式和高亮模式的切换》一文中就和大家一起聊了聊怎么通过CSS来实现暗黑模式和高亮模式切换。事实上,社区上有关于这方面的讨论也很多,都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题,不同的是,这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学,请继续往下阅读。

你真的了解CSS的flex-basis吗?

CSS的flex-basisFlexbox属性flex的简写属性之一。大部分同学在很多时候都认为flex(当然也包括flex-basis)属性非常的简单,但事实上并非如此,如果你阅读过《聊聊Flexbox布局中的flex的演算法》和《深入理解 flex 布局以及计算》会发现这flex并不容易。在W3C规范中flex-basis是一个基准值,它接受widthheight相同的值。如果你熟悉的话,widthheight是隶属于CSS Intrinsic & Extrinsic Sizing Module Level 3规范,而且该规范除了widthheight属性之外还有min-width(或min-height)、max-width(或max-height)、min-contentmax-contentfit-content等。那么问题就来了,在Flexbox布局中,flex-basisCSS Intrinsic & Extrinsic Sizing Module Level 3提到的各属性有何差异呢?这就是今天将要和大家一起探讨的。如果你感兴趣,欢迎继续往下阅读。

CSS如何实现交叉布局

随着Web技术不断的革新,以往很多依赖于图片展示的布局能较轻易地通过代码来实现,而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D,甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说,我们通过CSS可以实现,而且这样的一个效果是一个典型的效果,所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性,我们可以实现伪3D的效果(看上去像上一个3D的布局)。这样的布局主要目的是为了增强一个立体的空间感。

聊聊CSS中的圆

熟悉CSS的同学都知道,使用CSS可以绘制一些图形,在业内有很多这方面的案例,比如使用CSS绘制不同的纹理CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用,比如我们今天要聊的圆(比如圆形容器,圆形缩略图,圆形按钮)。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话,那么接着阅读下面的内容,你一定会有所收获。

这些用于布局的新属性能用吗?

这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲,其原标题是Does it work? Using the new CSS Layout,我在这里将其译为这些用于布局的新属性能用吗?。这个话题中的内容非常的有意思,其中有些内容在小站上也有过相应的介绍。今天看了该PPT,觉得有些内容还是非常的有意思,值得和大家分享。

页面

返回顶部