I have an issue thats causing me some headaches. I'm trying to print a report and format it correctly with a print.css but it completely ignores my css everytime. Has anyone had this issue before? I made sure the CSS file is in the correct directory, etc but still no luck.
Here is my template:
Note: I use javascript to control the print button and inside the javascript is where I have included the CSS link. I have also tried putting it just on the HTML page but that didn't help.
...
<script type="text/javascript">
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,'+
'width=900,height=400, scrollbars=1')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<link rel="stylesheet" type="text/css" '+
'href="/media/css/print.css" media="print"/>\n')
newwin.document.write('<script>\n')
...
Now for this project I am using Ubuntu 10.10, and Firefox 7. If that helps at all.
Edit
I installed the web developer toolbar for firefox. It allows you to view the page as different medias. Now when I click print, it shows all my style changes, but when I print, it doesn't follow them.
<html>
<head>
<title>your website title</title>
<link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css">
<link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css">
</head>
<body>
<input type="button" value="Print" onClick="javascript:window.print();" />
</body>
</html>
Maybe you might wanna give above HTML template a go, and see if that works for you or suits your needs.
In my opinion, your proposed function is actually better to be written on the server side rather than the client side with javascript, as you are trying to dynamically generate html page in there. You can output that page as print.html or something, and once it gets sent to the client, you then apply the print.css style and do the printing. Anyway, just a few ideas here, hopefully it helps a bit in your case. Cheers.
Not sure if this helps, but the #media print{} is supposed to encapsulate all styles during a print job.
<style type="text/css">
#media print{
/* Make the HR tag have 50 px spacing above and below */
hr{ padding: 50px 0px; }
}
</style>
This is SUPPOSED to handle this type of styling. The script could still be responsible for including the css file, but the #media print{} would tell all styles embedded in it to apply only to print jobs.
Related
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
For the life of me, I cannot get a simple background image to show up using CSS. I have a dead simple HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>My Website</title>
<LINK href="./css/styles.css" rel=StyleSheet type="text/css">
</head>
<body>
<p>foo</p>
</body>
</html>
And the following CSS page:
body {
background:url('./images/myBackground.jpg');
}
Yet the image never shows. I've Googled this and many people seem to have encountered this same problem, but none of the solutions have worked. I've tried every combination of CSS syntax I can think of (background, background-image, no quotes, single quotes, double quotes, slash, no slash, etc.) -- no luck. I've tried putting the image in the same directory as the HTML page -- no luck. I've tried making a square div and setting its background to this image -- no luck. I've tried setting a fixed height and width -- no luck.
There's no spelling errors and I know there's nothing wrong with the image because it works using an inline image tag in the HTML. The HTML and CSS page are linked because I can do something like
p {
color: blue;
}
and that works. Am I missing something incredibly obvious here? I can do it inline, but I'd really prefer to use CSS and now I just want to do it out of stubbornness and principal.
You need to put an extra "." in front of the url.
You are now linking to /css/images/mybackground.
If you put an extra "." in front of it, like ../images/myBackground
(and add the extension like mentioned)
It should work. (At least it does in my reproduction of your situation.)
You have to use the extension .png, .jpg, .gif etc
background:url('../images/myBackground.png');
background:url('../images/myBackground.jpg');
I am trying to learn about LESS. After a very quick success on one site, I am now struggling on another while using pretty much the same code:
<link href="css/reset.min.css" rel="stylesheet" />
<link href="css/styles.less" rel="stylesheet/less" type="text/css" />
<script src="js/less-1.3.1.min.js" type="text/javascript"></script>
Should I change anything on the server to make it work?
I get a 404 when trying to access your LESS file: http://belleandvidere.co.uk/dev/styles.less
Please check your path.
At one point or another I ran into an issue with the order of the HTML properties (it shouldn't matter but it did).
I found that <link rel="stylesheet/less" type="text/css" href="styles.less"> would work, while <link href="styles.less" rel="stylesheet/less" type="text/css"> would not.
I'm pretty certain that less.js incorrectly checks for <link> elements. This may or may not still be an issue.
Try invoking the LESS JavaScript file before the LESS CSS Document.
I am assuming this due to the HTML DOM.
With the HTML DOM the HTML is loaded, the CSS is loaded, and then the JavaScript is loaded.
Try to place the script tag about the link tags.
Thanks,
I hope that helps.
So I'm using the VideoJS plug on this site that I'm building. I'm implimenting here like this:
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<style>
#import url(css/vim.css);
</style>
</head>
And vim doesn't seem to override the video-js.css calls. I've tried this with other skins and the same result happens. I attempted to change the placement in reverse, but that did not suffice. Please let me know if there is something that I could be missing.
I think #import rules usually need to come before other rules, or they'll be ignored in some browsers. Why can't you just link to the second stylesheet as you do the first? Do you need to import for certain media?
Nevermind, folks. I forgot to add the function at the top of the page to enable this.
I understand that using JavaScript and window.print() has limitations around setting certain print options (due to security issues). I also understand that CSS has the ability to set certain elements (like #page) for setting a document to landscape.
Is there a way to use CSS to set print options like zoom, margins, and hide header/footer? If so, does anyone have any code samples for doing this? If this is not possible using JS or CSS, is there any any other tools I could use to put a print button on a page that automatically sets certain print options?
UPDATE: Okay, I appreciate everyone's responses, and now that I have dug in a bit, I have more clarification on what I need... I do not need to modify the CSS on the page. I need to automatically set the local print options when the user clicks the button. I am in a .Net application. Any ASP.NET controls for this? Thanks.
I don't even think JS is required. You can just use the media attribute when linking stylesheets:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
This is the stylesheet that the browser uses when it prints, and it overrides the one you see while browsing the site. Now, inside of print.css, you could change whatever you want and it will only affect the printed document.
As for printing, you could just make a quick button or an element which triggers window.print():
<input type="button" value="Print" onclick="window.print()" />
Good luck!
You can simply add another style-sheet that is specific for printing:
<link href="print.css" type="text/css" media="print" />
And in that stylesheet you just put stuff like:
#header {
display: none;
}
/* etc */
You can add a reference to a CSS file that will only be used for printing using the media attribute:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Or for a inline style block:
<style type="text/css">
#media print{
#heading{ display:none; }
}
</style>