background-size属性用于指定背景图像的大小。背景图像可以被设置为覆盖该元素的整个背景区域，或者被设置为由CSS作者所定义的明确的尺寸大小。可以使用 cover 关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例，那么该图像的高度和宽度的固有比率将被保留。

object-fit和object-position是我最近最喜欢的两个CSS属性。他们使开发人员可以操作img或video中的内容，类似于我们可以用background-position和background-size操作背景内容一样。

网页字体排版的最佳实践之一就是使用相对单位，如rem和em。问题是，你应该使用哪一个呢?一直以来，rem支持者和em支持者之间都存在着争辩，认为应该使用自己支持的那个。在这篇文章中，你会找到我如何在rem和em之间做抉择.你也将了解rem和em到底是什么以及如何使用它们来构建模块化组件。

在一个机构工作意味着我的工作大部分都是基于项目的。意味着每隔几个月(或更少，如果你明白我的意思)就会开始一个新的设计。有趣的是，一段时间后，我发现了每个设计师的风格和喜好。一个例子就是连续做过的三个项目中，导航UI的设计都有类似的风格。这种特殊的元素对我来说十分显眼，不仅因为我之前见过两次，而且我发现它涉及了盒子模型的各个方面。

在本教程中我们将探索 HTML 的pattern属性，用来帮助我们制定自定义表单验证的方式。表单验证对一个网站的安全性，以及可用性至关重要。验证过程就是在表单提交之前判断输入值是否匹配了正确的格式。例如，如果我们要在一个输入框内输入电子邮件地址，该值一定要是一个有效的电子邮件地址；应该以一个字母或数字开头，然后是@符号，最后以一个域名结束。HTML5规范对于一些新的input类型，如email、url、tel,也做出了一些更为简易的验证，并且也被打包成了预定义的验证。当给定的值不符合预期的格式时，这些输入类型就会抛出一条错误的消息从而阻止提交。

图片在响应式网页设计中是出了名的最具挑战性的方面之一。今天我们就来看看如何使用<picture>元素来处理响应式图片.固定宽度，像素完美的网站设计已经离我们远去了。在宽屏显示器，互联网电视，多尺寸的平板电脑和智能手机的今天，我们的设计必须应付一切可能，将宽由320px向7680px转变。伴随这种多分辨率风景而至的，是需要拉伸或收缩图像，以适应这些不同的要求。这可以被理解为如下问题，矢量图形出现异常时，绝大多数具有特定像素的图像宽度并不改变。所以，我们应该怎么做呢?

尽管 JavaScript 总是让人产生误解，但是它已经成为了最流行的编程语言之一。理解 JavaScript 的内在原理很困难。同样的，迫使 JavaScript 成为常规规范，如面向对象或函数编程，同样具有挑战性。这里我强调阐明 JavaScript 核心部分的原生函数。

近期,网页上的的许多流程都需要用户完全同意才可以完成。例如，用户可能需要删除帐户，更改他们的用户名，或确认货币交易。这种情况下，常用的用户体验(UX,User experience design)是显示一个具有两个按钮的对话框。一个是取消，一个是继续。这么多年，我们一直依靠JavaScript库实现此效果，但在本教程中，我们要用<dialog>元素实现此效果。

当谈及到<meta>标签对搜索引擎排名的影响，很多人都存在误解。在过去，许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用，哪些没有呢?

可能并不是那么显而易见，但是HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x轴和y轴，还有控制第三维度的z轴。