返回顶部
首页 > 资讯 > 精选 >Blazor中的CSS隔离问题分析
  • 789
分享到

Blazor中的CSS隔离问题分析

2023-06-08 02:06:37 789人浏览 泡泡鱼
摘要

这篇文章主要介绍“blazor中的CSS隔离问题分析”,在日常操作中,相信很多人在Blazor中的CSS隔离问题分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Blazor中的CSS隔离问题分析”的疑惑有所

这篇文章主要介绍“blazor中的CSS隔离问题分析”,在日常操作中,相信很多人在Blazor中的CSS隔离问题分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Blazor中的CSS隔离问题分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1.环境

VS 2019 16.9.0 Preview 1.0

.net SDK 5.0.100

2.前言

CSS一旦生效,就会应用于全局,所以很容易出现冲突。为了解决这个问题CSS隔离就顺势而生。Blazor诞生于2018年,至今为止已经2年多了,然而CSS隔离直至.NET 5出现才支持。

3.Razor组件间隔离

Razor组件间CSS隔离应当是使用最为简单,也是使用最为方便的一种CSS隔离方式。实现Razor组件间CSS隔离非常简单,只需要在组件所在的目录下建立同名的“.razor.css”文件即可——若文件夹A下存在名为“Component.razor”的组件,则只需要在文件夹A下建立“Component.razor.css”,即可实现为“Component.razor”组件设置单独的样式而不影响其他组件。

以默认模板为例,新建“Index.razor.css”,其内容如下:

h2 {    font-size: 48px;    font-weight: bold;}

新建“Counter.razor.css”,其内容如下:

h2 {    font-size: 16px;    font-weight: 400;}

其效果如下:

Blazor中的CSS隔离问题分析

上面的组件CSS文件将会被生成为“项目名.styles.css”的文件,在.NET 5中会被默认添加到“index.html”中,如上两个CSS文件会被编译为如下结果:

h2[b-g5zg69lne1] {    font-size: 16px;    font-weight: 400;}h2[b-f3rb2cn7la] {    font-size: 48px;    font-weight: bold;}

在浏览器中查看DOM元素,其结果如下:

<h2 b-f3rb2cn7la>Hello, world!</h2><h2 b-g5zg69lne1>Counter</h2>

也就是说,这两个组件内的DOM被添加上了一个以“b-”开头加10个随机字符的属性,这似乎与angular相似(本人没有用过,只是在浏览器中见到过类似的东西)。Blazor中的CSS隔离,似乎是通过随机属性名来实现的。那么,通过id和class生成styles.css是什么样的呢?其同样是通过随机属性名来实现的。例如,下面一段组件CSS文件,

#zxyao-a {    font-size: 48px;    font-weight: bold;}#zxyao-b {    font-size: 24px;    font-weight: bold;    background-color: #ff0000;    padding: 16px;}.zxyao-cls {    font-size: 24px;    font-weight: bold;    background-color: #000;    color: #fff;    padding: 16px;}

其会被编译成如下结果:

#zxyao-a[b-f3rb2cn7la] {    font-size: 48px;    font-weight: bold;}#zxyao-b[b-f3rb2cn7la] {    font-size: 24px;    font-weight: bold;    background-color: #ff0000;    padding: 16px;}.zxyao-cls[b-f3rb2cn7la] {    font-size: 24px;    font-weight: bold;    background-color: #000;    color: #fff;    padding: 16px;}

其结果如下:

Blazor中的CSS隔离问题分析

也就是说,无论组件CSS文件汇总如何写,其都会转化为CSS选择器[随机属性]的形式。

4.CSS隔离的子组件支持

默认情况下,组件CSS仅仅只会应用都当前组件。例如,有以下两个组件:

<div class="my-text">    Welcome to your new app.    <CssIsolation.Components.Child /></div><h2>Child</h2><div class="my-text">    这是子组件</div>

如果在”Index.razor.css“中样式如下,

