跳到主要内容

5热门新CSS功能以及如何使用它们

11.在获得焦点时展开聊天框

所以我们的聊天框目前已崩溃且无法使用。我们如何只使用CSS扩展它?新功能的时间 - Focus Container伪类:焦点之内

这就像老信徒一样:焦点伪类选择器,但如果任何元素的后代具有焦点,则匹配。这很有趣,因为它与CSS通常的工作方式相反,您只能根据其祖先选择元素。它开辟了一些有趣的潜力。

添加此类将设置的最大高度.messages元素到300px,什么时候在里面.chat区域得到关注。请记住,元素必须接受键盘或鼠标事件或其他形式的输入才能获得焦点。单击会做的。

.chat:focus-within .messages {max-height:300px; }

12.进一步关注

这很好,但我们还能做些什么呢?当聊天框有焦点时,如何模糊新闻源?在随后的兄弟组合器的帮助下()我们可以很容易地做到这一点,因为聊天框的标记在新闻源标记之前:

.chat:focus-within~.container {filter:blur(5px); }

这就是全部!我们可以通过添加转换来轻微地缓解效果过滤属于原始的财产。容器类。现在我们并不是说这是一个好主意,但我们认为只用CSS就可以做到这一点非常酷。

13.探索占位符显示

CSS选择器模块级别4中描述了许多新的伪类。另一个有趣的是:占位符示出的,它匹配显示占位符文本的任何输入。目前我们的文本字段没有任何占位符文本,所以让我们添加一些。

然后在文本字段后立即添加帮助消息以显示用户。

按enter键发送

现在为帮助器消息添加一些样式,以便默认情况下它是折叠的。

.prompt {line-height:2em; max-height:0;溢出:隐藏;填充:0 10px; text-align:right;过渡:最大高度500ms; }

14.使提示可见

目前隐藏提示,我们如何使用:占位符示出的这里?好(大多数)浏览器将显示占位符文本,直到该字段具有值。只设置焦点不会隐藏占位符。这很有用,因为我们不希望用户发送空白消息,因此我们可以挂钩此行为以仅在用户输入值时显示提示。

当然,在现实世界中我们也需要一些验证。我们可以使用否定伪类:不翻转的含义:占位符示出的并在未显示占位符文本时显示提示(即该字段具有值)。

.input:not(:占位符显示)+ .prompt {max-height:2em; }

设置最大高度使用2em将10px字体大小加倍,将扩展块,文本变为可见。整齐。如果能够达到最终规范的话,期待看到这个看似平凡的伪类的一些巧妙用法。

15.把这一切都变为现实

我们使用一些新的属性来构建一个带有聊天功能的新闻源,但是目前它没有生命 - 你实际上无法用它做任何事情。一个特别有趣的新功能是CSS Containment,但很难在不修改DOM的情况下进行演示。让我们添加一些超级简单的JS,以便我们在聊天框中添加消息。

