必威体育下载克里斯蒂安·海尔曼

γCSS VSjavascript:信任与控制

星期三,6月21日,2017点在6点44分

当哥托康要求我发言时,我认为这将是另一个机器学习或进步的网络应用程序的谈话。必威体育下载相反,组织者让我报道CSS.在他们的“编程语言”轨迹中,一种代表性不足的语言。现在,我一直很喜欢CSS从一开始。我认为参加一个核心开发会议的人不会那么兴奋。他们不会看的CSS详细地说。相反,我的假设是,这对他们来说更是一种必要的烦恼。所以我写了一篇关于CSS手段和我们如何不利用它的优势。

这是我谈话的笔记。

无聊的战斗

美国队长vs.铁人

前几天我又看了一次“美国队长:内战”。我又一次感到厌烦,我不太明白它的概念。超级英雄被迫对附带伤害负责的想法并不新鲜。要求控制他们也不是什么新鲜事。“不可思议的人”在这方面做得很好。

我对所有这些超酷英雄互相战斗的前提感到更无聊。我们知道他们的能力。我们知道,他们是在无数场合拯救彼此生命的深层次的朋友。我们知道他们的力量是一致的。没有暴力,没有真正的驱动器,在这些遭遇中没有愤怒。感觉就像Marvel介绍了太多酷的角色,现在试图找到一种让人们站在一边的方法。卖更多的玩具,创造人造戏剧。

当我们谈论使用CSS或布局的javascript。两者都有各自的优点,他们都有自己的力量。他们都有粉丝团准备挖掘最详细的信息来互相宣传。但我觉得这很无聊。两者共同使用是推动网络向前发展的原因。有两个巨大的营地,这让我们束手无策。一端看到CSS作为过去的事情,在模块驱动的世界中,我们应该在脚本空间中完成所有工作。另一个看到CSS它的预处理器和构建脚本都足以完成所有工作。记得DHTML我们用JavaScript做一切的日子?还记得“仅CSS解决方案”的反冲吗?当我们(ab)使用复选框进行复杂的交互以避免使用任何javascript时?

吉安娜·布兰廷说得很好

这两组能不能:
“CSS非常简单,它甚至没有编码”
“CSS太难了,我们需要用JS替换它!”
请互相谈谈?

很多关于CSS因为开发人员不理解它与编程有什么不同。相反,我们玩弄它,改变它。打碎东西后,我们认为它不够好,我们需要更换它。

我知道OpenGL-我可以做梯度

这常常超出了标准。很像使用用于创建简单渐变的OpenGL我们不需要一直把大炮拿出来。CSS有一些我们无法与客户端脚本匹配的技巧。它与语法或语言特性无关。这是关于分担责任。

谁是错的,谁应该宽容?

CSS,很像HTML容错.这可能会令人困惑。这意味着最终用户不应该遭受开发人员的错误。产品与CSS当开发人员出错时仍会出现。它们看起来不完美,但是他们工作。当ACSS解析器遇到一个它不理解的属性——它跳过它。当它遇到一个它无法处理或不支持的值时,它跳过它。这样我们就可以向后兼容。

具有背景色和渐变色的按钮将在较旧的环境中显示颜色。它还显示在由于性能问题而不支持渐变的环境中。更快,更多的高保真和支持环境将呈现渐变。

你不需要了解环境,也不需要做出决定。操作系统,浏览器和相关代理为您做出这些决定。

JavaScript是不容错.这可能是灾难性的。在使用JavaScript时,您的控制能力更强。但你也更负责任。

客户机上的javascript可能会因多种原因中断。浏览器可能不支持,这种连接可能是不稳定的。最终用户所拥有的移动服务提供商可能会将其视为他们缩小和打包脚本的工作。当javascript遇到一些它不理解的东西时——它会崩溃。它装进去了,什么也不显示,因此,你的产品的用户会因为你的错误而受到惩罚。或者其他人和脚本引入的错误,这些错误涉及到将代码交付给最终用户。

换言之:

  • CSS-你运用你的风格,你希望它能奏效。
  • JavaScript-您可以控制样式,并且应该验证它是否有效。

CSS意味着拥抱网络的“无光泽”,作为布拉德·弗罗斯特说的.网络不是可以设置像素的固定画布。很多事情都是你无法控制的:

  • 用户的浏览器
  • 决议案,其设备的像素密度和颜色设置
  • 它们的连接可靠性和速度
  • 他们的连接限制——资源阻塞是一回事
  • 他们的字体大小和缩放需要
  • 他们机器上为您的产品提供的资源(是中央处理器已经燃烧了?)
  • 产品中文本内容和图像大小的数量-细胞质雄性不育有人吗?

