CSS

我认识的 W3C 规范

在接到邀请在团队分享有关于与 W3C 规范相关的话题时,就我个人而言还是很虚的。虽然从事 Web 前端开发已有近十年,接触 W3C 规范也有多年,但要出来聊与 W3C 规范相关话题,还是没有足够多的信心。在开始写 PPT 之前,我特意咨询了好好友 @小倩 小姐姐,并且参考了她分享的《走进W3C》。虽然对 W3C 没有全面的认识,但我还是想从我个人的角度来看和思考 W3C 规范。希望接下来的分享对初次接触 W3C 或想深入 W3C 的同学有所帮助。

图解CSS:Grid布局案例之构建 Full-Bleed 布局

Full-Bleed 是印刷界中的一个概念,被称为 全出血,即在印刷中,我们有出血量,这是纸张被修剪的地方以外的区域。正因如此,印刷设计师习惯于在设计工作中考虑出血量。我们通过设置安全区域来做到这一点。这几年,这种被称为“全出血”的概念也运用到 Web 的布局中。就是在受限宽度的一列中使用全宽元素的布局,比如在较窄的一列文本中使用一个边缘到边缘的图像。在社区中,也有人把这种布局效果称为 Full-Width 布局,也有人称为 Edge-To-Edge 布局。说实话,在Web中实现这种布局效果,已不是难事,社区中有很多种不同的技术方案,都可以达到这个布局效果。不过,今天我们以不同的角度来思考这个问题!

图解CSS:Grid布局案例之构建重叠布局

如果一直是跟着 CSS Grid 布局这个系列到这里,你应该还记得,在 CSS Grid 布局中,我们可以通过网格项目放置的方式,让不同的元素重叠在一起,并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说,以往需要使用 CSS 的 position 的绝对定位(absolute)来实现的布局,现在可以直接使用 CSS Grid 来解决。在这一节,我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。

处理图片上文字效果的几种姿势

你可能时常会在平时的开发中碰到文字显示在图片上的 UI 效果。在某些情况下,因为图片的不同,文本放置在图片上会让文本变得难于易读。针对于这种情况,不管是设计师还是Web开发者,都会有一些解决方案,比如在图片和文本之间添加一个渐变覆盖,或者有一个有色的背景,或给文本添加阴影等让文本变得更易于阅读。在这篇文章中,和大家一起来讨论这些解决方案,如果你感兴趣的话,请继续往下阅读。

响应式图片使用指南(Part2)

响应式图片在响应式 Web 设计中一直以来都是较为头疼的地方,除了图片的适配难于处理之外,还有就是图片的加载问题。庆幸的是,HTML 给 <img> 标签新增了srcsetsizes属性,我们可以在这两个属性上提供足够的信息,来告诉浏览器,从而让浏览器自已根据所对应的环境加载最合适的图片。那么在这一部分,我们主要来探讨 <img>srcsetsizes属性,以及了解浏览器是如何根据这些信息来选择合适的图片。如果你对这方面知识感兴趣的话,请继续往下阅读。

响应式图片使用指南(Part1)

图片是 Web 页面上最重要的媒体元素,它可有效的向用户传递信息,但在 Web 的近三十年发展历史中,它们的适应性一点都不强。关于图片的一切,比如图片的尺寸、格式和裁剪都被其单一的 src 属性设定像顽石一样的固定下来。特别是当高清屏幕(高分辨率屏幕)和 Web 响应式设计的到来,Web 开发者更进一步感受到了图片在 Web 上使用的限制。庆幸的是,近几年随着 Web 技术的发展,<img> 元素也得到进一步的改变,它不再局限于 src 属性引入图片,也不在局限于 widthheight 属性设置图片尺寸。Web 开发者可以使用新的 srcsetsizes 属性让图片更好的适应于高分辨率的屏幕和响应式设计。除此之外,HTML5 还提供了一个新的元素标记 <picture> 来更改显示的图片以适应不同的图片显示尺寸,而且还可以在background-image 使用 image-set() 函数为不同DPR屏幕显示不同图片。虽然在《聊聊img元素》一文中详细介绍过 <img> 的使用,而且在该文中有介绍过 srcsetsizes 以及 HTML5 的 <picture> 的使用,但并无法很好的帮助大家在响应式设计中使用图片。为了更好的了解和掌握响应式图片在Web中的使用,将和大家一起深度探讨这方面的话题。希望对大家在使用图片的时候有所帮助。

图片的优化

图片在 Web 中除了占有重要的一席之地之外,对资源的使用也是非常的大,而且对用户的体验影响也非常大。虽然 <img> (或 CSS 中其他能用<image> 数据类型的属性,比如 background-imagemask-imageborder-image 以及 list-style-image 等)看上去不是很起眼,但图片使用的好坏直接会影响用户的体验,Web 的性能(加载,渲染相关的性能)。或者简单地说,它直接影响 CWV (Core Web Vitals)的几个关键指标,比如 LCPCLSFID。为什么说图片会对 LCP、CLS 和 FID 有着直接影响呢?我们先从 <img> 的使用开始,然后逐步来分析。

你可以用伪元素做的有趣事情

CSS 中的伪元素能做什么,其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们 清除浮动制作Icon图标分割线CSS TooltipsCSS计数器 等事情。其实除了这些常见的事情之外,CSS 伪元素还可以帮助我们做一些非常有趣的事情,这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来,和大家聊聊这方面的话题。

图解CSS: Grid布局(Part19)

CSS Grid 模块的出现以及浏览器对其支持,为 Web 布局提供了前所未有的可能性。我们可以用更少的元素(更简洁的 HTML 结构)构建更复杂的设计。这比我们一直认为非常强大的 Flexbox 要更强很多。但是,当你想到 CSS Grid 时,你一般会想到是我们平时习以为常的方块布局,对吗?@Andy Barefoot他的个人网站Codepen 上提供了很多有创意的响应式布局效果,让你会对 Web 布局有一种焕然一新的感觉,感觉与你的经典 Web 设计(规规矩矩方块布局),而且他使用了 CSS Grid 布局来做到这一点。

图解CSS: Grid布局(Part18)

我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容,不难发现网格布局的复杂性,灵活性。我想大家也意识到了,CSS Grid到来之后,Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图,思考布局设计的全部内容。当你开始敲击代码的时候,就已经知道布局会是什么样子。正因为CSS Grid布局的复杂性,再加上网格容器上定义的网格是不可见的。为此我们不得不考虑,如何更轻易的使用网格,或者碰到网格布局相关的 Bug,又应如何来调试。熟悉 Web 开发的同学都知道,在调试布局或CSS相关的问题时,喜欢在元素上添加一个边框。在网格布局中,虽然可以使用类似的方法在网格容器和网格项目中添加边框,帮助我们快速的定位;但是我们没法给网格线添加边框。不过庆幸的是,目前主流的浏览器,比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具(DevTools)都提供了网格布局审查器。有了这些工具之后,可以快速的帮助我们使用网格,调试使用网格碰到的问题。

页面

返回顶部