The documentation at the link below explaining how to prevent the user from having to clear cache when upgrading from one Telerik version to another has an issue with the css priority. My app targets .net 9 but I wasn't able to get the first solution using MapStaticAssets() to work so I implemented the second solution using cache busting. That resolved the caching error but it put the priority of all.css above any css I have in a style element in my component.
In my specific case I have a grid and I want the values in one of the columns to be links but using an anchor element in a grid doesn't underline and turn the content blue so I added css into my style tag in my component:
.k-grid a {
color: #0d6efd;
text-decoration: underline;
}
That works fine normally, but when I upgraded to the current version of Telerik and had cache issues and followed the cache busting instructions in the link, the content no longer looks like a link. See dev tools screenshots with and without cache busting.
https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-browser-cache-buster
With cache busting it doesn't look like a link because all.css takes priority:
Without cache busting:
Any way to get around this?
Hi Doug,
As far as I am familiar with CSS, the observed problem should not occur, and I can't reproduce it either. Please review the attached screenshot and sample app. I added Grids to Home.razor and Counter.razor to also test the behavior after navigation.
Is it possible that you have multiple <style> tags that override one another? What is overriding the text-decoration style in the first screenshot?
Dimo,
Thanks for the timely response. With your project I get the same behavior you describe. My project is a little older and structured differently and I've upgraded it to .net 9 and Telerik v11. I have an index.html which is where I've declared the js and css files, but I removed those and added the cache busting code into my App.razor file as shown below:
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Route Manager Router</title> <!-- This solution works for all deployment scenarios so we don't have to change the href value manually --> <base /> <script> var path = window.location.pathname.split('/'); var base = document.getElementsByTagName('base')[0]; if (window.location.host.includes(':')) { // If there's a colon it's debug as that's the only scenario with a port number. base.setAttribute('href', '/'); } else if (path.length > 2) { base.setAttribute('href', '/' + path[1] + '/'); } else if (path[path.length - 1].length != 0) { window.location.replace(window.location.origin + window.location.pathname + '/' + window.location.search); } </script> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css?version=0.1" rel="stylesheet" /> <link href="RouteManager.Client.styles.css" rel="stylesheet" /> <!--<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script> <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />--> <script src="RouteManagerScript.js"></script> </head> <body> <div id="app">Loading...</div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.webassembly.js"></script> <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script> </body> </html>App.razor:
<CascadingAuthenticationState> <Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> </CascadingAuthenticationState> @{ var telerikUiForBlazorVersion = typeof(TelerikRootComponent).Assembly.GetName().Version; } <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?@telerikUiForBlazorVersion" rel="stylesheet" /> <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js?@telerikUiForBlazorVersion"></script>I only have one <style> element in my component, and with the js and css declarations removed from index.html I get some "'TelerikBlazor' was undefined" errors in the browser console which I'm not sure are relevant to this issue but with the two files above this is what I see in dev tools:
Maybe with my project structure I need to do the cache busting a different way?
And if I use the MapStaticAssets() method I get something similar. I need to leave the link and script in index.html otherwise I get errors, but if I also add them to App.razor, and call MapStaticAssets() this is what dev tools looks like:
Hello Doug,
If you have an index.html file, this suggests a Blazor WebAssembly standalone app. All <script> and <link> tags should be in index.html and not in App.razor.
The TelerikBlazor was undefined error means that our script is not loaded at all or not loaded on time.
With regard to the styling issue:
The attached screenshot shows the above URL in Chrome and Edge. I also tested in Firefox and Safari. Everywhere the styles are applied as they should.
Dimo,
Everything in your azure app looks good. For my project, I have been using Edge which is up to date but I tried in Chrome as well and get the same css issue. My solution contains a client project as well as a server project and the issue occurs when I have the <script> and <link> tags (or @Assets) in App.razor but you've noted that that's not the right place for those in my solution setup. It might be helpful to update the documentation to be more explicit about what code goes where and which options apply (or don't apply) to which Blazor flavors. This is an older Blazor app and was created before the terms "Standalone", "Hybrid" and "WebApp" applied to Blazor apps. When I remove those tags (or @Assets) from App.razor the css issue goes away so I think the implication here is that my only option is to hardcode the file versions as explained in the "Standalone Blazor WebAssembly Apps and Hybrid Apps" section of the documentation as linked in my original post. I tried that and it works but I'm not sure I really want to do that as I worry that will create it's own issues down the road.
Thanks for your help!
Hi Doug,
We mention App.razor in First Steps with Blazor Web Apps, because this is the correct place specifically for these apps. Based on the provided information, your app is not a Blazor Web App and the relevant documentation is about WebAssembly apps, which mentions index.html instead. This file is also used in hybrid apps.
Using hard-coded version numbers as cache busters is not perfect indeed, because it requires maintenance during product updates. Dynamic assembly version detection is not available in index.html, but you can explore built-in Blazor finger printing for the .js files.