这可能是令人望而生畏的,而且我们经常希望控制产品运行的环境——如果只是为了保持我们的理智的话。这意味着尽管我们屏蔽了很多潜在用户。

在这个未知的环境中,我们必须决定谁来承担工作来处理其性能问题:

  • CSS-浏览器的工作是性能良好,使用图形处理器资源和跳过功能。
  • JavaScript-测试支持是你的工作。为了确保渲染效果,绘画和回流很快。保持动画同步。

CSS在这方面做得非常好,浏览器制造商花了很多精力来调整界面性能。

为什么我们低估了CSS并且过分重视javascript的好处?我想有一件事应该归咎于经典的互联网浏览器。

CSS它崎岖的历史

CSS必须快速成长,并且没有得到浏览器的支持,浏览器需要一个可靠的工具。

CSS起初是非常有限的,用来代替视觉效果HTML和属性。放弃所有这些字体,BGCOLL,排列,中心,人力资源和朋友。不加调试的浏览器支持和非常奇怪的错误对它没有帮助。我们知道事情不对劲,但对此我们无能为力。我们甚至无法询问任何人,因为浏览器制造商无法获得反馈。

当iPhone出现时CSS在聚光灯下度过了它的一天。“HTML5是未来”的故事需要很多额外的功能。由于苹果公司在这方面大放异彩,而标准化花费的时间太长,所以“仅限WebKit”。T

他的意思是前缀CSS再次为不同的渲染引擎分叉。浏览器制造商进行了创新,并以前缀功能显示出了对其他浏览器的统治地位。作为开发人员,这意味着重复,必须为每个人选择一个支持计划。当然一个是支持老年人,过时的浏览器。这些围绕前缀的新浏览器战争引起了许多争论和混乱。

最后但并非最不重要的是直到最近CSS.相反,我们使用定位和浮动进行黑客攻击。定位,尤其是像素的绝对定位在网络上是不明智的。人们可以调整字体大小,内容会重叠。使用浮动定位需要清除元素。

它不是你所说的可靠的基线,也不是一个简单易懂的基线,如果你不是“网络本地人”。

我们需要CSS不管浏览器支持如何工作

我们的解决方案是用JavaScript修补。我们可以读出条件并对它们做出反应HTML以及应用样式。因为JavaScript是一种编程语言,所以我们可以完全控制正在发生的事情。我们有条件,循环,比较——程序员遗漏的所有东西CSS.这个,在某种程度上是对CSS作为一个概念。匹配多个元素的选择器本质上是一个循环。我们甚至可以使用:nth-child()以集合中的元素为目标。

一般来说CSS自从我们不得不使用javascript来修补它以来,它一直在飞速发展。尤其令人失望的浏览器支持是一个小得多的问题。

  • 常青浏览器是一回事——所有浏览器都在不断升级。我们甚至可以从浏必威体育下载览器制造商那里了解下一步该做什么。
  • 浏览器工具提供了详细的洞察CSS适用于什么。我们甚至得到了动画编辑器和颜色选择器之类的视觉工具。
    firefox devtools中的bezier编辑器
    火狐开发者工具有一个可视化的Bezier动画编辑器
  • CSS跨浏览器的支持有很好的文档记录:卡尼苏是一种不可思议的资源。它不仅显示哪个浏览器和哪个环境支持什么。它还解释了实现中的错误,提供指向规范和错误报告的链接。它甚至有美国石油学会将这些信息嵌入到文档和开发人员工具中。
    我可以在Visual Studio代码的编辑器页脚中使用信息吗
    使用 “我能用”分机对于 Visual Studio代码您可以直接在编辑器中显示浏览器支持信息。当你编码必威体育下载的时候,你就知道你锁定了谁!
  • 我们支持几乎所有浏览器的通道和错误跟踪。有些甚至允许你使用Twitter提交错误.浏览器制造商的团队活跃在社交媒体上,并且可以访问。
  • 预处理器萨斯较少为创新CSS规格更快。就像今天jquery激发的javascript一样,这些会导致人们想要的功能。
  • 社区花了很多时间CSS更易于维护。类似方法面向对象CSS通过妮可·苏利文原子设计通过布拉德·佛罗斯特已经存在很久了,应该有助于降低复杂性。

什么CSS可以为你做

这里有一些神奇的东西CSS现在可以,您应该考虑使用。

计算CSS价值观

