I'd like to apply a series of styles to browsers that meet two criteria:
Are not Internet Explorer.
Are a minimum of 1400px.
Individually I can handle each:
#supports(not (-ms-high-contrast:active))
#media(min-width: 1400px)
I'd like to do something like this though:
#media(min-width: 1400px) and #supports(not(-ms-high-contrast:active))
Does CSS allow for this in some way?
I've noticed that this can be done by nesting directives, but I'm hoping to find a cleaner and more readable solution.
At-rules such as #media, #supports and #keyframes are separate rules that cannot be grouped together by their at-keywords. That is, it's not possible to write a single rule with a single pair of curly braces that combines two different at-keywords as you are trying to do. So, unfortunately, nesting is your only option here.
The best you can do is write both statements — and their opening/closing braces — on the same lines:
#supports not (-ms-high-contrast: active) { #media (min-width: 1400px) {
}}
This is basically nesting them as shown in the linked question, minus the excess line breaks and indentation.
Related
I want to have a stylesheet that is appropriate for print and screens of decent width.
I hope my intent is obvious when I type:
#media print or (screen and (min-width: 801px)) {
Rules here
}
Sadly, this won’t work.
What is the correct syntax?
Try this (a comma seperates several independent condtions/queries):
#media print, screen and (min-width: 801px) {
Rules here
}
Try this:
#media print, (min-width: 801px) {
Rules here
}
That would be for OR.
Just FYI, an AND structure would look like this:
#media print and (min-width: 801px) {
Rules here
}
#media print, screen and (min-width: 801px) {
.intro_text{
border: solid 1px blue;
}
}
works on a Mac (Safari, Chrome and Firefox.) Note the comma and fewer parentheses per:
2.1 Combining Media Queries
"Several media queries can be combined into a comma-separated media query list."
I would think, given:
2.4. Media Features
Media features are always wrapped in parentheses and combined with the and or or keywords, like (color) and (min-width: 600px), rather than being separated with semicolons.
2.5. Combining Media Features
"Media conditions can be grouped by wrapping them in parentheses () which can then be nested within a condition the same as a single media query."
It is invalid to mix and and or and not at the same “level” of a media query. For example, (color) and (pointer) or (hover) is illegal, as it’s unclear what was meant. Instead, parentheses can be used to group things using a particular joining keyword, yielding either (color) and ((pointer) or (hover)) or ((color) and (pointer)) or (hover). These two have very different meanings: if only (hover) is true, the first one evaluates to false but the second evaluates to true.
that some set of parentheses would work, but I can't find one. This must be due to the difference between "Media Queries" and "Media Features." The spec language seems a little unclear at places to me, e.g. the reference to "semicolons" above.
Any idea how does IE treat media queries regarding this CSS selector limit?
Does it see it as a single CSS rule or it sees it as 1 rule (the #media declaration) + number of rules inside the #media rule?
This being for IE9 as from what i know IE9 is the only IE that supports media queries while also having this issue with 4095 selectors.
I'm trying to write a tool to split the CSS accordingly and I'm not sure how to count the rules, as in a #media rule will be counted as 1 or will be counted as 1 + nr of rules inside?
It appears that media queries are not included in the selector limit. All rules within all media queries are counted though.
I wrote a test that performs a binary search to find the turning point where the last selector is ignored. It is available at https://robwu.nl/s/css-selector-limit-test.html. The binary search runs over the range 0 - 4200 and reports how often the input selector fits until the last selector is not applied any more. If the result is greater than 4096, the test case reports "infinity".
Results:
Turning point at 4095 for: #DUMMY{color:red;}
Turning point at 4095 for: #media screen(min-width:9px) { #DUMMY {color:red;} }
Turning point at 2047 for: #media screen(min-width:9px) { #DUMMY, #DUMMY {color:red;} }
Turning point at 1023 for: #media screen(min-width:9px) { #DUMMY {color:red;} #DUMMY, #DUMMY, #DUMMY {color:red;} }
Turning point at 1364 for: #media screen(min-width:9px) { #DUMMY {color:red;} } #media screen(max-width:9px) {#DUMMY, #DUMMY {color:red}}
Turning point at 1364 for: #media screen(min-width:9px) { #DUMMY {color:red;} } #media screen(max-width:9px) {#DUMMY {color:red;}} #media screen(max-width:9px){ #DUMMY {color:red;}}
Turning point at infinity for: #media screen (min-width:9px) { }
Turning point at infinity for: #media screen (min-width:9px) { } #media screen (min-width:9px) { } #media screen (min-width:9px) { }
Turning point at infinity for: #font-face { font-family: "blablablablabla"; }
The last three tests show that media queries (and other at-rules such as #font-face) are not counted in the selector limit.
I have seen many "css rule" counter scripts here on Stack Oveflow (e.g. https://stackoverflow.com/a/20496041 and https://stackoverflow.com/a/12313690), but all of them are wrong, unfortunately. A media query appears as one entry in the cssRules/rules list. The right way to count the number of selectors in a stylesheet is to recursively process the style sheet to deal with (nested) #media at-rules.
I'm not sure whether it will be counted as 1 or 1+nr but I would suggest that you don't split the CSS between media queries.
A non-efficient hack
Use a counter and go upto 4095.
Trace back and try to find the most recent #media query and split the CSS from there. You can add a check if media query doesn't come till 3000 while backtracking then don't count that case etc.
I recently asked a question about how to use media queries while supporting fallback for older browsers that don't support them. The only answer (while it works) was to use javascript such as adapt.js to determine which stylesheet to load.
I have been tinkering around and realized an unbelieveably simple solution that worked for me in IE7 anyways, was the following:
.wrapper{width:1024px;}
#media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
#media all and (max-width: 1024px) {
.wrapper{width:1024px;}
}
#media all and (max-width: 900px){
.wrapper{width:900px;}
}
The above is just a really simple example. When I fiddling around I noticed if I specified a default value for .wrapper IE7 rendered it and ignored the media queries. In Chrome/FF/Safari it used the media queries css. This leads me to think this can be a compatible workaround to javaascript but I'm not sure of any ramifications whether browser compatibility or SEO.
Is this a bad way to implement and will it have any compatibility issues? I like the idea of having all css in one file.
Any thoughts would be appreciated, thanks!
Your ordering of max-width media queries means that by the cascade, this rule becomes totally unnecessary; you can remove it unless you intend the styles in this rule to be different than your first rule which doesn't sit in its own #media block:
#media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
Besides that, I don't see any ramifications or compatibility issues. It's pretty much how media queries with #media rules are meant to be used.
I am trying to hide a media query from being printed, so I came up with #media not print and (min-width:732px). But for whatever reason, this (and many variations I have tried) does not display as I would expect in browsers.
The only option I can think of is to use #media screen and (max-width:732px), but I would like to avoid this as it excludes all the other media types besides screen.
Media queries grammar is pretty limited to say the least.
But with CSS3 (not CSS2.1) it seems that you can nest #media rules.
#media not print {
#media (min-width:732px) {
...
}
}
This basically executes as (not print) and (min-width:732px).
See https://stackoverflow.com/a/11747166/3291457 for more info.
How about something like this?
body { min-width:732px; }
#media print {
body { min-width:initial; }
}
The min-width will be set to 732 for everything, except print, which will get some other value that you specify. Depending on your situation, you can set a different width, or try something like "thiswontwork" (which sometimes causes the value to be set to the initial value) or "inherit" or something like that.
If I'm correct in my assumptions about the behavior you expected, the issue is that the precedence of not is lower than and.
#media not print and (min-width:732px) means "any media except for printers with at least 732px-wide viewports" (so it will apply to any non-printer and skinny printers) not "any media except printers, as long as that media has at least a 732px-wide viewport" (which is what I assume you expected).
Since parentheses aren't valid around media types and #media rules cannot be nested, working around it is kind of annoying. For simple cases, brentonstrine's answer is a good solution, but for queries which enclose many styles it can be burdensome to make sure they're all overridden properly.
I put together some example media queries when I was trying to figure this out myself earlier today.
As you can't put something like this
#media screen,handheld,projection,tv,tty and (max-width:732px) { ... }
you should write pairs for each media like following:
#media screen and (max-width:732px), handheld and (max-width:732px), projection and (max-width:732px), tv and (max-width:732px), tty and (max-width:732px) { ... }
You could try something like:
#media screen,handheld,projection,tv,tty { ... }
The above nested query didn't work for me, but after a little reading on Media Queries Media Types at MDN, you can exclude you're media query from print styles by specifying the screen type
So if you have a media query like this which doesn't specify a type, it will have an implied type of all, (which will affect print styles)
#media (min-width:400px) {
...
}
To exclude the style from print styles, you'd need to change it to this:
#media screen and (min-width:700px) {
...
}
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).