I was reading up on some JavaScript to try and create my own slider and I came across something that confused me a little. There was a CSS rule that was as follows:
html.js #slideshow .slides img
{
position: absolute;
}
The explanation said that the rule would only be applied if JavaScript was available. Now I'm a bit confused... Would this rule be applied if JavaScript is available in the browser? Or if the file "html.js" had been included in the html page, or if any JavaScript files were included?
Thanks in advance.
It's a technique where you use javascript to add class 'js' to the html tag. No javascript, no js class. Makes it very easy for your CSS to know if JS is enabled.
Probably in your page you have a script on the head that adds a js class to the root element
this will ensure that the CSS rule will be applied only if javascript is available on the client. Of course if javascript is not available the class won't be inserted by the script.
It's a modern approach used especially to prevent the flash of unstyled content (FOUC)
The page you saw is probably using Modernizr. It is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser and works by adding a class "no-js" to the HTML element and when the page loads Modernizr replace it with set of rules that you're testing.
Check Modernizr website for more details if you want to test specific feature in a browser.
Of ir you don't want to use Modernizr you can do it with JavaScript by placing this directly within your <title> tag :
<script>
document.documentElement.className = document.documentElement.className.replace(/(\s|^)no-js(\s|$)/, '$1' + 'js' + '$2');
</script>
Related
I am using embeded JS code for a service I need included in my website. It is embedding its own <style> CSS along with the HTML elements. It is a new service and there is no support for sending anything else. How can I ignore the <style> so I can use my own CSS to integrate into the theme? I don't want to resort to using !important flags.
As long as you use same classes for your CSS and you include it after the JS code loads it (assuming it loads it synchronously) your classes will override the default settings.
The way the CSS is rendered - if there is a conflict between declaration the instructions passed "later" prevail.
<html>
<head>
YOUR JS HERE
YOUR CSS to override your JS imported rules
</head>
<html>
You need to make sure you understand how CSS assesses the "weight" of the instructions though (important, inline style, id, class, html tag)
https://css-tricks.com/specifics-on-css-specificity/ - here is a decent explanation how it works.
I ended up adding !important to my CSS file since the JS file is loaded asynchronously and it would be more work to keep checking until it is loaded to remove the <style>.
I am trying to find out a solution which will notify user if some resources did not loaded correctly.
Already I founded following methods:
For CSS I found example in Trello source:
<div id="nocss">
Your browser was unable to load all of Trello's resources. They may have been blocked by your firewall, proxy or browser configuration.
<br>Press Ctrl+F5 or Ctrl+Shift+R to have your browser try again.
<hr>
</div>
And in last downloaded CSS there is a following CSS:
#nocss {
display: none;
}
For JS i founded following article: The best way to load external JavaScript, but I am not sure about it.
UPDATE
Small update: the best solution should work also with files from CDN, because they are the biggest problem. I had a site in which I added jquery and in companies behind the firewall it was blocked.
You can do pretty much the same with your javascript like you do with your css.
$(document).ready(function(){
$("#nojs").css("display","none");
}
This code uses jquery. If put into the beginning of your javascript file it hides a div like your css does once the javascript is loaded. (of course you need a <div id="nojs">)
You might want to add a class to the body for each successfully loaded JS file (in each JS file write code to add additional CSS class to the body element like so $(document.body).addClass("SomeClass")). Then simply check
if (!$(document.body).hasClass("ALL YOUR CLASSES")){
$("nojs").show();
}
This should do the trick.
If you don't have access to the files and cannot modify them then why do something like the following:
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script> (Taken from HTML5 Boilerplate)
Rather than being dependent on any other method, can you use
window.onload=function(){SomeJavaScriptCode};
or
<body onload="SomeJavaScriptCode">
Above ones will only execute after loading all contents of your page. (onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).)
In order for my webpage to degrade gracefully, I have some CSS that should only be loaded if its corresponding JavaScript will function.
What is the simplest way to load local CSS if and only if the browser has JavaScript enabled?
Also it's quite a big block of CSS, so I'd rather not have to write a JavaScript line to add each attribute. (Oh, and if necessary I can use jQuery).
Set a class on the body tag of "noJS". Then use Javascript to remove that class.
For the CSS rules that you want to be used when no JS is present, just use .noJS .myRules {}
In the <head> you can include it with document.write(). I've never tried this, but it should work in theory. No script execution means no stylesheet loaded.
<head>
<script type='text/javascript>
document.write("<link rel='stylesheet' href='your.css' media='whatever />");
</script>
</head>
You have a few options.
The one I like is to add the following code to the body tag.
<body id="no-js"><script>document.body.id="js"</script>
Then I can target #no-js and #js from my master CSS.
An additional option is to load an extra stylesheet with JavaScript, but that will slow down you initial load, which I try to avoid.
Check out the body conditionals for html5 boilerplate to see how to employ modernizr.
Also good example here: http://webdesignernotebook.com/css/how-to-use-modernizr/
Then write your css selectors for .no-js .addl-selector {}
I simply do this:
document.documentElement.className = "js"
This adds class js to <html> tag, then you can target your elements by css using:
.js #someid{}
Can we have external NoScript file?
If javascript is not avaialbe i want to hide + and - from According page.
How to do this if i can't edit html <head> i only can add any external css and js file
The easy way is to add the +/- from Javascript, rather than sticking them directly in the HTML. That way they won't show up if scripts are disabled.
If there is a suitable class, you can hide the elements by default, then show them if JavaScript is enabled.
e.g.:
In CSS:
.plusminus { display: none }
<span class="plusminus">+</span>
Then, have a JavaScript file that overrides that CSS.
See what Reddit uses to add one of its buttons:
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
This JavaScript adds an <iframe> to the page, then the <iframe> adds the HTML code.
Why doesn’t the JavaScript add the HTML directly?
To isolate the button's markup and style from the web site's own CSS rules.
This technique is called as unobstrusive linking of JavaScript. This is one of the good practices of designing a web-page with graceful degradation. The actual HTML doesn't carry any references to JavaScript, and JavaScript is not supposed to cause any content manipulation.
Another reason why the JavaScript is included at the end of file, is that the web page can show without waiting for the JavaScript to be completely downloaded. This is the exact complement to why CSS files are included in the beginning (to prevent content from showing up before styles are set.)