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
Related
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
I would love to perform some media queries for my SP 2010 website. As such i hoped that my problem would be solved using the js script of respons.js. However i cannot get it to work !
I should note that due to the polciy of our mother company I cannot use the SP designer thus cannot create / modify master pages etc (e.g. to put script linking in the header instead of the body) . Only tool i have is the online editor where i can use html and add js/css using the content editor.
So in my little project i have the following items (in this order):
1) content editor linked to css-loader.txt
<link rel="stylesheet" type="text/css" href="/SiteAssets/Code/CSS-Homepage.css" />
2) content editor linked to response.txt (added script tags in the txt file)
3) some html coding
//coding part of the content editors//
<div id="Filip"><h2>Filip de Clippel </h2></div>
My css file looks like :
#charset "utf-8";
#media screen and (max-width: 600px) { #Filip {background-color: #006666;}}
#media screen and (min-width: 600px) { #Filip {background-color: #333300;}}
But somehow I cannot get it to work. I tried
List item playing with delaying the js by putting a window.onload function.
List item min-width: 600px vs. min-width : 600px
List item Adding media="screen" to my css-loader.txt file
List item Many other things ;(
If someone could help me out or at least give me a hint in the good direction that would be so helpfull. Thnaks for all the efforts
Grtz
I have a question,that would be the best solution to print a webpage.For example, I have a website with news,I need to print only the news and picture,and remove the menu,header and footer.I want to do this in CodeIgniter.
You said you want to this in CodeIgniter. I don't think you need any server side code for this. Try below suggestion.
You can use #media query.
In your default css without using external stylesheet you can do this:
#media print {
#with_print {
display: none;
}
}
Hide your header, footer and menu withing #media print block
With external stylesheet add media="print" attribute to <link> tag.
<link href='printCSS.css' rel='stylesheet' media="print" type='text/css'>
With external stylesheet you don't need to add #media query block in your printCSS.css.
See the Demo
See the print preview from your browser and where the text says:
I will be hidden when you try to print me, cannot not be seen on the print preview page.
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);
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!