现代 CSS

CSS

使用clip-path制作Web动效

clip-path是CSS属性之一,只不过很多同学都担心浏览器对他的兼容性,因此不怎么使用该属性。其实clip-path已经得到很好的支持,可以说现在主流浏览器对他的支持已经很好了。事实也是这样,就我自己而言,早在去年中开发的项目就已经有clip-path的身影了。在CSS的世界中,clip-path是一个很有意思的属性,他可以帮助我们绘制很多不同规则的图形(除了常见的圆形,椭圆形,矩形,三角形等),而且结合CSS的transitionanimation的话,clip-path能帮助我们实现一些很有意思的动画效果。接下来,就和大家聊聊使用clip-path制作Web动效的一些事情。

2020年CSS有哪些新特性

今天在Twitter上看到@argyleink伦敦(LondonCSS 2020)CSS四次活动中分享的一个话题《What's new with CSS?》。看了一下这个主题的PPT,里面有些新东西还是蛮有意思的,稍微整理一下和大家一起分享。如果你感兴趣的话,请继续往下阅读。

如何使用AVIF:新一代图像压缩格式

一直以来,我们熟悉的图片格式或者说到目前运用到Web页面或Web应用的图片格式主要是.jpg.png.gif.svg,以及.webp等,其实能运用到Web上的图片格式除了这些之外,还可以是JPEG 2000JPEG XR等。但最近社区有关于图片格式讨论最多的是AVIF图像,它将是新一代图像压缩格式,该格式(AVIF)图像质量与压缩文件大小的比率要优于我们熟悉的JPEG、PNG,甚至Webp图像格式。那么AVIF是什么样的图像呢?我们在Web开发中可以使用这种格式图像?如果可以,我们又将如何使用呢?今天这篇文章我们就来一起探讨这方面的知识,如果你感兴趣的话,请继续往下阅读。

可用于双屏幕和折叠屏的Web API

早在去年五月份就在《聊聊安卓折叠屏给交互设计和开发带来的变化》一文中和大家初次聊了安卓折叠屏给交互设计和开发将会带来的变化。随着一年多来的变化,在Web开发中也有相应的API专门服务于双屏幕和折叠屏幕,有关于这方面的介绍,前段时间在《可折叠Web可能会给我们带来的变化》一文中和大家有过初步的介绍。虽然这两篇文章从不同的时间段,不同的角度阐述了折叠屏中的开发模式,但我想很多同学还是会因此感到困惑,甚至不知道如何为多屏幕或折叠屏幕这样的设备做相应的Web开发。那么今天,在这篇文章中抛开概念,只聊一些Web API,即 可用于双屏幕和折叠屏的Web API。如果你感兴趣的话,请继续往下阅读。

初探CSS的容器模块

CSS的容器模块指的是CSS Containment Module,到目前为止主要分为 Level 1Level 2两个版本。在容器模块中主要包含了CSS的 containcontent-visibility 两个属性。这两个属性都可以帮助我们提高Web页面的性能,那么它们是如何工作的?我们在实际项目中又应该怎么使用呢?如果你感兴趣的话,请继续往下阅读。

图解CSS:border-radius

CSS的border-radius属性是属于 CSS Backgrounds and Borders Module Level 3 的一部分。随着CSS技术的不断变革,border-radius除了我们熟悉的物理属性之外新添加了逻辑属性。而且border-radius取值不同,绘制的圆角效果也会有所差异。当然,在很多开发者眼中,border-radius已经是非常简单的一个特性,但试问一下,你真的理解了该特性呢: border-radius取不同值会发生什么? 取值为%值时相对于谁计算?嵌套会发生什么?半径重叠时会发生什么?如果你不能非常明确的回答上面提到这几个问题,那么接下来的内容就值得你花时间阅读。

CSS中百分比单位计算方式

CSS中的单位有很多类型,不同类型单位计算方式也有所不同,特别是百分比(%单位,它的计算和使用的属性有着直接关系。其中最为重要的是:百分比是一定要有其对应的参照值,也就是说,百分比值是一种相对值,任何时候要分析它的计算值,都需要正确的找到它的参照值。言外之意,CSS中的百分比单位值最终计算出来的值是可变的。在这篇文章中,我们主要来看看百分比单位在不同使用场景中计算方式。在CSS中能运用%值的属性很多,为了能让大家更好的理解使用%的规则,我们从最熟悉和最简单地属性开始。

可折叠Web可能会给我们带来的变化

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

CSS Grid中的auto-fill和auto-fit

Web布局相关的话题一直以来都是一个永恒的话题,不管发展到什么时候,都不会缺这样的话题。一直以来,我都非常推崇CSS Grid的布局模块,在我的认知中,CSS Grid布局是一个强大的布局,它将灵活的解决我们以往在Web中碰到的大多数问题。正因为CSS Grid布局很强大,因此它的体系也很庞大。比如@Juan Martín García就用CSS Grid向大家展示了如何通过一行CSS代码实现特定环境下的响应式布局效果。

你可能不太熟知的布局技巧

随着Web技术不断的革新,CSS近几年也变得多年前要更强大。在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日,其中有一些CSS的属性可以让开发者能节约更多的时间。比如说,在Web布局中,现代CSS特性就可以更好的帮助我们快速实现,例如等高布局水平垂直居中,经典的圣杯布局、宽高比例页脚保持在底部等。在本文中,我将会介绍一些不同的CSS属性来实现这些效果,希望大家会感兴趣。更希望对大家今后的工作有所帮助。

页面

返回顶部