Is there a way to force a css link to a file to be the one that is used without relying on cascading order to determine what gets overwritten?
I am using a CMS where I can add new css links but cannot change the cascading order in the header tag:
<link rel="stylesheet" href="new.css" type="text/css" />
<link rel="stylesheet" href="old.css" type="text/css" />
I need "new.css" to overide "old.css" without overwriting the code of old.css. I do not have access to simply change the order of the header code, I so wish I could!
There's no way what you're looking for.
Your last stylesheet would override the previous stylesheet rules.
But if you can use javascript or jquery then you may shift the order like this:
jQuery:
$('link[ref="old.css"]').insertBefore($('link[ref="new.css"]'));
Actually you can if you make the selector more specific. You can do this by simply adding "body" before the actual selector.
Example:
.button {
color: blue;
}
Would be ignored by using
body .button {
color: green;
}
Quick fiddle: http://jsfiddle.net/4cbs5por/
If your CMS allows you to add new CSS links, it should be smart enough to put the new one the bottom. If it's putting it on the top and you don't want to mess with jQuery, you can just copy the content from the "old.css" and paste that into the "new.css" file and vise-versa. That way you'll have the correct content in the bottom file which will override the top link.
Related
Here's a minimal working example of what I'm experiencing:
index.html
<head> <link rel="stylesheet" href="main.css"> </head>
<p> This is a test </p>
main.css
p {color:purple;}
#import "background.css";
background.css
p {background-color:yellow;}
Trying this in Vivaldi and Firefox, the style in background.css isn't applied. Shouldn't it be though? If I swap the two lines in main.css, #importing background.css first, it does get applied. But why would this matter? Shouldn't background.css be applied in either case?
Note this is the same issue being described in this question and this question, but the answers there don't get at the heart of the question—they recommend importing in the correct order in the HTML file, bypassing this issue altogether.
As already defined in CSS1:
In CSS1, all '#import' statements must occur at the start of a style
sheet, before any declarations. This makes it easy to see that rules
in the style sheet itself override rules in the imported style sheets.
A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.
In CSS1 you should put the #import function at the top of the document (but after any #charset declaration).
The css syntax should be:
#import url|string list-of-mediaqueries;
This can all be found here: https://www.w3schools.com/cssref/pr_import_rule.php
On my laravel app, I'm using a forum package called "chatter".
This forum is injected into my master layout, so it looks like this:
nav bar
chatter package
footer
It's injected into a container called <div id="chatter">, and its styles are found in the style sheet chatter.css, which is separate from my main sheet.
The problem is, some of the styles in this sheet are conflicting with my nav and footer. Furthermore, some of the styles in my main sheet are affecting the forum (albeit minimally, so I don't mind making the changes manually).
I can't change the markup, but I can edit the styles.
So how could I make it so that all the styles found in chatter.css ONLY apply to what's inside of <div id="chatter">?
Add #chatter to every style in chatter.css like this
#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.
If style is for level above the chatter div then add after like this:
html #chatter{..}
body #chatter div{...}
You will have to namespace your CSS as user Nawed Khan pointed out but there is a much simpler way to do that than changing each of your styles manually. This method uses less to handle it for you.
Drop this in a file called chatter.less.
#chatter {
#import (less) 'chatter.css';
}
Then you need to include it on your page...
<link rel="stylesheet/less" type="text/css" href="chatter.less" >
Then you need to include less.js AFTER you've included your .less file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
In your .less file you might have to mess with the path to chatter.css, I believe it's going to be relative to whatever file you are including the .less file on.
Is there any way to ensure a specific load order for external CSS files? Normally, multiple external stylesheets can be loaded asynchronously for performance, but I want to allow individual users to override the default stylesheet for a project's documentation (a colleague is color-blind, but it seems like it would be handy for other users of the library) with personal preferences.
For example, let's say I've got this in the docs:
<link rel="stylesheet" type="text/css" href="https://foo.bar/project_stylesheet.css">
<link rel="stylesheet" type="text/css" href=".localprefs.css">
The desired outcome is that .localprefs.css (if it exists) should always override the global project stylesheet.
Is there a guarantee for evaluation order independent of load order? If not, is there a simple way to force the issue?
On edit: The assumption is that .localprefs.css only overrides selected styles from the global stylesheet.
The way you have it guarantees load order. Files or CSS loaded last take precedence.
That said, load order doesn't speak to specificity of the rules in the CSS.
So say you have an element <h1 id="foo" class="bar">. If the first stylesheet has #foo { color: red; } and the last stylesheet has .bar { color: blue; } then the color of the h1 will be red, due to specificity of an ID having precedence over a class. You can't force specificity through the order CSS is loaded. To force specificity, you can use !important.
Yes. It loads in the order it is in the file. So .localprefs.css will load second.
Note that if a selector in the first file is more specific, it will still take precedence(ie, #id vs .class). Any ties will be won by the later file, though (ie, .class vs .class)
When you link your stylesheet to your document
<link type ="text/css" rel ="stylesheet" href="stylesheet.css"/>
why don't you put a semicolon after each attribute, when you put a semicolon after each attribute when doing something like inline styling e.g.
<p style="font family:Arial; color:yellow; etc
?
Attributes in HTML are not the same as properties in CSS. They are completely different languages and therefore have completely separate syntaxes. In HTML you're creating a link. In CSS you're creating a property: value; pair.
When you put style inline, as per your second bit of code, you're basically telling the browser that you're writing CSS and that it needs to parse it as such. In doing so you then have to use CSS syntax, not HTML.
If possibility to checking in CSS detect browser support javascript ?
or set other CSS Media Queries for browser not support javascript ?
You can do it without javascript. You have to use ... HTML !
There is a tag for that : noscript
Summary :
The HTML <noscript> Element defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
Example :
<noscript>
<!-- this content will be display if no js -->
</noscript>
In your case, I think you will need something like this :
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
if you want more info about it, this topic on SO is pretty good.
The common way is to add a class called no-js to your , e.g.
<head class='no-js'>
then as your first line of JS, remove the class.
To keep it simple, in jQuery you'd then write:
$("head").removeClass("no-js");
If you are using plain JS, you need to parse the class attribute and remove just the no-js bit, else if you add further classes later you will wipe them out with a naive approach.
You can then write CSS like:
.message {
display:none;
}
.no-js .message {
display:block;
}
If you wanted to show an element with class message only to people with JS disabled.