CSS

图解CSS: 元素尺寸的设置

众所周之,Web上的任何一个元素都是一个盒子(框模型),对于该盒子在CSS中有一个专业的术语,即CSS盒模型。其中CSS的display属性可以改变盒子的格式化上下文,每个格式化上下文都拥有自己不同的渲染规则,而这些规则是用来决定其子元素是如何定位,以及和其他元素的关系,这些关系中也包括了盒子大小。换句话说,Web中的任何一个元素都是有大小的,即使没有给元素设置任何有关于大小的属性。了解如何设置元素大小是非常重要的,因为它们直接会影响一个元素的渲染,特别是在页面布局的时候非常重要,而且在使用Flexbox和Grid布局时,元素大小变得就越来越重要。另外在Flexbox和Grid中有很多内置的灵活性,因为它们管理项目在容器中怎么显示。在CSS中有一个独立的功能模块(CSS Intrinsic & Extrinsic Sizing Module Level 3)是用来定义元素大小的。接下来的内容,我们就来一起探讨该模块中的相关属性与特性。

应用于下一代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技术引入到生产中

时间如梭,又一年双11圆满收官了。作为技术宅男除了买买买之外还能和大家聊的就是前端技术了。"淘宝盖楼"上热搜了,我想你应该也参加了双十一淘宝盖楼吧,是不是觉得特别的酸爽。今年有幸参与盖楼的互动活动的开发中备感荣幸,因为我们的努力让全民都爽了。在开始之前要先感谢一下曾经努力的自己!楼盖完了,我们回过头来聊聊这次多人互动PK在开发的时候用了哪些有意思的前端技术。感兴趣的同学,请继续往下阅读。

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

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

创建可访问性网站并不是想得那么难

最近@Robin Rendle和@stefanjudis先后写了篇文章,从同一个角度抛出两个话题:“为什么创建无障碍网站这么难”?和“应该通过增强浏览器开发者工具实时提供开发者开发无障碍网站存在的问题”!那么我想问的是,开发无障碍网站为什么会令大家感觉难以及工具上的实时提示就能让开发变得更容易了吗?如果不是,怎么样来开发一个网站才能符合无障碍规范相关的要求,即具有高可访问性。更直接一点,怎么才能让开发者创建无障碍网站是件轻易而不再觉得是件困难的事情。在接下来的内容,将作为前端开发者的角度来和大家一起探讨这方面的话题。如果你感兴趣的话,请继续往下阅读。

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

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

给网站添加暗黑模式指南

给网站添加暗黑模式是随着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的布局)。这样的布局主要目的是为了增强一个立体的空间感。

页面

返回顶部