I'm building an HTML Email, and would like to use #media query to display one banner for mobile and another for desktop/webmail screens. I know most email clients strip out the css found in the tag. Is there a way to put the css inline? Here's an example of the code in currently..
<style type="text/css">
#media (max-width: 1000px){
/* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
img#standardBanner{display:none !important}
img#mobileBanner{display:block !important}
}
</style>
Also is there any other way to be able to do this? I'm not having too much luck.
Thanks!
To answer your question, for a pure css solution the answer would be no it is not possible.
You could though serve the images from a server and use a scripting language like PHP to get the device information of the user and then serve the appropriate image based on that using PHP function header.
<style type="text/css">
img#standardBanner{display:block !important}
img#mobileBanner{display:none !important}
#media (max-width: 1000px){
img#standardBanner{display:none !important}
img#mobileBanner{display:block !important}
}
</style>
Related
I'm trying to find a way to make my typography responsive. My code will follow. Whenever I refresh in dev tools this doesn't seem to have the desired result. How can I get a good result to have text displayed well on phones, tablets and laptop/desktops?
#media only screen and (min-width: 320px)
{
html {line-height: 1.25em, font-size: 16px;}
h1{line-height: 1.25em, font-size:32px;}
h2{line-height: 1.15384em, font-size:26px;}
h3{line-height: 1.136363em, font-size:22px;}
h4{line-height: 1.111111em, font-size:18px;}
}
I use rem instead of em On my projects. The difference between them is that rem is looking always to the root of the document, in this case html.
Then on my css i have:
html {
font-size: 1rem;
#media (min-width: 320px) {
font-size: 1.2rem;
}
#media (min-width: 760px) {
font-size: 1.5rem;
}
}
That way all the font-size inside <html> will change in the right way.
Did you set your viewport meta tag in your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, Why don't you use REMs for this to make it more simple? You could specify the initial html font-size and line-height and then change the REM value for each query. Read: https://css-tricks.com/confused-rem-em/
There are a number of ways to do this and it starts with the design. Where do you decide to change the values for font size and line height? What looks good and when does it start to look bad?
When you widen the browser window and it starts to look bad, that is your break point of when to change the values using media queries or javascript. In fact, there is a javascript library to help you do such things (but the name escapes me at the moment).
Thus is the venue for the web developer to create those media queries that change the values to what looks good to you, the designer.
You could use the css calc function.
font-size: calc(1em + 1vw);
As talked about here
https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/
I'm new to web design and trying to make my site laptop friendly. I decided to use media queries to pull up different stylesheets as the window sizes change. This works great with Chrome and IE but Firefox uses the stylesheet I've written for laptops regardless of whether I pull it up on my laptop or my 1080p monitor.
This is the media query I'm currently using.
<link rel="stylesheet" media="screen and (min-width:1200px) and (max-width:1600px)" href="styleslaptop.css" />
I've already checked all my extensions and none of them are making a difference.
Any help would be greatly appreciated.
Change your link to:
<link rel="stylesheet" href="styleslaptop.css"/>
Then open styleslaptop.css and at the bottom of the file add this:
CSS
/* ----------- Non-Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
PUT YOUR CSS RULE SETS THAT ARE EXCLUSIVELY FOR LAPTOPS HERE
}
I got the media queries from this article: Media Queries for Standard Devices
The best way to determine your breakpoints is by design not by device, but if your site is not that complex, cookie cutter should suffice.
UPDATE
Upon inspection of your 2 stylesheets I believe I know why the laptop CSS doesn't work in Firefox. At the end of both stylesheets you employ a rarely used at rule: #-moz-document url-prefix() {} This rule targets specific pages with the prefix(http://example.com/path/). An explanation of #document rule is here. There's two minor problems and one major problem with this:
The #document rule is only supported by Firefox.
If you really want to use this useless rule, then you should put a url in the parenthesis ex. #moz-document url-prefix(http://example.com/path)
So right now on the desktop CSS the properties and values that are in that rule set apply to all pages IF your'e using Firefox. Now on to the major problem.
On your laptop CSS you are missing the closing bracket of the #document rule set. This explains why you see a big difference in Firefox and why the media queries I gave you didn't work. To fix this simply go to the very bottom of your laptop CSS and place a }. You should now see Firefox the way you expected it to look, but keep in mind there are some extra rules in the dektop CSS:
#testimonialscontent h2 {
padding-top:0.25%;
padding-right:0;
font-size:1em;
}
body {
background-color:white;
}
FURTHER ADVICE
It's good that your'e taking the time to learn esoteric things, but be aware of how other developers do things as well. There's a slew of useless properties and rules that are too specific in purpose or to narrow in compatibility. Most but not all of them have vendor prefixes -moz, -webkit, etc. These are for the most part experimental, partially supported, and/or limited in some way, so remember Caveat emptor. So when you want to use something you don't see used very often or something with vendor prefixes, go to: http://caniuse.com/, a search will yield info such as which browsers support a property, element, etc.
On the stylesheets, one should try to use one stylesheet that has all of your custom styles. You should use your desktop CSS as the core rules, then place all of the new rules (not all of the rules) you have for the laptop and put them at the bottom of the core rules (desktop CSS), then put them inside the media query as I originally explained. The reason why you need to minimize the number of external files (not just .css but .js as well) is because they incur an extra HTTP requests, see this: Seven Mistakes that Make Websites Slow.
Good luck, sir. If I helped, don't forget to click that green checkmark and I if really helped helped you out, click that upvote arrow as well . ;)
Put your media queries inside your css file..
Link like this
<link rel="stylesheet" href="styleslaptop.css" />
And in your css wrap everything between
#media screen and (min-width:1200px) and (max-width:1600px) { /* your css here */ }
I know there are 2 ways to add Media queries:
HTML LINK:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
#media all and (max-width: 1024px) {
......
}
I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:
Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?
Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
If the above file is added using HTML Link like this:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:
#media all and (max-width: 1024px) {
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
}
So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?
EDIT:
I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:
So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?
For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media="(max-width: 1024px)". But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?
Here is what W3C has to say about this:
The media attribute says which media the resource applies to. The
value must be a valid media query.
[...]
However, if the link is an external resource link, then the media
attribute is prescriptive. The user agent must apply the external
resource when the media attribute's value matches the environment and
the other relevant conditions apply, and must not apply it otherwise.
Note: The external resource might have further restrictions defined within
that limit its applicability. For example, a CSS style sheet might
have some #media blocks. This specification does not override such
further restrictions or requirements.
I tested the behavior in Chrome using the following markup:
<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">
Apparently, Chrome downloaded all CSS files regardless of screen resolution.
However, it applied the rules from matching stylesheet(s) only
And it honored all matching #media rules within the stylesheet
Regarding the stylesheet download, here is what the current spec draft says:
User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.
This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.
For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting #media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.
With HTML media queries, the CSS files are downloaded whether or not the media query is satisfied or not. But the prasing of unwanted CSS is kind of deferred and this advances your initial render. In a way, you can think of making it, non-render blocking. But with CSS media queries, they are completely parsed and processed whether or not the query is satisfied.
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.
I am making custom template with MailChimp. I have yet to test it across several email clients, but so far my tests with gmail reveal that when I add this media query, not only does it not work, but it causes the entire html email to render without css. The other CSS works fine for gmail without the query. On other clients the media query works, and does not prevent the other CSS from working.
Is this a known issue with gmail (and others), or is there a way to accomplish this?
#media only screen
and (max-device-width : 480px) {
.bodyContent div{
font-size:24px;
}
h1, .h1{
font-size:36px;
}
h2, .h2{
font-size:28px;
}
h4, .h4{
font-size:28px;
}
.preheaderContent div{
font-size:24px;
}
}
Gmail doesn't support <style> in either <head> or <body>. Since media queries are embedded rather than inline, they can't be utilized in Gmail. Check out this handy chart from Campaign Monitor which details which styles and selectors are supported across various clients and apps.
I had the exact same problem with Gmail. In my case, I wrote a HTML for an email newsletter. The problem was that I was minifying the whole HTML (including the HEAD section where the media queries were), which apparently broke apart the CSS syntax somehow, making Gmail to partially interpret css classes contained within the #media query. If this is your case, you can do two things:
Don't minify the HEAD section (what I did). Leave it untouched and put your media queries there.
Try different minifiers and go through the minified media queries to make sure nothing got broken.
In any case, if you are creating an email newsletter, make sure that you inline as much CSS styles as you can, i.e.: add your styles directly to your tags with the "style" attribute instead of using CSS classes.