My company has an old JSP page that we are trying to make responsive. As I am going through the templates that our UX team sent us and attempting to implement them, I am learning responsive design at the same time. I have tried to implement an HTML/CSS responsive images tip whereby the HTML
<img srcset="examples/images/image-384.jpg 1x,
examples/images/image-768.jpg 2x">
and the CSS
.img {
background-image: url(examples/images/image-384.jpg);
}
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(examples/images/image-768.jpg);
}
}
However, I am finding that this solution doesn't work so well for my application but I haven't found any other tips.
Here's where I am at in the JSP:
<%-- <img class="formbackground"
srcset="resources/images/Group5209<%=staticAssetsVersionInfoIMAGES%>.jpg 1x,
resources/images/Group5209#2x<%=staticAssetsVersionInfoIMAGES%>.png 2x,
resources/images/Group5209#3x<%=staticAssetsVersionInfoIMAGES%>.png 3x"/> --%>
and the CSS:
.formbackground{background: url(../images/Group5209#3x.png);
#media (min-width:682px) {
.formbackground{
background: url(../images/Group5209.jpg);
}
}
#media (min-width:992px) {
.formbackground{
background: url(../images/Group5209#2x.png);
}
}
NOTE: The <%=staticAssetsVersionInfoIMAGES%> tag is to help with our asset versioning so that all of our resources are picked up on a content caching system if they ever change.. otherwise, the content cache takes a few hours to catch up.
Can anyone offer any tips to get the images to swap when the page is loaded or resized to a different width?
Related
This is a bit of an odd question, and I know it goes completely against the purpose of media queries, but is it possible to show the CSS for a desktop on a mobile device without touching the CSS files?
Our website is fully responsive. However, I have had a request to add a button to the page only on mobile devices which, when clicked, will show the page in desktop view. I have explained why this is a bad idea, and given alternative solutions, but this is what the client wants.
I have tried the following code (changing the initial scale), and this works just fine on a desktop browser, but doesn't work on a physical mobile device.
<div id="desktop-view-btn">
<a class="btn">Desktop</a>
</div>
<style type="text/css">
#desktop-view-btn {
display:none;
}
#media screen and (max-width: 576px) {
#desktop-view-btn {
display:block;
}
}
</style>
<script>
$(document).ready(function() {
$('#desktop-view-btn')
.insertBefore('h1')
.on('click', 'a', function(e) {
e.preventDefault();
$("meta[name='viewport']").attr('content',"width=device-width, initial-scale=0");
$(this).parent().remove();
});
});
</script>
Is anyone able to help?
I have a LESS environment that is bringing together multiple files and putting everything together into a massive .CSS file (forced to work this way).
However, in one environment the "#media (min-width: 768px) and (max-width: 979px)" declaration is being validated and the custom CSS for it is rendering properly in all instances. However, in another environment with the exact same media query and CSS, it is not even acknowledging it within the CSS file.
Working environment: giving.massgeneral.org
[CSS^] https://www.dropbox.com/s/4hxtevg0ft0hsae/base.css
Non-working environment: secure.massgeneral.org/bootstrap-library
[CSS^] https://www.dropbox.com/s/ncrbgxs2ot184cm/bbnc.css
The most notable issue is the following query that is completely being ignored in the "secure." environment:
// Tablets & small desktops only
#media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-desktop { display: inherit !important; }
.visible-desktop { display: none !important; }
// Show
.visible-tablet { display: inherit !important; }
// Hide
.hidden-tablet { display: none !important; }
}
It is successfully generating this code and placing it into the "bbnc.css" file, however, it is not associating the styles with the classes above when in the viewport designated in the "secure." environment.
Any advice outside would be greatly appreciate on getting this to validate.
Since there are many ways to implement CSS3 Media Queries into a website, I would like to know which one is recommended by more experienced web designers. I can think of a couple:
1. All in one Stylesheet
There is a default style which applies to all screen widths, and media queries that apply only to lower screen widths and overwrite the default, all in one file. For example:
HTML
<link rel="stylesheet" href="main.css">
main.css
article
{
width: 1000px;
}
#media only screen and (max-width: 1000px)
{
article
{
width: 700px;
}
}
(please keep in mind that this is just an example)
Pros:
Default style applies to older browsers
Only one HTTP request required
Cons:
Gets messy with a lot of code
Some browsers will have to download code that they won't apply
2. Separate Stylesheets
There are separate stylesheets containing full code tailored for each screen width. Browsers only load the one that applies. For example:
HTML
<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">
large-screen.css
article
{
width: 1000px;
}
small-screen.css
article
{
width: 700px;
}
Pros:
Neat and organized
Only one HTTP request required
Browsers only load what they need
Cons:
(This is why I'm hesitant to use this:) When one makes a change that applies to all screen widths, the change has to be copied and pasted to the appropriate spots in all of the stylesheets.
3. Separate Stylesheets, one Global Stylesheet
The same as #1, but the global style and the media queries are in separate stylesheets. For example:
HTML
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">
main.css
article
{
width: 1000px;
}
small-screen.css
article
{
width: 700px;
}
Pros:
Also neat and managable
Does not have problem of #2 when making global changes
Global style applies to older browsers
Cons:
Smaller screen-widths require 2 HTTP requests
That's all I can think of. How should media queries be managed?
Thanks for any responses.
Well, I certainly can't claim to be an authority on the matter (I'm still learning about coding conventions myself), but I actually lean towards option #1 - a single stylesheet. I'm thinking of a specific implementation of it, though. Instead of having a single break point for each case of screen size you need new styles for, I'd suggest multiple break points - one for the CSS styles of each module where multiple screen sizes need to be addressed.
Ah...that might have been a slightly confusing statement. An example is in order...
Rather than something like:
/*default styles:*/
/*header styles*/
.header-link{ ... }
.header-link:active{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*content styles*/
.content-link{ ... }
.content-link:active{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*footer styles*/
.footer-link{ ... }
.footer-link:active{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
/*alternate styles for smaller screens:*/
#media only screen and (max-width: 1000px){
/*header styles*/
.header-link{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*content styles*/
.content-link{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*footer styles*/
.footer-link{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
}
I'd suggest option #1, just implemented as so:
/*default header styles*/
.header-link{ ... }
.header-link:active{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*alternate header styles for smaller screens*/
#media only screen and (max-width: 1000px){
.header-link{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
}
/*default content styles*/
.content-link{ ... }
.content-link:active{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*alternate content styles for smaller screens*/
#media only screen and (max-width: 1000px){
.content-link{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
}
/*default footer styles*/
.footer-link{ ... }
.footer-link:active{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
/*alternate footer styles for smaller screens*/
#media only screen and (max-width: 1000px){
.footer-link{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
}
(All the classes are placeholders. I'm not very creative...)
Though this means you'll be doing the same media query declaration multiple times (leading to a bit more code), it's a lot more handy for testing out single modules, which will overall help the maintainability of your site as it gets bigger. Try adding multiple real styles, more tags/classes/id's to the example I gave, and maybe add a bit more whitespace to them, and you'll see soon see how much quicker it is to narrow down and change/append styles (across all screen sizes) in the implementation shown by the second part of the example.
And I credit this answer quite completely to information from Scalable and Modular Architecture for CSS, by Jonathan Snook. (After all, there's no way a beginner like me would be able to figure out and reason an answer like that all by myself!) As quoted from one of the many relevant parts of that book,
"...instead of having a single break point, either in a main CSS file or in a seperate media query style sheet, place media queries around the module states."
Though, if by personal preference or other you'd rather not use this approach, then you're free to go with any of the other options you proposed - after all, Snook himself says that his book "is more style guide than rigid framework", so don't feel like this is a coding standard. (Though I feel it should be. XD)
I believe in "putting code where you expect it". If a style needs overruling I would want my code that overrules to be as close to the default style, thus in the same document. That way, a year from now, I will still know what's going on when I look at the code. In the other approach (separate css file per breakpoint) I will need to remember to goo look for overruling styles code in a separate file. Not a problem, unless I forget I did it that way a year from now. Guess it's personal preference and the browser doesn't care.
If you want to use the 2nd option there's a way to avoid "copy+pasting" the global styles that you need for both your mobile and desktop versions of the site which is veeeeeery handy and helps you keep everything more organized in my opinion and that is using SASS.
You could have something like that:
> CSS Folder
> Sass folder
- _global.scss
- _mobile_layout.scss
- _desktop_layout.scss
- main_mobile.scss
- main_desktop.scss
which will compile into
> CSS Folder
- main_mobile.css
- main_desktop.css
Hope you find it useful ^^
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/
I have a 2550px x 3300px image of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).
Any suggestions?
You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?
From http://articles.tutorboy.com/css/resize-images-in-same-quality.html
If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.
<style>
#media screen
{
#origImage { display:none; }
}
#media print
{
#screenImage { display:none; }
}
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />