I am trying to setup a page on our site to work properly with printing, the issues I am hitting is that, to test it I need to keep printing to file.
What I would prefer would be if there was a way to display the page as it will be printed.
Is this possible? (Chromium).
You can specify different CSS for different needs. Look at this style of coding CSS...
<html>
<head>
<style>
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
#media print
{
p.test {font-family:times,serif;font-size:10px;}
}
#media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
Related
I'm trying to add content to a printed webpage using an #page block. I've seen plenty of examples of this but it doesn't seem to work
Using the html below I expect to see the word "Hello" in the top left corner of the page when I do a Print Preview... can anyone tell me why this isn't working?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#media print {
#page {
size: 8.5in 11in;
margin: 0.5in;
#top-left {
content: "Hello";
}
}
}
</style>
</head>
<body>
<p>Page content</p>
</body>
</html>
It looks like this functionality probably used to work... I'm not really sure on that though. There are enough examples around the internet to suggest that it has been in use.
The current specification does not allow for this sort of functionality so I guess that's that.
The current working draft does support content being added through the page block but it hasn't made it into the specification so is not currently supported by any browsers.
Here's the css code:
#media (max-width:600) {
body{
background-color:red;
}
}
p{
color:blue;
}
The problem is that the #media part doesn't work at all. I tested it on 3 devices (including PC) and tried to change my browser's window size. However, when I change (max-width:600) on screen, the whole thing works. What could be wrong? In addition, adding media='max-width:600' to <link> tag causes css to crash (the entire css doesn't work at all in this case) – what is this??
P.S.: the code above and adding media='....' works within codecademy.com codebit, but doesn't work on my site, where I test the whole thing. (http://peoples.pw)
You're missing the unit. I guess you're using pixels, so it'd be something like this:
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
Demo: http://jsbin.com/fovesaci/1/
Edit: About the second question, you need to place it in parentheses. So this media='max-width: 600px' should be something like this media='(max-width: 600px)'.
It's a reasonable mistake since media attr has been mostly used for print, screen or all which have no parentheses at all.
use <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> in <head> tag
and css use px in width
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
I found a very odd problem printing in Google Chrome for Mac that I am trying to fix. When using "Print Using System dialog" option the #page inside the print styles are ignored, which causes the page to be incorrectly printed. When printing via the built in chrome print dialog it seems to work ago.
In windows Chrome, the system dialog and the regular dialog both ignore the #page properties.
The only reason I am even defining #page properties because my version of bootstrap defines these and I want to overwrite them.
here is the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0 !important;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Working example:
http://blastohosting.com/chrome_bug/
I've tried several approaches and found one that works with my version of Chrome (32). You have to set the value of the #page margin inside the print media query to 0 without !important, any other value will trigger the bug:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page
{
margin:10cm 10cm;
}
#media print
{
#page
{
margin:0;
}
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I'm wondering if I can somehow "inherit" a class property to some elements such as body, like:
.playfont{font-family: 'Play', sans-serif;}
body{.playfont}
I know I can do this with JavaScript or LESS, or even adding the class in HTML markup, but is there any pure css way for this?
Thanks.
The closest you can come with pure CSS is like this:
.playfont,
body { /* .... rules here */ }
Other than that, you'll need a preprocessor. And the way I described above gets messy pretty fast.
No, but you can do like this:
<html>
<head>
<style type="text/css">
h1, .test {
color: red;
}
</style>
</head>
<body>
<h1>Test</h1>
<h2 class="test">Test</h2>
</body>
</html>
Hopefully my title isn't too confusing. Anyways, I'm still learning CSS and right now I'm in the process of creating a mobile version of my company's site. I currently want to modify our navigation bar and the CSS for the navigation is a bit lengthy. So right now in the CSS file there is
.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/
Is there anyway to have it so the mobile version of the site ignores all #nav selectors from the original file regardless if I made a new selector in the mobile css? Or do I have to override each selector in the original css with new ones in the mobile css?
You can create your stylesheets with media attributes, like so:
<link rel="stylesheet" media="screen" ... etc./>
The fragment above references a normal browser window.
Here's where you can find out about those: http://www.w3.org/TR/CSS21/media.html
I would suggest separating the contents of your regular and mobile styles into separate stylesheets, like this:
Base: Styles common to both.
Regular: Styles only for the main site.
Mobile: Styles only for the mobile site.
Base is always included. Only regular or mobile is then included depending on the device viewing. That way you don't have to worry about overriding styles in one just to "reset" styles from another.
You can use the media property in your stylesheet link elements to determine when a stylesheet gets loaded.
You have to provide two different style sheet files and import them specifying a media type
<link rel="stylesheet" href="/all.css">
<link rel="stylesheet" media="screen" href="/computers.css">
<link rel="stylesheet" media="handheld" href="/mobile.css">
Alternatively you can use just one css file, in this way
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
In your specific problem, you could just add #media screen at the beginning of the .nav definitions.
#media screen {
.nav { /*styles*/ }
.nav ul { /*more styles*/ }}
.nav li { /*more <s>beer</s> styles*/}
}