现代 CSS

Airen的博客

图解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中向左向右

A11Y 101:可访问性审核的几种姿势

在《如何检测和修复可访问性》一文中和大家一起探讨了怎么让开发者在开发过程中检测和修复Web应用可访问性的问题。尽管近63%的开发者没有这方成的习惯,但如果我们想构建一个具有高可访问性的Web网站或Web应用就必须考虑可访问性相关的事项。而可访问性的一个关键方面就是审核(Accessibility Auditing)。了解应用程序是否具备可访问性,其最佳方法就是对其进行测试度量;通过这种方式,可以确定在发布到生产环境之前是否需要进行修改。

A11Y 101:如何检测和修复可访问性

如果你最近一直在跟踪A11Y系列的话,你可能知道作为一名开发者除了完成功能需求之外,还需要花一些时间去提高Web应用的可访问性,甚至你也知道了如何通过HTMLCSS以及WAI-ARIA等方面的知识来帮助自己构建一个具有高可访问性的应用,换句话说,开发者开发一个具有可访问性的应用并没有我们想象的那么难

CSS自定义属性你知道多少

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

A11Y 101:WAI-ARIA初探

随着互联网技术不断的革新,Web页面或应用不再局限于静态地向用户呈现文本或图片等内容。现在的Web页面或应用是一个 富应用,是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。这也就是说,用户和Web应用的交互变得更丰富更复杂。实现这些带有富交互的Web应用仅依靠HTML和CSS是无法实现了,换句话说,我们很多时候会使用一些非语义的HTML和动态的JavaScript脚本来构建,更新复杂的UI控制。Web应用变得更丰富的同时,可访问性的难度也就相应的更复杂了。

将新的CSS技术引入到生产中

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

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

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

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

上一节中和大家一起探讨了为什么要构建可访问性和如何构建可访问性应用。文章中我们聊到了HTML中可访问性中的作用,事实上很多开发者都认为HTML对于构建可访问性是非常的重要,特别是用正确的HTML标签来表达正确的意图,可以提升Web应用的可访问性。这篇文章将会详细介绍如何从HTML方面来最大化地提升Web应用的可访问性。最近一直在阅读和学习构建可访问性方面的知。我花了一些时间去了解一些这方面的知识,但随着了解的越多,让我越来越觉得不应该只把可访问性当作一个检查清单,而应该当作一个起点。将这些技术合并到自己的工作流程中,即从构建Web应用的最开始,就应该把可访问性融入到应用中

页面

返回顶部