I read examples, but I don't understand what is different between:
<link href="style.css" rel="stylesheet" />
and
<%: System.Web.Optimization.Styles.Render("~/Style/style") %>
why use second example?
Thanks!
The first example is a normal HTML css include link.
The second is part of the System.Web.Optimization bundling package. You can set up bundles to combine multiple stylesheets into a single stylesheet (Note: In debug mode it will still show multiple stylesheets). This reduces the number of trips your page makes back and forth to the server and should speed up page load times.
Here's a tutorial article from the ASP.net site.
Related
I imagine this has been asked time and time again, but i've not seen the answer I'm looking for.
Im doing some simple tests with a HTML file and CSS file trying to stop the page from render blocking the CSS, running the site through page insights ( google )
Now i've seen answers like this:
<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">
and I've seen answers like this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">
Both of which I am fine with, for the google fonts! But not for the main styles of the page, I don't think its a good user experience to see a page with no styles and then all of a sudden they load in.
Obviously you can eliminate any blocking of CSS by sticking the whole lot as inline styles, but again I don't think this is good practice, you're outputting all styles to a HTML page and not loading them via a style sheet.
I've seen sites actually load the styles like so:
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres a link to the page insight speed test on the. I know the site is running wordpress. If you view page source it uses the exact same as i've used above.
And they aren't Render Blocking at all... How?
Im on a https I'm using cloudflare and my style sheet is compressed and only around 24bytes and I'm still getting render blocking.
Why?
How to avoid it?
The CSS loaded as an external request is always render blocking, you can't avoid it. The recommendation on pagespeed insights is that you don't do any css request before the content is loaded, in order to avoid the unstyled effect they suggest that you inline the CSS needed to display the content before the fold.
The page on your example is doing exactly that, they inline some css content (check the source code and search for the style tag), then, when the content is loaded they add an external stylesheet with javascript.
All that said, this is a recommendation, you can ignore it if you are happy with the performance of your page, if you want to follow the recommendation you can apply some techniques to achieve this in an automation way.
As always, in css-tricks you have a great introduction post to these techniques: https://css-tricks.com/authoring-critical-fold-css/
The key to the Google PageSpeed insights is above-the-fold render blocking. If you check the site that you linked as your page speed test reference, there are no strictly inline styles - you are correct. However, they have a <style>...</style> block inside of their <head> that sets all of their most important styles for above-the-fold content. That means those styles render immediately, and all other supporting styles will load soon after - but your visitors (and Google PageSpeed) will not notice the difference.
The idea is to get a configuration JSON from the server after login. And depending on the config(let say a company the user is linked to) use one of the pre-set styles. The frontend is React-based. So, I'll not be able to get the main styles tag by id and change it on the fly:
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
document.getElementById('theme_css').href = '../red.css';
Are there any other common ways to load files dynamicly in React(Redux) web-app?
You can try this way. It works great for even larger projects of your browser support is slightly higher or you can implement the same with the help of SASS/LESS.
https://medium.com/#harishv6665_49536/theming-with-react-js-or-any-in-minutes-with-css-variables-11d4ebecdb41
I have installed Joomla 3.x and some modules.
One of my modules is to display articles from certain categories of my articles, but when I navigate to my article, the CSS stylesheets do not load.
When I view the source, I discovered that the URL for the CSS stylesheet in the page above becomes:
<base href="http://cambridge.mywebcommunity.org/index.php/10-%E7%88%B1%E7%AB%8B%E6%96%B9%E5%8A%A8%E5%90%91%E6%9B%B4%E6%96%B0/3-welcome-to-your-blog" />
... instead of the original I put in, here:
<base href="http://cambridge.mywebcommunity.org/" />
This also happens to another CSS stylesheet from the module. The CSS URL loads like this:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/10-爱立方动向更新/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
... instead of the original CSS URL that I put in:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
So I have figured out that the issue is the URLs are not being added by Joomla correctly. How would I go about fixing this?
From what you've posted it looks like you (or extension developers) are trying to add css with absolute links. Looking at the source of your page will quickly show you that your links look different from the core links in that they are absolute not relative. You may need to look a the code in the modules doing this and fix or contact the developers and ask them to fix. Also ask them about the js.
In Joomla you add style sheets with code like this in your template index:
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
The change in behavior is most likely due to a recent security fix concerning uris in the header. I'm not going to link to details of the exploit but easy enough to find out why this was changed, but it was for good reasons.
I have an ascx that has some CSS in it. It is possible that this ascx could be added multiple times to a page. The CSS that it uses would only need to be included once.
Is it possible to conditionally include CSS? If so how?
Is this considered bad practice?
I have an ascx that has some CSS in it... Is this considered bad practice?
Yes. Your CSS rules should ideally be defined in a separate, static css file that gets loaded only once in the header by your master page. CSS in the body is not standards compliant.
If you set up good caching rules on your static CSS files, this will significantly reduce the amount of data you pull across the wire because the CSS rules won't need to be loaded again for each page load. If you want to only include this file in the header if certain dependent ASCX files get rendered, look at Neil Fenwick's answer.
Update
For whatever reason, Neil Fenwick seems to have deleted his answer. Hopefully he won't mind my reproducing it here:
Definitely YES, it is possible.
I would recommend looking at a library like ClientDependency to manage your CSS and JS includes & dependencies.
Good examples for how to include given on ClientDependency codeplex page.
Its good practice to organise your CSS and JS dependencies so that you can assert their requirement multiple times, but only emit the dependency in the output once.
The ClientScriptManager can handle this simply by checking whether or not some particular "script" has been added. Intended for javascript, but works for anything.
if(!Page.ClientScript.IsStartupScriptRegistered("mykey")) {
Page.ClientScript.RegisterStartupScript(this.GetType(), "mykey", "<link type=\"text/css\" href=\"stylesheet.css\"/>", false);
}
You might be very interested in looking into Modernizr which allows you to do plenty of interesting test and load different resources (for example CSS) depending on test result. For example you might want to load rounded-images.css if the browser does not support border-radius etc.
Building on Neil's answer. We make use of Telerik's ASP MVC extensions to manage our JavaScript and CSS in ASP.NET MVC. It allows for "smart" inclusion of JS and CSS (even from a partial-view) preventing file duplication. It comes with other bells-and-whistles as well (like file merging and compression).
This is probably not applicable to your exact situation based on your post (raw ASP.NET), but thought I would mention it for the sake of ASP.NET MVC users looking for the same thing.
Put that in the head of the html.
<pre>
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> <![endif]-->
</pre>
For more info go to: http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
GTE means greater than.
Horrible practice. Unless that is all you do at your work since that is going to create a big workload since each css file might need to be changed in the future.
I've noticed that to get CSS-Intellisense working in VS, the paths have to be relative - Is this the case?
However, it seems
<link href="/resources/test.css" [...] />
is far more practical than
<link href="resources/test.css" [...] />
I'm including the CSS in the master page, and don't see much good in including it as a content block, just to get the relative paths correct for each directory depth. I've had a quick try with inline code resolving the path, but no dice there either (for Intellisense).
I feel I'm missing something fairly simple - What's the correct approach here to have CSS Intellisense work across the pages in the app during dev, and render fine in any deployed state?
Cheers.
(Note - I'm aware that a <% if (false) { %> type hack is required for user controls)
I know this is an older question, but this works fine in VS2008. If my memory serves me correctly it was fixed in a hotfix a while back:
alt text http://img168.imageshack.us/img168/8893/testgo.png
The other alternative ( if this isn't working for you still ) is adding a runat="server" and the tilde "~"
<link rel="stylesheet" runat="server" media="screen" href="~/css/styles.css" />
This worked for me. YMMV