I am developing this site, it got my CSS file, and also have references to other CSS files for plugins (like treeview for example).
The problem is that in CSS the plugin as it modifies the the elements for example, in my file and also modify this element.
The browser is considering the plugin CSS and not mine.
How can I force the browser to use my tag to CSS for example.
Can not just remove the CSS plugin because there are other tags that you must configure it.
It would be better to reverse the order by wich the files are loaded.
However, if that is not an option, you can add " !important" to the CSS property you want to take precedence (ex: "margin:0px !important").
After that, unless some other file has that keyword too, it won't matter in wich order the files are loaded.
This is very useful sometimes, but it is not a best practise.
If I'm understanding your question it gas to do with when you are including the CSS files in your HTML documents.
Example: in mystyles.css you have #myelement{margin:0} and in plugin.css #myelement{margin:20px}
If plugin.CSS is brought in your HTML doc after mystyles.CSS, plugin.css take precedence.
link href="mystyles.CSS"
link href="plugin.CSS"
Sounds like you want to reverse the order to
link href="plugins.CSS"
link href="mystyles.CSS"
Now #myelement will have a 0px margin.
Hope that helps.
Related
My style.css is a Render Blocking CSS.
I want to load critical css (above the fold css) as early and quickly as possible, and less important css (below the fold) later on.
How can I do it? I would have played around with different tools online if only they were scientific (that is repetitive between trails) but now I guess I want a theoretical approach.
One option is to have everything as default, that is just load the style.css as it comes even though it is render blocking. This is where I am today and I want to get away from this.
Or I could use option rel="preload" on style.css, so at least it would not render block?
Or I could split style.css into style_above_fold.css and style_below_fold.css and preload style_above_fold.css. And hopefully style_below_fold.css would not be render blocking.
Preload both style_above_fold.css and style_below_fold.css, but then maybe style_above_fold.css would not be prioritized above style_below_fold.css, and maybe that would be just like preloading the whole style.css.
Preload style_above_fold.css and put styles in style_below_fold.css as inline code instead (I have to my surprise discovered that preload css loads before inline css (or at least preload is prioritized before inline code)).
Put styles from style_above_fold.css as inline css and put the request for style_below_fold.css in the footer.
Just like 6, but instead preload style_above_fold.css. You see, if the tools online were sensitive enough, I could measure whether inline css or preload gives better performance.
Can someone advise my what to do if I want to maximize the performance?
Is it the same for JavaScript code?
You's should be separate each css file by feature,
ex: in homepage you should be create css file is need in homepage, not a combine style of all page in website. This will make a css file is small size and faster.
Beside you can render this css is inline your css it will useful.
If you use bootstrap or other third party, you can think about use javascript to load this file like code bellow:
function loadFile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
Usage: loadFile("your_css.css", "css")
Hope it can help!
One thing that makes an awesome improvement in above-the-fold content is applying a min-height: 100vh to your first section of above-the-fold content and make sure the elements aren't animated or video (unless you've optimized and lightened the video as well). That made a dramatic change in my Core web vitals.
How can I do that? Because I don't really know the word but I hope somebody knows this.
If you guys don't understand this then there is a link.
https://media1.tenor.com/images/0f097ed319d498c2bda3d87ba4f6ff10/tenor.gif?itemid=12846096
It's a gif but they set it into a cool style and I don't know how to set it like that.
The page most likely isn't actually a gif image, it could be some file structure like
> tenor.gif
>> index.html
where tenor.gif is actually a folder, with index.html inside it. Per W3C standard, folders automatically open up index.html if there is one directly inside it.
You could put whatever html code you want in index.html and styling.
You can check the contrast of the styles in the CSS documentation, they usually add you to the styles and filters, so they are fully configurable
semantic.css
semantic.min.css
semantic.min.js
Are these files sufficient for semantic-ui to work properly?
yes, you can also check https://www.jsdelivr.com/projects/semantic-ui for all the main and component files
First of all, semantic.css and semantic.min.css are both functionaly the same but the .min one has all unnecessary characters removed in order to make the file size smaller.
Anyway, You need those two files (.js - .css) minimized or not BUT you also need JQuery library
This question already has answers here:
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
(56 answers)
Closed 9 years ago.
I stumbled upon the following snippet in a source code of a web site.
<link href="#" id="colour-scheme" rel="stylesheet">
What does this do?
Without a base element, it does not do anything, except consume the browser’s resources a little. By URL specifications, # as a URL is a reference to the start of the document at the current base URL. Since the tag would have to be in an HTML document, it would fail (either because the document is served with an HTML media type or after the browser has in vain tried to parse HTML with a CSS parser).
If you use a base tag that sets the base URL to one that refers to a CSS document, it would technically work, e.g.
<!doctype html>
<title>Demo</title>
<base href="http://www.cs.tut.fi/~jkorpela/basic.css">
<link href="#" id="colour-scheme" rel="stylesheet">
<h1>Hello world</h1>
This would be rather abnormal, really, and it would effectively prevent you from using relative URLs otherwise in the document. So this is just a theoretical possibility, rather than what’s really going on.
Probably href="#" is just a placeholder here, to be overwritten by JavaScript code, or something. It’s bad coding style for several reasons. It would be better to omit the href attribute (even though this is technically invalid in HTML5) and have one inserted dynamically.
This does actually absolutely nothing except staying on the same page.
This comes from the Anchors that allow to jump on a part of a page (More specifically, on an id).
This is usually written to say that some link should be introduced here, because of its no-effectness. When you're coding a website, it's often useful to show links, even if the page the link refers to isn't yet existing. This is very often meant to be a temporary solution.
As specified in Ryan's and Tom's answers, it could also be to be used to load dynamically the CSS files.
Using a # in a link tag is commonly used to allow you to use javascript with later on if the URL is unknown or doesn't need to be set by default.
Example:
HTML
<link href="#" id="colour-scheme" rel="stylesheet">
JS
document.getElementById("colour-scheme").href="red.css";
This allows you to set the URL of the stylesheet in JS rather than statically set the location.
Probably some stylesheet that is to be loaded later on.
href = uri
This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.
Using a hash (#) as the reference is often done by developers yet to include the actual reference when it's not known, however if this is on a live website it may be that JavaScript is being used to load a stylesheet based on the users colour-scheme choice. Before they've made that choice no colour scheme is required so no reference is given, hence the #.
Generally we use to call our css file for example below. Suppose I have a html file and I want to call my external css file, at that time I need to use . For more information please check this link http://www.w3schools.com/tags/att_link_href.asp
My Guess, as per the html link tags its mainly used to link the external files like
href="theme.css"
Since you are using href="#" it would not do anything / serve any purpose.
<link href="#" id="colour-scheme" rel="stylesheet">
href : This is to specify the location of the CSS file you want to import in your web page
when using href="#" it won't import any CSS file.
I had to split up a long css file. I put the smaller css files within a styles directory.
Now I have to update the the urls to go up one level with the ../ notation.
Is there anyway to specify the base URL from which to load assets like with the base tag in HTML, but with CSS?
No, there isn't. I suggest to place the CSS images in at least the same level as the CSS file so that you don't need to go backwards in the path. E.g. /css folder for CSS files and /css/images folder for CSS images. Then you can consistently use url('images/name.ext') for CSS images. This way you can place the root /css folder practically everywhere without fiddling with the image URL's.
As an alternative, you could dynamically add a class to your body tag, and use that in selectors to override css URLs depending on which directory your file is served from.
An alternative way to set the base directory in the CSS (which seems to be impossible) is to set the base directory of the HTML document with the <base> tag. This tag is not well known in the community but I found a nice tutorial in the web:
https://webdesign.tutsplus.com/articles/quick-tip-set-relative-urls-with-the-base-tag--cms-21399
It seems to be totally a good solution.