有一件事似乎总是在CSS是一种计算价值的方法。经典的例子是一个绝对定位的元素,它100%宽,但需要填充。在过去,我们需要通过嵌套另一个元素并对其应用填充来实现这一点。虽然我们可以用很长一段时间CSS()为此,应用计算宽度(100%–1em)。

计算在浏览器中得到很好的支持.使用它们不应该有任何疑虑。

媒体查询

CSS媒体查询允许您对文档视区的更改做出反应。本质上,它们意味着当视区满足特定条件时,应用部分样式表。这可以是一个至少具有一定宽度或至多具有一定高度的视区。您还可以检查屏幕的纵向或横向方向,或者文档是否为打印输出。
CSS媒体查询的javascript在媒质.这允许您按需加载内容。一个媒体查询问题是浏览器加载块中的图像,而不管匹配与否。

生成的内容

使用前:后:中的伪选择器CSS允许您创建纯视觉内容。这是一个很好的方法来确保那些出于表面原因的东西不需要自己的,空的div,跨度,B或I元素。它是一种保持样式表中所有内容的可视化的方法,而不是脚本或HTML文件。你可以把它和投影配对,坡度和其他CSS创造视觉效果的功能。令人印象深刻的展示是”单一的div“。这个网站显示了从一个div元素。

怪物的阴沉,股份有限公司。作为一个单一的div
这张图是一张 div使用生成的内容创建

动画和过渡

动画转变在里面CSS是iPhone问世时的重大突破。转换允许您创建从一种状态到另一种状态的平滑更改。你不需要知道应该发生什么变化。你只需要告诉浏览器过渡的时间以及要使用的宽松功能。动画给你更精细的控制。您可以定义关键帧,以及应该如何设置动画。动画和过渡都会在之前触发事件,期间和之后。这允许您以可预测的方式与JavaScript交互。使用的好处CSS因为浏览器可以确保动画的性能。这是通过在图形处理器以及在需要时限制帧速率。这是确保用户手机电池寿命的重要步骤。如果你用javascript制作动画,这很容易出错。

视口单元

当您想要详细定义体验时,媒体查询是有意义的。相反,还可以使用视区单位根据可用空间调整元素的大小。视区宽度(vw)是整个视区宽度的百分比。所以在480px宽屏幕上,10vw是10%或48px。这与%单位不同,它是父元素而不是视区的百分比。嵌套百分比会变小,大众不会。视区高度(vh)是整个视区高度的百分比。您还可以使用vmin和vmax使自己独立于我的方向。这些要么采取较小或较大的大众和vh。支持视区单位的唯一麻烦是迄今为止边缘不支持vmin和vmax。

CSS技巧有一篇很棒的文章视区单元有多强大.从分辨率无关的嵌入到视区相关的排版,您可以使用视区单位来创建高度灵活的界面。

柔性箱

柔性箱是在中创建元素布局的方法CSS.从本质上说,所有声称布局表的人都更容易被遗漏CSS-还有更多。可以将元素的子元素右对齐,左,顶部或底部。您可以定义它们来填充可用空间,每一个都使用相同的数量或比其他更多。您还可以定义它们以使用彼此之间或它们周围的可用空间。它就像罐头上说的那样灵活。如果你想让一个可视化的编辑器来看看这意味着什么,用react构建具有出色的flexbox编辑器

使用flexbox的不同设置进行播放

还有一个游戏叫弹性箱蛙式.它以一种令人愉快和容易理解的方式教授概念,并且对于孩子们来说是很好的开始CSS.

Frasbox蛙

关于flexbox的好话就是那个佐伊吉伦沃特在各种事件中给予。关于这个话题,我最喜欢的是佐伊如何展示他们如何在生产中使用flexbox。例子来自预订网并显示不支持它的浏览器的回退。

CSS网格

如果flexbox是行或列中布局元素的答案,CSS网格正在将它提升到下一个层次。使用它,您可以在定义的二维网格中布局元素,行和列。网格已经烹饪了一段时间,现在终于得到了全面的支持。

一个简单的网格示例
一些设置可以将一系列元素转换为灵活的网格

网格可以令人望而生畏,因为它的灵活性意味着有很多选项可供选择。到目前为止,最简单的开始方法是瑞秋安得烈“S”网格实例“资源”。这个有复制+粘贴网格布局的例子。它们中的许多都带有不受支持的浏览器的回退。培训视频解释了它们的进进出出,使它成为一个令人惊奇的资源。

如果你能更好地必威体育下载接受挑战,你可以把握CSS通过播放网格CSS网格花园.

网格花园
必威体育下载学会给胡萝卜浇水 CSS网格花园

