Looking at some CSS that another department designed and came across this media descriptor:
#media (max-width:-1) {
...standard css stuff here
}
Since you cannot have width < 0, what would the purpose be of this? Maybe just some leftover CSS which was being tested?
In addition, also came across
#media (min-width:0) {
}
Which of course would always be active.
#media (max-width:-1) {
...standard css stuff here
}
I believe this is invalid condition so it will never get executed
#media (min-width:0) {
}
basically telling the browser that apply CSS only if the viewport is 0 pixels wide or wider(greater than or equal 0) , in this case, all screen sizes.
#media (max-width:-1) {
...standard CSS stuff here
}
Means screen width is between 0 and -1. As #Rahul said is an invalid condition.
Related
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.
This question already has answers here:
Apply only to IE 11 within media query for screen size
(2 answers)
Closed 4 years ago.
I'm having some issues with IE11 similar to this post. I have a menu that expands at a certain size (1440px) and breaks in IE11. Using Media Queries I can target IE11 using (-ms-high-contrast: none), (-ms-high-contrast: active). However, I only want this at a certain resolution (> 1440px ).
I've tried various combinations of
#media screen and (min-width: 1440px) and (-ms-high-contrast: none) and (-ms-high-contrast: active)
But they don't seem to work
How to target and element in IE11 at screen size > 1440px without affecting the other browsers or using JS.
After searching through the depths of Stack Overflow I managed to find someone with the same problem.
Using:
#media only screen and (min-width: 1440px) {
_:-ms-fullscreen, :root .THECLASSNAME { width: 575px; }
}
Made it work.
Using CSS:
#media(min-width: 1440px){
.element{
-ms-high-contrast: none;
}
}
#media(max-width: 1440px){
.element{
-ms-high-contrast: active;
}
}
Remember that #media can also be used for print interfaces, so #media screen is simply specifying that these rules are to be implemented when displaying on a screen, but not when printing. #media by itself is more broad, and would apply to print.
Using jQuery:
if you want plain js you can translate it:
$( window ).width();
or
$( document ).width();
(use one or another depending on the behaviour you need)
you can programatically check screen sixze with:
$(document).ready(function(){
if($(window).width() > 1440){
$('.element').addClass('msClass');
}else{
if($('.element').hasClass('msClass'){
$('.element').addClass('msClass');
}
}
});
This only works when document loads, but you can add a dynamic function with:
//Window resize event listener, you'll need to put the other function first if you want it to being applied when you load the view.
$(window).resize(function(){
//if the actual window width is greater than 1440...
if($(window).width() > 1440){
//add a class to the desired element/s (this class must include the changes you want when more than 1440p)
$('.element').addClass('msClass');
//if the screen resizes below 1440p...
}else{
//if the class is set before
if($('.element').hasClass('msClass'){
//remove this class
$('.element').addClass('msClass');
}
}
});
You must create a class called msClass if you follow this example, where you put whatever you want to happen when >1440p.
Element is related to the element class (you can even use an id with $('#element') specifically set at the element/s you want to take this behaviour).
Hope it helps
which media condition will win in the given code below?
.img {
background-image: url(small.jpg);
}
#media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(medium.jpg);
}
}
#media (min-width: 800px) {
.img {
background-image: url(large.jpg);
}
}
There arises two possibilities.
Suppose the screen is greater than 800px and also has device-pixel-ratio equals to 2, then both the media queries resolves to true.
which image will be retrieved?
and is there any chance that both will get requested at the runtime
(though only one will shown up overriding the anther)
impacting(degrading) the performance by causing loading-time
overhead?
Well, going by the rules of cascading it should be the last one. but I'm not sure if media queries have any kind of specificity like how an ID trumps a class.
This was marked duplicate of What are the rules for CSS media query overlap? but there is another aspect of this question(mentioned in point-2) which is not addressed in that marked-duplicate.
So you see a lot of code examples do something like
#media all and (max-width:640px) {
div {
background-color:red;
}
}
Now afaik, the keywords "all" and "screen" and some others are for selecting the device type this applies to and the line is just supposed to provide a boolean output.
Since "all" applies to every device, one would imagine that its always 1 and (1 && x) always equals x so "all and" should make no difference whatsoever.
I tried out
#media (max-width:640px) {
div {
background-color:red;
}
}
and at least my browsers agree. Is there anything else I should know about?
See the spec: https://www.w3.org/TR/css3-mediaqueries/
The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.
...
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.
/* I.e. these are identical: */
#media all and (min-width:500px) { … }
#media (min-width:500px) { … }
/* As are these: */
#media (orientation: portrait) { … }
#media all and (orientation: portrait) { … }
In addition, the following media types: 'tty', 'tv', 'projection', 'handheld', 'braille', 'embossed', 'aural' have been deprecated in Media Queries Level 4.
all refers to: all media type devices, print: used for printing, screen: used for desktop screens, mobiles, tablets etc and speech: used for screen-readers that "reads" the page out loud.
In your case where you have specified media type as all, you can try printing the page by right clicking. The printed page will have all the styles applied in short it will exactly look the same.
Now take another example where you specify the media type as screen. If you try to print the page you will not see all the styles getting applied to the page as the styles were defined for screen alone.
If one does not specify all in media query it is by default taken as all.
#media screen {
div {
color: blue;
}
.print{
display: none;
}
}
#media print and (min-width: 200px){
div{
color: tomato;
}
div.not('.example'){
display:none !important;
}
.print{
display: block;
}
}
<div class="example">
<div>Try printing me. See if this blue color appears while printing</div>
<div class="print">I am only visible while printing.</div>
</div>
I am having a philosophical debate with myself over the best place to put media queries within style sheets. I am attempting to structure my CSS modularly (like OOCSS or SMACSS, etc). Given that context, I see two choices:
Put all media queries together in a separate stylesheet or section of the main stylesheet.
Put media queries below their base counterparts. For example, if I have a module called "news-item", I could put any necessary media query styles right below the definition of that module.
I am leaning towards the latter, but it would mean I'd have many more separate media queries (separate ones for each logical block of CSS requiring a responsive adjustment).
Any thoughts on this?
How about using media queries just to load device specific stylesheets
like:
#import url(mydevice.css) this and (that);
or:
<link rel="stylesheet" media="only this and (that)" href="mydevice.css" />
...if you're looking at the device specific adjustments as a kind of "subthemes" to a main layout (just overwriting some properties), this would make sense to me, too.
Approach #2 works better for me.
When I was a newbie, I was using Approach #1 - I was writing my media queries together (at the bottom of my stylesheet or in another file).
.header { ... }
.news-item { ... }
.footer { ... }
/**
* ...
*
* bla bla, imagine a huge amount of styles here
*
* ...
*/
/** All style tweaks for screens < 1024px */
#media screen and (max-width: 1024px) {
.header { ... }
.news-item { ... }
}
This approach has a few downsides. Based on my experience, the most notable one is that the maintainability is a hard. The main reason: .news-item logic is spread across multiple unrelated lines of CSS.
Later on, naturally, I decided to keep the related styles together. Approach #2:
/** Header's styles and media queries */
.header {
...
}
#media screen and (max-width: 1024px) {
.header { ... }
}
#media screen and (max-width: 720px) {
.header { ... }
}
/** News-item's styles and media queries */
.news-item {
...
}
#media screen and (max-width: 1024px) {
.news-item { ... }
}
#media screen and (max-width: 720px) {
.news-item { ... }
}
/** ... and so on */
However, in this approach, repeating media queries max-width values all-around doesn’t look maintainable enough. I solved this issue by using a CSS pre-processor (like SASS) that allows me to replace all them with variables and define them once.
To boost up the maintainability and to make these definitions a lot more elegant I started to use an abstraction on top of the Media Queries.
If you're interested in more details, please read on my blog post :-)
With Sass it's easier to use the media queries directly below the counterparts. But if your CSS is well commented in your modules, I don't see a problem to put the queries bellow since that would be easy to find.
You'll end up writing a little more code retyping the queries, but not a big deal.
May be you can try css variables, which is native support reuse your css!
:root {
--main-color: #F06D06;
}
.main-header {
color: var(--main-color);
}
.main-footer {
background-color: var(--main-color);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care
https://css-tricks.com/difference-between-types-of-css-variables/