I need to set "Standard"-values on print-setting in Chrome (for margins and scale
screenshot print setting chrome).
I've tried to use #page inside my SCSS-file. It seems like that it doesn't have any effect at all.
Are there any solutions to set these keys on the print-setting? I've tried following codes like below, what did I miss?
#page {
size: B6 Landscape; //tried to set the paperformat
margin: 1000cm;
}
and like this
test-dossier {
#media print {
#page {
size: B5 landscape; //tried to set the paperformat
margin: 100cm;
}
}
}
So the main point is, if any users set any other values on these two keys (margins and scales") except "Standard", the print-page should automatically reset the values as "Standard". or is it basically not possible using #page in css?
I am trying to use CSS variables in media query and it does not work.
:root {
--mobile-breakpoint: 642px;
}
#media (max-width: var(--mobile-breakpoint)) {
}
From the spec,
The var() function can be used in place of any part of a value in
any property on an element. The var() function can not be used as
property names, selectors, or anything else besides property values.
(Doing so usually produces invalid syntax, or else a value whose
meaning has no connection to the variable.)
So no, you can't use it in a media query.
And that makes sense. Because you can set --mobile-breakpoint e.g. to :root, that is, the <html> element, and from there be inherited to other elements. But a media query is not an element, it does not inherit from <html>, so it can't work.
This is not what CSS variables are trying to accomplish. You can use a CSS preprocessor instead.
As Oriol has answered, CSS Variables Level 1’s var() cannot currently be used in media queries. However, there have been recent developments that will address this problem. Once CSS Environment Variables Module Level 1 is standardized and implemented, we’ll be able to use env() variables in media queries in all modern browsers.
The CSS Working Group (CSSWG) codified env() in a new standard (currently at a draft stage): the CSS Environment Variables Module Level 1 (see this GitHub comment and this comment for more info). The draft calls out variables in media queries as an explicit use case:
Because environment variables don’t depend on the value of anything drawn from a particular element, they can be used in places where there is no obvious element to draw from, such as in #media rules, where the var() function would not be valid.
If you read the specification and have a concern, or if you want to voice your support for the media-query use case, you can do so in issue #2627, in issue #3578, or in any CSS GitHub issue labeled with “css-env-1”.
GitHub issue #2627 and GitHub issue #3578 are devoted to custom environmental variables in media queries.
Original answer from 2017-11-09:
Recently, the CSS Working Group decided that CSS Variables Level 2 will support user-defined environment variables using env(), and they will try to make them be valid in media queries. The Group resolved this after Apple first proposed standard user-agent properties, shortly before the official announcement of iPhone X in September 2017 (see also WebKit: “Designing Websites for iPhone X” by Timothy Horton). Other browser representatives then agreed they would be generally useful across many devices, such as television displays and ink printing with bleed edges. (env() used to be called constant(), but that has now been deprecated. You might still see articles that refer to the old name, such as this article by Peter-Paul Koch.) After some weeks passed, Cameron McCormack of Mozilla realized that these environment variables would be usable in media queries, and Tab Atkins, Jr. of Google then realized that user-defined environment variables would be especially useful as global, non-overridable root variables usable in media queries. Now, Dean “Dino” Jackson of Apple will join Atkins in editing Level 2.
You can subscribe to updates on this matter in w3c/csswg-drafts GitHub issue #1693 (for especially relevant historical details, expand the meeting logs embedded in the CSSWG Meeting Bot’s resolutions and search for “MQ”, which stands for “media queries”).
What you can do however is #media query your :root statement!
:root {
/* desktop vars */
}
#media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}
Totally works in Chrome, Firefox and Edge at least the latest production versions as of this posting.
One limitation: if you need to access the value as a variable – for example to use in calculations elsewhere – you will need to have a variable, and it requires defining the variable in two places: the media query and variable declaration.
Apparently it's just not possible to use native CSS variables like that. It's one of the limitations.
A clever way to use it is to change your variables in the media-query, to impact all your style. I recommend this article.
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
#media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
One way to achieve what you want is using npm package postcss-media-variables.
If you are fine with using npm packages then you can take a look documentation for same here:
postcss-media-variables
Example
/* input */
:root {
--min-width: 1000px;
--smallscreen: 480px;
}
#media (min-width: var(--min-width)) {}
#media (max-width: calc(var(--min-width) - 1px)) {}
#custom-media --small-device (max-width: var(--smallscreen));
#media (--small-device) {}
The level 5 specification of media queries define Custom Media Queries that does almost what you are looking for. It allows you to define breakpoint similar to how you do with CSS variables and later use them in different places.
Example from the specification:
#custom-media --narrow-window (max-width: 30em);
#media (--narrow-window) {
/* narrow window styles */
}
#media (--narrow-window) and (script) {
/* special styles for when script is allowed */
}
There is still no support for this actually so we have to wait before using this feature.
Short Answer
You can use JavaScript to change the value of media queries and set it to the value of a css variable.
// get value of css variable
getComputedStyle(document.documentElement).getPropertyValue('--mobile-breakpoint'); // '642px'
// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];
// update media rule
mediaRule.media.mediaText = '..'
Long Answer
I wrote a small script which you can include on your page. It replaces every media rule with a value of 1px with the value of the css variable --replace-media-1px, rules with value 2px with --replace-media-2px and so on. This works for the media queries with, min-width, max-width, height, min-height and max-height even when they are connected using and.
JavaScript:
function* visitCssRule(cssRule) {
// visit imported stylesheet
if (cssRule.type == cssRule.IMPORT_RULE)
yield* visitStyleSheet(cssRule.styleSheet);
// yield media rule
if (cssRule.type == cssRule.MEDIA_RULE)
yield cssRule;
}
function* visitStyleSheet(styleSheet) {
try {
// visit every rule in the stylesheet
var cssRules = styleSheet.cssRules;
for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
yield* visitCssRule(cssRule);
} catch (ignored) {}
}
function* findAllMediaRules() {
// visit all stylesheets
var styleSheets = document.styleSheets;
for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
yield* visitStyleSheet(styleSheet);
}
// collect all media rules
const mediaRules = Array.from(findAllMediaRules());
// read replacement values
var style = getComputedStyle(document.documentElement);
var replacements = [];
for (var k = 1, value; value = style.getPropertyValue('--replace-media-' + k + 'px'); k++)
replacements.push(value);
// update media rules
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
for (var k = 0; k < replacements.length; k++) {
var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): ' + (k+1) + 'px\\)', 'g');
var replacement = '($1: ' + replacements[k] + ')';
mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
}
}
CSS:
:root {
--mobile-breakpoint: 642px;
--replace-media-1px: var(--mobile-breakpoint);
--replace-media-2px: ...;
}
#media (max-width: 1px) { /* replaced by 642px */
...
}
#media (max-width: 2px) {
...
}
You can build a media query programmatically using matchMedia:
const mobile_breakpoint = "642px";
const media_query = window.matchMedia(`(max-width: ${mobile_breakpoint})`);
function toggle_mobile (e) {
if (e.matches) {
document.body.classList.add("mobile");
} else {
document.body.classList.remove("mobile");
}
}
// call the function immediately to set the initial value:
toggle_mobile(media_query);
// watch for changes to update the value:
media_query.addEventListener("change", toggle_mobile);
Then, instead of using a media query in your CSS file, apply the desired rules when body has the mobile class:
.my-div {
/* large screen rules */
}
.mobile .my-div {
/* mobile screen rules */
}
As you can read other answers, still not possible to do so.
Someone mentioned custom environmental variables (similar to custom css variables env() instead of var()), and the principle is sound, though there are still 2 major issues:
weak browser support
so far there is no way to define them (but probably will be in the future, as this is so far only an unofficial draft)
Paper isn't the same shape the world over. I have a document that I want to print differently when it's printed on A4 versus US Letter. Some elements should be hidden or shown. The obvious suggestion is to use a media query like so:
#media print and (max-height: 280mm) {
.a4-only {
display: none;
}
}
This doesn't appear to work, though, presumably because it's using the total document height or some irrelevant window height rather than the page height.
Is there a way of addressing page size accurately?
Browser support for print specific media queries is varied and there doesn't seem to be any good resources for it. It's really not possible to do this cross-browser, in some browsers the support is not there at all. Safari for example, seems to use the size of the browser rather than the page for it's media queries.
You can get it working in Chrome and Firefox. I knocked up a very rough demo using the size ratio to show what is possible with a bit of work. Currently tested and working on current versions of Chrome and Firefox on macOS. You should get a message at the start of the page with the printed page size (only when printed).
http://gsgd.co.uk/sandbox/print-test.html
The main trick is using vw units to check for height, hence using the aspect ratio you can target specific paper sizes:
#media print and (min-height:160vw) and (max-height: 170vw) { /* legal-size styling */ .standard.container::before { content: "LEGAL"; } }
#media print and (min-height:135vw) and (max-height: 145vw) { /* A4 styling */ .standard.container::before { content: "A4"; } }
#media print and (min-height:125vw) and (max-height: 135vw) { /* letter-size styling */ .standard.container::before { content: "LETTER"; } }
Unfortunately it seems like Chrome's page sizes for printing don't match the output page size so I guesstimated some styles that match for Chrome.
#media print and (min-height:120vw) and (max-height: 150vw) { /* legal-size styling */ .chrome.container::before { content: "LEGAL"; } }
#media print and (min-height:100vw) and (max-height: 120vw) { /* A4 styling */ .chrome.container::before { content: "A4"; } }
#media print and (min-height:80vw) and (max-height: 100vw) { /* letter-size styling */ .chrome.container::before { content: "LETTER"; } }
With an incredibly rudimentary browser detector script
if(navigator.userAgent.match(/chrome/i)) {
document.querySelector('.container').className = 'chrome container'
}
An idea to get something to work for Safari would be to manually resizing the window, but that would likely be a ton of work and require the user to select print size up front.
All that said you might get better mileage fixing up your layout to respond better to different widths.
I'm trying to resize my Adobe AIR app fonts according to screen size with CSS. It seems that em is not a valid CSS value, and also %.
font-size:8%; // Not a valid value
font-size:8em; // Not a valid value
What CSS values can I use to set a dynamic font-size (using AIR 24)?
Please note that I do not want to use #media CSS queries.
In Flash/AIR, CSS is parse a little bit different and only numbers are useable:
fontSize - Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
See: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.
Flash/AIR also has different CSS media queries. If you end up going this route you would probably want to use something like the application-dpi:
#media (application-dpi: 160) {
.someStyle {
font-size: 12px;
}
#media (application-dpi: 240) {
.someStyle {
font-size: 14px;
}
See: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ff2.html#WS19f279b149e7481c4a89460c12d804a111e-8000
You probably could also try modifying the styles through code:
var tf:TextFormat = new TextFormat();
if(someScreenSizeVariable < 640) {
tf.size = 10;
} else {
tf.size = 13;
}
StyleManager.setStyle("textFormat", tf);
See: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f5b.html#WS5b3ccc516d4fbf351e63e3d118a9c65b32-7f3b
I have a 2550px x 3300px image of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).
Any suggestions?
You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?
From http://articles.tutorboy.com/css/resize-images-in-same-quality.html
If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.
<style>
#media screen
{
#origImage { display:none; }
}
#media print
{
#screenImage { display:none; }
}
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />