在元素内部捕获焦点的CSS方法

我最近读了基思·格兰特的这篇文章，其中介绍了新到的。对这个新的UI元素感到兴奋，我立即坐下来对它进行实验，看看如何将它有效地用作最常用的模态。在实验过程中，我发现了一个巧妙的CSS技巧：如何在元素中捕获焦点，modals的常见可访问性要求，以及一个众所周知的困难。免责声明：本文中的演示仅在Chrome和Firefox浏览器上测试。Safari有一个奇怪的问题，在使用Tab键进行正常的键盘导航时，并不是所有的元素都集中在一起！什么是焦点捕获？首先，引用W3C文档中关于在对话框中按一个键之后应该发生什么的内容： Tab: - 将焦点移动到对话框中的下一个Tab-able元素。 - 如果焦点在对话框中最后一个Tab-able元素上，将焦点移动到对话框中的第一个可制表位元素。 Shift+tab - 将焦点移动到对话框中的上一个可制表位元素。 - 如果焦点位于对话框中的第一个可制表位元素，则将焦点移动到对话框中的最后一个可制表位元素。在对话框中进行汇总时，按Tab或Shift+Tab应该只在对话框内可聚焦的元素之间循环对话框内的焦点。这是有意义的，因为当一个对话框打开时，用户只在它内部进行交互，而允许焦点从对话框外逃逸本质上是混合上下文，并可能创建一种状态，用户可以在其中不知道哪个元素在焦点中。因此，回到模态的概念，我们的期望是模态内部的tab将只关注模态内部的元素。任何超出模态上下文的内容都将超出范围，因为选项卡只关心其中的内容。这就是我们所说的焦点捕获的意思，如果我们要在中实现焦点捕获，最常见的方法是在对话框打开时执行以下操作：元素的实验。在考虑焦点捕获时，我马上想到了一个CSS伪类（在浏览器中也是最近的一个类）：:focus-within. 如果您以前没有听说过，它表示一个接收到焦点的元素或包含一个接收到焦点的元素。例如，你有一个，里面是input元素。如果要在所包含的input具有焦点时设置的样式，可以这样做： div:focus-within {border: 2px solid red;}CodePen Embed FallbackCSS聚焦技巧捕获让我们利用:focus-within和CSS转换来实现元素内部的基本聚焦陷阱。总结一下，下面是技巧的工作原理。当焦点不在对话框中（并且对话框已打开）时，我们：。下面是基本的对话框和打开功能： {modal.showModal();} 开始。点击按钮会打开我们的对话框。使用新的CodePen Embed Fallback 注意：在上面的dialog示例演示中，您会注意到一些额外的polyfill代码，以使在不支持它的浏览器中工作。如果您在上面的示例中打开对话框并开始多次切换，您可能已经注意到了这个问题：焦点从对话框中的元素开始，但在传递完对话框中的最后一个元素后就离开了。这是我们技巧的核心。我们需要将:focus-within检测到的焦点丢失发送到JavaScript，以便将焦点发送回对话框。这就是CSS转换发挥作用的地方。CSS转换是通过CSS发生的，但也会用JavaScript发出事件。在我们的例子中，我们可以在

在元素内部捕获焦点的CSS方法

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么