how to properly override CSS in external file


Tags: css,xhtml

Problem :

There's a lot of questions that look like this one but none really answer the problem I have.

My situation is a follows:

I have the need to change the display of a lot of elements so that they show properly in the page and the semantics are correct.
I somewhat have the js version and the nojs version. Some elements exist to be seen only when the user is using js and others are only meant to be seen when js is turned off.

I have selectores that have a nice specificity (don't argue, they really do make sense in the context, I just changed the classes here in order not to let go where the original code is)

.imagesContainer div.imageContainer  .imagedata

And then this element is meant to be hidden when the user does not have js. So I did something like:

.nojs{
    display:none;
}

I tried it in in the same file as the HTML is expecting that the priority would be external file < same file < inline. But seems like what is now is external file = same file < inline (no priority between the external file and inline).

What's the best way to deal with this problem?

Changing the specificity of the first selector I've shown is no solution.
I'd also rather not to place the CSS inline. It's a pain, takes too much space in the markup and makes it harder to read.
I'd also prefer not to use !important. It's considered not to be a correct way to solve this kind of problem and I agree.
I'm using XHTML so noscript tag is not defined in the DTD (I need to use XHTML according to rules to which I am subjected to),



Solution :

So... how to solve this problem... It was not that easy but with the help of the w3c and your answers I was able to get to a proper result.

After trying multiple paths of possibly solving this (including adding a style or a link tag programmaticly), I got an answer to what I needed.
In order to do this the easiest way, you need to have, at least, 2 style sheets. One for this system and the other as your "regular" style sheet (the one with all the CSS of your page).

Then place .nojs class to all (x)HTML elements you want to make appear only when the user is not using js and .js for the elements you want to make appear only when the user is using js.

Place the following in this system's style sheet:

.js{
    display:none !important;
}

Then use this js code to be executed after the is complete. Preferably when the DOMContentLoaded event is dispached.

var jsNojsStyleSheet = document.styleSheets[1]; // change this index depending on your needs
if(jsNojsStyleSheet.deleteRule){
    jsNojsStyleSheet.deleteRule(0);
    jsNojsStyleSheet.insertRule('.nojs{ display:none !important; }', 0);
}else{
    // IE8 has his own way of dealing with this situation
    jsNojsStyleSheet.removeRule(0);
    jsNojsStyleSheet.addRule('.nojs', 'display:none !important', 0);
}

Don't forget to change the index in the list depending on your needs.

Now you are good to go and test this.
This is supposed to remove the .js rule and insert the .nojs rule, replacing the previous one.

This is, for me, the cleanest way of doing this job. Any critics or improvements to this technique are welcome.

Note: IE requires you to do something to refresh the parsong of the page. I used a code that toggles the checked of a checkbox twice, be creative and find your own solution to this.

Edit: I also found out that this is much faster and does not have the flicking unlike other techniques that used jQuery and whatnot to solve this problem. All changes are made using the browser's own adaption to changes when CSS changes and not changing each HTML node 1 by 1.

This system work with IE8, not sure about IE7, though.


    CSS Howto..

    How can I apply CSS to a link if at least one input is not original, and undo that change if all inputs are original?

    How to stack divs from top to bottom in CSS

    How can I push surrounding elements off screen when enlarging one?

    How can I write a complex fraction using HTML/CSS/jQuery?

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How to get the ultimate, final calculated style value on an HTML element?

    How to create and edit a css file in browser Dom by javascript and then download it?

    How to show only half of bootstrap glyphicon with css

    how to add/remove a class from a link

    How to make menu to slide right on click using HTML and CSS?

    How can I use PHP code in a CSS file

    How to combine wildcard and not selectors in CSS

    How to limit a transform scale to the width and height of the parent element in CSS?

    http://com.google how do they transform everything to RTL

    How to contain a scrollable div element completely within another?

    How to properly align something that resizes in a specific location

    How to get value of input using Jquery and put it in css of an element

    How to highlight anchor link when target div comes in view - jQuery

    How to make a bullet of an image slider look different while is active?

    How to remove unused CSS but keep comments?

    Google Share button not showing properly if originaly hidden

    How to change html (jade template) to use *.min js and css in production?

    How to reset css (a:visited{color:green}) when refresh browser address bar

    how to have a menu across top with links left aligned and right aligned

    how to give two different states in css?

    How to conditionally apply CSS classes in Ember?

    How do I display epub format book in pure HTML5/CSS/Jquery

    How would I go about making my q and a page like this: http://www.text-link-ads.com/r/faq

    How to change
  • to variable width on css dropdown submenu
  • How to change margin according to other elements?