.my-text {    border:2px solid #000;    padding: 16px;}

那么其仅仅只对”Index.razor“起作用&mdash;&mdash;border出现在最外层 Index 组件上。

Blazor中的CSS隔离问题分析

如果想让其对本组件及其子组件”.my-text“元素起作用,可以使用”::deep“进行标记:

::deep .my-text {    border:2px solid #000;    padding: 16px;}

Blazor中的CSS隔离问题分析

是不是发现,本组件的“.my-text”的border没了。如前面所讲,在这里,::deep将会被随机属性所替代,也就是说,其编译结果如下:

[b-f3rb2cn7la] .my-text {    border:2px solid #000;    padding: 16px;}

其中,b-f3rb2cn7la是指本组件根元素,如图所示。

Blazor中的CSS隔离问题分析

如果本组间没有唯一的父元素标签,则本组间中的每一个原生的HTML标签都会有相同的随机属性,例如下面这个组件,其“div”与“h2”都会具有相同的随机属性,并会用改属性替代“::deep”标识。“Child“组件中的元素将不会出现改随机属性。

<div class="my-text">    Welcome to your new app.</div><h2>    Welcome to your new app.</h2><CssIsolation.Components.Child />

一些组件库会提供”Template“之类的组件,例如Ant Design Blazor,如果使用组件包裹所有的元素,如:

<AntDesign.Template>    <div class="my-text">        Welcome to your new app.        <CssIsolation.Components.Child />    </div></AntDesign.Template>

则Blazor会忽略外层的组件,直至在本组间内找到第一个原生的html元素为止,然后为该层所有原生的html元素添加上随机属性。

因此,当本组件的根元素与子组件需要设置样式的元素CSS选择器相同时,如果想要隔离样式在本组件与子组件都生效,有两种方式:一是为本组间和子组件同时写CSS样式,二是再用一个元素包裹所有的组件和元素,即换个根元素。

5.CSS预处理器的支持

很多时候,我们可能会使用SCSS或LESS来编写样式文件,Blazor原生并不支持这些预处理器,我们可以使用任务运行程序资源管理器来在项目生成前编译SCSS或LESS,或者是使用一些第三方的库来支持,比如微软官方所提到的Delegate.SassBuilder。我试用了下Delegate.SassBuilder,可能由于我的使用方式不对,CSS文件的生成貌似是晚于项目生成的,无法在第一次生成程序时对CSS文件进行编译,接下来我将分享另外一种方式,即使用”任务运行程序资源管理器“。

这里我简单使用了下”node-sass“,直接通过命令行编译,并未使用Gulp或webpack之类的高级工具,解决方案步骤如下(node-sass的安装这里就不再讲了):

下载并按照扩展”Command Task Runner“

Blazor中的CSS隔离问题分析

编写SCSS文件编译命令行程序”scss.bat“

在项目的根目录下新建scss.bat文件:

Blazor中的CSS隔离问题分析

并写入如下命令。

node-sass -r ./ -o ./ --source-map true --source-map-contents sass --output-style compressed

该命令将会编译SCSS文件,并生成压缩后的CSS文件和相应的source map文件。

添加bat文件到Task Runner

在scss.bat文件上右键,选择”Add to Task Runner“选项。

Blazor中的CSS隔离问题分析

绑定运行任务

打开视图|其他窗口|任务运行程序资源管理器,在找到scss命令,然后右键,选择绑定|生成前,绑定后可在右侧绑定窗口下生成前下看到该命令。

Blazor中的CSS隔离问题分析

启用任务运行程序后,会在解决方案目录下生成”commands.JSON“文件,我的此文件内容如下,”-vs-binding“选项表明了任务绑定的运行时间的位置。

{  "commands": {    "scss": {      "fileName": "cmd.exe",      "workingDirectory": ".",      "arguments": "/c scss.bat"    }  },  "-vs-binding": { "BeforeBuild": [ "scss" ] }}

接下来,只需要直接运行程序,即可以看下效果。

当然在SCSS中,我们也可以使用”::deep“标记,其也能正确的显示,例如:

.my-text {    border: 2px solid #000;    padding: 16px;    ::deep {           .my-text {            border: 2px solid #ff0000;            background-color: #000;            color: #fff;        }    }}h2 {    background-color: #efefef;    font-weight: 700;}

对应的Razor组件如下:

@page "/"<div class="my-text">    Welcome to your new app.    <CssIsolation.Components.Child /></div><h2>Child</h2><div class="my-text">    这是子组件</div>

其运行效果如下:

Blazor中的CSS隔离问题分析

但是,个人感觉,在SCSS中使用”::deep“标记可能会有点混乱,建议要么不使用”::deep“标记,要么将”::deep“标记放在最外层,即如下的形式。

// 一些SCSS样式代码...::deep {// 子组件的一些SCSS样式代码...}// 一些SCSS样式代码...

6.修改随机属性标识

前面有提到,Blazor默认生成随机属性名的形式是以“b-”开头加10个随机字符,在微软的官方文档中显示这个是可以更改的。这对于自家的应用来说,是比较友好的,比如小米可以定义随机属性形式是以”mi“开头,淘宝可以定义随机属性形式是以”tb“开头等等。但是,此功能似乎还存在有问题,有人已经在GitHub提出了issue&mdash;&mdash;Custom CSS Scope Identifier not working,希望Blazor能够越来与完善。

到此,关于“Blazor中的CSS隔离问题分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: Blazor中的CSS隔离问题分析

本文链接: https://www.lsjlt.com/news/250945.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Blazor中的CSS隔离问题分析
    这篇文章主要介绍“Blazor中的CSS隔离问题分析”,在日常操作中,相信很多人在Blazor中的CSS隔离问题分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Blazor中的CSS隔离问题分析”的疑惑有所...
    99+
    2023-06-08
  • virtualenv隔离Python环境的问题解析
    目录virtualenv介绍virtualenv应用virtualenv介绍 virtualenv为应用提供了隔离的Python运行环境,解决了不同应用间多版本的冲突问题。virtu...
    99+
    2024-04-02
  • Golang 函数测试中的隔离问题
    在 golang 函数测试中,隔离至关重要,避免不同测试间干扰。解决隔离问题可通过使用子表隔离全局变量或使用 mock 对象模拟外部依赖项。具体步骤为:1. 子表:创建独立变量实例避免干...
    99+
    2024-04-17
    golang 函数测试 git
  • MySQL中隔离级别的示例分析
    这篇文章主要介绍MySQL中隔离级别的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!MySQL入门--事务隔离级别1) 隔离级别介绍如果一个客户机的事务更改了数据,其他客户机的事务是应发现这些更改还是应与其隔...
    99+
    2023-06-01
  • CSS中的层分离编程示例分析
    本篇文章为大家展示了CSS中的层分离编程示例分析,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助...
    99+
    2024-04-02
  • MySQL事务隔离级别的示例分析
    这篇文章将为大家详细讲解有关MySQL事务隔离级别的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。SQL标准定义了4类隔离级别,包括了一些具体规则,用来限定事务内...
    99+
    2024-04-02
  • 全面解析MySQL中的隔离级别
      数据库并发的对同一批数据进行增删改,就可能会出现我们所说的脏写、脏读、不可重复读、幻读等一系列问题。MySQL提供了一系列机制来解决事务并发问题,比如事务隔离、锁机制、MVCC多版本并发控制机制。今天来探究一下事...
    99+
    2022-05-10
    MySQL 隔离级别
  • css中图片路径问题的示例分析
    这篇文章主要介绍css中图片路径问题的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。 css中加背景图片根据图片...
    99+
    2023-06-08
  • mysql的事务隔离和幻读和死锁问题
    1.系统要通过严格的ACID测试,ACID表示原子性/一致性/隔离性/持久性 原子性:一个事务必须被视为一个不可分割的最小工作单元 一致性:数据库总是从一个一致性的状态转换到另外一个一致性的状态 隔离性:通常来说一个事务所做的修改在最...
    99+
    2020-12-25
    mysql的事务隔离和幻读和死锁问题
  • CSS继承问题实例分析
    本篇内容介绍了“CSS继承问题实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 根据 CSS目前的...
    99+
    2024-04-02
  • Mysql事务隔离级别原理的示例分析
    这篇文章主要介绍Mysql事务隔离级别原理的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!说说事务的隔离级别吧?老实说,事务隔离级别这个问题,无论是校招还是社招,面试官都爱问...
    99+
    2024-04-02
  • CSS字体中加载加速问题的示例分析
    这篇文章将为大家详细讲解有关CSS字体中加载加速问题的示例分析,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。除了各种特定字体系列外(如 Times、Verd...
    99+
    2024-04-02
  • MySQL的事务隔离级别可以解决什么问题
    下面讲讲关于MySQL的事务隔离级别可以解决什么问题,文字的奥妙在于贴近主题相关。所以,闲话就不谈了,我们直接看下文吧,相信看完MySQL的事务隔离级别可以解决什么问题这篇文章你一定会有所受益。 ...
    99+
    2024-04-02
  • 解决MySql8.0 查看事务隔离级别报错的问题
    目录MySql8.0 查看事务隔离级别报错问题命令更改为MySQL的事务隔离级别(包含mysql8.0+设置与查看)一、事务的基本要素(ACID)二、事务的并发问题三、MySQL事务...
    99+
    2024-04-02
  • MySQL中insert的问题分析
    这篇文章主要介绍MySQL中insert的问题分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! image.png image...
    99+
    2024-04-02
  • Vue+SpringBoot前后端分离中的跨域问题
    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议、域名、端口号不同等),导致不能正常调用api...
    99+
    2024-04-02
  • Mysql事务隔离级别之读提交的示例分析
    这篇文章主要为大家展示了“Mysql事务隔离级别之读提交的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Mysql事务隔离级别之读提交的示例分析”这篇文...
    99+
    2024-04-02
  • MySQL事务隔离实现并发控制的示例分析
    这篇文章主要介绍了MySQL事务隔离实现并发控制的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、并发访问控制实现的并发访问的控制技术是基于锁;锁分为表级锁和行级锁...
    99+
    2023-06-20
  • 分析MySQL数据库Innodb中的事务隔离级别和锁的关系
    本篇内容主要讲解“分析MySQL数据库Innodb中的事务隔离级别和锁的关系”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析MySQL数据库Innodb中的事...
    99+
    2024-04-02
  • CSS浏览器兼容问题的示例分析
    这篇文章主要介绍了CSS浏览器兼容问题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 CSS对阅读器的兼容性偶然让人很头疼,大约...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作