The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem
for users who do not have javascript enabled.
The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.
If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.
Any easy way to do this? I tried <noscript>
with <style>
inside of that, no luck.
The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem
for users who do not have javascript enabled.
The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.
If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.
Any easy way to do this? I tried <noscript>
with <style>
inside of that, no luck.
- actually, I'm kind of surprised that the style tag inside the noscript tag didn't work. – scunliffe Commented May 30, 2011 at 22:52
- 1 Remend Modernizer.js. All you got to do is include it and put the class no-script in the body tag. – Alxandr Commented May 30, 2011 at 22:54
- Also surprised noscript didn't work. The only thing I can think is if was it was in the document head (it won't work in the body). – g_thom Commented May 30, 2011 at 23:10
- scunliffe & g_thom - Style elements must be in the head. A noscript element must have a block child element, block elements can't appear in the head. So a style element in a noscript element must be invalid one way or the other. – RobG Commented May 30, 2011 at 23:19
- RobG - I agree that it's not valid, I'm just a bit surprised it didn't work. I tried a sample just now in IE 8, FF, and Chrome and they showed ok. – g_thom Commented May 30, 2011 at 23:31
4 Answers
Reset to default 6One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.
As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):
$(document).ready(function()
{
$(".nonJsClass").each(function()
{
$(this).removeClass("nonJsClass");
}
}
Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.
You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.
Thus users with JS support won't see the effects of the special class.
Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).
http://adapt.960.gs/
In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.
scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
You can then use jQuery, for example, to add that additional class:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744918973a4601012.html
评论列表(0条)