I want to apply a class on image elements, but only for those which got a landscape format.
So, I want to know if there is a way to select images on my html, having a width/height ratio greater than 1, just like the media queries do with the "device-pixel-ratio" filter.
I actually do this in Javascript, but this can be better to do it in css (or with css framework like less/stylus/sass etc..)
Thanks for your help
Media queries inspect the user's screen properties, which is why it can select for screen width and even retina displays. To read the properties of the images themselves would not be possible in LESS or CSS.
LESS and its compiler, whether client-side or server side will just compile to CSS so there's nothing inherent in LESS that will read your HTML, let alone images.
CSS would get you closer, but reads your HTML semantically, not looking at the inner properties of media elements like images or video.
Related
I am building a responsive design with bootstrap and I have two navigation bars, one for mobile and one for desktop.
Being a mobile first framework, the desktop one only triggers at min-width:992px and otherwise is set as display:none. I have a whole bunch of css for the desktop navigation, now I was wondering if it would be best to put it in the min width 992 media query, or just leave it outside of the media query.
What is the best practice?
Also, does media query CSS only get loaded when the media query is triggered? I'm fairly sure that CSS just gets loaded as is, but thought i'd ask.
You should try to use (%) instead of (px)
Is it possible to prepare different styles that change page layout depending on the information if the content of a page is "long". I want to enable CSS3 columns when content is long and disable them when content is short.
How do you define "long"? It's open - it can be a certain amount of paragraphs, a number of pixels etc.
A similar media query that can change styles depending on the browser window width:
#media only screen and (min-width: 1278px) {
/* code for wide-screen window */
}
I want to use pure CSS and no JavaScript if possible (with JavaScript it's simple - I'd just add a class after measuring page offsets).
As far as I know there is no way with a media query
The w3 specification for the height attribute specifies that is is not for actual content-height but rather than browser height, similar to the width attribute.
I would go with a quick JS solution exactly as you described.
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.
Ok, So I designed a responsive layout that doesn't show images for very small screen sizes, using media queries and display: none;.
So far so good. But these images still download on these devices, causing an increase in bandwidth.
What is the proper way to make these images not download on the specified devices?
Any response would be much appreciated!
Two options I can think of:
Detect small devices on the server using browser-sniffing, and send them different HTML that doesn’t reference the images.
Display the images via CSS instead of HTML (in style attributes if you like), using either background-image or :before/:after and content (not supported by IE 6 or 7), and wrap that CSS code in media queries so that it’s only displayed by devices with larger screens.
The only accessible solution right now is to wrap the image with <noscript> tags, then pull the image out later with javascript. Cookies don't work on first page load (HTMLPreloadScanner), nor with CDNs. Browser-sniffing is useless if your images aren't always 100% of the viewport.
Slimmage.js implements context-friendly responsive images in 3KB of vanilla JS.
The markup is pretty simple as well:
<noscript data-slimmage>
<img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>
Of course, you can make a server-side helper to even abstract this away.
If you don't mind a javascript dependency you could check window.innerWidth and insert image tags for sufficiently large screens.
Images would only be requested if javascript is enabled and the window big enough.
If you don't have any issues using additional JavaScript, then you may try THIS. I've stumbled upon it while searching and learning about media queries.
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.