首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5中style元素的"scoped"属性的当前状态是什么？

作者：mobiledu2502856963 | 来源：互联网 | 2023-05-21 09:45
如何解决《HTML5中style元素的"scoped"属性的当前状态是什么？》经验，为你挑选了3个好方法。

它在这里说http://www.w3.org/TR/html-markup/style.html#style:

允许的父元素

任何可以包含元数据元素,div,noscript,section,article的元素

这

In scope (green background).

Out of scope.

在不支持该scoped属性的浏览器中,这些样式将全局应用.


该:scope伪选择:

除了scoped属性之外,还有可以使用的:scope伪选择器.此实现提供与前一个相同的支持.

例:


  
Outside scope.

  

    
    
In scope (green background).

  

  
Outside scope.

此选项还增加了可能的优势,即如果浏览器不理解该scoped属性,则不会全局应用样式.唯一的问题是Safari 7+将识别:scope伪选择器,即使该scoped属性不受支持,因此在Safari 7+中丢失了优势.


全球风格:

和以前一样,使用style不带scoped属性的标签会创建全局样式,因此只有在包含scoped属性时才会限定范围.


兼容性摘要:

此时,对该功能的支持看起来很黯淡.仅在Firefox 21+中支持CSS范围.Chrome,Internet Explorer,Safari或Opera目前不支持此功能.根据caniuse.com,从Chrome 20到36,可以通过实验标志启用支持,但删除了支持.



1> Alexander O&＃39;..：

您对规范的解释似乎是正确的.在风格上的标签页MDN包含的描述scoped属性.

作用域如果存在此属性,则该样式仅适用于其父元素.如果不存在,则样式适用于整个文档.


该scope属性:

这是一个工作示例,仅适用于Firefox 21+.

例:


  
Out of scope.

  

    
    
In scope (green background).

  

  
Out of scope.


2> CXJ..：

似乎"scoped"属性已从HTML5规范中完全删除.目前和之前的几个版本都没有提到它.



3> Edurne Pascu..：

这里的许多答案已经过时了,所以这里简要总结一下该scoped属性的发生情况.

最初(在HTML5之前),

Some content here...

它div有一个id属性,样式表中的所有规则都明确使用id选择器来确保它们只在该div中应用.当然,这仍然需要避免文档中的id冲突,但唯一性已经是id属性的要求.

虽然该scoped属性被删除,但这种方法可以完成工作,具有合理的可读性(当然,像任何代码一样,它可以被混淆,但这不是重点),应该验证,并且应该适用于几乎所有与CSS兼容的浏览器.

PS:根据规范,内部应验证.然而,Nu验证器(标记为实验性)仍然抱怨它.有一个未解决的问题:https://github.com/validator/validator/issues/489


推荐阅读
  • web

    优化后的标题：hCalendar微格式：深入解析事件与时间、地点相关的活动标记方法

    本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇，前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记，提高事件信息的可读性和互操作性。 ... [详细]
  • web

    深入解析浏览器内核与版本的发展历程

    浏览器作为我们日常不可或缺的软件工具，其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程，帮助读者更好地理解这一关键技术组件，揭示其内部运作的奥秘。 ... [详细]
  • web

    深入解析HTML5字符集属性：charset与defaultCharset

    深入解析HTML5字符集属性：charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset，帮助开发者更好地理解和应用这些属性，以确保网页在不同环境下的正确显示。 ... [详细]
  • version

    如何调整下拉菜单的宽度以优化用户体验？ - How to Adjust the Width of a Dropdown Menu for Better User Experience?

    为了优化用户体验，本文探讨了如何调整下拉菜单的宽度。通过合理设置宽度，可以提升界面的美观性和易用性。文章提供了具体的代码示例，帮助开发者实现这一目标。例如，可以通过 CSS 或 JavaScript 来动态调整下拉菜单的宽度，确保其在不同设备和屏幕尺寸上都能保持良好的显示效果。 ... [详细]
  • web

    如何根据浏览器类型动态加载npm包以优化前端性能？

    本文探讨了如何通过检测浏览器类型来动态加载特定的npm包，从而优化前端性能。具体而言，仅在用户使用Edge浏览器时加载相关包，以提升页面加载速度和整体用户体验。此外，文章还介绍了实现这一目标的技术细节和最佳实践，包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • web

    七款高效编辑器与笔记工具推荐：KindEditor自动换行功能解析

    七款高效编辑器与笔记工具推荐：KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具，并详细解析了KindEditor的自动换行功能。其中，轻笔记QingBiJi是一款完全免费的记事本软件，用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外，该软件还支持多平台同步，确保用户在不同设备间无缝切换。 ... [详细]
  • web

    HTML5 Web存储技术详解：从基础到应用全面解析

    HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一，因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API，使得Web应用程序能够在浏览器中高效地存储数据，从而提升了应用的性能和用户体验。相较于传统的Cookie机制，Web Storage不仅提供了更大的存储容量，还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用，全面解析HTML5 Web存储技术，帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • java

    深入解析 JavaScript 中的引用类型：Function 类型详解

    定义Function类型：1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]
  • ip

    三角测量计算三维坐标的代码_双目三维重建——层次化重建思考

    三角测量计算三维坐标的代码_双目三维重建——层次化重建思考
    双目三维重建——层次化重建思考FesianXu2020.7.22atANTFINANCIALintern前言本文是笔者阅读[1]第10章内容的笔记，本文从宏观的角度阐 ... [详细]
  • instance

    SoundPool

    如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]
  • instance

    如何高效利用Hackbar插件提升网页调试效率

    如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件，可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本，以确保在不升级到最新2.2.2版本的情况下，依然能够高效进行网页调试。此外，文章还提供了详细的使用技巧和常见问题解决方案，帮助开发者更好地掌握这一工具。 ... [详细]
  • instance

    夜灵HTML日志第10天：深入探讨浏览器兼容性与高级选择器应用

    在第10天的夜灵HTML日志中，我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性，但在旧版浏览器中的支持情况并不理想。然而，目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器，我们提供了多种解决方案，以确保网站在不同环境下的兼容性和用户体验。此外，我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • version

    HTML 页面实现用户无法选中文字，提供跨浏览器兼容的禁用文本选择功能

    为了实现跨浏览器兼容的禁用文本选择功能，可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类，并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外，还可以结合JavaScript进一步增强用户体验，例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • web

    iOS原生苹果缓存HTML技巧与分享URL实战经验分享

    在处理分享功能时，以往通常会首先考虑使用第三方SDK，如友盟等。然而，通过实际项目经验发现，利用iOS原生的UIActivityViewController不仅可以实现高效、稳定的分享功能，还能更好地控制用户体验。本文将详细介绍如何利用iOS原生技术缓存HTML内容，并结合URL分享的最佳实践，帮助开发者在实际开发中提升应用性能和用户满意度。 ... [详细]
  • audio

    使用摄像头捕获图像并将其保存为文件

    本文介绍了如何利用摄像头捕捉图像，并将捕获的图像数据保存为文件。通过详细的代码示例，展示了摄像头调用的具体实现方法，适用于多种应用场景，如安全监控、图像处理等。 ... [详细]
author-avatar
mobiledu2502856963
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有