Blazor中的C㊑SS防护难题

日期:2021-03-24 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

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”,其中容以下:

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

在建“Counter.razor.css”,其中容以下:

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

其实际效果以下:

上边的部件CSS文档可能被转化成为“新项目名.styles.css”的文档,在.NET 5时会被默认设置加上到“index.html”中,如上2个CSS文档会被编译程序为以下結果:

/* /Pages/Counter.razor.rz.scp.css */
h1[b-g5zg69lne1] {
    font-size: 16px;
    font-weight: 400;
}
/* /Pages/Index.razor.rz.scp.css */
h1[b-f3rb2cn7la] {
    font-size: 48px;
    font-weight: bold;
}

在访问器中查询DOM原素,其結果以下:

<h1 b-f3rb2cn7la>Hello, world!</h1>

<h1 b-g5zg69lne1>Counter</h1>

换句话说,这2个部件内的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;
}

其会被编译程序成以下結果:

/* /Pages/Index.razor.rz.scp.css */
#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;
}

其結果以下:

换句话说,不管部件CSS文档归纳怎样写,其都是转换为CSS挑选器[任意特性]的方式。

4.CSS防护的子部件适用

默认设置状况下,部件CSS只是总是运用都当今部件。比如,有下列2个部件:

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

/* Components/Child.razor */
<h1>Child</h1>
<div class="my-text">
    它是子部件
</div>

假如在”Index.razor.css“中款式以下,

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

那麼其只是只对”Index.razor“起功效——border出現在最表层 Index 部件上。

假如想让其对本部件以及子部件”.my-text“原素起功效,可使用”::deep“开展标识:

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

不是是发觉,本部件的“.my-text”的border没有了。如前边所说,在这里里,::deep可能被任意特性所取代,换句话说,其编译程序結果以下:

/* /Pages/Index.razor.rz.scp.css */
[b-f3rb2cn7la] .my-text {
    border:2px solid #000;
    padding: 16px;
}

在其中,b-f3rb2cn7la就是指本部件根原素,如图所示所显示。

假如本组间沒有唯一的父原素标识,则本组间中的每个原生态的HTML标识都是有同样的任意特性,比如下边这一部件,其“div”与“h1”都是具备同样的任意特性,并用到改特性取代“::deep”标志。“Child“部件中的原素将不容易出現改任意特性。

<div class="my-text">
    Welcome to your new app.
</div>
<h1>
    Welcome to your new app.
</h1>
<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“

撰写SCSS文档编译程序指令行程安排序”scss.bat“

在新项目的网站根目录下在建scss.bat文档:

并载入以下指令。

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“选择项。

关联运作每日任务

开启主视图|别的对话框|每日任务运作程序資源管理方法器,在寻找scss指令,随后鼠标右键,挑选关联|转化成前,关联后可在右边关联对话框下转化成前下见到该指令。

开启每日任务运作程序后,会在处理计划方案文件目录下转化成”commands.json“文档,我的此篇件內容以下,”-vs-binding“选择项说明了每日任务关联的运作時间的部位。

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

接下去,只必须立即运作程序,就可以以看看实际效果。

自然在SCSS中,大家还可以应用”::deep“标识,其也可以恰当的显示信息,比如:

/* Pages/Index.razor.scss */
.my-text {
    border: 2px solid #000;
    padding: 16px;

    ::deep {
           .my-text {
            border: 2px solid #ff0000;
            background-color: #000;
            color: #fff;
        }
    }
}

/* Components/Child.razor.scss */
h1 {
    background-color: #efefef;
    font-weight: 700;
}

相匹配的Razor部件以下:

/* Pages/Index.razor */
@page "/"

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

/* Components/Child.razor */
<h1>Child</h1>
<div class="my-text">
    它是子部件
</div>

其运作实际效果以下:

可是,本人觉得,在SCSS中应用”::deep“标识将会会出现点错乱,提议要不不应用”::deep“标识,要不将”::deep“标识放到最表层,即以下的方式。

// 一些SCSS款式编码
...


::deep {
	// 子部件的一些SCSS款式编码
	...
}


// 一些SCSS款式编码
...

6.改动任意特性标志

前边有提及,Blazor默认设置转化成任意特性名的方式是以“b-”开始加10个任意标识符,在微软公司的官方网文本文档中显示信息这一是能够变更的。这针对自己的运用来讲,是较为友善的,例如小米手机能够界定任意特性方式是以”mi“开始,淘宝网能够界定任意特性方式是以”tb“开始这些。可是,此作用好像还存有不太好,有些人早已在Github明确提出了issue——Custom CSS Scope Identifier not working,期待Blazor可以越来越与健全。

到此这篇有关Blazor中的CSS防护的文章内容就详细介绍到这了,大量有关Blazor中CSS防护內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:php过虑顾客递交主要参数,防引入 返回下一篇:没有了