首先,我们需要添加一个ID和消息

    。我们也可以在输入中添加必需的属性。

      然后创建一个名为script.js的空JS文件,并在关闭之前将其添加到页面中标记,所以我们不必等待DOM准备好。

       

      16.添加一些JavaScript

      我们需要添加一个事件处理程序,侦听Enter键,验证字段,获取值(如果有效)并将其添加到消息列表的末尾,清除字段并滚动到消息的底部。像这样的东西将完成我们的演示工作,但不要在生产中使用它!

      //查找重要元素const input = document.getElementById('input'); const messages = document.getElementById('messages'); //在输入input.addEventListener上监听按键事件('keypress',(event)=> {//检查按下的键是否为ENTER if(event.keyCode === 13){//检查字段是否有效if(input.validity.valid){//使用值const message = createMessage(input.value)创建DOM元素; //将新消息追加到列表messages.appendChild(message); //清除字段输入.value =''; //将消息滚动到底部messages.parentNode.scrollTop = messages.parentNode.scrollHeight;}}}); //将值转换为HTML函数的字符串createMessage(value){//警告:如果不先清理字符串,请不要在生产中执行此操作! return stringToDom(` 
    • $ {}值
    • `)} //将字符串转换为真正的DOM函数stringToDom(string){const template = document.createElement('template'); template.innerHTML = string.trim(); return template.content.firstChild; }

      现在,当您在该字段中键入并按Enter键时,您将看到您的消息已添加到元素列表的底部。

      17.添加一些其他信息

      为了展示最终新CSS属性的一个好处包含我们需要做一些有点人为的事情。我们将实现一个功能,在消息列表顶部的框中显示新消息的发送时间。将鼠标悬停在邮件上时会出现此问题。

      首先,我们需要将此信息添加到我们的新消息中。我们可以修改的返回线的CreateMessage用于将当前时间添加到属性的功能。

      return stringToDom(` 
    • $ {}值
    • `);

      您可能已经注意到新消息有一个额外的类消息 - 雷。让我们添加一个快速类,使它们脱颖而出并与列表右侧对齐。

      .message  -  mine {background:#ff2089; margin-left:20%; margin-right:0; }

      18.显示时间戳

      因此,我们的目标是使消息的时间戳显示在消息列表的顶部,但我们需要这样做,以便即使滚动列表也始终可见。首先让我们尝试使用伪元素渲染值。我们只想为我们的消息这样做。见下文。

      .message  -  mine :: after {content:attr(data-timestamp); }

      这应该显示消息中的时间戳。让我们稍微修改一下它只显示在上面:徘徊,有一些样式,并固定在消息区域的顶部,所以即使滚动时它也可见。

      .message  -  mine:hover :: after {background:#000;颜色:#ff2089; content:attr(data-timestamp);左:0;填充:5px;位置:固定;顶部:0;宽度:100%; }

      嗯,它有点工作,但它出现在页面的顶部而不是可滚动区域。我们来补充一下位置:相对到了.messages窗格尝试包含它。

      .messages {...职位:亲属; ...}

      啊,它不起作用,因为固定定位锚定到视口,而不是它的相对祖先。我们最后一个新房产的时间 -包含

      19.探索遏制

      CSS Containment是一个令人兴奋的新命题。它有许多选项,使您能够将浏览器的样式,布局和绘制工作限制为特定元素。修改DOM时,这是特别有益的。一些变化 - 甚至是小变化 - 要求浏览器重新布局或重新整理整个页面,这显然是一项昂贵的操作,即使浏览器努力为我们优化这一点。

      使用CSS Containment,我们可以基本上对页面的部分进行围栏并说出“在这里发生了什么,留在这里”。这也可以反过来使用,并且可以保护环形围栏元件免受外部变化的影响。

      包含四个值,每个值具有不同的目的。您可以根据需要组合它们。

      • 布局- 包含元素完全不透明用于布局目的;外面的任何东西都不会影响其内部布局,反之亦然
      • 涂料- 包含元素的后代不会显示在其边界之外
      • 样式- 某些属性不会逃避包含元素(听起来像使用Shadow DOM获得的封装,但不是)
      • 尺寸- 可以在不使用其后代大小的情况下布置包含元素

      或者,您可以使用两种关键字中的一种作为简写:

      • 严格是'layout paint style size'的别名
      • 内容是'layout Paint Style'的别名

      这些值中的每一个都有点不透明,因此我建议您阅读规范并在DevTools中使用它们来查看实际发生的情况。

      这两个重要的价值观是布局涂料因为它们在需要大量DOM操作的复杂Web应用程序中使用时提供性能优化机会。在我们的基本演示中,我们可以利用其中一个后果包含:油漆帮助我们确定时间戳。

      根据规范,当使用油漆时,“元素充当绝对定位和固定定位后代的包含块”。这意味着我们可以设置包含:油漆在...上.chat类和固定定位将基于卡而不是视口。你可以通过使用获得相同的效果变换:translateZ(0)但遏制感觉不那么黑客。

      .chat {...包含:paint; ...}

      20.把它包起来

      这就结束了我们对一些新CSS功能的终止之旅。其中大多数都非常简单,虽然我们绝对建议更详细地研究CSS Containment。我们在这里只是触及了它的一小部分而且这种功能听起来像它实际上没有做到的东西 - 造型的封装。这说它可以证明非常有用,它已经处于候选推荐阶段,所以值得一看。

      本文最初发表于创意网页设计杂志Web Designer。买第274期要么订阅

      阅读更多:



    翻译字数超限