Is there a CSS selector for the size of the browser. So I can style elements if the browser is greater than 500px for instances.
My target browser is IE9 & IE10 in standards mode only; so I am only concerned about these two browsers.
Sure, you can use media queries, like so:
#media screen and (min-width: 500px) { your css goes here }
can't you just use css media queries for this?
There isn't a selector in CSS for judging the size of one's screen. But I also wouldn't go the Javascript route if you don't have to. Perhaps you should look more into CSS media queries.
CSS 3 enhances support for media-dependent style sheets by letting
style sheets be more precisely labeled. A media query consists of a
media type and at least one expression that limits the style sheets'
scope by using media features, such as width, height, and color.
Media queries let the presentation of content be tailored to a
specific range of output devices without having to change the content
itself.
References:
https://developer.mozilla.org/en/CSS/Media_queries/
http://www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
Related
I assume that, just like the media queries that are used in link tags, the media queries which we define in our CSS files are parsed/overwritten or omitted by the browser according to their media query rules (Actually I know that, although the CSS files requested by the link tags with unmatched media are anyway downloaded, they are not render blocking the browser).
So, from the CSSOM build optimization stand point, isn't it better to separate the generic CSS rules that applies to all screen devices from the mobile specific CSS rules and encapsulate the mobile specific rules in a max-width media query? So that browser will parse less CSS to build CSSOM without the need of overwriting them for tablet, desktop etc. I wonder if that would affect the building of CSSOM performance or is it just overkill?
<link> tags with unmatched media queries are download with low priority so that they don't block page rendering, but are still downloaded in order to be available in case media properties change (for example by rotating a smartphone or by zooming out a desktop browser). There is an advantage in having separate stylesheets for different media types, but there is also a disadvantage in creating multiple HTTP requests.
Media blocks inside a stylesheet are already downloaded and I would assume that they are compiled anyway, so it's not really the same as a media query in the tag. But if a certain set of rules is only relevant to a certain width and is always overriden in wider screens, it makes sense to tell the browser that by encapsulating it inside a media query. It's not just about the original page rendering but about any change to the window or to the DOM that requires a redraw - the less rules the browser would need to evaluate, the faster it would be.
In CSS 3 syntax we have #media to define responsive screen to apply.
I intend to use it as custom code-folding for CSS entries.
E.g.
#media {
div { color: green; }
}
So I wonder if there are any side-effect problems may arise when doing so?
First off, the #media CSS at-rule is not new to CSS3. It was introduced in CSS2, and has been supported by every browser including IE5+. What is new to CSS3 are media queries. The difference between media queries and #media are detailed in this answer.
An #media rule without an accompanying media query is equivalent to #media all, which, again, is understood correctly by every browser including IE5 and up. In other words, in terms of browser behavior there are no side-effects other than hiding CSS from IE4 and any other browsers from the late 90s (which don't support #media in any way, shape or form).
Note that this construct does not validate as either CSS2 or CSS3 in the Jigsaw CSS validator; this is a bug with the validator which may be due to the fact that CSS2 did not explicitly allow empty media types with #media. Having said that, what is stated in CSS3 is consistent with browser behavior up to 17 years back, so this is something you can totally rely on.
I'm trying to find as reliable a method as possible to hide content from mobile email clients.
Ideally the solution will hide content by default from devices that don't read media queries, but display on desktop clients that also don't read media queries.
For now I'm using code derived from another post to hide the content and then I use a media query to turn it back on. I've seen a lot of reverse posts here with solutions for hiding content on the desktop, which helped.
The issues with my current solution are:
On Gmail desktop content isn't showing even though the "display: block !important" in the query has the !important declaration
This doesn't work for Outlook 2003 or below because they don't read media queries
Doesn't work on Yahoo and AOL Mail on desktop because I believe they don't read media queries
Wrapper div to hide content on mobile:
<div class="desktop" style="width:0; overflow:hidden;float:left; display:none">
Current media query override to turn content on for tablets,desktops:
#media only screen and (min-width: 768px) {
.desktop {
display : block !important;
width : auto !important;
overflow : visible !important;
float : none !important;
}
Gmail doesn't support the style tag, so media queries will not work. Same goes for all of these clients (you mentioned a few of them).
There are a few tricks where you can target some specific clients by using CSS that is not supported in others, (plus mso tags for Outlook). For desktop vs mobile, you're pretty much stuck with media queries, which are not fully supported themselves.
As you've linked in the question, you can try combinations of max-width and/or min-width media queries. You could also try device-pixel-ratio in your media queries to isolate devices. That is pretty much all you have to play with unless you want to use floats or fluid layouts.
CSS display is not supposed to be supported in Gmail according to CM's CSS support chart (full pdf), but if it is in fact hiding your content, you won't be able to override the inline declaration due to the lack of style tag support. This issue would have been there with the other non style tag supported clients anyway...
Not really a solution, but I hope this clarifies things a bit.
According to bootstrap-responsive.css file,the media query #media (max-width: 767px) is repeated meaning it occurs twice in the file.Why is it repeated?.
You can see the file here http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
Hmmm, I certainly can't claim to understand what the developers intended when they wrote the CSS, but here's what I think...
I believe the repetition of media queries is just to provide greater modularization of the CSS file. Note that both #media (max-width: 767px) and #media (min-width: 768px) and (max-width: 979px) are actually present twice in the file, so it's not likely an anomaly.
The first declarations of these media queries appear to deal with classes that are added to elements to hide/show them at certain browser widths, so in effect selectively on different devices (specifying the display property). The second declarations seem to deal with the various classes that are foundational to Twitter Bootstrap's design principles, specifying styles (width, margin, min-height, etc.) of the various classes used in the 12-column grid system.
Classes of the first set can be applied at the whim of the developer, to hide/show certain elements when the page is viewed on various devices. Classes of the second set are applied a bit more rigidly than the first set, since they are a more defining characteristic of the framework's grid system (eg. You can give an element classes of both hidden-phone and visible-tablet from the first set and see the effects of both, but giving an element classes of span12 and span6 will cause only the last-given class to take effect).
It is because the first set of classes differs significantly in application from the second set of classes that the media queries declarations are declared twice, one for each set.
In Scalable and Modular Architecture for CSS (2012), Jonathan Snook comments on this concept of modularization, stating,
Yes, this does mean that the media query declaration may (and likely
will) get declared multiple times but it also allows for all
information about a module to be kept together.
(I apologize if I used the wrong terms when referring to styles/CSS/HTML! I'm still learning...)
I have a CSS style sheet utilising Media Queries. My homepage is just a background image 100% x 100% on to which I want to position a centered iframe, which will have a source based on the media query result.
EG:
CSS
#media all and (max-width: 500px) and (min-width: 400px), (min-width: 1151px)
.frame1{
position:absolute;
width:390px;
left:50%;
margin-left:-195px;
}
HTML
<iframe class="frame1"></iframe>
So the width range is 400px to 500px and for any screen in this range the content will be in a centered iframe, with wider screen having a greater margin of background image visible. Now where my problem lays is I want the iframe source to change depending on screen size so I could have the source as mobile.htm (showing a very basic version of website) on small screens, standard.htm (a mid grade version) on average screens and large.htm (additional content included) on large screens.
However I can't get anything I have thought to do this. I assume to be determined by the media query it must be an attribute of the iframe listed in the CSS? I have tried every combination of:
frame src: __.htm;
iframe src: _.htm;
frame src: url(___.htm);
iframe src: url(___.htm);
frame src: url ("__.htm");
etc.
*The underscores being the page name.
But so far nothing works.
Does anyone know if this is possible? If so how? And please be gentle with explanations I am very new to this, trying to self-teach as I go along and learning bits and pieces as I need them to achieve what I want... been going well so far, but has had me stumped for days now!
You can match based on attribute but you can't set attributes using CSS only1
However, you could use a small snippet of JavaScript to detect the result of your media query (albeit indirectly):
use the media query to apply a property value to the IFRAME
select element(s) with that property value using JavaScript (jQuery selectors will work for this, although some iteration may be involved)
update src accordingly
However, there really isn't a direct correlation between media queries and JavaScript. From an article on pairing media queries with JS:
As far as I know there is no direct access to media queries from
JavaScript. You can’t read out whether the example media query above
has fired or not.
The Full Article suggests some script-based workarounds to return results from script which are consistent with the results of the media query.
1 - At least not in a standards-based fashion which is widely supported. There are hacks to execute code inside CSS using IE proprietary expressions (all of which are now deprecated).