I want to change some values of my CSS depending on the blog type. For doing that I scan all
document.styleSheets and try to read document.styleSheets[i].cssRules.
But for my linked inside <head> tags CSS's (for instance <link href='https://olga4-romleon.c9users.io/ini/iniView.css' media='screen' rel='stylesheet' type='text/css'/> ) - the cssRules's are null. They are NULL but in the meantime they are working!
Could anybody answer my questions:
how can I read/change rules for loaded-linked CSS?
where are kept/stored all loaded-linked CSS (how to see them in my blog) as they are not presented in cssRules?
Thanks
Related
I have many JavaScript Files and CSS Files referenced in the Layout file. Now I have a couple of views which are referencing some custom libraries which are interfering with the existing CSS files. So my question is can I somehow remove those references from these two views only or not allow them to load at all in the said views.
What you can do is, create a custom css file which overrides the existing styles from your regular (ex : bootstrap) css file. You can include this css files conditionally after your regular css styles in the views you want.
You may also use the !important attribute to explicitly override the values as needed.
So in your layout, add a new Section called CustomStyles
<head>
<!-- Existing css include goes heree -->
#RenderSection("CustomStyles", required: false)
</head>
And in your specific view, you can simply include the custom css file
#section CustomStyles
{
<link href="~/MyCustomCss.css" rel="stylesheet">
}
EDIT : As per the comment.
If you are ok to completely ignore the specific css files in some views, you can update your Layout to conditionally include/exclude those.
So in your layout
<head>
#if (ViewBag.IncludeBootStrap == null|| (bool) ViewBag.IncludeBootStrap !=false)
{
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
}
</head>
And in the view's in which you do not want to load this css file, Set the ViewBag.IncludeBootStrap value to false.
#{
ViewBag.IncludeBootStrap = false;
}
<h1>This view will not use bootstrap styles</h1>
Give an id to the tag.
<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />
And use this code:
You can use whatever event you want or just use the code without an event it's your choice
$("#A").click(function(){
$("#style1").attr("disabled", "disabled");
});
Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.
The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:
If the disabled attribute has been added directly to the element on the page, do not include the <link> element instead;
Set the disabled property of the DOM object via scripting.
There is a website that references to a .js file and a .css file to format and add dynamic elements to its pages. The website gives the option to reference my own versions of those .js and .css files that I have hosted in a google code repository, and then will use those instead.
I'm trying to add another css file for mobile browsing. Currently I'm using #media arguments within the current css, but I'd like to have two separate css files.
Is there some code I could add to my .js file that would override the html, such that:
<html>
<head>
<link href="desktop.css" ...
Turns into:
<html>
<head>
<link href="mobile.css" ...
When the JS detects a mobile browswer. Keep in mind the js file is referenced further on in the HTML.
Thanks!
You can use media queries on #import rules:
<link href="master.css" …
#import url(desktop.css) (min-width:800px);
#import url(mobile.css) (max-width:700px);
Pls try this
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
document.write('<link rel="stylesheet" type="text/css" href="mobile.css">');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="desktop.css">');
}
And yes, it's a good practice to use CSS #media queries
Is there some code I could add to my .js file that would override the html?
Sure, you could override the html, but what's the point? It'll be too late, the browser will already have loaded and applied desktop.css.
If you want to maintain two separate css files, what you need to do is remove your static link tag, and apply the correct stylesheet dynamically based on browser detection:
var stylesheet=document.createElement("link");
stylesheet.type="text/css";
stylesheet.rel="stylesheet";
if (// detect mobile browser) {
stylesheet.href=mobile.css;
}
else {
stylesheet.href=desktop.css;
}
document.head.appendChild(stylesheet);
I want to block some CSS and js file loading in my Blogger, like
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
And
</script><script type="text/javascript" src="//www.blogger.com/static/v1/widgets/4127629733-widgets.js"></script>`
, but I can't find these tags in Blogger template, it's added by Blogger.Is there a way to remove or comment these tags?
Use at your own risk. :)
How to remove Blogger CSS, Reset Stylesheet
This is actually a method to override the CSS provided by the Blogger template. There is no way to remove it, and transversely, there is no way to remove the JavaScript either.
Its Ok to remove Blogger CSS that you can add your own CSS. But if you want to remove Blogger JavaScript then it will stop function your Widgets but you can also do this if you want to use Blogger as simple HTML page.
Here I am sharing both is simple steps...
How To Remove/Hide Blogger Official CSS In Your Custom Template?
How To Remove/Hide Blogger Official Widgets JS In Your Custom
Template?
Make a backup of your template first.
TO BLOCK BLOGGER CSS:
Find this:
<b:skin><![CDATA[lots-of-css-code]]></b:skin>
and replace with this:
<style type="text/css"><!-- /*<b:skin>*/</b:skin>
Find this:
<b:template-skin>bunch of code</b:template-skin>
and replace with this:
<link href='https://www.somewhere.com/yourstylesheet.css' rel='stylesheet' type='text/css'/>
or replace with this:
<style>your-custom-css-here</style>
TO BLOCK REMOVE ALL BLOGGER JAVASCRIPT AND WIDGETS:
Find this:
<b:include data='blog' name='all-head-content'/>
and replace it with this:
<meta content='blogger' name='generator'/><link expr:href='data:blog.url' rel='icon' type='image/x-icon'/><link expr:href='data:blog.url' rel='canonical'/><data:blog.feedLinks/><b:if cond='data:blog.url == data:blog.homepageUrl'><link href='http://www.blogger.com/openid-server.g' rel='openid.server'/><link expr:href='data:blog.url' rel='openid.delegate'/></b:if>
Find this:
</head>
and replace with this:
<!--</head>--></head>
Im working on a MVC3 application, with a masterpage which renders the views in the body.
Now I have 2 css files (different layouts), and I want to select the CSS depending on the screen size of the client.
Everything works with the code below, however, only for the index page, whenever I go to a second page, whatever it is, no CSS is rendered at all.
The code below is placed in the HEAD section of the masterpage.
<script type="text/javascript">
var css = './Content/SiteWide.css'
if ($(window).width() < 1140) {
css = './Content/SiteNarrow.css';
}
var tempcss = '<link href="TEMPCSS" rel="stylesheet" type="text/css" />';
var cssLink = tempcss.replace("TEMPCSS", css);
document.write(cssLink);
</script>
So somehow the css doesnt load again when you go to a second page (all using the same masterpage), do you guys have any ideas?
thanks
Use CSS media queries instead of Javascript.
<!-- dropped rel attribute -->
<link media="only screen and (max-width:1139px)" href="SiteNarrow.css" />
<link media="only screen and (min-width:1140px)" href="SiteWide.css" />
Ideally you create one CSS file for one state, and have another override that when conditions are met.
<!-- dropped rel attribute -->
<link href="base.css" />
<link media="only screen and (min-width:1140px)" href="override.css" />
I believe you need to use Url.Content(). I.e.
#Url.Content("~/Content/SiteWide.css");
The pathing may be incorrect when you navigate from your Index page if you use
./Content/SiteWide.css
I've usually found Url.Content() to be the right thing to do when pathing to files in the project
Pro-tip: Don't use static file locations. Make use of Url.Content.
Your code would look like:
var css = '#Url.Content("~/Content/SiteWide.css")';
Try this out and see if it works. From experience I've had static locations sometimes not work as expect, whereas Url.Content did the trick for me.
I recommend implementing Responsive Web Design
http://www.sitepoint.com/responsive-web-design/#fbid=UhFHwQrRwnn
You can use what are called "Media Queries" to dynamically apply different css files or properties as the screen size changes, in real time. Very cool!
I want using lesscss for print,
but it seems, the browser don't recongize the #media print,
since I don't want embbed
<link rel="stylesheet/css" type="text/css" href="themes/css/print.css" media="print">
into page.
can anyone help on this issue? lesscss sourse code address is here
https://github.com
thanks
<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">
The important part is the media="all", otherwise it will not correctly parse your #media print {.no-print {display:none;}} inside your linked less file.
If your question is how to embed less-styles for media print: the media attribute within the link tag worked for me.
<link rel="stylesheet/less" type="text/css" href="print.less" media="print">
The media="print" is essential as less by default inserts compiled styles as media="screen".
While I was using .less, the web developer tool option for displaying print styles wasn't rendering for me.
My solution, although may not render 100% correctly depending on the browser, is to switch the #media print and #media screen properties in the style sheet so that on page load, the print styles are rendered.
I don't suggest this solution if:
You need to trace both screen and print styles
You need precise measurements
I do suggest this solution if:
You don't want to continually go back to print preview after every
adjustment
You are willing to sacrifice the above in order to test content arrangement and styling structure
If you are using lesscss, use #media property into "less" file.
Like this:
#media: mobile;
.mixin (#a) when (#media = mobile) { ... }
.mixin (#a) when (#media = desktop) { ... }
And import file normaly:
<link rel="stylesheet/css" type="text/css" href="themes/css/print.less">
http://lesscss.org/#-pattern-matching-and-guard-expressions