On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
I'm diving into Bootstrap, and I'm beginning with the simplest example possible. In my HTML file there's only one line regarding style sheet:
<link href="css/bootstrap.css" rel="stylesheet">
In the css folder I've deleted all other css files (minified and css map) except bootstrap.css and bootstrap-theme.css - and now the HTML file lookes screwed up.
But when I copy back the minified css in the directory, the HTML renders fine - despite no link to it in the HTML. How is that possible?
You may have some #import statements in the stylesheet you are declaring in your HTML. That means that your stylesheet makes use of another stylesheet.
I am developing a large-scale RIA application using Ext JS 4. Inside my index.html I've the following definitions:
<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">
The problem
In provided code only index.css is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added user.css and documents.css in provided code as example). That all will grow into a huge amount of not minified CSS files, which will slow down application loading time significantly.
Also, some styles of Ext JS 'ux' components are not included in ext-all.css (GridFilters.css and RangeMenu.css in provided code).
I can write down a script, which will compress all these CSS files into one file, but ...
The question
Which is the correct way for styling Ext JS 4 applications? Maybe one should create SCSS files and do all styling there, and compile each time with compass compile to create CSS files and do development?
Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like ext-all.css for 'ux components (something like ext-ux-all.css)
I hope many people are using Ext JS to create great applications and they've thought about or solved such problems for themselves. I'll be grateful for any share of knowledge regarding this topic.
I have a similar situation to yours.
What I do is to first include the ext css file:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
Then all my app css is generated using compass. So there are a multitude of scss files that are compiled into a single css file. You can use compass watch so your css is compiled whenever a scss file changes.
I have to say that once you get used to compass and sass/scss, it's very hard to justify plain css files - compass and sass generate better cross-browser css and the scss files are far easier to maintain and customise compared to plain css.
As for the ux css. I wouldn't worry about it too much, but you have two options:
simply import your ux css files in your main scss file (see this answer);
use one of a multitude of css unifiers/mergers/minifiers out there.
Creating your theme is the only way you can keep your code well and is a good way to deploy optimized css.
Using secnha's mixins ( now partially documented in docs) you can create multiple looks for your buttons, pannels,etc. You might have some hard time to figure out how it works, but is the only way to do things well.
You will find good resources on their docs ( guides and video). Also their scss sources are a good source.
I am updating a website to add some mobile friendly pages.
At the moment we have one big css page with everything in. My idea is to put all the mobile specific css into a separate file and then link both sheets. The mobile css will overide anything in the default css (bigger buttons etc).
Im quite new to css, what is the best practice?
One large CSS file leads to fewer HTTP requests, which can improve performance.
Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.
I have a few stylesheets for any significant app I've worked on.
base.css - always applied.
print.css - this hides menus and other parts of the screen not really good for a printed page. Triggered by the media attribute.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - applied second, and if and only if it's IE6. I hope to throw this out someday.
<clientname>.css - one stylesheet for each client that wants the site to have their logo/etc.
If I were trying for blazing fast performance, I'd combine them. However, I know sites getting hundreds of millions of hits a day don't bother, so I'd strongly recommend splitting them however makes sense to you, in order to make it easier to maintain.
For the most part, extra hardware is cheaper than extra developer hours and/or more bugs. Maintainability is usually the highest goal for me.
yes you should use more than one css file rather using one big file.
It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.
For example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
In the case of styles for specific clients, I would say that it is a best practice to separate them.
Using separate stylesheets for different media is easily done.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In this case, all the style will be downloaded and applied when the media type matches the device.
However there is another method which is neat if your app is designed for mobiles, because it downloads the stylesheet ONLY if the media type matches.
<style type="text/css" media="screen">
#import "screen.css"; /* Note that some (older?) browsers don't support #import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
#import "mobile.css";
</style>
<style type="text/css" media="print">
#import "print.css";
</style>
I'd use two as well. Keeps things more tidy when editing for each device (computer and mobile device). I have one huge CSS stylesheet which I use for all browsers with the help of the css browser selector script, and I hate having to scroll through 6000+ lines of CSS, so I'd say the best way at least from experience is to separate them out!
Group your CSS meaningfully and serve it carefully.
For example, if you have CSS that is applied through out your site (e.g. CSS reset) make it separate file and include it for each page.
Then for each logical component of your site create separate CSS file and serve it on pages that belong to respective logical component. (Say you have a blog and polls on your site, if blog never needs CSS for polls you don't need to include it in blog.) But bare in mind this isn't practical for small sites.
Group your CSS by media for which they are used. If you have style sheet for printing keep it separate of your basic sheets if it makes sense (don't use separate files if you only have single CSS property for printing since it is not worth the request time).
Keep in mind that more sheets assume more HTTP requests and each request costs certain amount of time.
So there isn't explicit way these thing should be handled, it's all about making your CSS easier to maintain and easy for client to download (less HTTP requests, smaller size etc.)
I would use multiple style sheets to keep things better organized, then compress them into one file before putting them on the site, to improve performance.
You should have a range of CSS sheets for various tasks, else things get messy fast!
I think its better to use 1 for style, 1 for ie6 one for ie7. Nothing more.
Organization should be automatic inside the style.css. Using logical classnames and comments.
Less httprequests is good. Less markup is good. :)
I prefer two style sheets myself. The first one, and the one that always comes first in my HTML, is a reset style sheet. The implementation of this first style sheet helps web pages to display more consistently across different browsers.
Often, it is not necessary to create more than one additional style sheet. Generally, CSS commands specific to IE are ignored by Firefox and other compliant browsers and vice-versa. The real problem arises when an item on a page must be positioned and sized to be exactly the same across multiple browsers - at that point, more than two sheets become necessary although it is sometimes possible to get good results through proper ordering within the sheet.