How can I properly do a media query on the Chrome window's width? Is it even possible to properly do media queries in a Chrome extension?
Right now, my media queries act on the width of the extension's viewport, not on the actual browser's viewport (and the extension's viewport can be larger than the browser's). In a normal web app, the viewport width is always equivalent to the browser's viewport, but it doesn't seem to be the same for an extension
There seems to be a way to do this with JavaScript by setting the 'html' tag's width, but if there is a pure CSS way that'd be preferable
(This is for a browser action extension with a popup UI)
At least in a browser action popup, it is impossible to query the parent window's width with pure CSS. As I thought and #Xan confirmed in the comments, JavaScript is necessary to get the width of the parent window.
A way to do this with JavaScript can be found here: How to get notified on window resize in chrome browser. Note that this does require a content script as chrome.window.onResized is still an open issue since 2010
Related
I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in the window width.
As we can see in these 2 examples, the media queries don't act at the same window size with and without the vertical scrollbar :
Test without scrollbar
Test with scrollbar
In the first example, you can see the background color change exactly at 800/700/600px window width.
In the second examples with the scrollbar the colors change at :
Chrome and firefox : 779/679/579px
IE : 783/783/583px
That makes a difference of up to 21px.
Is there is a work around by ignoring the scrollbar in media queries and focus on the available width itself.
If not how do you handle this issue, do you fix a maximum width for the scollbar and include it in the media queries?
-- UPDATE --
I am searching for best practices/solution with CSS as I would like to avoid JS for this project.
Look this example: http://stowball.github.io/mqGenie/
It is working fine both in Firefox and in Chrome for me (with scrollbars).
You can download and read more about this plugin here: https://github.com/stowball/mqGenie (~2.2 kb)
One of sources: https://stackoverflow.com/a/21414947/2898694
Enjoy.
Eight years later (2023), container queries are supported in most browsers and come to the rescue!
Instead of using a media query (which, as you found, reports a window width including the scrollbar), we declare a 'containment context' on the html element
html{container-type:inline-size;}
... and then use a container query to get it's width (without the scrollbar):
#container(max-width:600px){
body{background:gray;}
}
I've updated your example 'Test with scrollbar' using a container query approach (leaving html and javascript untouched).
Here is a bit of CSS that has a simple media query.
http://codepen.io/anon/pen/nuxaw
When I shrink the page so that the view port is less than 320, the box turns green. Now if I follow these steps, the browser will be maximized, but the CSS will still be in the state defined by the media query at 320px.
With the page opened in the first tab, and the browser sized so that the < 320px media query is enabled,
Open a new tab, Browse to a website, like facebook.com.
Maximize the browser.
Take an extended browsing session away from the first tab. Do not reactivate the first tab for a few minutes.
Activate the first tab with the window maximized.
At this point, the view port should be full screen, but the element should still be the green block.
This means the <320 media query is still applied. If you open the debugger though, you'll see that the CSS applied though is the normal CSS. Is this a bug with Chrome?
http://imgur.com/a/TIAAi
Here's an album on imgur that shows the sequence.
Opened, maximized.
Reduced viewport, media query enabled.
Maximized, still using media query.
Looking at the CSS, it says that the dimensions are 300x200, but the UI shows 100x100. Something is broken.
The fix for this issue is to convince Chrome to update the render on the page. You can do it by resizing, maximizing, or changing a class on the body tag. I've updated to codepen to use a visibilitychange event that fires during tab switching to toggle a class on the body to force Chrome to update the page render.
http://codepen.io/anon/pen/nuxaw
I'm using media queries to scale an <iframe> based on screen resolution: the iframe and its contents get smaller, as the screen gets smaller. Now, this seems alright on paper, but for some reason, as the iframe's size decreases, it clips part of the content. I've tried going to the source file, and using media queries there, in hopes that the <iframe> would also include those; to no effect.
Is there any way to scale, or resize, the contents of an <iframe>, using CSS media queries, without resizing the iframe itself?
There is no possible way to style any of the content within a iFrame, because it is pulling content directly from somewhere else and is not taking anything from your site into account.
If you are just trying to grab a few things from a page maybe you should look into PHP.
I have seen the option of loading different css files[called responsive web designing] for different screen sizes. But I want to know if there is some other way through which I can keep the CSS uniform.
I have to adjust the width of a title bar that should be of the same size as browser window with some margin-right
<toolbar width="some px value" margin-right="some px value">
I need some spacing at the end of the browser screen
Can I somehow get the current width of the browser screen and thus adjust my titlebar accordingly
"toolbar" defaults to being displayed as "inline". Try using "block". See this fiddle.
But I don't think "toolbar" is a valid html tag-name (I might be wrong). In any case old versions of Internet Explorer have a hard time figuring out what to do with certain tags (like most new semantic html5 tags) and won't apply any css to them.
If you feel the need to use new semantic tags and still need legacy browser support I recomend using Modernizr. Including it at the top of your page will use a small browser hack to get support for these tags even in old browsers.
I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.
I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates:
in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.
I was putting in some media queries on the view side of things and realized that on the preview page, something like #media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.
Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent?
Or could there be another way of mimicking that behaviour simply with javascript..
Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...
Update (2018):
This is still a common problem for many developers. There is no way without javascript to query the size of an element. It's also very difficult to implement in CSS because of the 'cyclic dependencies' it causes (element relies on another to determine its size, element query causes size change in child which causes size change in parent which causes size change in child ETC...)
There is a great summary of the current element query landscape.
The go-to solution these days is the EQCss library https://github.com/eqcss/eqcss, or handling the changes within a javascript framework like React or Vue using a "CSSinJS" type solution.
My old and hilariously janky "solution":
For now I am using:
.preview {
zoom: .8;
-moz-transform: scale(0.8);}
when the .preview div is 80% of the page width. It's generally working, but with a few issues, and it is not entirely flexible since the divs in question will not always be set % of the page width.