Hello Blazor:(14)CSS隔离
前言
上次我们说到,FindRazorSourceFile使用有一定限制.
查看它的源码,发现它仅查找以b-
开头属性名的HTML元素:
function getScope(element: Element): string | null {return element.getAttributeNames().filter(name => name.startsWith('b-'))[0] || null;
}async function getRazorSourceName(scope: string | null): Promise<RazorSourceName | null> {if (scope === null) return null;let razorSourceName = razorSourceMap[scope] || null;if (razorSourceName !== null) return razorSourceName;const res = await fetch(`_content/FindRazorSourceFile/RazorSourceMapFiles/${scope}.txt`);if (res.ok) {const text = await res.text();const p = text.replace(/[\r\n]*$/ig, '').split('|');const razorSourceName = { projectName: p[0], itemName: p[1] };razorSourceMap[scope] = razorSourceName;return razorSourceName;}else {razorSourceMap[scope] = NotFound;return NotFound;}
}
那这个b-
是什么意思?
CSS 隔离
原来,FindRazorSourceFile实际上使用了Blazor中的“CSS隔离”功能[1]。
CSS隔离帮助避免组件和库的样式冲突。
例如Index.razor,包含有如下HTML标记:
<h1>Hello, world!</h1>
实际在浏览器中显示时,HTML会被添加以b-
开头的属性作为标识符,例如:
<h1 b-82p0zt5u2f>Hello, world!</h1>
CSS隔离标识符是唯一的,并且与每个组件相关联。也就是说,b-xxx
可以用来作为HTML元素与.razor文件之间的对应key。
强制生成标识符
但是,你可能注意到,默认情况下,只有使用了*.razor.css
的HTML元素才会有标识符:
这也是正确的,因为CSS隔离是为了匹配的Razor文件中的HTML元素,在应用的其他位置定义的同名CSS声明都不会与这个组件的样式冲突。
如果没使用特定组件样式,则无需CSS隔离,当然也就不用生成标识符。
而FindRazorSourceFile使用了一个技巧,它增加了一个MsBuild编译目标,强制对所有Razor文件执行了`ComputeCssScope`任务[2]:
<ComputeCssScope ScopedCssInput="@(_Fictional_RazorCss)" Targetname="$(TargetName)"><Output TaskParameter="ScopedCss" ItemName="_Fictional_RazorCss_with_Scope" />
</ComputeCssScope>
从ComputeCssScope
任务的源码中,我们可以找到标识符的生成算法:
private string GenerateScope(string targetName, string relativePath)
{using var hash = SHA256.Create();var bytes = Encoding.UTF8.GetBytes(relativePath + targetName);var hashBytes = hash.ComputeHash(bytes);var builder = new StringBuilder();builder.Append("b-");builder.Append(ToBase36(hashBytes));return builder.ToString();
}
结论
从本文中,我们知道了“CSS隔离”功能,并且了解到“CSS隔离”是由编译任务实现的,而不是运行时。
参考资料
[1]
“CSS隔离”功能: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0
[2]
ComputeCssScope
任务: https://github.com/dotnet/sdk/blob/main/src/RazorSdk/Tasks/ComputeCssScope.cs
Hello Blazor:(14)CSS隔离相关推荐
- shadow影子css隔离
主应用和子应用之间的样式隔离 BDM 约定项目前缀 在样式前面加一个路径 比如/vue下面的所有样式 – 这就也可以实现项目的个隔离 但是既然是约定 那就容易不遵守约定 css-modules 打包时 ...
- Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
- Blazor 准备好为企业服务了吗?
如果您正在编写 .NET Web 应用程序,您很可能已经意识最近一年在.NET Web开发领域的热点都是 Blazor 的.如果你还没有了解Blazor,它允许您使用 C# 来编写 Web 应用程序, ...
- css就近原则_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...
- 你可能不知道的10个Blazor功能
目录 介绍 .NET 5和C# 9 Markdown gRPC GraphQL EF Core和Azure Cosmos DB 渐进式网络应用程序 CSS隔离 虚拟化 服务器端预渲染 热重载 介绍 B ...
- 卑微前端程序媛日记CSS
1.如何垂直居中一个元素? 方法一:绝对定位居中(原始版之已知元素的高宽) .content {width: 200px;height: 200px;background-color: #6699ff ...
- css为什么要用浮动_细品100道CSS知识点(上)「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...
- 面试小道(一、HTML和CSS)
文章目录 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3.div+css的布局较table布局有 ...
- 前端面试题整理——(第一弹 HTML和CSS)
文章目录 前端面试题整理--(第一弹 HTML和CSS) 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什 ...
最新文章
- 如何使用matlab的siso,MIMO-SISO-MATLAB-program 和 的 仿真源代码,非常详细,可以参考学习 267万源代码下载- www.pudn.com...
- leetcode 122. 买卖股票的最佳时机 II
- 【FTP】java FTPClient 文件上传内容为空,文件大小为0
- 腾讯阿里谋定联姻农业 智慧农业对话中国农民丰收节交易会
- 2007年10月14日的日记
- mysql 自增模式 auto,mysql(AUTO_INCREMENT)自增ID的起始值修改与设置
- Analyzer普通用户登录不了[从网络访问此计算机]
- php 获取cookieid,Redis实现Session共享详解
- oracle嵌套三层循环语句,在存储过程中执行3种oracle循环语句
- Django: OperationalError / no such table
- 就像教育一样,本身作用巨大,当过度强化,就是扭曲了~
- 工业机器人什么情况下会出现奇点_功夫机器人周全:复合作业机器人规模应用的奇点有多远?...
- FluorineFx对于现有站点的配置
- centos6.3配置 kickstart 无人值守安装centos6.3系统 httpd方式
- 新手机出现陌生女人照片,客服:大数据时代可能性有很多
- 虚拟机打开了服务器维护,Vmware WorkStation 打开远程服务器上的虚拟机
- c语言旋转led时钟设计报告,基于POV原理的LED旋转时钟的设计与制作
- Win10下VS2019 C++ opencv3.4.x 环境搭建过程 | 找不到opencv_world347d.dll | error LNK2019: 无法解析的外部符号
- react插件,树状图(可自由定义子节点结构,大小,样式)
- swoole httpserver的启动事件级线程分析
热门文章
- stm32cubemx中文_用 STM32 通用定时器做微秒延时函数(STM32CubeMX版本)
- 帆软报表(finereport)table块钻取,返回记住table块位置
- mongodb的IO测试工具 mongoperf
- hdu 3480 斜率dp
- 【原创】SQL SERVER 查询Job作业基本信息及执行情况
- (转)程序员的十层楼11层(上帝)
- Teams Bot开发系列:Activity处理流程
- Teams与OneDrive for Business和SharePoint的关系
- ipad和iphone切图_如何从iPhone和iPad上的Mail应用程序删除电子邮件帐户
- 在Windows XP中对系统文件(页面文件和注册表)进行碎片整理