有一些“必须看到”的说法CSS网格在线。第一个是”CSS网格布局“瑞秋·安德鲁的作品。

仁西蒙斯正在采取不同的方法。在她的“网上真正的艺术指导她向我们展示了网格的多功能性如何帮助我们摆脱“框布局”思维。

混合和匹配网格和flexbox没有问题。它可以并且应该在其单元格中使用flexbox.一起,这些工具允许您创建灵活的布局。允许可变内容和更改以适应可用空间的布局。网页布局。

CSS自定义属性(变量)

最需要的特征之一CSS像Sass和Less这样的预处理器在很长一段时间内拥有的是变量。现在我们有CSS自定义属性哪件事让我最兴奋CSS.您可以在文档中定义一次可重复使用的设置,并在整个过程中应用它们。最常见的使用案例是定制颜色和尺寸。但您可以进一步定义字体和其他字体。也可以使用它们将计算嵌套到CSS.这在以前是不可能的。一个惊人的特性是,自定义属性也可以用JavaScript动态设置。

在javascript中读取和设置CSS自定义属性的示例
如何读写自定义 CSS带javascript的属性–(摘自Lea Verou的演讲)

如果你想了解必威体育下载CSS自定义属性有一个您不应该错过的谈话。李维鲁“S”CSS变量:var(-subtitle)“是信息宝库。

CSS特征查询

另一个非常受欢迎的附加CSS特征查询.这些功能与媒体查询非常相似。通过使用@supports,可以检查当前用户代理是否支持特定功能。然后定义一个块CSS只有在有功能支持时才会应用。这可能会让人觉得奇怪,因为CSS应该已经处理好了。但它所做的是给你更多的粒度控制。它还允许您在不支持使用“not”关键字的特定功能时定义回退。

CSS和JavaScript?

CSS而javascript协同工作是强大的,而且是正确的。到目前为止CSS已经来了,它仍然不能做任何事情。有些情况下CSS与我们想要实现的目标形成鲜明对比。

AS克里斯蒂亚诺·拉斯泰利在他的解释中让和平来吧CSS“说话,“关注点分离”这一宝贵特征在模块世界中并不适用。

组件世界中的关注分离

什么时候?CSS变成了一件事,我们把所有的外表、感觉和行为HTML进入之内CSS和JavaScript。我们可以在文档甚至项目范围内定义。我们庆祝的是CSS不从父元素继承。当我们构建可以一致重用的组件时,我们不希望这样。我们要他们带着他们的表情,感觉和行为,不向相邻的人流血,也不从父母那里继承。

CSS以及在非组件世界中一起工作的javascript

在构建基于文档的解决方案时,没有理由不挖掘CSS.您可以也应该使用javascript来提供信息CSS不能读入CSS.不过,这样做是谨慎的,尽量减少干扰。

制造的层次CSS在这个场景中,JS与另一个JS一起工作:

  • 使用CSS当你可以–使用你在这里看到的东西
  • 如果你需要与CSS,考虑更改自定义属性
  • 如果这不是一个选择将类应用于父元素使用类列表。
  • 作为最后的手段,你可以直接更改样式

将鼠标位置放入CSS的示例
演示如何在javascript中读取鼠标位置并将其存储在 CSS自定义属性–(摘自Lea Verou的演讲)

每当您动态更改样式时,请记住,您正在使用浏览器。每一种风格变化都会导致回流,渲染和绘画。保罗·刘易斯达斯苏尔马保持一个叫做CSS触发器.这一个详细描述了CSS更改会导致对浏览器的惩罚。

CSS触发器
CSS触发器提供不同样式更改的效果信息

综上所述

CSS它比以前可靠得多,而且没有多少地方可以和现在的情况不同。最重要的是要记住CSS并不意味着要像JavaScript那样做。即使是布局语言也不会起作用CSS并满足同样的需求。这项工作很艰巨,而且做得很好。当你使用CSS,无论最终用户的设置如何,浏览器都能帮助您满足他们的需求。这是Web的核心原则,在W3C HTML设计原则

用户高于作者高于实现者高于说明符高于理论纯度

我们的用户需要平滑的界面,可靠,不要损坏电池。所以,考虑CSS再多一点。你可以懒惰,以社区的工作为基础。

激励和积极CSS要跟随的人

在研究这个话题的时候,我不断地回到由网络上优秀的人编写和维护的资源中。这里有一个简短的名单,没有特别的顺序,如果你想和你的CSS知识。我要感谢他们每个人。他们让我们所有人都能更轻松地上网。

我每天都受到这些人(其他人)的启发,希望你也能有同样的经历。

在Twitter上分享