内容隐藏

4) 的JavaScript中的元素湖北福彩

5) 参考文献

可以将元素湖北福彩视为CSS媒体湖北福彩的自然扩展。我们将总结对媒体湖北福彩的要求，如下所示：

话题

媒体湖北福彩

元素湖北福彩

的HTML中的元素湖北福彩

JS中的元素湖北福彩

媒体湖北福彩

媒体类型
湖北福彩条件
样式表

在CSS中，它公开为：


@media screen （最小宽度：350像素） {
  预先 { padding : 5%; }
}

的 @媒体 将样式表包装为特定的最小宽度，屏幕部分指定媒体类型，然后 （最小宽度：350像素） 指定样式表的湖北福彩条件。

在超文本标记语言（HTML）中，媒体湖北福彩的相同功能通过 媒体="" 归因于 <style> 和 <link> 标签：


<link rel="stylesheet" 媒体="(min-width: 350px)" href="data:text/css,pre { padding : 5%; }">

<style 媒体="(min-width: 250px)">
  预先 { padding : 5%; }
</style>

此外，在JavaScript中，使用 window.matchMedia:


if (window.matchMedia('(min-width 350px)').matches) {
  css = 'pre { padding : 5%; }'
}

为了扩展HTML，CSS和JavaScript中的这些语法以涵盖描述元素湖北福彩所需的功能，让我们看一下元素湖北福彩的要求。

元素湖北福彩

选择器（列表）
湖北福彩条件
事件监听器
样式表

在这里，我们有几个新想法，一个也要应用样式表的选择器，以及事件监听器。

的CSS中的元素湖北福彩

通常，JavaScript事件是从CSS作者那里抽象出来的-您无需担心 window.load 要么 window.resize 编写媒体湖北福彩时，或 鼠标移到 要么 鼠标移出 写作时 ：徘徊，并且在使用时也可以聚焦或模糊 ：焦点等

在大多数情况下，我相信浏览器制造商将能够找到一种最一般意义上的实现元素湖北福彩的方法，而无需CSS作者指定他们应该听的特定事件。另外，可以通过收听与选择器有关的特定事件和/或湖北福彩条件来进行增强。如果使用滚动湖北福彩条件，则浏览器应该能够自动侦听与使用的选择器匹配的标签上的滚动事件。

但是，很可能可以通过允许作者使用白名单限制哪些事件触发对湖北福彩条件的重新评估来提高性能。

建议的CSS元素语法：


@element 预先 {
  预先 { padding : 5%; }
}

在这里 @元件 包装样式表， 预先 指定选择器，而我们缺少湖北福彩条件或事件。这是一个简单的元素湖北福彩，只要适用于 <pre> 找到元素。


@element 文本区域 (min-characters: 50) {
  文本区域 { background: #ededed; }
}

上面的示例包含一个湖北福彩条件，该条件计算元素内文本的字符数 <textarea>

仍然，问题仍然存在吗？

“如果存在不止一个，该怎么办？ <textarea> 在文档中？”
当然看起来只要 <textarea> 全部超过50个字符 <textarea> 文档中的标签将获得样式。因此，需要另一个概念：作用域选择器。

我们可以用 $ this 作为元素湖北福彩样式表中选择器内的占位符，表示通过湖北福彩条件的每个测试元素。


@element 文本区域 (min-characters: 50) {
  $ this { background: #ededed; }
}

如果我们有多个 <textarea> 在我们的网站上展示，我们有一种方法可以只定位那些特定的 <textarea> 符合湖北福彩条件的元素。但是，此占位符的使用不仅限于将样式应用于匹配元素本身-它应该可以在包含的样式表中的选择器中的任何位置使用


@element .widget (max-width: 350px) {
  $ this h2 { font-size: 1em; }
}

的HTML中的元素湖北福彩

相同的元素湖北福彩功能如何暴露给HTML？也许通过使用附加属性 <style> 和 <link> 标签：

选择器 用于选择器列表
元件 湖北福彩条件
事件 活动

这些可能如下所示：


<link rel="stylesheet" 选择器="textarea" 元件="(max-characters: 5)" 事件="blur" href="data:text/css,$this { background: #ededed; }">

<style 选择器="textarea" 元件="(max-characters: 5)" 事件="blur">
  $ this { background: #ededed; }
</style>

的JavaScript中的元素湖北福彩

并将此功能公开给JavaScript，也许像 window.matchMedia 可能有用，也许 window.matchElement。它的工作方式与此类似：


document.querySelectorAll().filter()

所以对于元素湖北福彩 （最小宽度：500像素） 上 <div> 您需要测试的标签


document.querySelectorAll('div').filter(el => el.offsetWidth > 500)

这可以正常工作，但真正的力量 window.matchMedia 它能够处理CSS单元，而不仅仅是处理像素。能够执行类似以下示例的操作比现在使用JavaScript的功能要好：


window.matchElement('div', '(min-width: 50em)')

参考文献

如果您正在寻找这些想法的语法先例，或使用类似内容的插件，请查看：

@元件 规则类似于均衡器
<link> 属性类似于紧身的
<style> 属性类似于 reproCSS

获得更多文章– 的CSS

关于元素湖北福彩的语法的思考

话题