I'm not sure if this is even possible, but I'd like to throw it out there: say I have something like
.this-thing:hover {
/* something magical */
}
in CSS. During Print Preview and Print, I would like to "disable" whatever hover effect is on .this-thing, such that even if the user is hovering over a given element when they decide they want to print the page, the effects from /* something magical */ do not appear on Print Preview or the printed media.
Is there a pure CSS solution to this?
Note that I do not want to found out what the specifics of /* something magical */ is in order to disable it during #media print.
You could use #media only screen to apply the hover effects only to the :hover rules.
So you would do:
#media only screen {
.this-thing:hover {
/* something magical */
}
}
Organizationally, this may be a mess to pepper #media only screen around all of your hovers, but it's one option.
The same way as you use the only and and logical selector, you can use the not to specify that the style rule should not apply to some media type:
#media not print {
.this-thing:hover {
/* something magical */
}
}
Related
I am creating a chart that shows keyboard commands overlaid on top of an image of a keyboard. I would like the text to shrink to the size of the container if it is too long to fit inside a key, but remain the default size otherwise. How would I accomplish this in HTML? The solutions I've seen seem to always alter the text size, versus only when the container is too small. Thanks.
Here's an example of what the result might look like:
You can use something like word-wrap or overflow-wrap or adding a variable with css(i.e: a font-size that fits your needs) and only change it when a media queries (that you established) returns true;
Media Queries explanation:
Let's say I established this variable
:root {
--font-size: 16px;
/* this is your regular font size that you will use in your entire document */
}
So in a given screen size like so:
#media screen and (device-width: 320px) and (orientation: portrait) {
:root {
--font-size: 12px;
}
}
You just change the value of the variable and it will change where ever you used that specific variable
If you don't know how this works you can use this css variables like this
.someClass {
font-size: var(--font-size); */ and that's it :) */
/* You can also make calculations like this */
font-size: calc(var(--font-size) - 40%);
}
Reference:
overflow-wrap: https://css-tricks.com/almanac/properties/o/overflow-wrap/
word-wrap: https://css-tricks.com/almanac/properties/w/word-break/
css variables: https://www.madebymike.com.au/writing/using-css-variables/
media queries: https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/
I have a page with some data and content. I want to make a print version that will display the content and footer not to worry much about the header.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:block". Is that doable?
How do I achieve this?
EDIT: This is what I have so far:
/* Print Style - SuccinctNate */
#media print {
* {display:block;}
.printable, .printable > * {display:block;}
#footer {display:block;}
}
your code seems correct . you can set display:block to the items you want to show on the print and display:none on everything else.
#media print {
* { display:none }
.item_i_want_to_print { display:block;}
}
or you could just hide the ones you don't want to appear on the print
#media print {
.item_i_do_not_want_to_print { display: none;}
}
it is compatible with every browser . so use it with confidence
see more here : media print
Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.
#media (max-width: 600px) {
.banner {
display: none;
}
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Now as you run the code above(I assume you just did) there is nothing wrong.
Ok, now I will add similar code.
#media (max-width: 600px) {
.banner {
display: none;
}
}
.banner {
display: block;
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.
If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.
(Assuming all else is equal) Styles are activated in the order of precedence that they're encountered, unless encased in what amounts to an IF query, such as a media query.
.banner {
display: block;
}
So the above CSS will always display, no matter what other IF statements come before the rule itself. Which is not what you want.
Solutions:
1) You instead need it to be encapsulated within its own media query to only show when ABOVE 600px so:
#media (min-width: 601px) {
.banner {
display: block;
}
}
2) You place all your media queries in reverse order, so all at the bottom of (last in) your CSS file(s), so the media qualifiers are read AFTER the standard rules.
EDIT:
As Sean qualifies in comments, there are various more specific CSS selections, rather than just the order of appearance in the file, that can bend which rules take precedent over others. The order of appearance works in this case and works when the subject rules are all equal (such as all direct classes only) but please note that there will be other CSS rule instances that can complicate the issue. This answer is not intended for more complex CSS rule ordering.
It depends on the order of the rules: Every rule that comes AFTER a rule in a media query (for the same class or ID) will override it.
In your case the "general" rule for .banner is below/after the media query, so it overrides the rule in the media query. You have to write the general rules first, followed by the media queries.
This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!
Does iBooks add something like a CSS class or anything else in order to be able to style some sections of the book differently (in lighter colors) when the night mode is active?
iBooks adds a __ibooks_internal_theme attribute to the :root (html) element with a value that's changing with the theme selected.
Go ahead with this:
:root[__ibooks_internal_theme*="Sepia"]
:root[__ibooks_internal_theme*="Night"]
You can find more details on GitHub: theme-detect.css
I will eventually add details on CSS limitations for the three themes.
Computed Styles
You could try doing a window.getComputedStyle(document.body).backgroundColor. This is not tested.
EDIT: Concerning getComputedStyle, my mistake--background color (assuming that's what iBooks is using) is NOT inherited, so getComputedStyle is not going to buy you anything. Since styling on the HTML element has different levels of support (HTML4 technically doesn't even allow a style attribute on the HTML element AFAIK), it is theoretically possible that your inherit trick did not work. I'd stick in a
alert(document.documentElement.style.backgroundColor);
and see what pops up. Another brute-force approach is to do a
alert(document.documentElement.outerHTML);
You'll get a huge amount of stuff in the alert box but it should scroll for you and you might be able to see something useful in there.
FWIW, Readium apparently does night mode with a background-color of rgb(20,20,20) on the html element.
Media Queries
It is reported that Apple has introduced proprietary media queries "paginated" and "nonpaginated" to detect whether the user is using the new scrolling mode in iBooks 3.0. It is possible that it has introduced a media query for the dark theme (actually called "night"), but I'm just guessing. In any way, there's no way to my knowledge to enumerate media queries, and so it would be a process of pure trial and error trying to find it.
Without the help of iBooks, you can add another css for night mode. Just add this tag inside the
<link rel="stylesheet" href="nightmode.css" class="night" />
Another solution is to make Custom Media Queries into your css file:
/* Sepia */
#media sepia {
* { color: #000000; }
body { background-color: #eae4d3; }
}
/* Black */
#media black {
* { color: #ffffff; }
body { background-color: #000000; color: #ffffff; }
}
/* White */
#media white {
* { color: #000000; }
body { background-color: #ffffff; }
}